为什么我在Three.js中实现置换贴图会断开球体两极的顶点？

Question

我试图通过将具有perlin噪声的置换贴图应用于球体来创建小行星。一切都按预期工作，除了球体的极点扭曲。看起来好像两极上的顶点是断开的。

Frontview：看起来像预期的那样 Topview：看起来很难看;-)

起初，我认为这与我的置换贴图有关，事实上，我将它应用于球面上，但如果我将它应用于立方体，那么面之间也会有间隙。

我不确定，我能做些什么来弥补这些差距。在后面的步骤中，位移贴图应该通过渲染到纹理并使用随机种子来生成噪声一般生成，因此我不能使用Blender或Photoshop等外部程序来修改置换贴图。我在着色器中做错了什么，或者这是一种“正常”行为？我能做些什么来避免这种情况吗？我读到了立方体贴图。这可能是一个解决方案吗？如果是这样的话，那里有一个适用于Three.js r57或更高版本的工作示例吗？

这是我的Shadercode：

 vertexShader: [
    'uniform sampler2D displacementMap;',
    'varying vec3 vColor;',

    'void main() {',
        'vec4 newVertexPos;',
        'vec4 dv;',
        'float df;',

        'dv = texture2D( displacementMap, uv.xy );',
        'df = 0.30*dv.x + 0.59*dv.y + 0.11*dv.z;',
        '//newVertexPos = vec4(normal * df * 1.0, 0.0) + vec4( position, 1.0 );',
        'newVertexPos = vec4( normalize( position ) * df * 1.0 ) + vec4( position, 1.0 );', 
        'vColor = vec3( dv.x, dv.y, dv.z );',

        'gl_Position = projectionMatrix * modelViewMatrix * newVertexPos;',
    '}'

].join( "\n" ),

fragmentShader: [
    'varying vec3 vColor;',

    'void main() {',
        'gl_FragColor = vec4( vColor.rgb, 1.0 );',
    '}'

].join( "\n" )

以下是制服和球体代码：

asteroidMaterial = new THREE.ShaderMaterial( {
    uniforms: {
        //"displacementMap": { type: "t", value: rtTexture },
        "displacementMap": { type: "t", value: THREE.ImageUtils.loadTexture( 'txt/asteroid1.png' ) },
    },
    vertexShader: asteroidShader.vertexShader,
    fragmentShader: asteroidShader.fragmentShader,
    blending: THREE.NormalBlending,
    depthWrite: false,
    depthTest: true,
    transparent: true,
    overdraw: true,
    //wrapS: THREE.RepeatWrapping,
    //wrapT: THREE.RepeatWrapping,
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,
} );
var asteroidGeometry = new THREE.IcosahedronGeometry( 100, 4 );
asteroidGeometry.dynamic = true;
var asteroid = new THREE.Mesh( asteroidGeometry, asteroidMaterial );
asteroid.position = new THREE.Vector3( 0, 0, 200 );
asteroid.visible = true;
scene.add( asteroid );

我刚看到，代码使用的是二十面体而不是球体，但同样的事情也发生在球体上。

Answer 1

请勿使用IcosahedronGeometry，在第57页中为buggy。请改用SphereGeometry。

问题是您的置换贴图。看来你整个缝隙都有缝隙。

要固定垂直接缝，位移贴图的右边缘必须与左边缘的值相同。

要固定极点，它必须在顶部边缘具有恒定值，并在底部边缘具有恒定值。