Question

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

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

问题：当使用Web-GL显示它们时，我在几个对象上遇到非常糟糕的莫尔条纹问题。其中有几个具有条纹纹理（深色木材和黑色）以及砖墙（不同颜色）。当以各种角度和距离渲染时，这些条纹和砖块物体遭受严重的莫尔条纹。这是条纹对象的示例。这是一个带有条纹纹理的框几何体。 http://imgur.com/a/vKsi3#0

是否可以更改纹理材质或纹理本身的设置以使莫尔条纹消失？我可以更改滤镜设置，着色器设置或创建mipmap纹理吗？纹理尺寸造成的莫尔条纹是否符合2经验法则的力量？在加载Collada场景后，我们如何在Javascript中创建创建抗锯齿mipmap？我们可以以某种方式让Blender创建mipmap吗？我无法让Blender以Collada格式导出mipmap。我已经在Blender中检查/取消选中对象纹理上的“自动mipmap”，但无济于事。

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

作为最后的手段，如果无法通过Three.js中的Javascript完成任务：有没有什么办法可以在Blender中打开场景并更改材质/纹理设置，以便在导出到Collada文件时更好地渲染对象？

当我将条纹对象加载到Three.js中时，它看起来像（我已经包含了我甚至可以想象对渲染有任何影响的所有内容）：

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

Answer 1

刚刚找到的东西表明它可能是图像尺寸问题。显然，当图像没有保持2维的严格权力时，OpenGL 3和WebGL就会变得怪异。发生这种情况时，mipmaps会离开窗口并拒绝工作。这里有很好的讨论：WebGL and the power of two image size

如何避免使用ColladaLoader加载的Three.js中的dae模型上的莫尔条纹

1 个答案: