3

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?

zumba man
  • 129
  • 1
  • 12

1 Answers1

5

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)

zumba man
  • 129
  • 1
  • 12
  • 2
    Instead, you can use the method `WebGLRenderer.readRenderTargetPixels( renderTarget, x, y, width, height, buffer )`. – WestLangley Jul 12 '15 at 21:00
  • using either method results in an array with a strong bias towards either 0 or 255. Not much in between. I'm expecting much different floats. Any idea why these aren't the floats I'm expecting? I even added { premultipliedAlpha : false } to my Renderer – Jared Oct 11 '15 at 18:23
  • pixels are defined as sets of 4 bytes. For R, G, B and A values. if you want floats, you'll have to map each entry in this array by 255. It's probably best to do that inline with the processing function rather than mapping the array all at once. – Patrick Gunderson Nov 02 '16 at 05:41