# How can I remove the aliasing from my mesh?

**URL:** <https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309>\
**Category:** Questions\
**Tags:** materials\
**Created:** [September 30, 2018, 12:37pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309 "2018-09-30T12:37:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [September 30, 2018, 12:37pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/1 "2018-09-30T12:37:02Z")

</div>

Is there a way to remove the moire effect on mesh in threeJS and what causes this it, cause it is only showing on a part of the mesh in my case

 ![moire%20effect](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/a3a40532b2940778144a8b6dd3190b2160c2f29d.png)

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [September 30, 2018, 1:56pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/2 "2018-09-30T13:56:12Z")

</div>

Looks like aliasing issue.  
Are you using standard or physical material for the white region?

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [September 30, 2018, 4:26pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/3 "2018-09-30T16:26:13Z")

</div>

i am using a THREE.MeshLambertMaterial

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 30, 2018, 7:42pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/4 "2018-09-30T19:42:02Z")

</div>

Any chances to demonstrate this issue in a live example?

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [September 30, 2018, 7:58pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/5 "2018-09-30T19:58:48Z")

</div>

Okay, i will host the project

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 1, 2018, 3:36pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/6 "2018-10-01T15:36:52Z")

</div>

[http://51.144.120.86:8080/design/male/cooperate-shirt](http://51.144.120.86:8080/design/male/cooperate-shirt) @Mugen87 this is the app

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 1, 2018, 3:37pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/7 "2018-10-01T15:37:23Z")

</div>

this is the app [http://51.144.120.86:8080/design/male/cooperate-shirt](http://51.144.120.86:8080/design/male/cooperate-shirt) @Atul_Mourya

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [October 1, 2018, 4:22pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/8 "2018-10-01T16:22:41Z")

</div>

Have you tried using lower poly version of the mesh you mentioned.  
It seems to me as higher details within a smaller screen space area may be causing this issue.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 1, 2018, 4:28pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/9 "2018-10-01T16:28:15Z")

</div>

no i havent, lemme try that

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 1, 2018, 5:00pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/10 "2018-10-01T17:00:23Z")

</div>

> [@Atul\_Mourya](#):
>
> It seems to me as higher details within a smaller screen space area may be causing this issue.

Yes, you can easily demonstrate this effect by zooming out the camera. You can also notice that the aliasing highly depends on the viewing angle. AFAIK, there is not much you can do against this effect…

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 1, 2018, 10:10pm UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/11 "2018-10-01T22:10:36Z")

</div>

so are you saying that there is nothing that can be done, or will reducing the poly count work ?

---

<div class="post-metadata">

**Author:** ![Norman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/norman/32/4824_2.png) [@Norman](https://discourse.threejs.org/u/Norman)\
**Post date:** [October 2, 2018, 12:39am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/12 "2018-10-02T00:39:42Z")

</div>

> so are you saying that there is nothing that can be done, or will reducing the poly count work ?

There is always something that can be done. To completely eliminate moire/aliasing you can either:

**1. High CPU, memory:** use a good antialiasing technique like SSAA with-or-without some additional filtering -but the SSAA implementation on the three.js example is not very good, SMAA example gives far better results, otherwise SSAA is superior.

**2. Low CPU, memory:** just replace those vertical lines with a texture with slightly thicker and/or blurrier lines and set texture.anisotropy to be additionally filtered by the GPU.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 2, 2018, 12:45am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/14 "2018-10-02T00:45:54Z")

</div>

@Norman how can i detect a high cpu memory or a low cpu memory and secondly how can i gain control of the vertical lines

---

<div class="post-metadata">

**Author:** ![FrankSilvaHM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/franksilvahm/32/117_2.png) [@FrankSilvaHM](https://discourse.threejs.org/u/FrankSilvaHM)\
**Post date:** [October 2, 2018, 12:49am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/15 "2018-10-02T00:49:11Z")

</div>

You appear to have geometry for that middle part of shirt. And each pleat has its own geo - so close together… That certainly complicates things, imho. I would do the entire shirt as one geo with one UV map, with baked shadows/ao, to give the _illusion_ of pleats, rather than real pleats. I have no idea how you could not have aliasing with geo like that.

And mouseWheel on menu is propogating through to three below, zooming out while scrolling… Place three in separate div or use preventDefault methods.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 2, 2018, 12:51am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/16 "2018-10-02T00:51:18Z")

</div>

Well, i am honestly still learning threejs, and since it is a product configurator, it was better so separate all the meshes

---

<div class="post-metadata">

**Author:** ![Norman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/norman/32/4824_2.png) [@Norman](https://discourse.threejs.org/u/Norman)\
**Post date:** [October 2, 2018, 12:54am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/17 "2018-10-02T00:54:31Z")

</div>

> how can i detect a high cpu memory or a low cpu memory and secondly how can i gain control of the vertical lines

I meant that the first solution requires more cpu and memory (far more) than the second one. But you can analyze your site with Chrome developer tools (F12 / performance and memory tabs) and you can run the Audits (F12, right-most) to let Google advise you on several aspects and even emulate it on mobile.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 2, 2018, 1:00am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/18 "2018-10-02T01:00:20Z")

</div>

I wrote my own custom zooming feature, so separating the three div and using preventDefault, dont work, i will have to implement another way to solve this

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [October 2, 2018, 1:01am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/19 "2018-10-02T01:01:13Z")

</div>

how do i gain control of the vertical lines, i am somewhat a newbie

---

<div class="post-metadata">

**Author:** ![Norman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/norman/32/4824_2.png) [@Norman](https://discourse.threejs.org/u/Norman)\
**Post date:** [October 2, 2018, 1:14am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/20 "2018-10-02T01:14:52Z")

</div>

You need to learn how to modify a mesh, which requires a lot of time and effort to be invested. In short, after you import the model in a 3D cad app (Blender etc) you need to join all those vertical strips together, then select them and smooth them out and create and apply a texture that will contain those lines drawn, and you should experiment a bit with the thickness and blurrines (applying a blur filter on an image app). Ideally a single texture could be used, one that will contain both the cyan lines and the thinner black ones in front.

You could also try to just join those strip lines and **slightly** smooth them out. That will prevent the sharp edges that create the aliasing and moire effect and might be adequate without a texture, while it will still create shadows. The bottom view reveals how they are shaped.

---

<div class="post-metadata">

**Author:** ![FrankSilvaHM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/franksilvahm/32/117_2.png) [@FrankSilvaHM](https://discourse.threejs.org/u/FrankSilvaHM)\
**Post date:** [October 2, 2018, 2:22am UTC](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309/21 "2018-10-02T02:22:08Z")

</div>

Product configurator or not, your overlapping flaps of those pleats are ill-advised. I would kill the pleats and make it (middle part of shirt) flat/smooth with faked pleat edges/baked shadows and normals on UV’d mesh.

[Next page](https://discourse.threejs.org/t/how-can-i-remove-the-aliasing-from-my-mesh/4309.md?page=2)