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
Looks like aliasing issue.
Are you using standard or physical material for the white region?
i am using a THREE.MeshLambertMaterial
Any chances to demonstrate this issue in a live example?
1 Like
Okay, i will host the project
1 Like
http://51.144.120.86:8080/design/male/cooperate-shirt @Mugen87 this is the app
this is the app http://51.144.120.86:8080/design/male/cooperate-shirt @Atul_Mourya
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.
1 Like
no i havent, lemme try that
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…
2 Likes
so are you saying that there is nothing that can be done, or will reducing the poly count work ?
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.
@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
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.
Well, i am honestly still learning threejs, and since it is a product configurator, it was better so separate all the meshes
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.
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
how do i gain control of the vertical lines, i am somewhat a newbie
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.
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.