I use the Three.js library to load and display objects from a single dae/Collada scene file.
The file is loaded using the ColladaLoader (example code from Three.js) and I then find the individual objects using the function colladaScene.getChildByName('ObjectName', true);
.
This works great but I get moiré artifacts when rendering.
Since the arbitrary loaded scenes contains complex objects edited in Blender, I cannot make any assumptions about the objects or any textures. I.e. I cannot hard code specific changes/fixes to any textures or materials since I don't know what textures or materials to expect. The fixes or tweaks must be generic so that it can be applied to different objects with multiple textures. The textures dimensions cannot be assumed to conform to powers of 2 since we are not able to instruct the people creating the scene files.
The problem: I get really bad moiré issues on several objects when displaying them using Web-GL. Among the objects are several that has a striped texture (dark wood and black) and also brick walls (in different colors). These striped and brick objects suffer from severe moiré artifacts when rendered in various angles and distances. Here is an example of a striped object. This is a box geometry with a striped texture. https://i.stack.imgur.com/ci4WG.jpg
Is it possible to change the settings of the texture-materials or the textures themselves to make the moiré artifacts disappear? Can I change the filter settings, the shader settings or create mipmap textures? Is the moiré caused by the textures dimensions not conforming to the power of 2 rule of thumb? How can we create create antialiased mipmaps in Javascript after loading the Collada scene? Can we somehow make Blender create the mipmaps? I haven't been able to get Blender to export mipmaps in Collada format. I have triend checking/unchecking the "Automatic mipmaps" on the object textures in Blender but to no avail.
Please help me. Is it an issue of the filter, the shader or mipmap? Does anybody have example code of loading an Collada scene, then traversing the objects setting/changing the objects to render smoothly even at "odd angles and distances"?
As a last resort, if nothing can be done through Javascript in Three.js: Is there any way that we can open the scenes in Blender and change the material/texture settings to make the objects render better when exported to a Collada file?
When I display the striped object when it has been loaded into Three.js it looks like (I have included everything I even remotly imagine have any effect on the rendering):
THREE.Mesh
children: Array[0] // No child objects.
material: THREE.MeshPhongMaterial
blendDst: 205
blendEquation: 100
blendSrc: 204
blending: 1
map: THREE.Texture
anisotropy: 1
format: 1021
generateMipmaps: true
image: <img>
height: 474
width: 1395
magFilter: 1006
mapping: THREE.UVMapping
minFilter: 1006
mipmaps: Array[0]
premultiplyAlpha: false
type: 1009
metal: false
morphNormals: false
morphTargets: false
normalMap: null
opacity: 1
shading: 2
skinning: false
Just found stuff that suggests that it might be a image size problem. Apparently OpenGL 3 and WebGL freaks out when images are not kept to a strict power of 2 dimension. When this happens, mipmaps goes out the window and refuse to work. Great discussion here: WebGL and the power of two image size