Coder Social home page Coder Social logo

WebGL 2 features support about twgl.js HOT 5 OPEN

edankwan avatar edankwan commented on May 21, 2024 1
WebGL 2 features support

from twgl.js.

Comments (5)

greggman avatar greggman commented on May 21, 2024

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

from twgl.js.

kaktus40 avatar kaktus40 commented on May 21, 2024

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?

from twgl.js.

PrincessGod avatar PrincessGod commented on May 21, 2024

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.

from twgl.js.

greggman avatar greggman commented on May 21, 2024

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.

from twgl.js.

kaktus40 avatar kaktus40 commented on May 21, 2024

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.

from twgl.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.