floating-pointthree.jstextureswebgl-extensions

Does Three.js support OES_texture_float?


I want to render position or depth to a floating texture. I use

vsnTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight,
            { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat ,type:THREE.FloatType }); 

as the render target.

Then, I tested

var gl = this.renderer.getContext();
    if( !gl.getExtension( "OES_texture_float" ) ){
        console.error( "No OES_texture_float support for float textures!" );
    } 

and found no error. Chrome supports OES_texture_float, and I step into THREE.js:

_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, renderTarget.width, renderTarget.height, 0, glFormat, glType, null );
 //console.log(glType);

I found glType =5126(gl.FLOAT) ,when I set the WebGLRenderTarget:type:THREE.FloatType. This means I could use OES_texture_float. Do I have something wrong? Because whatever I set the type:THREE.FloatType or use the default ( THREE.UnsignedByteType), I both get the same render texture. Am I not using the OES_texture_float correctly?


Solution

  • Yes, it does. This example shows how to use it:

    http://threejs.org/examples/#webgl_gpgpu_birds