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

webgl-rendering.mddocs/

WebGL Rendering Context

Complete WebGL 1.0.3 API implementation with all standard methods, properties, and constants for graphics rendering operations.

Capabilities

Error Management

WebGL error handling and state management.

/**
 * Get the current WebGL error state
 * @returns Error constant (NO_ERROR if no error)
 */
getError(): number;

/**
 * Set a WebGL error (internal use)
 * @param error - Error constant to set
 */
setError(error: number): void;

Rendering State Management

Core rendering state control methods.

/**
 * Enable a WebGL capability
 * @param cap - Capability constant to enable
 */
enable(cap: number): void;

/**
 * Disable a WebGL capability
 * @param cap - Capability constant to disable
 */
disable(cap: number): void;

/**
 * Test if a capability is enabled
 * @param cap - Capability constant to test
 * @returns true if enabled
 */
isEnabled(cap: number): boolean;

Usage Examples:

// Enable depth testing
context.enable(context.DEPTH_TEST);

// Enable blending
context.enable(context.BLEND);

// Check if blending is enabled
if (context.isEnabled(context.BLEND)) {
  console.log('Blending is enabled');
}

// Disable depth testing
context.disable(context.DEPTH_TEST);

Viewport and Scissor

Viewport and scissor rectangle management.

/**
 * Set the viewport transformation
 * @param x - Lower left x coordinate
 * @param y - Lower left y coordinate  
 * @param width - Viewport width
 * @param height - Viewport height
 */
viewport(x: number, y: number, width: number, height: number): void;

/**
 * Set the scissor rectangle
 * @param x - Lower left x coordinate
 * @param y - Lower left y coordinate
 * @param width - Rectangle width
 * @param height - Rectangle height
 */
scissor(x: number, y: number, width: number, height: number): void;

Clear Operations

Methods for clearing framebuffer contents.

/**
 * Clear buffers specified by mask
 * @param mask - Bitwise OR of buffer bits to clear
 */
clear(mask: number): void;

/**
 * Set the clear color
 * @param red - Red component (0.0 to 1.0)
 * @param green - Green component (0.0 to 1.0) 
 * @param blue - Blue component (0.0 to 1.0)
 * @param alpha - Alpha component (0.0 to 1.0)
 */
clearColor(red: number, green: number, blue: number, alpha: number): void;

/**
 * Set the clear depth value
 * @param depth - Depth value (0.0 to 1.0)
 */
clearDepth(depth: number): void;

/**
 * Set the clear stencil value
 * @param s - Stencil value
 */
clearStencil(s: number): void;

Usage Examples:

// Set clear color to red
context.clearColor(1.0, 0.0, 0.0, 1.0);

// Set clear depth to maximum distance
context.clearDepth(1.0);

// Clear color and depth buffers
context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);

Drawing Operations

Core drawing commands for rendering geometry.

/**
 * Draw arrays of vertex data
 * @param mode - Primitive type to render
 * @param first - Starting vertex index
 * @param count - Number of vertices to render
 */
drawArrays(mode: number, first: number, count: number): void;

/**
 * Draw indexed vertex data
 * @param mode - Primitive type to render
 * @param count - Number of indices to render
 * @param type - Index data type
 * @param offset - Byte offset into element array buffer
 */
drawElements(mode: number, count: number, type: number, offset: number): void;

Usage Examples:

// Draw triangles from vertex array
context.drawArrays(context.TRIANGLES, 0, 3);

// Draw indexed triangles
context.drawElements(context.TRIANGLES, 6, context.UNSIGNED_SHORT, 0);

// Draw triangle strip
context.drawArrays(context.TRIANGLE_STRIP, 0, 4);

Color and Masking

Color write masking and blending operations.

/**
 * Set color write mask
 * @param red - Enable red channel writes
 * @param green - Enable green channel writes
 * @param blue - Enable blue channel writes
 * @param alpha - Enable alpha channel writes
 */
colorMask(red: boolean, green: boolean, blue: boolean, alpha: boolean): void;

/**
 * Set blend function for source and destination
 * @param sfactor - Source blend factor
 * @param dfactor - Destination blend factor
 */
blendFunc(sfactor: number, dfactor: number): void;

/**
 * Set separate blend functions for RGB and alpha
 * @param srcRGB - Source RGB blend factor
 * @param dstRGB - Destination RGB blend factor
 * @param srcAlpha - Source alpha blend factor
 * @param dstAlpha - Destination alpha blend factor
 */
blendFuncSeparate(srcRGB: number, dstRGB: number, srcAlpha: number, dstAlpha: number): void;

/**
 * Set blend equation
 * @param mode - Blend equation mode
 */
blendEquation(mode: number): void;

/**
 * Set separate blend equations for RGB and alpha
 * @param modeRGB - RGB blend equation
 * @param modeAlpha - Alpha blend equation
 */
