WEBGL_draw_buffers in Three.js to draw to multiple textures simultaneously?

Questions
1

Reading the WebGL API, I came across WEBGL_draw_buffers extension, which is defined as:

The WEBGL_draw_buffers extension is part of the WebGL API and enables a fragment shader to write to several textures, which is useful for deferred shading, for example.

That means we could output to multiple textures with a single fragment shader!

void main(void) { 
  gl_FragData[0] = vec4(0.25); 
  gl_FragData[1] = vec4(0.5);
  gl_FragData[2] = vec4(0.75); 
  gl_FragData[3] = vec4(1.0);
}

This would be super helpful for some post-processing pipelines. Is possible to achieve this with Three.js? If so, does anybody know of an example that I can dig through?

1 Like
2

It’s not supported yet.

This MRT PR has been around for awhile but it hasn’t been merged yet. In a previous discussion it was mentioned that the lack of general WebGL2 support in all browsers (specifically safari).

http://webglstats.com/ seems to be down again so I can’t check but the WebGL1 extension for draw_buffers may not be well supported enough to justify adding it into three.js.

I’m waiting for it, too!

2 Likes
3

WebGLStats is back up! draw_buffers support: 37% :cry:

What happened in summer of 2017 that support for so many things declined so sharply?