CODEWITHSUNDEEP
javascriptthree.jsglsl
rkwright
rkwright

Reputation: 457

How to pass and use a lookup table in a shader with three.js

I have written a simple three.js of using a height map. This is the relevant code that creates the shader material:

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

And here are the shaders:

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

The shaders and the height map part works fine. But I want to pass the lookup table (zLut). The above code works fine if I don't try to use the lookup table. A working example is here. I created a fiddle as well here but it fails because of CORS issues.

Any suggestions are welcome.

Upvotes: 1

Views: 1421

Answers (1)

rkwright
rkwright

Reputation: 457

OK, solved this (mostly). The trick was to fetch the lookup color in the vertex shader, where one CAN index into an array with a non-const value. The pass the resulting color to the fragmentShader as a varying. So the two shaders end up being:

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

The remaining problem I have is that when rendered the colors are all flat. I tried forcing an update on the vertices in the animate function but didn't work. Still researching but the question here is solved (AFAIK).

You can see the result here

Upvotes: 3

Related Questions