twgl/framebuffers

Framebuffer related functions

For backward compatibily they are available at both twgl.framebuffer and twgl
itself

See module:twgl for core functions

Methods

(static) bindFramebufferInfo(gl, framebufferInfoopt, targetopt)

Binds a framebuffer

This function pretty much soley 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);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

the WebGLRenderingContext

framebufferInfo module:twgl.FramebufferInfo <optional>

a framebufferInfo as returned from module:twgl.createFramebufferInfo.
If not passed will bind the canvas.

target number <optional>

The target. If not passed gl.FRAMEBUFFER will be used.

(static) createFramebufferInfo(gl, attachmentsopt, widthopt, heightopt) → {module:twgl.FramebufferInfo}

Creates a framebuffer and attachments.

This returns a module:twgl.FramebufferInfo because it needs to return the attachments as well as the framebuffer.

The simplest usage

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

More complex usage

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

Passing in a specific size

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

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

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

the WebGLRenderingContext

attachments Array.<module:twgl.AttachmentOptions> <optional>

which attachments to create. If not provided the default is a framebuffer with an
RGBA, UNSIGNED_BYTE texture COLOR_ATTACHMENT0 and a DEPTH_STENCIL renderbuffer DEPTH_STENCIL_ATTACHMENT.

width number <optional>

the width for the attachments. Default = size of drawingBuffer

height number <optional>

the height for the attachments. Defautt = size of drawingBuffer

Returns:

the framebuffer and attachments.

Type
module:twgl.FramebufferInfo

(static) resizeFramebufferInfo(gl, framebufferInfo, attachmentsopt, widthopt, heightopt)

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
var 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
var attachments = [
  { format: RGB565, mag: NEAREST },
  { format: STENCIL_INDEX8 },
]
var fbi = twgl.createFramebufferInfo(gl, attachments);

...

function render() {
  if (twgl.resizeCanvasToDisplaySize(gl.canvas)) {
    // resize the attachments to match
    twgl.resizeFramebufferInfo(gl, fbi, attachments);
  }
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

the WebGLRenderingContext

framebufferInfo module:twgl.FramebufferInfo

a framebufferInfo as returned from module:twgl.createFramebufferInfo.

attachments Array.<module:twgl.AttachmentOptions> <optional>

the same attachments options as passed to module:twgl.createFramebufferInfo.

width number <optional>

the width for the attachments. Default = size of drawingBuffer

height number <optional>

the height for the attachments. Defautt = size of drawingBuffer