twgl/framebuffers

Binds a framebuffer

This function pretty much solely exists because I spent hours
trying to figure out why something I wrote wasn't working only
to realize I forget to set the viewport dimensions.
My hope is this function will fix that.

It is effectively the same as

gl.bindFramebuffer(gl.FRAMEBUFFER, someFramebufferInfo.framebuffer);
gl.viewport(0, 0, someFramebufferInfo.width, someFramebufferInfo.height);

Creates a framebuffer and attachments.

This returns a module:twgl.FramebufferInfo because it needs to return the attachments as well as the framebuffer.
It also leaves the framebuffer it just created as the currently bound FRAMEBUFFER.
Note: If this is WebGL2 or if you called module:twgl.addExtensionsToContext then it will set the drawBuffers
to [COLOR_ATTACHMENT0, COLOR_ATTACHMENT1, ...] for how ever many color attachments were created.

The simplest usage

// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
const fbi = twgl.createFramebufferInfo(gl);

More complex usage

// create an RGB565 renderbuffer and a STENCIL_INDEX8 renderbuffer
const attachments = [
  { format: RGB565, mag: NEAREST },
  { format: STENCIL_INDEX8 },
]
const fbi = twgl.createFramebufferInfo(gl, attachments);

Passing in a specific size

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

Note!! It is up to you to check if the framebuffer is renderable by calling gl.checkFramebufferStatus.
WebGL1 only guarantees 3 combinations of attachments work.

Resizes the attachments of a framebuffer.

You need to pass in the same attachments as you passed in module:twgl.createFramebufferInfo
because TWGL has no idea the format/type of each attachment.

The simplest usage

// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
const fbi = twgl.createFramebufferInfo(gl);

...

function render() {
  if (twgl.resizeCanvasToDisplaySize(gl.canvas)) {
    // resize the attachments
    twgl.resizeFramebufferInfo(gl, fbi);
  }

More complex usage

// create an RGB565 renderbuffer and a STENCIL_INDEX8 renderbuffer
const attachments = [
  { format: RGB565, mag: NEAREST },
  { format: STENCIL_INDEX8 },
]
const fbi = twgl.createFramebufferInfo(gl, attachments);

...

function render() {
  if (twgl.resizeCanvasToDisplaySize(gl.canvas)) {
    // resize the attachments to match
    twgl.resizeFramebufferInfo(gl, fbi, attachments);
  }