Chevron Down
Table of Contents
Chevron DownGetting Started
Chevron DownAPI Reference

Renderbuffer

Renderbuffers are WebGL Objects that contain textures. They are optimized for use as render targets, while vanilla Textures may not be, and are the logical choice when you do not need to sample (i.e. in a post-pass shader) from the produced image. If you do need to sample (such as when reading depth back in a second shader pass), use Texture instead. In addition, in WebGL2, Renderbuffer can do Multisampling (MSAA) just like standard framebuffer.

For additional information, see OpenGL Wiki

Usage

Creating a Renderbuffer

const renderbuffer = new Renderbuffer(gl, {format: GL.RGBA4, width: 100, height: 100});

Reformatting/reinitializing a Renderbuffer

const renderbuffer = new Renderbuffer(gl, {format: GL.RGBA4, width: 100, height: 100});
renderbuffer.initialize({format: GL.RGB565, width: 50, height: 50});

Resizing a Renderbuffer

const renderbuffer = new Renderbuffer(gl, {format: GL.RGBA4});
renderbuffer.resize({width: 200, height: 200});

Attaching a Renderbuffer to a Framebuffer (automatically resizes the Renderbuffer)

framebuffer.attach({
  [GL.DEPTH_ATTACHMENT]: new Renderbuffer(gl, {format: GL.DEPTH_COMPONENT16})
 });

Members

  • id (string) - id for debugging
  • handle (WebGLRenderbuffer) - the underlying WebGLRenderbuffer object
  • width (number) - width of renderbuffer in pixels
  • height (number) - height of renderbuffer in pixels
  • format (number) - internal format of the renderbuffer (e.g. GL.DEPTH_COMPONENT16)
  • samples (number) - samples (always 0 in non-WebGL2 contexts)

Methods

getSamplesForFormat (static method)

Queries valid sample counts for a Renderbuffer format. The sample counts can be provided as a parameter to the Renderbuffer constructor.

Renderbuffer.getSamplesForFormat({format})

  • format (GLenum) - internal format of the renderbuffer (e.g. GL.DEPTH_COMPONENT16)

Returns (Number[]) - An list of valid sample counts in descending order.

If multisampling is not supported the returned value will be [0], e.g. signed and unsigned integer internal formats in WebGL2. Note that this method always returns [0] in WebGL1.

constructor

Creates a new Renderbuffer and initalizes it by calling initialize with the provided parameters.

new Renderbuffer(gl, {id=, format, width, height, samples=})

  • gl (WebGLRenderingContext) - gl context
  • id= (String) - optional string id
  • format (GLenum) - internal format of the renderbuffer (e.g. GL.DEPTH_COMPONENT16)
  • width=1 (GLint) - width of renderbuffer in pixels
  • height=1 (GLint) - height of renderbuffer in pixels
  • samples=0 (GLint) - (WebGL2) number of samples to be used for storage.

WebGL References gl.createRenderbuffer, also see initialize.

initialize

Creates and initializes a renderbuffer object's data store. Used to update a Renderbuffers format and size after it was initially created.

Renderbuffer.initialize({format, width, height, samples=})

  • format (GLenum) - internal format of the renderbuffer (e.g. GL.DEPTH_COMPONENT16)
  • width=1 (GLint) - width of renderbuffer in pixels
  • height=1 (GLint) - height of renderbuffer in pixels
  • samples=0 (GLint) - (WebGL2) number of samples to be used for storage.

Returns itself to enable chaining

  • initialize erases the current content of the Renderbuffer.

WebGL References gl.renderbufferStorage, gl.renderbufferStorageMultisample (WebGL2), gl.bindRenderbuffer

resize

Reinitializes the Renderbuffer's data store with the new width and height but unchanged format (and samples, if available).

Renderbuffer.resize({width, height})

  • width (GLint) - width of Renderbuffer in pixels
  • height (GLint) - height of Renderbuffer in pixels

Returns itself to enable chaining

  • Checks if width or height have actually changed before calling initialize.
  • If a resize happens, resize erases the current content of the Renderbuffer.

WebGL References see initialize.

Renderbuffer Formats

The "internal" format of the Renderbuffer.

ValueDescription
GL.RGBA44 red bits, 4 green bits, 4 blue bits 4 alpha bits
GL.RGB5655 red bits, 6 green bits, 5 blue bits
GL.RGB5_A15 red bits, 5 green bits, 5 blue bits, 1 alpha bit
GL.DEPTH_COMPONENT1616 depth bits
GL.STENCIL_INDEX88 stencil bits

This table lists the basic formats supported in WebGL1. For a full table of formats supported in WebGL2 and via WebGL extensions, see Texture.

Sized Internal FormatFormatTypeDepth BitsStencil Bits
GL.DEPTH_COMPONENT16GL.DEPTH_COMPONENTGL.UNSIGNED_SHORT, GL.UNSIGNED_INT160
GL.DEPTH_COMPONENT24GL.DEPTH_COMPONENTGL.UNSIGNED_INT240
GL.DEPTH_COMPONENT32FGL.DEPTH_COMPONENTGL.FLOATf320
GL.DEPTH24_STENCIL8GL.DEPTH_STENCILGL.UNSIGNED_INT_24_8248
GL.DEPTH32F_STENCIL8GL.DEPTH_STENCILGL.FLOAT_32_UNSIGNED_INT_24_8_REVf328

When using the WEBGLdepthtexture extension: GL.DEPTH_COMPONENT GL.DEPTH_STENCIL When using the EXTsRGB extension: `EXT.SRGBEXTEXT.SRGBALPHAEXT`

When using a WebGL 2 context, the following values are available additionally:

  • GL.R8
  • GL.R16F
  • GL.R32F
  • GL.R8UI
  • GL.RG8
  • GL.RG16F
  • GL.RG32F
  • GL.RGUI
  • GL.RGB8
  • GL.SRGB8
  • GL.RGB565
  • GL.R11F_G11F_B10F
  • GL.RGB9_E5
  • GL.RGB16F
  • GL.RGB32F
  • GL.RGB8UI
  • GL.RGBA8
  • GL.SRGB_APLHA8
  • GL.RGB5_A1
  • GL.RGBA4444
  • GL.RGBA16F
  • GL.RGBA32F
  • GL.RGBA8UI

Parameters

ParameterTypeRead/WriteDescription
GL.RENDERBUFFER_WIDTHGLintRheight of the image of renderbuffer
GL.RENDERBUFFER_HEIGHTGLintRheight of the image of renderbuffer
GL.RENDERBUFFER_INTERNAL_FORMATGLenumRSee below
GL.RENDERBUFFER_GREEN_SIZEGLintRresolution (bits) of green color
GL.RENDERBUFFER_BLUE_SIZEGLintRresolution (bits) of blue color
GL.RENDERBUFFER_RED_SIZEGLintRresolution (bits) of red color
GL.RENDERBUFFER_ALPHA_SIZEGLintRresolution (bits) of alpha component
GL.RENDERBUFFER_DEPTH_SIZEGLintRresolution (bits) of depth component
GL.RENDERBUFFER_STENCIL_SIZEGLintRresolution (bits) of stencil component
GL.RENDERBUFFER_SAMPLES (WebGL2)GLintR

Limits

LimitWebGL2WebGL1
GL.MAX_RENDERBUFFER_SIZEMax renderbuffer width/height>=2048>=1
GL.MAX_SAMPLESMax samples for multisampling>=40

Remarks

  • The only way to work with a renderbuffer, besides creating it, is to attach it to a Framebuffer.
  • A Renderbuffer cannot be accessed by a shader in any way.
  • Multisampling is only available in WebGL2