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

Question

我正在尝试将具有 6 个生成的 RGBA DataTextures 的球体置换到球形立方体上。位移沿着纹理的边缘留下可见的接缝：

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

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

并且还检查了 MeshNormalMaterial 的几何体和 MeshBasicMaterial 上的贴图纹理，没有出现不连续性。

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

Answer 1

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

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

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

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

并且使用 texture.minFilter = texture.magFilter = THREE.LinearFilter; 通过保证每个立方体面纹理上的外部像素由每个边接面完全共享来发挥魅力。

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

Displacement map in three.js is causing visible seams on a spherized cube

three.js

texture-mapping