webgl2 1.2.0 → 1.2.1

package/coverage.md

@@ -8,44 +8,48 @@
 | src/decompiler/emitter.rs | 17 | 8 | 25 | 68.00% 🟡 |
 | src/decompiler/lifter.rs | 17 | 21 | 38 | 44.74% 🟠 |
 | src/decompiler/mod.rs | 8 | 6 | 14 | 57.14% 🟡 |
-| src/decompiler/module.rs | 1 | 1 | 2 | 50.00% 🟡 |
-| src/decompiler/parser.rs | 17 | 2 | 19 | 89.47% 🟢 |
-| src/decompiler/simplifier.rs | 53 | 19 | 72 | 73.61% 🟡 |
-| src/error.rs | 7 | 15 | 22 | 31.82% 🟠 |
-| src/lib.rs | 315 | 210 | 525 | 60.00% 🟡 |
+| src/decompiler/module.rs | 3 | 1 | 4 | 75.00% 🟡 |
+| src/decompiler/parser.rs | 15 | 2 | 17 | 88.24% 🟢 |
+| src/decompiler/simplifier.rs | 54 | 19 | 73 | 73.97% 🟡 |
+| src/error.rs | 8 | 15 | 23 | 34.78% 🟠 |
+| src/lib.rs | 314 | 224 | 538 | 58.36% 🟡 |
 | src/naga_wasm_backend/backend.rs | 62 | 2 | 64 | 96.88% 🟢 |
-| src/naga_wasm_backend/call_lowering.rs | 18 | 0 | 18 | 100.00% 🟢 |
-| src/naga_wasm_backend/control_flow.rs | 54 | 16 | 70 | 77.14% 🟡 |
+| src/naga_wasm_backend/call_lowering.rs | 19 | 0 | 19 | 100.00% 🟢 |
+| src/naga_wasm_backend/control_flow.rs | 30 | 40 | 70 | 42.86% 🟠 |
 | src/naga_wasm_backend/debug/stub.rs | 20 | 0 | 20 | 100.00% 🟢 |
-| src/naga_wasm_backend/expressions.rs | 65 | 105 | 170 | 38.24% 🟠 |
-| src/naga_wasm_backend/function_abi.rs | 22 | 0 | 22 | 100.00% 🟢 |
+| src/naga_wasm_backend/expressions.rs | 65 | 109 | 174 | 37.36% 🟠 |
+| src/naga_wasm_backend/function_abi.rs | 25 | 0 | 25 | 100.00% 🟢 |
 | src/naga_wasm_backend/functions/prep.rs | 4 | 0 | 4 | 100.00% 🟢 |
-| src/naga_wasm_backend/functions/registry.rs | 4 | 1 | 5 | 80.00% 🟢 |
+| src/naga_wasm_backend/functions/registry.rs | 4 | 0 | 4 | 100.00% 🟢 |
 | src/naga_wasm_backend/memory_layout.rs | 9 | 0 | 9 | 100.00% 🟢 |
-| src/naga_wasm_backend/output_layout.rs | 2 | 2 | 4 | 50.00% 🟡 |
+| src/naga_wasm_backend/mod.rs | 1 | 0 | 1 | 100.00% 🟢 |
+| src/naga_wasm_backend/output_layout.rs | 4 | 2 | 6 | 66.67% 🟡 |
 | src/naga_wasm_backend/types.rs | 11 | 0 | 11 | 100.00% 🟢 |
-| src/wasm_gl_emu/framebuffer.rs | 1 | 0 | 1 | 100.00% 🟢 |
-| src/wasm_gl_emu/rasterizer.rs | 26 | 18 | 44 | 59.09% 🟡 |
-| src/webgl2_context/blend.rs | 2 | 1 | 3 | 66.67% 🟡 |
-| src/webgl2_context/buffers.rs | 18 | 1 | 19 | 94.74% 🟢 |
-| src/webgl2_context/drawing.rs | 26 | 3 | 29 | 89.66% 🟢 |
-| src/webgl2_context/framebuffers.rs | 10 | 0 | 10 | 100.00% 🟢 |
+| src/wasm_gl_emu/device.rs | 20 | 4 | 24 | 83.33% 🟢 |
+| src/wasm_gl_emu/framebuffer.rs | 3 | 1 | 4 | 75.00% 🟡 |
+| src/wasm_gl_emu/rasterizer.rs | 32 | 18 | 50 | 64.00% 🟡 |
+| src/wasm_gl_emu/transfer.rs | 19 | 7 | 26 | 73.08% 🟡 |
+| src/webgl2_context/blend.rs | 0 | 3 | 3 | 0.00% 🟡 |
+| src/webgl2_context/buffers.rs | 20 | 4 | 24 | 83.33% 🟢 |
+| src/webgl2_context/drawing.rs | 13 | 0 | 13 | 100.00% 🟢 |
+| src/webgl2_context/framebuffers.rs | 11 | 1 | 12 | 91.67% 🟢 |
 | src/webgl2_context/registry.rs | 7 | 0 | 7 | 100.00% 🟢 |
-| src/webgl2_context/renderbuffers.rs | 11 | 0 | 11 | 100.00% 🟢 |
-| src/webgl2_context/shaders.rs | 113 | 12 | 125 | 90.40% 🟢 |
-| src/webgl2_context/state.rs | 23 | 1 | 24 | 95.83% 🟢 |
-| src/webgl2_context/textures.rs | 28 | 17 | 45 | 62.22% 🟡 |
-| src/webgl2_context/types.rs | 15 | 1 | 16 | 93.75% 🟢 |
+| src/webgl2_context/renderbuffers.rs | 10 | 0 | 10 | 100.00% 🟢 |
+| src/webgl2_context/shaders.rs | 112 | 14 | 126 | 88.89% 🟢 |
+| src/webgl2_context/state.rs | 16 | 4 | 20 | 80.00% 🟢 |
+| src/webgl2_context/textures.rs | 25 | 9 | 34 | 73.53% 🟡 |
+| src/webgl2_context/types.rs | 16 | 0 | 16 | 100.00% 🟢 |
 | src/webgl2_context/vaos.rs | 35 | 0 | 35 | 100.00% 🟢 |
-| src/webgpu/adapter.rs | 3 | 0 | 3 | 100.00% 🟢 |
-| src/webgpu/backend.rs | 25 | 27 | 52 | 48.08% 🟠 |
-| **Total** | **1049** | **490** | **1539** | **68.16% 🟡** |
+| src/webgpu/adapter.rs | 2 | 0 | 2 | 100.00% 🟢 |
+| src/webgpu/backend.rs | 70 | 26 | 96 | 72.92% 🟡 |
+| src/webgpu/command.rs | 3 | 1 | 4 | 75.00% 🟡 |
+| **Total** | **1104** | **542** | **1646** | **67.07% 🟡** |
 
 ## Top Missed Files
 
 | File | Lines Missed | Illustrative Line | Coverage |
 |---|---|---|---:|
