如何避免在使用 ColladaLoader 加载的 Three.js 中的 dae 模型上出现摩尔纹 [英] How do I avoid moiré patterns on dae models in Three.js loaded with ColladaLoader

问题描述

我使用 Three.js 库从单个 dae/Collada 场景文件加载和显示对象.该文件使用 ColladaLoader(来自 Three.js 的示例代码)加载，然后我使用函数 colladaScene.getChildByName('ObjectName', true); 找到各个对象.这很好用，但我在渲染时会出现摩尔纹.

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.

由于任意加载的场景包含在 Blender 中编辑的复杂对象，我无法对这些对象或任何纹理做出任何假设.IE.我无法对任何纹理或材料进行硬编码特定更改/修复，因为我不知道要期待什么纹理或材料.修复或调整必须是通用的，以便它可以应用于具有多个纹理的不同对象.不能假设纹理尺寸符合 2 的幂，因为我们无法指导创建场景文件的人.

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.

问题:使用 Web-GL 显示多个对象时，我遇到了非常糟糕的摩尔纹问题.这些物体中有几种具有条纹纹理(深色木头和黑色)和砖墙(不同颜色).这些条纹和砖块物体在以各种角度和距离渲染时会出现严重的摩尔纹伪影.这是条纹对象的示例.这是一个带有条纹纹理的盒子几何图形.http://imgur.com/a/vKsi3#0

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. http://imgur.com/a/vKsi3#0

是否可以更改纹理材质或纹理本身的设置以使摩尔纹伪影消失?我可以更改过滤器设置、着色器设置或创建 mipmap 纹理吗?由纹理尺寸引起的莫尔条纹是否不符合 2 的幂次经验法则?加载 Collada 场景后，我们如何在 Javascript 中创建抗锯齿 mipmap?我们可以以某种方式让 Blender 创建 mipmaps 吗?我无法让 Blender 以 Collada 格式导出 mipmap.我已经尝试在 Blender 中检查/取消选中对象纹理上的自动 mipmap"，但无济于事.

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.

请帮帮我.是过滤器、着色器还是 mipmap 的问题?有没有人有加载 Collada 场景的示例代码，然后遍历对象设置/更改对象以即使在奇数角度和距离"下也能平滑渲染?

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"?

作为最后的手段，如果在 Three.js 中通过 Javascript 什么也做不了:有什么方法可以在 Blender 中打开场景并更改材质/纹理设置，以使对象在导出到 Collada 文件时呈现更好的效果?

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?

当我将条纹对象加载到 Three.js 中时显示它的样子(我已经包含了我什至远程想象对渲染有任何影响的所有内容):

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

推荐答案

刚刚发现可能是图像大小问题的内容.显然，当图像没有保持在严格的二维幂时，OpenGL 3 和 WebGL 会吓坏.发生这种情况时，mipmap 会退出窗口并拒绝工作.精彩讨论:WebGL 和两种图像大小的威力

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

这篇关于如何避免在使用 ColladaLoader 加载的 Three.js 中的 dae 模型上出现摩尔纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！