Search code examples
three.jsrender-to-texturerendertarget

How to access WebGLRenderTarget texture content


So I render a scene to a texture and then I need to process the texture in js and either modify the contents or make a new texture from an array of values.

It seems like I need to get the WebGL context and interface directly with WebGL to accomplish this. Does anybody know the best way to do this?


Solution

  • I ended up just getting the webGL context from the renderer and calling gl.readPixels()

    var gl = renderer.getContext();
    var framebuffer = renderTarget.__webglFramebuffer;
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
    var data = new Uint8Array(renderTarget.width * renderTarget.height * 4);
    gl.readPixels(0,0,renderTarget.width,renderTarget.heigh,gl.RGBA,gl.UNSIGNED_BYTE,data);
    

    (renderTarget is an instance of THREE.WebGLRenderTarget)