GPU Computation Progress Tracker

Build a system that performs GPU-accelerated rendering operations and provides accurate progress tracking by synchronizing between GPU and CPU.

Requirements

Create a module that executes multiple rendering passes and accurately tracks when each pass completes. The system must wait for the GPU to finish processing before reporting progress to the CPU.

Core Functionality

Implement a function runComputationWithProgress(gl, passes, onProgress) that:

• Accepts a WebGL 2 context, an array of pass configurations, and a progress callback
• Executes each pass sequentially
• Waits for GPU completion after each pass
• Calls the progress callback only after GPU work finishes
• Returns a Promise that resolves when all passes complete

Each pass should:

• Clear the framebuffer
• Perform a simple draw operation
• Synchronize with the GPU before proceeding

The progress callback receives: { passIndex, totalPasses, completed } where:

• passIndex is the zero-based index of the completed pass
• totalPasses is the total number of passes
• completed is a boolean indicating if all passes are done

Test Cases

• Creates a WebGL 2 context and runs 3 computation passes @test
• Verifies progress callbacks occur in correct order after GPU completion @test
• Ensures final completion status shows all passes finished @test

Implementation

@generates

API

/**
 * Executes GPU computation passes with accurate progress tracking
 * @param {WebGL2RenderingContext} gl - WebGL 2 context
 * @param {Array<{color: [number, number, number, number]}>} passes - Array of pass configurations
 * @param {Function} onProgress - Callback for progress updates
 * @returns {Promise<void>} Resolves when all passes complete
 */
async function runComputationWithProgress(gl, passes, onProgress) {
  // IMPLEMENTATION HERE
}

module.exports = { runComputationWithProgress };

Dependencies { .dependencies }

gl { .dependency }

Provides WebGL 2 rendering context for headless GPU operations.