-| src/lib.rs | 210/525 | [1040] `/// Get active attribute info.` | 60.00% 🟡 |
-| src/naga_wasm_backend/expressions.rs | 105/170 | [1504] `for j in 0..count {` | 38.24% 🟠 |
-| src/webgpu/backend.rs | 27/52 | [965] `}` | 48.08% 🟠 |
-| src/decompiler/lifter.rs | 21/38 | [455] `fn unary_op(&mut self, op: UnaryOp) {` | 44.74% 🟠 |
+| src/lib.rs | 224/538 | [1033] `/// Use a program.` | 58.36% 🟡 |
+| src/naga_wasm_backend/expressions.rs | 109/174 | [1504] `for j in 0..count {` | 37.36% 🟠 |
+| src/naga_wasm_backend/control_flow.rs | 40/70 | [218] `for (s, s_span) in body.span_iter() {` | 42.86% 🟠 |
+| src/webgpu/backend.rs | 26/96 | [1404] `}` | 72.92% 🟡 |

package/demo.js

@@ -616,8 +616,8 @@ async function runTerminalAnimation(width, height, duration = 20000) {
             firstFrame = false;
         } else {
             // Move cursor up to overwrite previous frame
-            process.stdout.write(`\x1b[${numLines}A`);
-            process.stdout.write(output);
+            process.stdout.write(
+                `\x1b[${numLines}A` + output);
         }
 
         lastFrameTime = now;

package/index.js

