WebGL Context Configurator

Build a utility that creates WebGL contexts with different configurations for rendering pipelines with varying requirements.

Requirements

Your utility should provide a function that creates WebGL contexts with customizable attributes based on different rendering scenarios.

Context Creation

Create a function createConfiguredContext(width, height, config) that:

• Accepts width and height for the drawing buffer
• Accepts a configuration object specifying context requirements
• Returns a WebGL rendering context with the specified attributes

Configuration Options

Support the following configuration profiles:

High Quality Rendering

• Enable alpha channel for transparency
• Enable depth buffer for 3D depth testing
• Enable stencil buffer for masking operations
• Enable antialiasing for smooth edges

Performance Mode

• Disable alpha channel to save bandwidth
• Enable depth buffer for 3D scenes
• Disable stencil buffer to reduce memory
• Disable antialiasing for better performance

2D Canvas Mode

• Enable alpha channel for transparency effects
• Disable depth buffer (not needed for 2D)
• Disable stencil buffer (not needed for 2D)
• Disable antialiasing to maintain sharp pixels

Persistent Buffer Mode

• Enable alpha channel
• Enable depth buffer
• Disable stencil buffer
• Preserve drawing buffer between frames

Test Cases

• Creates a context with alpha and depth enabled @test
• Creates a context with antialiasing disabled @test
• Creates a context that preserves the drawing buffer @test
• Creates a context with stencil buffer enabled @test

Implementation

@generates

API

/**
 * Creates a WebGL context with specified configuration attributes.
 *
 * @param {number} width - Drawing buffer width in pixels
 * @param {number} height - Drawing buffer height in pixels
 * @param {Object} config - Configuration object with context attributes
 * @param {boolean} [config.alpha] - Enable alpha channel
 * @param {boolean} [config.depth] - Enable depth buffer
 * @param {boolean} [config.stencil] - Enable stencil buffer
 * @param {boolean} [config.antialias] - Enable antialiasing
 * @param {boolean} [config.preserveDrawingBuffer] - Preserve buffer between frames
 * @returns {WebGLRenderingContext} Configured WebGL context
 */
function createConfiguredContext(width, height, config) {
  // IMPLEMENTATION HERE
}

module.exports = { createConfiguredContext };

Dependencies { .dependencies }

gl { .dependency }

Provides headless WebGL context creation with configurable attributes.