0

我正在使用 three.js 来尝试和了解有关 OpenGL 的更多信息。无论如何，我创建了一个片段着色器，它实际上用于将纹理与 alphamap 混合，但我遇到了高度图部分的问题。如果有人有任何想法，请让我知道，因为我被卡住了。哦，我已将此作为参考：http ://threejs.org/examples/webgl_terrain_dynamic.html 。

   <script id="vertexShader" type="x-shader/x-vertex">
        uniform sampler2D tDisplacement;
        varying vec2 vUv;          
        void main(void)
        {
            vUv = uv;       

            #ifdef VERTEX_TEXTURES
                vec3 dv = texture2D( tDisplacement, uv ).xyz;
                float df = 300.0 * dv.z + 1.0;
                vec3 displacedPosition = normal * df + position;        

                vec4 worldPosition = modelMatrix * vec4( displacedPosition, 1.0 );
                vec4 mvPosition = modelViewMatrix * vec4( displacedPosition, 1.0 );
            #else
                vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
            #endif

            gl_Position = projectionMatrix * mvPosition;
        }      
    </script>
    <script id="fragmentShaderNoise" type="x-shader/x-fragment">
        uniform sampler2D Alpha;
        uniform sampler2D Grass;
        uniform sampler2D Stone;
        uniform sampler2D Rock;
        uniform sampler2D tDisplacement;

        varying vec3 vertex_color;
        varying vec2 vUv;

        void main(void)
        {
           vec4 alpha   = texture2D( Alpha, vUv.xy);
           vec4 tex0    = texture2D( Grass, vUv.xy * 10.0 ); // Tile
           vec4 tex1    = texture2D( Rock,  vUv.xy * 10.0 ); // Tile
           vec4 tex2    = texture2D( Stone, vUv.xy * 10.0 ); // Tile

           tex0 *= alpha.r; // Red channel
           tex1 = mix( tex0, tex1, alpha.g ); // Green channel
           vec4 outColor = mix( tex1, tex2, alpha.b ); // Blue channel

           gl_FragColor = outColor;
        }      
    </script>
4

1 回答 1

1

如果相关示例有帮助，我编写了一个演示，其中包含一个顶点着色器，该着色器在以下位置合并了位移：

http://stemkoski.github.io/Three.js/Shader-Fireball.html

或者，也许您可​​以从更简单的事情开始，然后逐步朝着您想要的结果努力。例如，我相信下面的代码可以让你根据纹理bumpTexture中每个像素的红色量来改变顶点位置。

uniform sampler2D bumpTexture;
varying vec2 vUv;

void main() 
{ 
    vUv = uv;
    vec4 bumpData = texture2D( bumpTexture, uv );
    float displacement = 100.0 * bumpData.r;
    vec3 newPosition = position + normal * displacement;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}

希望这可以帮助！

于 2013-05-30T04:08:43.903 回答