Search code examples
three.jsglslvertex-shader

Three JS: Is vertex displacement via textures limited to 256 values?

I'm rendering the following texture to a WebGLRenderTarget in ThreeJS using Ashima's GLSL noise:

enter image description here

I'm then reading the texture's RGB channels to displace several meshes' vertices in the XYZ axes with the following GLSL code:

vec4 fluctuation = texture2D(fluxTexture, uv);
curPos.y += (fluctuation.r - 0.5) * 40.0;
curPos.x += (fluctuation.g - 0.5) * 20.0;
curPos.z += (fluctuation.b - 0.5) * 20.0;

However, since the movement is very subtle, I've noticed that the vertices jump a few pixels for every step when the RGB values change. I'm attributing this artifact to each color's limitation to 256 values apiece. Is there any way to change the texture's bit depth to 16 or 32 bits so I can get more precision out of the RGB channels?

Solution

  • You are interested in the type property of a render target:

    Textures

    You can try THREE.FloatType. 

    // Test for iOS devices, because they don't support THREE.FloatType
var dataType = (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) ? THREE.HalfFloatType : THREE.FloatType;

this.renderTarget = new THREE.WebGLRenderTarget(50, 50, {
    format: THREE.RGBAFormat,
    type: dataType,
});