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

我正试图通过将一个位移贴图与珀林噪声应用到一个球体来创建一个小行星。除了球体的两极被扭曲之外，一切都按预期工作。它看起来像极点上的顶点被断开。为什么我在Three.js中实现位移贴图会断开球体两极的顶点？

FrontView的：看起来如预期 Asteroid frontview TOPVIEW：长相丑陋;-) Asteroid 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);

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

来源

2013-04-08 Thomas Bedrnik

不要使用IcosahedronGeometry，它是在r.57中的buggy。改为使用SphereGeometry。

问题是你的位移图。看起来你正在整个缝隙上留下空隙。

要修复垂直接缝，位移贴图的左边缘必须与右边缘具有相同的值。

要固定极点，它必须在顶边上有一个常数值，而在底边上有一个常数值。

来源

2013-04-08 14:21:55 WestLangley

谢谢！这解决了问题。我欠你一杯啤酒。 ;-) – 2013-04-08 15:37:18

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

回答

相关问题