Webgl 置换贴图UV贴图？ 总结

我正在尝试将置换贴图（高度贴图）应用到一个非常简单的对象（六边形平面），我得到了一些意想不到的结果。我使用的是灰度，因此，我觉得我的高度贴图应该只影响网格的Z值。但是，我创建的置换贴图在X和Y平面上拉伸网格。此外，它似乎没有使用我创建的所有其他纹理都成功应用到的UV贴图

模型和UV贴图 以下是我的六边形网格的参考图像及其在Blender中对应的UV贴图

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

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

代码 下面是相关的Three.js代码：

//纹理
var diffuseTexture=THREE.ImageUtils.loadTexture（'diffuse.png'，null，loaded）；
var displacementTexture=THREE.ImageUtils.loadTexture（'displacement.png'，null，loaded）；
//地形制服
var terrainShader=3.ShaderTerrain[“地形”]；
var uniformsTerrain=THREE.UniformsUtils.clone（terrainShader.uniforms）；
//uniformsTerrain[“tNormal”]。值=null；
//uniformsTerrain[“非标准刻度”]。值=1；
统一地形[“tDisplacement”]。值=置换纹理；
统一地形[“uDisplacementScale”]。值=1；
统一地形[“TDIFUSE1”]。值=扩散纹理；
//uniformsTerrain[“tDetail”]。值=null；
uniformsTerrain[“enableDiffuse1”]。值=真；
//uniformsTerrain[“enableDiffuse2”]。值=真；
//uniformsTerrain[“enableSpecular”]。值=真；
//uniformsTerrain[“uDiffuseColor”].value.setHex（0xCCCC）；
//uniformsTerrain[“uSpecularColor”].value.setHex（0xff0000）；
//uniformsTerrain[“uAmbientColor”].value.setHex（0x0000cc）；
//统一地形[“uShininess”]。值=3；
//uniformsTerrain[“uRepeatOverlay”].值.集（6,6）；
//地形材料
var material=新的3.ShaderMaterial({
制服：制服，
vertexShader:terrainShader.vertexShader，
fragmentShader:terrainShader.fragmentShader，
灯光：是的，
雾：是的
});
//加载磁砖
var loader=new THREE.JSONLoader（）；
load（'models/hextile.js'，函数（g）{
//g、 computeFaceNormals（）；
//g、 computeVertexNormals（）；
g、 计算切线（）；
g、 物料[0]=物料；
瓷砖=新的三点网格（g，新的三点网格面材质（））；
场景。添加（平铺）；
});

假设 我目前正在考虑三种可能出现问题的原因：

UV贴图未应用于我的置换贴图

我把位移图弄错了

在这个过程中，我错过了一个关键的步骤，那就是将位移锁定为Z轴

当然，还有一个秘密选项#4，它不是上面提到的，我只是真的不知道我在做什么。或上述任何混合物

实例 您可以查看一个实例

如果有谁对这门学科有更多的知识可以指导我，我将不胜感激

---

编辑1：根据建议，我已经注释掉了

computeFaceNormals（）

和

computeVertexNormals（）

。虽然它确实有了轻微的改进，但网格仍在扭曲。

问题在于如何构造对象，因为位移沿法向量发生

代码在这里

这将对置换纹理的rgb向量进行调整

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

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

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

这将沿法向量置换位置

---

因此，要解决此问题，请更新法线或着色器。

在地形材质中，设置

线框=true

，您将能够看到发生了什么

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

几何体外圈的计算顶点法线略微向外。这很可能是因为在

computeVertexNormals（）

中，它们是通过平均每个相邻面的面法线来计算的，并且模型“边”（黑色部分）的面法线将平均到构成“帽”外圈的顶点的顶点法线计算中

因此，“cap”的外圈在置换贴图下向外扩展

编辑：没错，直接从模型开始，外圈的顶点法线指向外侧。内环的顶点法线都是平行的。也许Blender使用与

computeVertexNormals（）

相同的逻辑来生成顶点法线

---

我已经设置了线框，这有助于排除故障。实际上，我注释掉了

computeFaceNormals

和

computeVertexNormals

，但扭曲似乎仍在发生。您可以在进行验证（它已更新）。也许默认情况下这些计算是在其他地方进行的？这是对你最初问题的一个相当详细的回答。您现在已经更改了代码，问题是。。。。您的模型已经有法线，因此它很可能使用这些法线，因为您已经注释掉了法线计算。只需学习如何按所需方式设置顶点法线。我觉得您的代码的其余部分很好。：-）这是一个相当详细的回答，我很感激。我所做的唯一改变是你建议的，我做这些改变是为了表明它们是正确的

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