@@ -1,368 +1,404 @@
-// @ts-check
-
-import {
-  WasmWebGL2RenderingContext,
-  ERR_OK,
-  ERR_INVALID_HANDLE,
-  readErrorMessage,
-  getShaderModule,
-  getShaderWat,
-  getShaderGlsl,
-  decompileWasmToGlsl
-} from './src/webgl2_context.js';
-import { GPU, GPUBufferUsage, GPUMapMode, GPUTextureUsage } from './src/webgpu_context.js';
-
-export const debug = {
-  getLcovReport,
-  resetLcovReport
-};
-
-export { ERR_OK, ERR_INVALID_HANDLE, GPUBufferUsage, GPUMapMode, GPUTextureUsage, getShaderModule, getShaderWat, getShaderGlsl, decompileWasmToGlsl };
-
-/**
- * Simple allocator for function table indices.
- * Tracks which slots are in use to enable reuse.
- */
-class TableAllocator {
-  constructor() {
-    // Rust uses the first ~1900 slots for its indirect function table (dyn calls, etc).
-    // We must valid collision by starting allocations after that region.
-    this.nextIndex = 2000;
-    this.freeList = [];
-  }
-
-  allocate() {
-    if (this.freeList.length > 0) {
-      return this.freeList.pop();
-    }
-    return this.nextIndex++;
-  }
-
-  free(index) {
-    this.freeList.push(index);
-  }
-}
-
-/**
- * WebGL2 Prototype: Rust-owned Context, JS thin-forwarder
- * Implements docs/1.1.1-webgl2-prototype.md
- *
- * This module provides:
- * - WasmWebGL2RenderingContext: JS class that forwards all calls to WASM
- * - webGL2(): factory function to create a new context
- *
- * WASM owns all runtime state (textures, framebuffers, contexts).
- * JS is a thin forwarder with no emulation of WebGL behavior.
- *
- * Explicit lifecycle: caller must call destroy() to free resources.
- * All operations return errno (0 = OK). Non-zero errno causes JS to throw
- * with the message from wasm_last_error_ptr/len.
- */
-
-
-const isNode =
-  typeof process !== 'undefined' &&
-  process.versions != null &&
-  process.versions.node != null;
-
-/** @typedef {number} u32 */
-
-/**
- * Factory function: create a new WebGL2 context.
- *
- * This function:
- * 1. Auto-loads webgl2.wasm (expects it next to index2.js)
- * 2. Instantiates the WASM module with memory
- * 3. Creates a Rust-owned context via wasm_create_context_with_flags(flags)
- * 4. Returns a WasmWebGL2RenderingContext JS wrapper
- *
- * @param {{
- *  debug?: boolean | 'shaders' | 'rust' | 'all',
- *  size?: { width: number, height: number },
- * }} [opts] - options
- * @returns {Promise<WasmWebGL2RenderingContext>}
- * @throws {Error} if WASM loading or instantiation fails
- */
-export async function webGL2({ debug = (typeof process !== 'undefined' ? process?.env || {} : typeof window !== 'undefined' ? window : globalThis).WEBGL2_DEBUG === 'true', size } = {}) {
-  // Determine if we need the debug WASM binary (Rust symbols)
-  const useDebugWasm = debug === true || debug === 'rust' || debug === 'all';
-
-  // Load WASM binary
-  let promise = wasmCache.get(useDebugWasm);
-  if (!promise) {
-    promise = initWASM({ debug: useDebugWasm });
-    wasmCache.set(useDebugWasm, promise);
-    // ensure success is cached but not failure
-    promise.catch(() => {
-      if (wasmCache.get(useDebugWasm) === promise) {
-        wasmCache.delete(useDebugWasm);
-      }
-    });
-  }
-  const { ex, instance, sharedTable, tableAllocator } = await promise;
-
-  // Initialize coverage if available
-  if (ex.wasm_init_coverage && ex.COV_MAP_PTR) {
-    const mapPtr = ex.COV_MAP_PTR.value;
-    // Read num_entries from the start of the map data
-    // mapPtr is aligned to 16 bytes, so we can use Uint32Array
-    const mem = new Uint32Array(ex.memory.buffer);
-    const numEntries = mem[mapPtr >>> 2];
-    ex.wasm_init_coverage(numEntries);
-  }
-
-  // Determine debug flags for creation
-  const debugShaders = debug === true || debug === 'shaders' || debug === 'all';
-  const debugRust = debug === true || debug === 'rust' || debug === 'all';
-  const flags = (debugShaders ? 1 : 0); // only shader debug encoded in flags
-
-  // Default size to 640x480 if not provided
-  const width = size?.width ?? 640;
-  const height = size?.height ?? 480;
-
-  // Create a context in WASM using the flags-aware API (mandatory)
-  const ctxHandle = ex.wasm_create_context_with_flags(flags, width, height);
-
-  if (ctxHandle === 0) {
-    const msg = readErrorMessage(instance);
-    throw new Error(`Failed to create context: ${msg}`);
-  }
-
-  // Wrap and return, pass debug booleans to the JS wrapper
-  const gl = new WasmWebGL2RenderingContext({
-    instance,
-    ctxHandle,
-    width,
-    height,
-    debugShaders: !!debugShaders,
-    sharedTable,
-    tableAllocator
-  });
-
-  if (size && typeof size.width === 'number' && typeof size.height === 'number') {
-    gl.resize(size.width, size.height);
-    gl.viewport(0, 0, size.width, size.height);
-  }
-
-  return gl;
-}
-
-/**
- * Factory function: create a new WebGPU instance.
- *
- * @param {{
- *  debug?: boolean | 'shaders' | 'rust' | 'all',
- * }} [opts] - options
- * @returns {Promise<GPU>}
- */
-export async function webGPU({ debug = (typeof process !== 'undefined' ? process?.env || {} : typeof window !== 'undefined' ? window : globalThis).WEBGL2_DEBUG === 'true' } = {}) {
-  const useDebugWasm = debug === true || debug === 'rust' || debug === 'all';
-  let promise = wasmCache.get(useDebugWasm);
-  if (!promise) {
-    promise = initWASM({ debug: useDebugWasm });
-    wasmCache.set(useDebugWasm, promise);
-    promise.catch(() => {
-      if (wasmCache.get(useDebugWasm) === promise) {
-        wasmCache.delete(useDebugWasm);
-      }
-    });
-  }
-  const { ex, instance } = await promise;
-  return new GPU(ex, ex.memory);
-}
-
-/**
- * @type {Map<boolean, Promise<{ ex: WebAssembly.Exports, instance: WebAssembly.Instance, module: WebAssembly.Module }>>}
- */
-const wasmCache = new Map();
-
-async function initWASM({ debug } = {}) {
-  const wasmFile = debug ? 'webgl2.debug.wasm' : 'webgl2.wasm';
-  let wasmBuffer;
-  if (isNode) {
-    // Use dynamic imports so this module can be loaded in the browser too.
-    const path = await import('path');
-    const fs = await import('fs');
-    const { fileURLToPath } = await import('url');
-    const wasmPath = path.join(path.dirname(fileURLToPath(import.meta.url)), wasmFile);
-    if (!fs.existsSync(wasmPath)) {
-      throw new Error(`WASM not found at ${wasmPath}. Run: npm run build:wasm`);
-    }
-    // readFileSync is available on the imported namespace
-    wasmBuffer = fs.readFileSync(wasmPath);
-  } else {
-    // Browser: fetch the wasm relative to this module
-    const resp = await fetch(new URL('./' + wasmFile, import.meta.url));
-    if (!resp.ok) {
-      throw new Error(`Failed to fetch ${wasmFile}: ${resp.status}`);
-    }
-    wasmBuffer = await resp.arrayBuffer();
-  }
-
-  // Compile WASM module
-  const wasmModule = await WebAssembly.compile(wasmBuffer);
-
-  // Instantiate WASM (no imports needed, memory is exported)
-  let instance;
-
-  // Create shared function table for direct shader calls
-  const sharedTable = new WebAssembly.Table({
-    initial: 4096,   // WASM module requires at least 1982
-    maximum: 4096,   // Prevent unbounded growth
-    element: "anyfunc"
-  });
-  const tableAllocator = new TableAllocator();
-
-  const importObject = {
-    env: {
-      __indirect_function_table: sharedTable,  // Exact name LLVM expects
-      print: (ptr, len) => {
-        const mem = new Uint8Array(instance.exports.memory.buffer);
-        const bytes = mem.subarray(ptr, ptr + len);
-        console.log(new TextDecoder('utf-8').decode(bytes));
-      },
-      wasm_execute_shader: (ctx, type, tableIdx, attrPtr, uniformPtr, varyingPtr, privatePtr, texturePtr) => {
-        const gl = WasmWebGL2RenderingContext._contexts.get(ctx);
-        if (gl) {
-          gl._executeShader(type, tableIdx, attrPtr, uniformPtr, varyingPtr, privatePtr, texturePtr);
-        } else {
-          // console.log(`DEBUG: wasm_execute_shader: ctx ${ctx} not found in _contexts`);
-        }
-      },
-      dispatch_uncaptured_error: (ptr, len) => {
-        const mem = new Uint8Array(instance.exports.memory.buffer);
-        const bytes = mem.subarray(ptr, ptr + len);
-        const msg = new TextDecoder('utf-8').decode(bytes);
-        if (typeof GPU !== 'undefined' && typeof GPU.dispatchUncapturedError === 'function') {
-          GPU.dispatchUncapturedError(msg);
-        } else {
-          console.error("GPU.dispatchUncapturedError not available", msg);
-        }
-      },
-      // Required by egg crate for timing measurements
-      now: () => {
-        return performance.now();
-      }
-    },
-    math: {
-      sin: Math.sin,
-      cos: Math.cos,
-      tan: Math.tan,
-      asin: Math.asin,
-      acos: Math.acos,
-      atan: Math.atan,
-      atan2: Math.atan2,
-      exp: Math.exp,
-      exp2: (x) => Math.pow(2, x),
-      log: Math.log,
-      log2: Math.log2,
-      pow: Math.pow
-    }
-  };
-  instance = await WebAssembly.instantiate(wasmModule, importObject);
-
-  // Verify required exports
-  const ex = instance.exports;
-  if (typeof ex.wasm_create_context_with_flags !== 'function') {
-    throw new Error('WASM module missing wasm_create_context_with_flags export');
-  }
-  if (!(ex.memory instanceof WebAssembly.Memory)) {
-    throw new Error('WASM module missing memory export');
-  }
-  return { ex, instance, module: wasmModule, sharedTable, tableAllocator };
-}
-
-/**
- * Reads an error message from WASM memory and returns it.
- * @param {WebAssembly.Instance} instance
- * @returns {string}
- */
-function _readErrorMessage(instance) {
-  const ex = instance.exports;
-  if (!ex || typeof ex.wasm_last_error_ptr !== 'function' || typeof ex.wasm_last_error_len !== 'function') {
-    return '(no error message available)';
-  }
-  const ptr = ex.wasm_last_error_ptr();
-  const len = ex.wasm_last_error_len();
-  if (ptr === 0 || len === 0) {
-    return '';
-  }
-  const mem = new Uint8Array(ex.memory.buffer);
-  const bytes = mem.subarray(ptr, ptr + len);
-  return new TextDecoder('utf-8').decode(bytes);
-}
-
-/**
- * Get LCOV coverage report from a context or device.
- * @param {any} glOrGpu
- * @returns {string}
- */
-function getLcovReport(glOrGpu) {
-  if (!glOrGpu) return '';
-
-  let ex;
-  if (glOrGpu._instance && glOrGpu._instance.exports) {
-    ex = glOrGpu._instance.exports;
-  } else if (glOrGpu.wasm) {
-    ex = glOrGpu.wasm;
-  } else if (glOrGpu._instance) {
-    ex = glOrGpu._instance;
-  }
-
-  if (ex && typeof ex.wasm_get_lcov_report_ptr === 'function' && typeof ex.wasm_get_lcov_report_len === 'function') {
-    const ptr = ex.wasm_get_lcov_report_ptr();
-    const len = ex.wasm_get_lcov_report_len();
-    if (ptr === 0 || len === 0) return '';
-    const mem = new Uint8Array(ex.memory.buffer);
-    const bytes = mem.subarray(ptr, ptr + len);
-    return new TextDecoder('utf-8').decode(bytes);
-  }
-  return '';
-}
-
-/**
- * Reset LCOV coverage counters.
- * @param {any} glOrGpu
- */
-export function resetLcovReport(glOrGpu) {
-  if (!glOrGpu) return;
-
-  let ex;
-  if (glOrGpu._instance && glOrGpu._instance.exports) {
-    ex = glOrGpu._instance.exports;
-  } else if (glOrGpu.wasm) {
-    ex = glOrGpu.wasm;
-  } else if (glOrGpu._instance) {
-    ex = glOrGpu._instance;
-  }
-
-  if (ex && typeof ex.wasm_reset_coverage === 'function') {
-    ex.wasm_reset_coverage();
-  }
-}
-
-/**
- * Checks a WASM return code (errno).
- * If non-zero, reads the error message and throws.
- * @param {number} code
- * @param {WebAssembly.Instance} instance
- * @throws {Error} if code !== 0
- */
-function _checkErr(code, instance) {
-  if (code === ERR_OK) return;
-  const msg = _readErrorMessage(instance);
-  throw new Error(`WASM error ${code}: ${msg}`);
-}
-
-if (typeof window !== 'undefined' && window) {
-  // also populate globals when running in a browser environment
-  try {
-    window.webGL2 = webGL2;
-    window.webGPU = webGPU;
-    window.getLcovReport = getLcovReport;
-    window.resetLcovReport = resetLcovReport;
-    window.WasmWebGL2RenderingContext = WasmWebGL2RenderingContext;
-  } catch (e) {
-    // ignore if window is not writable
-  }
-}
+// @ts-check
+
+import {
+  WasmWebGL2RenderingContext,
+  ERR_OK,
+  ERR_INVALID_HANDLE,
+  readErrorMessage,
+  getShaderModule,
+  getShaderWat,
+  getShaderGlsl,
+  decompileWasmToGlsl
+} from './src/webgl2_context.js';
+import { GPU, GPUBufferUsage, GPUMapMode, GPUTextureUsage } from './src/webgpu_context.js';
+
+export const debug = {
+  getLcovReport,
+  resetLcovReport
+};
+
+export { ERR_OK, ERR_INVALID_HANDLE, GPUBufferUsage, GPUMapMode, GPUTextureUsage, getShaderModule, getShaderWat, getShaderGlsl, decompileWasmToGlsl };
+
+/**
+ * Simple allocator for function table indices.
+ * Tracks which slots are in use to enable reuse.
+ */
+class TableAllocator {
+  constructor() {
+    // Rust uses the first ~1900 slots for its indirect function table (dyn calls, etc).
+    // We must valid collision by starting allocations after that region.
+    this.nextIndex = 2000;
+    this.freeList = [];
+  }
+
+  allocate() {
+    if (this.freeList.length > 0) {
+      return this.freeList.pop();
+    }
+    return this.nextIndex++;
+  }
+
+  free(index) {
+    this.freeList.push(index);
+  }
+}
+
+/**
+ * WebGL2 Prototype: Rust-owned Context, JS thin-forwarder
+ * Implements docs/1.1.1-webgl2-prototype.md
+ *
+ * This module provides:
+ * - WasmWebGL2RenderingContext: JS class that forwards all calls to WASM
+ * - webGL2(): factory function to create a new context
+ *
+ * WASM owns all runtime state (textures, framebuffers, contexts).
+ * JS is a thin forwarder with no emulation of WebGL behavior.
+ *
+ * Explicit lifecycle: caller must call destroy() to free resources.
+ * All operations return errno (0 = OK). Non-zero errno causes JS to throw
+ * with the message from wasm_last_error_ptr/len.
+ */
+
+
+const isNode =
+  typeof process !== 'undefined' &&
+  process.versions != null &&
+  process.versions.node != null;
+
+/** @typedef {number} u32 */
+
+/**
+ * Factory function: create a new WebGL2 context.
+ *
+ * This function:
+ * 1. Auto-loads webgl2.wasm (expects it next to index2.js)
+ * 2. Instantiates the WASM module with memory
+ * 3. Creates a Rust-owned context via wasm_create_context_with_flags(flags)
+ * 4. Returns a WasmWebGL2RenderingContext JS wrapper
+ *
+ * @param {{
+ *  debug?: boolean | 'shaders' | 'rust' | 'all',
+ *  size?: { width: number, height: number },
+ * }} [opts] - options
+ * @returns {Promise<WasmWebGL2RenderingContext>}
+ * @throws {Error} if WASM loading or instantiation fails
+ */
+export async function webGL2({ debug = (typeof process !== 'undefined' ? process?.env || {} : typeof window !== 'undefined' ? window : globalThis).WEBGL2_DEBUG === 'true', size } = {}) {
+  // Determine if we need the debug WASM binary (Rust symbols)
+  const useDebugWasm = debug === true || debug === 'rust' || debug === 'all';
+
+  // Load WASM binary
+  let promise = wasmCache.get(useDebugWasm);
+  if (!promise) {
+    promise = initWASM({ debug: useDebugWasm });
+    wasmCache.set(useDebugWasm, promise);
+    // ensure success is cached but not failure
+    promise.catch(() => {
+      if (wasmCache.get(useDebugWasm) === promise) {
+        wasmCache.delete(useDebugWasm);
+      }
+    });
+  }
+  const { ex, instance, sharedTable, tableAllocator } = await promise;
+
+  // Initialize coverage if available
+  if (ex.wasm_init_coverage && ex.COV_MAP_PTR) {
+    const mapPtr = ex.COV_MAP_PTR.value;
+    // Read num_entries from the start of the map data
+    // mapPtr is aligned to 16 bytes, so we can use Uint32Array
+    const mem = new Uint32Array(ex.memory.buffer);
+    const numEntries = mem[mapPtr >>> 2];
+    ex.wasm_init_coverage(numEntries);
+  }
+
+  // Determine debug flags for creation
+  const debugShaders = debug === true || debug === 'shaders' || debug === 'all';
+  const debugRust = debug === true || debug === 'rust' || debug === 'all';
+  const flags = (debugShaders ? 1 : 0); // only shader debug encoded in flags
+
+  // Default size to 640x480 if not provided
+  const width = size?.width ?? 640;
+  const height = size?.height ?? 480;
+
+  // Create a context in WASM using the flags-aware API (mandatory)
+  const ctxHandle = ex.wasm_create_context_with_flags(flags, width, height);
+
+  if (ctxHandle === 0) {
+    const msg = readErrorMessage(instance);
+    throw new Error(`Failed to create context: ${msg}`);
+  }
+
+  // Wrap and return, pass debug booleans to the JS wrapper
+  const gl = new WasmWebGL2RenderingContext({
+    instance,
+    ctxHandle,
+    width,
+    height,
+    debugShaders: !!debugShaders,
+    sharedTable,
+    tableAllocator
+  });
+
+  if (size && typeof size.width === 'number' && typeof size.height === 'number') {
+    gl.resize(size.width, size.height);
+    gl.viewport(0, 0, size.width, size.height);
+  }
+
+  return gl;
+}
+
+/**
+ * Factory function: create a new WebGPU instance.
+ *
+ * @param {{
+ *  debug?: boolean | 'shaders' | 'rust' | 'all',
+ * }} [opts] - options
+ * @returns {Promise<GPU>}
+ */
+export async function webGPU({ debug = (typeof process !== 'undefined' ? process?.env || {} : typeof window !== 'undefined' ? window : globalThis).WEBGL2_DEBUG === 'true' } = {}) {
+  const useDebugWasm = debug === true || debug === 'rust' || debug === 'all';
+  let promise = wasmCache.get(useDebugWasm);
+  if (!promise) {
+    promise = initWASM({ debug: useDebugWasm });
+    wasmCache.set(useDebugWasm, promise);
+    promise.catch(() => {
+      if (wasmCache.get(useDebugWasm) === promise) {
+        wasmCache.delete(useDebugWasm);
+      }
+    });
+  }
+  const { ex, instance } = await promise;
+  return new GPU(ex, ex.memory);
+}
+
+/**
+ * @type {Map<boolean, Promise<{ ex: WebAssembly.Exports, instance: WebAssembly.Instance, module: WebAssembly.Module }>>}
+ */
+const wasmCache = new Map();
+
+async function initWASM({ debug } = {}) {
+  const wasmFile = debug ? 'webgl2.debug.wasm' : 'webgl2.wasm';
+  let wasmBuffer;
+  if (isNode) {
+    // Use dynamic imports so this module can be loaded in the browser too.
+    const path = await import('path');
+    const fs = await import('fs');
+    const { fileURLToPath } = await import('url');
+    const wasmPath = path.join(path.dirname(fileURLToPath(import.meta.url)), wasmFile);
+    if (!fs.existsSync(wasmPath)) {
+      throw new Error(`WASM not found at ${wasmPath}. Run: npm run build:wasm`);
+    }
+    // readFileSync is available on the imported namespace
+    wasmBuffer = fs.readFileSync(wasmPath);
+  } else {
+    // Browser: fetch the wasm relative to this module
+    const resp = await fetch(new URL('./' + wasmFile, import.meta.url));
+    if (!resp.ok) {
+      throw new Error(`Failed to fetch ${wasmFile}: ${resp.status}`);
+    }
+    wasmBuffer = await resp.arrayBuffer();
+  }
+
+  // Compile WASM module
+  const wasmModule = await WebAssembly.compile(wasmBuffer);
+
+  // Instantiate WASM (no imports needed, memory is exported)
+  let instance;
+
+  // Create shared function table for direct shader calls
+  const sharedTable = new WebAssembly.Table({
+    initial: 4096,   // Increased from 4096 to handle larger modules
+    maximum: 8192,   // Prevent unbounded growth
+    element: "anyfunc"
+  });
+  const tableAllocator = new TableAllocator();
+
+  const importObject = {
+    env: {
+      __indirect_function_table: sharedTable,  // Exact name LLVM expects
+      print: (ptr, len) => {
+        const mem = new Uint8Array(instance.exports.memory.buffer);
+        const bytes = mem.subarray(ptr, ptr + len);
+        console.log(new TextDecoder('utf-8').decode(bytes));
+      },
+      wasm_execute_shader: (ctx, type, tableIdx, attrPtr, uniformPtr, varyingPtr, privatePtr, texturePtr) => {
+        const gl = WasmWebGL2RenderingContext._contexts.get(ctx);
+        if (gl) {
+          gl._executeShader(type, tableIdx, attrPtr, uniformPtr, varyingPtr, privatePtr, texturePtr);
+        } else {
+            // General device execution (WebGPU)
+            if (tableIdx > 0 && sharedTable) {
+                const func = sharedTable.get(tableIdx);
+                if (func) {
+                    func(ctx, type, tableIdx, attrPtr, uniformPtr, varyingPtr, privatePtr, texturePtr);
+                }
+            }
+        }
+      },
+      wasm_register_shader: (ptr, len) => {
+        const mem = new Uint8Array(instance.exports.memory.buffer);
+        const bytes = mem.slice(ptr, ptr + len);
+        const shaderModule = new WebAssembly.Module(bytes);
+        const index = tableAllocator.allocate();
+        
+        const env = {
+          memory: instance.exports.memory,
+          __indirect_function_table: sharedTable,
+        };
+        
+        // Copy math functions
+        const mathFuncs = [
+          'gl_cos', 'gl_sin', 'gl_tan', 'gl_acos', 'gl_asin', 'gl_atan', 'gl_atan2',
+          'gl_exp', 'gl_exp2', 'gl_log', 'gl_log2', 'gl_pow', 'gl_floor', 'gl_ceil',
+          'gl_fract', 'gl_mod', 'gl_min', 'gl_max', 'gl_abs', 'gl_sign', 'gl_sqrt',
+          'gl_inversesqrt', 'gl_sinh', 'gl_cosh', 'gl_tanh', 'gl_asinh', 'gl_acosh', 'gl_atanh'
+        ];
+        for (const name of mathFuncs) {
+          if (instance.exports[name]) {
+            env[name] = instance.exports[name];
+          }
+        }
+
+        const shaderInstance = new WebAssembly.Instance(shaderModule, { env });
+        if (shaderInstance.exports.main) {
+          sharedTable.set(index, shaderInstance.exports.main);
+        }
+        return index;
+      },
+      dispatch_uncaptured_error: (ptr, len) => {
+        const mem = new Uint8Array(instance.exports.memory.buffer);
+        const bytes = mem.subarray(ptr, ptr + len);
+        const msg = new TextDecoder('utf-8').decode(bytes);
+        if (typeof GPU !== 'undefined' && typeof GPU.dispatchUncapturedError === 'function') {
+          GPU.dispatchUncapturedError(msg);
+        } else {
+          console.error("GPU.dispatchUncapturedError not available", msg);
+        }
+      },
+      // Required by egg crate for timing measurements
+      now: () => {
+        return performance.now();
+      }
+    },
+    math: {
+      sin: Math.sin,
+      cos: Math.cos,
+      tan: Math.tan,
+      asin: Math.asin,
+      acos: Math.acos,
+      atan: Math.atan,
+      atan2: Math.atan2,
+      exp: Math.exp,
+      exp2: (x) => Math.pow(2, x),
+      log: Math.log,
+      log2: Math.log2,
+      pow: Math.pow
+    }
+  };
+  instance = await WebAssembly.instantiate(wasmModule, importObject);
+
+  // Verify required exports
+  const ex = instance.exports;
+  if (typeof ex.wasm_create_context_with_flags !== 'function') {
+    throw new Error('WASM module missing wasm_create_context_with_flags export');
+  }
+  if (!(ex.memory instanceof WebAssembly.Memory)) {
+    throw new Error('WASM module missing memory export');
+  }
+  return { ex, instance, module: wasmModule, sharedTable, tableAllocator };
+}
+
+/**
+ * Reads an error message from WASM memory and returns it.
+ * @param {WebAssembly.Instance} instance
+ * @returns {string}
+ */
+function _readErrorMessage(instance) {
+  const ex = instance.exports;
+  if (!ex || typeof ex.wasm_last_error_ptr !== 'function' || typeof ex.wasm_last_error_len !== 'function') {
+    return '(no error message available)';
+  }
+  const ptr = ex.wasm_last_error_ptr();
+  const len = ex.wasm_last_error_len();
+  if (ptr === 0 || len === 0) {
+    return '';
+  }
+  const mem = new Uint8Array(ex.memory.buffer);
+  const bytes = mem.subarray(ptr, ptr + len);
+  return new TextDecoder('utf-8').decode(bytes);
+}
+
+/**
+ * Get LCOV coverage report from a context or device.
+ * @param {any} glOrGpu
+ * @returns {string}
+ */
+function getLcovReport(glOrGpu) {
+  if (!glOrGpu) return '';
+
+  let ex;
+  if (glOrGpu._instance && glOrGpu._instance.exports) {
+    ex = glOrGpu._instance.exports;
+  } else if (glOrGpu.wasm) {
+    ex = glOrGpu.wasm;
+  } else if (glOrGpu._instance) {
+    ex = glOrGpu._instance;
+  }
+
+  if (ex && typeof ex.wasm_get_lcov_report_ptr === 'function' && typeof ex.wasm_get_lcov_report_len === 'function') {
+    const ptr = ex.wasm_get_lcov_report_ptr();
+    const len = ex.wasm_get_lcov_report_len();
+    if (ptr === 0 || len === 0) return '';
+    const mem = new Uint8Array(ex.memory.buffer);
+    const bytes = mem.subarray(ptr, ptr + len);
+    return new TextDecoder('utf-8').decode(bytes);
+  }
+  return '';
+}
+
+/**
+ * Reset LCOV coverage counters.
+ * @param {any} glOrGpu
+ */
+export function resetLcovReport(glOrGpu) {
+  if (!glOrGpu) return;
+
+  let ex;
+  if (glOrGpu._instance && glOrGpu._instance.exports) {
+    ex = glOrGpu._instance.exports;
+  } else if (glOrGpu.wasm) {
+    ex = glOrGpu.wasm;
+  } else if (glOrGpu._instance) {
+    ex = glOrGpu._instance;
+  }
+
+  if (ex && typeof ex.wasm_reset_coverage === 'function') {
+    ex.wasm_reset_coverage();
+  }
+}
+
+/**
+ * Checks a WASM return code (errno).
+ * If non-zero, reads the error message and throws.
+ * @param {number} code
+ * @param {WebAssembly.Instance} instance
+ * @throws {Error} if code !== 0
+ */
+function _checkErr(code, instance) {
+  if (code === ERR_OK) return;
+  const msg = _readErrorMessage(instance);
+  throw new Error(`WASM error ${code}: ${msg}`);
+}
+
+if (typeof window !== 'undefined' && window) {
+  // also populate globals when running in a browser environment
+  try {
+    window.webGL2 = webGL2;
+    window.webGPU = webGPU;
+    window.getLcovReport = getLcovReport;
+    window.resetLcovReport = resetLcovReport;
+    window.WasmWebGL2RenderingContext = WasmWebGL2RenderingContext;
+  } catch (e) {
+    // ignore if window is not writable
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgl2",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "WebGL2 tools to derisk large GPU projects on the web beyond toys and demos.",
   "type": "module",
   "main": "index.js",

package/src/webgl2_context.js

@@ -30,6 +30,7 @@ export class WasmWebGL2RenderingContext {
   DEPTH_BUFFER_BIT = 0x00000100;
   DEPTH_TEST = 0x0B71;
   STENCIL_TEST = 0x0B90;
+  SCISSOR_TEST = 0x0C11;
   STENCIL_BUFFER_BIT = 0x00000400;
   COMPILE_STATUS = 0x8B81;
   LINK_STATUS = 0x8B82;
@@ -37,6 +38,12 @@ export class WasmWebGL2RenderingContext {
   VALIDATE_STATUS = 0x8B83;
   ARRAY_BUFFER = 0x8892;
   ELEMENT_ARRAY_BUFFER = 0x8893;
+  COPY_READ_BUFFER = 0x8F36;
+  COPY_WRITE_BUFFER = 0x8F37;
+  PIXEL_PACK_BUFFER = 0x88EB;
+  PIXEL_UNPACK_BUFFER = 0x88EC;
+  UNIFORM_BUFFER = 0x8A11;
+  TRANSFORM_FEEDBACK_BUFFER = 0x8C8E;
   STATIC_DRAW = 0x88E4;
   BYTE = 0x1400;
   UNSIGNED_BYTE = 0x1401;
@@ -108,6 +115,8 @@ export class WasmWebGL2RenderingContext {
 
   RENDERBUFFER = 0x8D41;
   FRAMEBUFFER = 0x8D40;
+  READ_FRAMEBUFFER = 0x8CA8;
+  DRAW_FRAMEBUFFER = 0x8CA9;
   DEPTH_COMPONENT16 = 0x81A5;
   DEPTH_STENCIL = 0x84F9;
   RGBA4 = 0x8056;
@@ -1432,7 +1441,22 @@ export class WasmWebGL2RenderingContext {
       ex.wasm_free(ptr);
     }
   }
-  copyBufferSubData(readTarget, writeTarget, readOffset, writeOffset, size) { this._assertNotDestroyed(); throw new Error('not implemented'); }
+  copyBufferSubData(readTarget, writeTarget, readOffset, writeOffset, size) {
+    this._assertNotDestroyed();
+    const ex = this._instance.exports;
+    if (!ex || typeof ex.wasm_ctx_copy_buffer_sub_data !== 'function') {
+      throw new Error('wasm_ctx_copy_buffer_sub_data not found');
+    }
+    const code = ex.wasm_ctx_copy_buffer_sub_data(
+      this._ctxHandle,
+      readTarget >>> 0,
+      writeTarget >>> 0,
+      readOffset >>> 0,
+      writeOffset >>> 0,
+      size >>> 0
+    );
+    _checkErr(code, this._instance);
+  }
   getBufferParameter(target, pname) {
     this._assertNotDestroyed();
     const ex = this._instance.exports;
@@ -1664,7 +1688,20 @@ export class WasmWebGL2RenderingContext {
   }
 
   checkFramebufferStatus(target) { this._assertNotDestroyed(); throw new Error('not implemented'); }
-  blitFramebuffer(srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter) { this._assertNotDestroyed(); throw new Error('not implemented'); }
+  blitFramebuffer(srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter) {
+    this._assertNotDestroyed();
+    const ex = this._instance.exports;
+    if (!ex || typeof ex.wasm_ctx_blit_framebuffer !== 'function') {
+      throw new Error('wasm_ctx_blit_framebuffer not found');
+    }
+    const code = ex.wasm_ctx_blit_framebuffer(
+      this._ctxHandle,
+      srcX0 | 0, srcY0 | 0, srcX1 | 0, srcY1 | 0,
+      dstX0 | 0, dstY0 | 0, dstX1 | 0, dstY1 | 0,
+      mask >>> 0, filter >>> 0
+    );
+    _checkErr(code, this._instance);
+  }
   readBuffer(src) { this._assertNotDestroyed(); throw new Error('not implemented'); }
 
   pixelStorei(pname, param) { this._assertNotDestroyed(); throw new Error('not implemented'); }

package/src/webgpu_context.js

@@ -91,17 +91,17 @@ export class GPU {
         // In Node.js, Event might not be available globally or might behave differently.
         // But we are using 'node:test' which implies Node environment.
         // If Event is not defined, we might need a polyfill or just call the handler directly.
-        
+
         const error = new GPUError(msg);
-        
+
         for (const device of activeDevices) {
             if (typeof device.onuncapturederror === 'function') {
                 device.onuncapturederror({ error });
             }
             // Also dispatch as event if supported
             if (typeof Event !== 'undefined') {
-                 const event = new GPUUncapturedErrorEvent('uncapturederror', { error });
-                 device.dispatchEvent(event);
+                const event = new GPUUncapturedErrorEvent('uncapturederror', { error });
+                device.dispatchEvent(event);
             }
         }
     }
@@ -200,7 +200,7 @@ export class GPUDevice extends (typeof EventTarget !== 'undefined' ? EventTarget
         if (filter === 'validation') filterCode = 0;
         else if (filter === 'out-of-memory') filterCode = 1;
         else if (filter === 'internal') filterCode = 2;
-        
+
         this.wasm.wasm_webgpu_push_error_scope(filterCode);
     }
 
@@ -379,6 +379,45 @@ export class GPUDevice extends (typeof EventTarget !== 'undefined' ? EventTarget
             layoutHandle = descriptor.layout.layoutHandle;
         }
 
+        const primitiveTopology = {
+            'point-list': 1,
+            'line-list': 2,
+            'line-strip': 3,
+            'triangle-list': 4,
+            'triangle-strip': 5,
+        }[descriptor.primitive?.topology || 'triangle-list'] || 4;
+
+        const depthStencil = descriptor.depthStencil;
+        const depthFormat = {
+            'depth32float': 1,
+            'depth24plus': 2,
+            'depth24plus-stencil8': 3,
+        }[depthStencil?.format] || 0;
+
+        const depthCompare = {
+            'never': 1,
+            'less': 2,
+            'equal': 3,
+            'less-equal': 4,
+            'greater': 5,
+            'not-equal': 6,
+            'greater-equal': 7,
+            'always': 8,
+        }[depthStencil?.depthCompare || 'less'] || 2;
+
+        const blendFactorMap = {
+            'zero': 0, 'one': 1, 'src': 2, 'one-minus-src': 3,
+            'src-alpha': 4, 'one-minus-src-alpha': 5,
+            'dst': 6, 'one-minus-dst': 7, 'dst-alpha': 8, 'one-minus-dst-alpha': 9,
+        };
+
+        const blendOpMap = {
+            'add': 0, 'subtract': 1, 'reverse-subtract': 2, 'min': 3, 'max': 4,
+        };
+
+        const fragmentTarget = descriptor.fragment.targets?.[0];
+        const blend = fragmentTarget?.blend;
+
         const pipelineHandle = this.wasm.wasm_webgpu_create_render_pipeline(
             this.ctxHandle,
             this.deviceHandle,
@@ -390,7 +429,18 @@ export class GPUDevice extends (typeof EventTarget !== 'undefined' ? EventTarget
             fBytes.length,
             lPtr,
             layoutData.length,
-            layoutHandle
+            layoutHandle,
+            primitiveTopology,
+            depthFormat,
+            depthStencil?.depthWriteEnabled ? 1 : 0,
+            depthCompare,
+            blend ? 1 : 0,
+            blendFactorMap[blend?.color?.srcFactor] || 0,
+            blendFactorMap[blend?.color?.dstFactor] || 0,
+            blendOpMap[blend?.color?.operation] || 0,
+            blendFactorMap[blend?.alpha?.srcFactor] || 0,
+            blendFactorMap[blend?.alpha?.dstFactor] || 0,
+            blendOpMap[blend?.alpha?.operation] || 0
         );
 
         this.wasm.wasm_free(vPtr, vBytes.length);
@@ -576,7 +626,66 @@ export class GPUQueue {
      * @param {number} size
      */
     writeBuffer(buffer, bufferOffset, data, dataOffset = 0, size) {
-        // TODO: Call wasm function to write buffer
+        const srcData = data instanceof ArrayBuffer ? new Uint8Array(data) : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+        const actualSize = size !== undefined ? size : srcData.byteLength - dataOffset;
+        const subData = srcData.subarray(dataOffset, dataOffset + actualSize);
+
+        const ptr = this.wasm.wasm_alloc(subData.byteLength);
+        const heap = new Uint8Array(this.memory.buffer, ptr, subData.byteLength);
+        heap.set(subData);
+
+        this.wasm.wasm_webgpu_queue_write_buffer(
+            this.ctxHandle,
+            this.queueHandle,
+            buffer.bufferHandle,
+            BigInt(bufferOffset),
+            ptr,
+            subData.byteLength
+        );
+
+        this.wasm.wasm_free(ptr, subData.byteLength);
+    }
+
+    /**
+     * Write data to a texture
+     * @param {Object} destination
+     * @param {ArrayBuffer|TypedArray} data
+     * @param {Object} dataLayout
+     * @param {Object} size
+     */
+    writeTexture(destination, data, dataLayout, size) {
+        const srcData = data instanceof ArrayBuffer ? new Uint8Array(data) : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+        const subData = dataLayout.offset ? srcData.subarray(dataLayout.offset) : srcData;
+
+        const ptr = this.wasm.wasm_alloc(subData.byteLength);
+        const heap = new Uint8Array(this.memory.buffer, ptr, subData.byteLength);
+        heap.set(subData);
+
+        let width, height, depthOrArrayLayers;
+        if (Array.isArray(size)) {
+            width = size[0];
+            height = size[1] || 1;
+            depthOrArrayLayers = size[2] || 1;
+        } else {
+            width = size.width;
+            height = size.height || 1;
+            depthOrArrayLayers = size.depthOrArrayLayers || 1;
+        }
+
+        this.wasm.wasm_webgpu_queue_write_texture(
+            this.ctxHandle,
+            this.queueHandle,
+            destination.texture.textureHandle,
+            ptr,
+            subData.byteLength,
+            dataLayout.bytesPerRow || 0,
+            dataLayout.rowsPerImage || 0,
+            width,
+            height,
+            depthOrArrayLayers
+        );
+
+        this.wasm.wasm_free(ptr, subData.byteLength);
     }
 }
 
@@ -818,6 +927,18 @@ export class GPURenderPassEncoder {
         this.commands.push(4, index, bindGroup.bindGroupHandle);
     }
 
+    /**
+     * Set index buffer
+     * @param {GPUBuffer} buffer
+     * @param {string} indexFormat
+     * @param {number} offset
+     * @param {number} size
+     */
+    setIndexBuffer(buffer, indexFormat, offset = 0, size) {
+        const formatId = indexFormat === 'uint32' ? 2 : 1;
+        this.commands.push(5, buffer.bufferHandle, formatId, offset, size || (buffer.size - offset));
+    }
+
     /**
      * Draw vertices
      * @param {number} vertexCount
@@ -829,6 +950,51 @@ export class GPURenderPassEncoder {
         this.commands.push(3, vertexCount, instanceCount, firstVertex, firstInstance);
     }
 
+    /**
+     * Draw indexed vertices
+     * @param {number} indexCount
+     * @param {number} instanceCount
+     * @param {number} firstIndex
+     * @param {number} baseVertex
+     * @param {number} firstInstance
+     */
+    drawIndexed(indexCount, instanceCount = 1, firstIndex = 0, baseVertex = 0, firstInstance = 0) {
+        this.commands.push(6, indexCount, instanceCount, firstIndex, baseVertex, firstInstance);
+    }
+
+    /**
+     * Set viewport
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {number} minDepth
+     * @param {number} maxDepth
+     */
+    setViewport(x, y, width, height, minDepth, maxDepth) {
+        // Use Float32Array to get bit representation of floats
+        const f32 = new Float32Array(6);
+        f32[0] = x;
+        f32[1] = y;
+        f32[2] = width;
+        f32[3] = height;
+        f32[4] = minDepth;
+        f32[5] = maxDepth;
+        const u32 = new Uint32Array(f32.buffer);
+        this.commands.push(7, u32[0], u32[1], u32[2], u32[3], u32[4], u32[5]);
+    }
+
+    /**
+     * Set scissor rectangle
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+    setScissorRect(x, y, width, height) {
+        this.commands.push(8, x, y, width, height);
+    }
+
     /**
      * End the render pass
      */
@@ -973,6 +1139,105 @@ export function createWebGPU(wasmModule, wasmMemory) {
     return new GPU(wasmModule, wasmMemory);
 }
 
+export class GPUCanvasContext {
+    /**
+     * @param {*} wasmModule
+     * @param {WebAssembly.Memory} wasmMemory
+     * @param {HTMLCanvasElement} canvas
+     */
+    constructor(wasmModule, wasmMemory, canvas) {
+        this.wasm = wasmModule;
+        this.memory = wasmMemory;
+        this.canvas = canvas;
+        this.device = null;
+        this.format = 'rgba8unorm';
+        this.usage = GPUTextureUsage.RENDER_ATTACHMENT;
+        this.width = canvas.width;
+        this.height = canvas.height;
+    }
+
+    /**
+     * Configure the context
+     * @param {Object} descriptor
+     */
+    configure(descriptor) {
+        this.device = descriptor.device;
+        this.format = descriptor.format || 'rgba8unorm';
+        this.usage = descriptor.usage || GPUTextureUsage.RENDER_ATTACHMENT;
+        this.alphaMode = descriptor.alphaMode || 'opaque';
+
+        // Resize canvas internal buffer if needed
+        if (this.canvas.width !== this.width || this.canvas.height !== this.height) {
+            this.width = this.canvas.width;
+            this.height = this.canvas.height;
+        }
+    }
+
+    unconfigure() {
+        this.device = null;
+    }
+
+    /**
+     * Get the current texture to render into
+     * @returns {GPUTexture}
+     */
+    getCurrentTexture() {
+        if (!this.device) {
+            throw new Error("Context not configured");
+        }
+
+        // Create a temporary texture that represents the canvas surface
+        // In a real implementation, this would be a managed swapchain texture.
+        // For SoftApi, we just create a regular texture that we will present later.
+        return this.device.createTexture({
+            size: { width: this.width, height: this.height, depthOrArrayLayers: 1 },
+            format: this.format,
+            usage: this.usage | GPUTextureUsage.COPY_SRC
+        });
+    }
+
+    /**
+     * Present the current texture to the canvas
+     * This is a non-standard method for our Soft-GPU to bridge to the browser display.
+     * @param {GPUTexture} texture
+     */
+    present(texture) {
+        const ctx2d = this.canvas.getContext('2d');
+        if (!ctx2d) return;
+
+        const width = texture.width;
+        const height = texture.height;
+
+        // Use readPixels-like logic to get data from WASM
+        const len = width * height * 4;
+
+        // We need a buffer to copy the texture to
+        const buffer = this.device.createBuffer({
+            size: len,
+            usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+        });
+
+        const encoder = this.device.createCommandEncoder();
+        encoder.copyTextureToBuffer(
+            { texture: texture },
+            { buffer: buffer, bytesPerRow: width * 4 },
+            { width, height, depthOrArrayLayers: 1 }
+        );
+        this.device.queue.submit([encoder.finish()]);
+
+        // Map and copy to canvas
+        buffer.mapAsync(GPUMapMode.READ).then(() => {
+            const data = buffer.getMappedRange();
+            const clamped = new Uint8ClampedArray(data.buffer, data.byteOffset, data.byteLength);
+            const imageData = new ImageData(clamped, width, height);
+            ctx2d.putImageData(imageData, 0, 0);
+            buffer.unmap();
+            buffer.destroy();
+            texture.destroy();
+        });
+    }
+}
+
 export class GPUPipelineLayout {
     constructor(wasmModule, wasmMemory, ctxHandle, layoutHandle) {
         this.wasm = wasmModule;