How do I avoid moiré patterns on dae models in Three.js loaded with ColladaLoader

1.4k Views Asked by At

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
1

There are 1 best solutions below

0
On

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