webgl - 位移贴图 UV 贴图？

Question

摘要

我正在尝试将位移贴图(高度贴图)应用于一个相当简单的对象(六角形平面)，并且得到了一些意想不到的结果。我使用的是灰度，因此，我的印象是我的高度图应该只影响网格的 Z 值。然而，我创建的置换贴图在 X 和 Y 平面上拉伸(stretch)网格。此外，它似乎没有使用我创建的 UV 映射，所有其他纹理都已成功应用到该 UV 映射。

模型和 UV 贴图

以下是我的六边形网格及其在 Blender 中相应的 UV 贴图的引用图像。

漫反射和置换纹理

这些是我通过 Three.JS 应用于网格的漫反射和置换贴图纹理。

渲染

当我在没有位移贴图的情况下渲染平面时，您可以看到六边形平面保持在线条内。然而，当我添加置换贴图时，它显然会影响顶点的 X 和 Y 位置，而不是仅影响 Z，从而将平面扩展到直线上方。

代码

以下是相关的 Three.js 代码:

    // Textures
    var diffuseTexture = THREE.ImageUtils.loadTexture('diffuse.png', null, loaded);
    var displacementTexture = THREE.ImageUtils.loadTexture('displacement.png', null, loaded);
    
    // Terrain Uniform
    var terrainShader = THREE.ShaderTerrain["terrain"];
    var uniformsTerrain = THREE.UniformsUtils.clone(terrainShader.uniforms);
    
  //uniformsTerrain["tNormal"].value = null;
  //uniformsTerrain["uNormalScale"].value = 1;
    
    uniformsTerrain["tDisplacement"].value = displacementTexture;
    uniformsTerrain["uDisplacementScale"].value = 1;
    
    uniformsTerrain[ "tDiffuse1" ].value = diffuseTexture;
  //uniformsTerrain[ "tDetail" ].value = null;
    uniformsTerrain[ "enableDiffuse1" ].value = true;
  //uniformsTerrain[ "enableDiffuse2" ].value = true;
  //uniformsTerrain[ "enableSpecular" ].value = true;

  //uniformsTerrain[ "uDiffuseColor" ].value.setHex(0xcccccc);
  //uniformsTerrain[ "uSpecularColor" ].value.setHex(0xff0000);
  //uniformsTerrain[ "uAmbientColor" ].value.setHex(0x0000cc);

  //uniformsTerrain[ "uShininess" ].value = 3;
  //uniformsTerrain[ "uRepeatOverlay" ].value.set(6, 6);
    
    // Terrain Material
    var material = new THREE.ShaderMaterial({
        uniforms:uniformsTerrain,
        vertexShader:terrainShader.vertexShader,
        fragmentShader:terrainShader.fragmentShader,
        lights:true,
        fog:true
    });
    
    // Load Tile
    var loader = new THREE.JSONLoader();
    loader.load('models/hextile.js', function(g) {
      //g.computeFaceNormals();
      //g.computeVertexNormals();
        g.computeTangents();
        g.materials[0] = material;
        
        tile = new THREE.Mesh(g, new THREE.MeshFaceMaterial());
        scene.add(tile);
    });

假设

我目前正在考虑三种可能性来解释为什么会出错:

1. UV 贴图不适用于我的置换贴图。
2. 我错误地制作了置换图。
3. 我错过了该过程中将位移锁定为仅 Z 轴的关键步骤。

当然， secret 选项 #4 不是以上任何一个，我只是真的不知道我在做什么。或上述的任何混合物。

实例

您可以查看实例here .

如果任何对此主题有更多了解的人可以指导我，我将非常感激!

编辑 1:根据建议，我已注释掉 computeFaceNormals() 和 computeVertexNormals() 。虽然它确实做了一些改进，但网格仍然扭曲。

Answer 1

在地形 Material 中，设置wireframe = true，您将能够看到发生了什么。

你的代码和纹理基本上没问题。当您在加载器回调函数中计算顶点法线时，就会出现问题。

几何体外环的计算顶点法线稍微向外。这很可能是因为在computeVertexNormals()中，它们是通过平均每个相邻面的面法线来计算的，并且模型“侧面”(黑色部分)的面法线被平均到构成“帽子”外环的顶点的顶点法线计算。

结果，“帽子”的外环在位移贴图下向外扩展。

编辑:果然，直接从你的模型开始，外环的顶点法线指向外面。内环的顶点法线都是平行的。也许 Blender 使用与computeVertexNormals() 相同的逻辑来生成顶点法线。