or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

attributes-uniforms.mdbuffer-management.mdcontext-creation.mdextensions.mdframebuffer-operations.mdindex.mdshader-programs.mdtexture-operations.mdwebgl-rendering.md
tile.json

framebuffer-operations.mddocs/

Framebuffer Operations

Framebuffer and renderbuffer management for off-screen rendering and render-to-texture operations with attachment support.

Capabilities

Framebuffer Management

/**
 * Create framebuffer object
 * @returns WebGLFramebuffer or null
 */
createFramebuffer(): WebGLFramebuffer | null;

/**
 * Delete framebuffer object
 * @param framebuffer - Framebuffer to delete
 */
deleteFramebuffer(framebuffer: WebGLFramebuffer): void;

/**
 * Check if object is a framebuffer
 * @param framebuffer - Object to test
 * @returns true if valid framebuffer
 */
isFramebuffer(framebuffer: any): boolean;

/**
 * Bind framebuffer
 * @param target - FRAMEBUFFER target
 * @param framebuffer - Framebuffer to bind or null for default
 */
bindFramebuffer(target: number, framebuffer: WebGLFramebuffer | null): void;

/**
 * Check framebuffer completeness
 * @param target - FRAMEBUFFER target
 * @returns Completeness status
 */
checkFramebufferStatus(target: number): number;

/**
 * Get framebuffer attachment parameter
 * @param target - FRAMEBUFFER target
 * @param attachment - Attachment point
 * @param pname - Parameter name
 * @returns Parameter value
 */
getFramebufferAttachmentParameter(target: number, attachment: number, pname: number): any;

Renderbuffer Management

/**
 * Create renderbuffer object
 * @returns WebGLRenderbuffer or null
 */
createRenderbuffer(): WebGLRenderbuffer | null;

/**
 * Delete renderbuffer object
 * @param renderbuffer - Renderbuffer to delete
 */
deleteRenderbuffer(renderbuffer: WebGLRenderbuffer): void;

/**
 * Check if object is a renderbuffer
 * @param renderbuffer - Object to test
 * @returns true if valid renderbuffer
 */
isRenderbuffer(renderbuffer: any): boolean;

/**
 * Bind renderbuffer
 * @param target - RENDERBUFFER target
 * @param renderbuffer - Renderbuffer to bind or null
 */
bindRenderbuffer(target: number, renderbuffer: WebGLRenderbuffer | null): void;

/**
 * Set renderbuffer storage
 * @param target - RENDERBUFFER target
 * @param internalformat - Storage format
 * @param width - Width in pixels
 * @param height - Height in pixels
 */
renderbufferStorage(target: number, internalformat: number, width: number, height: number): void;

/**
 * Get renderbuffer parameter
 * @param target - RENDERBUFFER target
 * @param pname - Parameter name
 * @returns Parameter value
 */
getRenderbufferParameter(target: number, pname: number): any;

Framebuffer Attachments

/**
 * Attach texture to framebuffer
 * @param target - FRAMEBUFFER target
 * @param attachment - Attachment point
 * @param textarget - Texture target
 * @param texture - Texture to attach or null
 * @param level - Mipmap level
 */
framebufferTexture2D(target: number, attachment: number, textarget: number,
                     texture: WebGLTexture | null, level: number): void;

/**
 * Attach renderbuffer to framebuffer
 * @param target - FRAMEBUFFER target
 * @param attachment - Attachment point
 * @param renderbuffertarget - RENDERBUFFER target
 * @param renderbuffer - Renderbuffer to attach or null
 */
framebufferRenderbuffer(target: number, attachment: number, renderbuffertarget: number,
                       renderbuffer: WebGLRenderbuffer | null): void;

Usage Examples:

// Create render-to-texture setup
const framebuffer = context.createFramebuffer();
const colorTexture = context.createTexture();
const depthBuffer = context.createRenderbuffer();

// Set up color texture
context.bindTexture(context.TEXTURE_2D, colorTexture);
context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, 512, 512, 0,
                  context.RGBA, context.UNSIGNED_BYTE, null);
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.LINEAR);

// Set up depth buffer
context.bindRenderbuffer(context.RENDERBUFFER, depthBuffer);
context.renderbufferStorage(context.RENDERBUFFER, context.DEPTH_COMPONENT16, 512, 512);

// Attach to framebuffer
context.bindFramebuffer(context.FRAMEBUFFER, framebuffer);
context.framebufferTexture2D(context.FRAMEBUFFER, context.COLOR_ATTACHMENT0,
                            context.TEXTURE_2D, colorTexture, 0);
context.framebufferRenderbuffer(context.FRAMEBUFFER, context.DEPTH_ATTACHMENT,
                               context.RENDERBUFFER, depthBuffer);

// Check completeness
if (context.checkFramebufferStatus(context.FRAMEBUFFER) !== context.FRAMEBUFFER_COMPLETE) {
  console.error('Framebuffer incomplete');
}

// Render to texture
context.viewport(0, 0, 512, 512);
// ... render scene ...

// Switch back to default framebuffer
context.bindFramebuffer(context.FRAMEBUFFER, null);