Question

我写了一个使用高度图的简单三.js。这是创建着色器材质的相关代码：

function loadHeightMap() {
    // fake a lookup table
    var lut = [];
    for ( var n=0; n<256; n++ ) {
       lut.push(new THREE.Vector3(0.5, 0.4, 0.3));
    }

    var loader = new THREE.TextureLoader();
    var zScale = 10;

    var mapLoc = "https://s22.postimg.org/8n93ehmep/Terrain128.png";
    loader.load(mapLoc, function ( texture ) {
    // use "this." to create global object
    this.customUniforms = {
        zTexture:   { type: "t", value: texture },
        zScale:     { type: "f", value: zScale },
        zLut:       { type: "v3v", value: lut }
    };

    var customMaterial = new THREE.ShaderMaterial({
        uniforms: customUniforms,
        vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
        fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
        side: THREE.DoubleSide
    });

    var planeGeo = new THREE.PlaneGeometry( 20, 20, 129, 129 );
    var plane = new THREE.Mesh( planeGeo, customMaterial );
    plane.rotation.x = -Math.PI / 2;
    plane.position.y = 0;

    scene.add(plane);
});
}

以下是着色器：

<script id="vertexShader" type="x-shader/x-vertex">
    uniform sampler2D   zTexture;
    uniform float       zScale;
    uniform vec3        zLut[ 256 ];

    varying float vAmount;

    void main() {
      vec4 heightData = texture2D( zTexture, uv );

      vAmount = heightData.r; 

      // move the position along the normal
      vec3 newPosition = position + normal * zScale * vAmount;

       gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
   }
</script>

<script id="fragmentShader" type="x-shader/x-vertex">
    uniform vec3        zLut[ 256 ];

 varying float vAmount;

 void main() {
     int index = int(vAmount) * 255;
       vec3 vColor = vec3(vAmount, vAmount, vAmount);
       //gl_FragColor = vec4(zLut[index], 1.0);
       gl_FragColor = vec4(vColor, 1.0);
  }

着色器和高度贴图部分工作正常。但我想传递查找表（zLut）。如果我不尝试使用查找表，上面的代码可以正常工作。一个工作示例是here。我也创建了一个小提琴here但由于CORS问题而失败了。

欢迎任何建议。

Answer 1

好的，解决了这个问题（主要是）。诀窍是在顶点着色器中获取查找颜色，其中一个CAN索引到具有非const值的数组中。将生成的颜色作为变量传递给fragmentShader。所以这两个着色器最终成为：

<script id="vertexShader" type="x-shader/x-vertex">
        uniform sampler2D   vTexture;
        uniform float       vScale;
        uniform vec3        vLut[ 256 ];

        varying vec3        vColor;

        void main() {

            vec4 heightData = texture2D( vTexture, uv );

            // assuming map is grayscale it doesn't matter if you use r, g, or b.
            float vAmount = heightData.r;

            // fetch the color from the lookup table so it gets passed to the fragshader
            int index = int(heightData.r * 255.0);
            vColor = vLut[index];

            // move the position along the normal
            vec3 newPosition = position + normal * vScale * vAmount;

            gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
        }
    </script>

    <script id="fragmentShader" type="x-shader/x-vertex">

        varying vec3  vColor;

        void main() {

            gl_FragColor = vec4(vColor, 1.0);
        }
    </script>

我遇到的另一个问题是，渲染时颜色都是平的。我试图在animate函数中强制更新顶点但是没有用。仍在研究，但这里的问题已经解决（AFAIK）。

您可以看到结果here

如何在具有three.js的着色器中传递和使用查找表

1 个答案: