Three.js，GLSL，HeightMaps + Alphamaps

Question

我使用three.js來嘗試和了解更多關於OpenGL的知識。無論如何，我已經創建了一個片段着色器，它實際上可以將紋理與alpha貼圖進行混合，但我在使用heightmap部分時遇到了問題。如果有人有任何想法，請讓我知道，因爲我卡住了。哦，我用這個作爲參考：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> 

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

希望這有助於！