WebGL 2 features support

[edankwan]

Hi, I am just trying out Twgl and the experience is amazing 👍. I just wonder if there are more WebGL 2 features coming soon? Like:

• Transform feedback
• Multiple Draw Buffers

[greggman]

I'll look into transform feedback. As for mulitple drawbuffers though it's not clear to me what there is to do. You can already create a framebuffer with lots of attachments with twgl so for that isn't it just one WebGL call go drawbuffers to use them? Maybe I can have you pass a FrameBufferInfo to twgl.setDrawBuffers or something just to generate that one call?

Open to ideas

[kaktus40]

Hello,
I begin recently to use webgl for General-purpose processing on graphics processing units. In order to simplify the use of Multiple Render Target for my works, I use TWGL with webgl 2. From this little experience, I think that attachmentPoint should be saved in FrameBufferInfo class. After that using bindFramebufferInfo could check that gl is instance of WebGL2RenderingContext. In this case we could use gl.drawBuffers with the attachmentPoint array defined previously.
After that the user could read each render target using gl.readBuffer for each attachmentPoint or maybe create a new function in TWGL to return all the targets in an array?

[PrincessGod]

I just use drawBuffers() by adding

    if ( isWebGL2(gl) && colorAttachmentCount > 1 ) {

        const colorBuffers = [];
        for ( let i = 0; i < colorAttachmentCount; i ++ )
            colorBuffers.push( gl.COLOR_ATTACHMENT0 + i );
        gl.drawBuffers( colorBuffers );

    }

before framebufferInfo returned.

[greggman]

Sorry I didn't get back to you earlier.

Right now if you have 5 attachments say

  const attachments = [
    { format: RGBA, mag: NEAREST },
    { format: RGBA, mag: NEAREST },
    { format: RGBA, mag: NEAREST },
    { format: RGBA, mag: NEAREST },
    { format: DEPTH_STENCIL },
  ];

And you call

   const fbi = twgl.createFramebufferInfo(gl, attachments);

you'd like something you can call gl.drawBuffers or you want twgl to call gl.drawBuffers for you on twgl.bindFramebufferInfo?

The problem with calling it on twgl.bindFramebufferInfo is the whole point of gl.drawBuffers is to allow you to set which attachments get drawn too. I guess 99.99% of the time you want all buffers drawn to. I guess I wonder if maybe twgl.setDrawBuffers(gl, fbi) or something would be better so at least it's optional? On the other hand one of the reasons I didn't included originally is because it's already pretty trivial (well, at least for my use cases)

  const attachments = [
    { format: RGBA, mag: NEAREST },
    { format: RGBA, mag: NEAREST },
    { format: RGBA, mag: NEAREST },
    { format: RGBA, mag: NEAREST },
    { format: DEPTH_STENCIL },
  ];
  const drawBuffers = [
     gl.COLOR_ATTACHMENT0, 
     gl.COLOR_ATTACHMENT1, 
     gl.COLOR_ATTACHMENT2, 
     gl.COLOR_ATTACHMENT3, 
  ];

Another idea would be twgl.createDrawBuffers(gl, fbi) which would just return the drawBuffers array above and then it would be up to you to call gl.drawBuffers with that array.

Maybe that would let you do this?

const allBuffers = twgl.createDrawBuffers(gl, fbi);
const justBuffers1and3 _ twgl.createDrawBuffers(gl, fbi);
justBuffers1and3[0] = gl.NONE;
justBuffers1and3[2] = gl.NONE;

?!??!? - sorry. I'm just thinking out loud. Not sure what's best.

[kaktus40]

why not twgl.bindFramebufferInfo(gl, framebufferInfo, target, buffersToDraw) where buffersToDraw is an optional list of buffers to draw. By default, the list is all attachments of FBI when it's webgl 2.