5

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

Frontview：看起来像预期的那样 小行星前视图 Topview：看起来很丑;-) 小行星顶视图

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

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

这是我的着色器代码：

 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 );

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

4

1 回答 1

7

不要使用IcosahedronGeometry，它在r.57中存在问题。使用SphereGeometry, 代替。

问题是你的置换贴图。看起来你在整个接缝处都有缝隙。

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

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

于 2013-04-08T14:21:55.973 回答