three.js 中的置换贴图导致球形立方体上出现可见接缝答案

【问题标题】：Displacement map in three.js is causing visible seams on a spherized cubethree.js 中的置换贴图导致球形立方体上出现可见接缝
【发布时间】：2018-03-28 21:11:08
【问题描述】：

我试图用 6 个生成的 RGBA DataTextures 将一个球体置换到一个球体立方体上。位移沿纹理边缘留下可见的接缝：

我已尝试设置和调整以下设置：

texture.generateMipmaps = true;
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.minFilter = THREE.NearestMipMapLinearFilter;

并且还使用MeshNormalMaterial 和纹理作为贴图在MeshBasicMaterial 上检查了几何形状，没有出现不连续性。

我认为计算边缘的法线/切线存在问题，但我在球化后重新计算了法线（使用geom.computeVertexNormals()），但仍然没有任何改善。

【问题讨论】：

那个“球形立方体”，你用的是什么几何形状？
我使用了BoxGeometry 或BoxBufferGeometry（两者都存在问题），我在重新计算法线之前通过vertex.setLength(1) 修改了顶点。

标签： three.js texture-mapping

【解决方案1】：

发现问题与我在最初生成纹理时将gl_FragCoord 标准化到立方体面上的方式有关。我在做：

vec2 cubeCoord = (gl_FragCoord.xy * 2.0 / uResolution.xy) - 1.0;

这通常看起来不错，除了立方体面的边缘，因为它导致共享边缘坐标偏离 0.5（在gl_FragCoord 空间中）。后来调试了很多，更新到：

vec2 cubeCoord = (gl_FragCoord.xy - (uResolution.xy / 2.0)) / ((uResolution.xy / 2.0) - 0.5);

使用texture.minFilter = texture.magFilter = THREE.LinearFilter; 可以保证每个立方体面纹理上的外部像素完全由每个边界面共享。

【讨论】：