three.js中的位移贴图在球形立方体上引起可见的接缝

时间:2018-03-27 18:50:08

标签: three.js texture-mapping

我试图将带有6个生成的RGBA DataTexture的球体移位到球形立方体上。位移沿纹理边缘留下可见的接缝:

enter image description here

我尝试过设置和调整以下设置:

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

并且还使用MeshNormalMaterial检查了几何图形,并在MeshBasicMaterial上将纹理作为地图检查,没有出现不连续现象。

我认为在边缘处计算法线/切线存在问题,但是我在球化之后重新计算法线(使用geom.computeVertexNormals())并且仍然看不到改进。

1 个答案:

答案 0 :(得分:0)

想出这个问题与我最初在生成纹理时将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;通过保证每个立方体面部纹理上的外部像素完全由每个边界面共享来实现魅力。