blendEquationSeparate(modeRGB: number, modeAlpha: number): void;

/**
 * Set constant blend color
 * @param red - Red component
 * @param green - Green component
 * @param blue - Blue component
 * @param alpha - Alpha component
 */
blendColor(red: number, green: number, blue: number, alpha: number): void;

Depth Testing

Depth buffer operations and testing.

/**
 * Set depth test function
 * @param func - Comparison function
 */
depthFunc(func: number): void;

/**
 * Set depth buffer write mask
 * @param flag - Enable depth writes
 */
depthMask(flag: boolean): void;

/**
 * Set depth range mapping
 * @param zNear - Near clipping plane
 * @param zFar - Far clipping plane
 */
depthRange(zNear: number, zFar: number): void;

Stencil Testing

Stencil buffer operations and testing.

/**
 * Set stencil test function
 * @param func - Comparison function
 * @param ref - Reference value
 * @param mask - Bit mask
 */
stencilFunc(func: number, ref: number, mask: number): void;

/**
 * Set stencil test function for front/back faces separately
 * @param face - Face to configure (FRONT, BACK, or FRONT_AND_BACK)
 * @param func - Comparison function
 * @param ref - Reference value
 * @param mask - Bit mask
 */
stencilFuncSeparate(face: number, func: number, ref: number, mask: number): void;

/**
 * Set stencil write mask
 * @param mask - Bit mask for writes
 */
stencilMask(mask: number): void;

/**
 * Set stencil operations
 * @param fail - Action when stencil test fails
 * @param zfail - Action when stencil passes but depth fails
 * @param zpass - Action when both stencil and depth pass
 */
stencilOp(fail: number, zfail: number, zpass: number): void;

Parameter Queries

Methods for querying WebGL state and parameters.

/**
 * Get WebGL parameter value
 * @param pname - Parameter name constant
 * @returns Parameter value
 */
getParameter(pname: number): any;

Usage Examples:

// Get maximum texture size
const maxTextureSize = context.getParameter(context.MAX_TEXTURE_SIZE);

// Get viewport dimensions
const viewport = context.getParameter(context.VIEWPORT);

// Get WebGL version string
const version = context.getParameter(context.VERSION);

// Get supported extensions
const extensions = context.getParameter(context.EXTENSIONS);

Face Culling and Polygon Operations

Face culling and polygon rendering options.

/**
 * Set which faces to cull
 * @param mode - Cull mode (FRONT, BACK, or FRONT_AND_BACK)
 */
cullFace(mode: number): void;

/**
 * Set front face orientation
 * @param mode - Winding order (CW or CCW)
 */
frontFace(mode: number): void;

/**
 * Set line width for line primitives
 * @param width - Line width in pixels
 */
lineWidth(width: number): void;

/**
 * Set polygon offset for depth values
 * @param factor - Scale factor
 * @param units - Constant offset
 */
polygonOffset(factor: number, units: number): void;

Pixel Operations

Pixel storage and reading operations.

/**
 * Set pixel storage parameters
 * @param pname - Parameter name
 * @param param - Parameter value
 */
pixelStorei(pname: number, param: number): void;

/**
 * Read pixel data from the framebuffer
 * @param x - Left coordinate
 * @param y - Bottom coordinate
 * @param width - Rectangle width
 * @param height - Rectangle height
 * @param format - Pixel format
 * @param type - Pixel data type
 * @param pixels - Destination array
 */
readPixels(x: number, y: number, width: number, height: number, 
          format: number, type: number, pixels: ArrayBufferView): void;

Usage Examples:

// Set pixel unpack alignment
context.pixelStorei(context.UNPACK_ALIGNMENT, 1);

// Read framebuffer pixels
const pixels = new Uint8Array(width * height * 4);
context.readPixels(0, 0, width, height, context.RGBA, context.UNSIGNED_BYTE, pixels);

Command Execution

Methods for managing WebGL command execution.

/**
 * Force execution of WebGL commands
 */
flush(): void;

/**
 * Wait for completion of all WebGL commands
 */
finish(): void;

/**
 * Provide hints to the WebGL implementation
 * @param target - Hint target
 * @param mode - Hint mode
 */
hint(target: number, mode: number): void;

Context State

Context information and lifecycle methods.

/**
 * Get context creation attributes
 * @returns Context attributes or null
 */
getContextAttributes(): WebGLContextAttributes | null;

/**
 * Check if context is lost
 * @returns Always false in headless-gl
 */
isContextLost(): boolean;

/**
 * Get shader precision format information
 * @param shadertype - Shader type (VERTEX_SHADER or FRAGMENT_SHADER)
 * @param precisiontype - Precision type (LOW_FLOAT, MEDIUM_FLOAT, HIGH_FLOAT, etc.)
 * @returns Precision format information
 */
getShaderPrecisionFormat(shadertype: number, precisiontype: number): WebGLShaderPrecisionFormat | null;