位移图UV映射？

Question

摘要

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

模型与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. 紫外线地图不适用于我的位移图。
2. 我做错了位移图。
3. 在这个过程中，我错过了一个关键的步骤，那就是将位移锁定为Z-只。

当然，秘密选项4，也不是上面提到的，我只是，，完全不知道我在做什么。或上述任何混合物。

实例化

您可以查看一个活示例这里。

如果在这个问题上有更多知识的人能指导我，我将非常感激！

编辑1：根据建议，我已经删除了computeFaceNormals()和computeVertexNormals()。虽然它确实做了一点改进，但网眼仍在变形。

Answer 1

在你的地形材料，设置wireframe = true，你将能够看到发生了什么。

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

计算出的几何图形外环的顶点法线在一定程度上向外指向。这很可能是因为在computeVertexNormals()中，它们是通过平均每个相邻脸的脸法线来计算的，而模型“边”的脸法线(黑色部分)被平均为构成“帽”外环的顶点的法线计算。

因此，“帽”的外圈在位移图下向外扩展。

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

​

​

Answer 2

问题是你的物体是如何构造的，因为位移是沿着法向量发生的。

密码在这里。

https://github.com/mrdoob/three.js/blob/master/examples/js/ShaderTerrain.js#L348-350

"vec3 dv = texture2D( tDisplacement, uvBase ).xyz;",

这需要一个rgb矢量的位移纹理。

"float df = uDisplacementScale * dv.x + uDisplacementBias;",

这只需要向量的红色值，因为uDisplacementScale通常是1.0，uDisplacementBias是0.0。

"vec3 displacedPosition = normal * df + position;",

这取代了法线矢量的位置。

所以要解决问题，要么更新法线，要么更新着色器。