[GH-ISSUE #3727] [Feature] WebGPU application reverse engineering: WGSL, pipelines, bind groups, compute passes and JavaScript-to-GPU graphs #1439

New issue

Open

opened 2026-10-16 21:05:26 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-10-16 21:05:26 +00:00

Owner

Originally created by @matbrgz on GitHub (Oct 14, 2026).
Original GitHub issue: https://github.com/morluto/rea/issues/3727

Problem Statement & Context

WebGPU is the modern W3C graphics and compute standard now supported natively across all major browsers (Chrome, Edge, Firefox, Safari) and desktop runtimes (Deno, Node.js with Dawn/wgpu). It replaces WebGL with a low-overhead, compute-first API modeled after Vulkan, Metal, and DirectX 12.

WebGPU is rapidly becoming the dominant execution substrate for in-browser 3D rendering, creative media tools, and client-side machine learning inference (WebLLM, Transformers.js, ONNX Runtime Web).

While REA issue #3620 covers low-level compiled GPU bytecode (SPIR-V, DXBC, DXIL, Metal), WebGPU introduces a distinct application-level architecture that sits between JavaScript/TypeScript and the GPU hardware:

WebGPU Shading Language (WGSL): A text-based, strongly-typed shading language with custom attributes (@vertex, @fragment, @compute, @workgroup_size, @group(N), @binding(M)).
Pipelines & Bind Groups: GPURenderPipeline, GPUComputePipeline, GPUBindGroupLayout, and GPUBindGroup defining resource bindings between CPU memory buffers and GPU shader registers.
Pass Encoders & Commands: Command buffers recorded via GPUCommandEncoder, scheduling render passes, compute dispatches (dispatchWorkgroups(x, y, z)), and asynchronous buffer copies.
Buffer Storage & Uniforms: Storage buffers (read_write), uniform buffers, texture samplers, and staging buffers synchronizing dynamic data between the V8 JavaScript heap and GPU VRAM.

REA lacks a dedicated WebGPU semantic engine capable of decompiling WGSL shaders, reconstructing pipeline state objects, and mapping the end-to-end JavaScript-to-GPU dataflow graph.

Proposed Architecture

flowchart TD
    A["Web Application (HTML / JS Bundles / CDP Session)"] --> B["WebGPU Semantic Engine"]
    B --> C["WGSL Shader Decompiler & AST Parser"]
    B --> D["Pipeline & Bind Group Reconstructor"]
    B --> E["Command Pass & Compute Dispatch Inspector"]
    B --> F["JS Heap ↔ GPU Buffer Dataflow Mapper"]
    
    C --> C1["WGSL AST: Entrypoints (@vertex, @compute), Structs, Functions"]
    C --> C2["Resource Bindings (@group(x) @binding(y))"]
    
    D --> D1["GPUBindGroupLayout & Buffer Bindings"]
    D --> D2["Render & Compute Pipeline Layouts"]
    
    E --> E1["Command Encodes (beginRenderPass, beginComputePass)"]
    E --> E2["dispatchWorkgroups Grid Topologies"]
    
    F --> F1["device.queue.writeBuffer Call Sites"]
    F --> F2["Asynchronous mapAsync / getMappedRange Readbacks"]
    
    C & D & E & F --> G["Synthesized WebGPU Execution Pipeline & Shader Dataflow Graph"]

Technical Capabilities & Modules

WGSL Shader Parsing & Static Analysis:
- Parse embedded or dynamically constructed WGSL source strings.
- Build a typed Abstract Syntax Tree (AST): structs, global variables, uniform blocks, storage buffers, and functions.
- Extract entrypoint annotations: @vertex, @fragment, @compute with workgroup dimensions (@workgroup_size(X, Y, Z)).
Bind Group & Pipeline Layout Reconstruction:
- Map @group() and @binding() indices in WGSL to JavaScript device.createBindGroupLayout() calls.
- Reconstruct layout schemas: buffer visibility, texture sample types, storage buffer access modes (read, read_write).
- Match createRenderPipeline / createComputePipeline configurations with compiled shader modules.
Compute Pass & Dispatch Geometry Analysis:
- Detect beginComputePass sequences and trace passEncoder.dispatchWorkgroups(x, y, z) calls.
- Calculate total invocation grids (X \times Y \times Z \times \text{workgroup\_size}) to deduce tensor shapes and image processing kernel tiling.
CPU-to-GPU Buffer Dataflow Tracing:
- Trace data uploads: device.queue.writeBuffer, writeTexture, and mapped staging buffer writes.
- Correlate JavaScript typed arrays (Float32Array, Uint32Array) with WGSL buffer struct layouts.
- Trace asynchronous readback operations (mapAsync, getMappedRange) to identify output consumers in JavaScript.
AI Inference & Tensor Operator Mapping:
- Recognize common WGSL compute patterns: GEMM (General Matrix Multiply), FlashAttention, LayerNorm, Convolution, Softmax kernels.
- Reconstruct high-level neural network execution topologies when WebGPU is used as an ML execution backend.

Acceptance Criteria

Robust parsing and AST generation for WGSL shader modules.
Automated reconstruction of GPUBindGroupLayout resource bindings matched to shader attributes.
Tracing of compute pass dispatches and workgroup geometry calculations.
Mapping of dataflow between JavaScript typed memory and GPU buffers.
Export of an interactive WebGPU pipeline diagram depicting shader passes and resource bindings.

Complements #3620 (Shader and GPU bytecode reverse engineering: SPIR-V, DXBC, DXIL)
Complements #3608 (React Semantic Reconstruction & Decompiler Engine)
Complements #3637 (ML model graph reverse engineering)

Originally created by @matbrgz on GitHub (Oct 14, 2026). Original GitHub issue: https://github.com/morluto/rea/issues/3727 [![Type: Feature](https://img.shields.io/badge/type-feature-blue.svg?style=flat-square)](https://github.com/morluto/rea) [![Domain: Reverse Engineering](https://img.shields.io/badge/domain-reverse_engineering-blueviolet.svg?style=flat-square)](https://github.com/morluto/rea) [![Status: Proposed](https://img.shields.io/badge/status-proposed-blue.svg?style=flat-square)](https://github.com/morluto/rea) [![Ecosystem: REA](https://img.shields.io/badge/ecosystem-morluto%2Frea-8A2BE2.svg?style=flat-square)](https://github.com/morluto/rea) ### Problem Statement & Context WebGPU is the modern W3C graphics and compute standard now supported natively across all major browsers (Chrome, Edge, Firefox, Safari) and desktop runtimes (Deno, Node.js with Dawn/wgpu). It replaces WebGL with a low-overhead, compute-first API modeled after Vulkan, Metal, and DirectX 12. WebGPU is rapidly becoming the dominant execution substrate for **in-browser 3D rendering, creative media tools, and client-side machine learning inference** (WebLLM, Transformers.js, ONNX Runtime Web). While REA issue #3620 covers low-level compiled GPU bytecode (SPIR-V, DXBC, DXIL, Metal), WebGPU introduces a distinct application-level architecture that sits between JavaScript/TypeScript and the GPU hardware: 1. **WebGPU Shading Language (WGSL)**: A text-based, strongly-typed shading language with custom attributes (`@vertex`, `@fragment`, `@compute`, `@workgroup_size`, `@group(N)`, `@binding(M)`). 2. **Pipelines & Bind Groups**: `GPURenderPipeline`, `GPUComputePipeline`, `GPUBindGroupLayout`, and `GPUBindGroup` defining resource bindings between CPU memory buffers and GPU shader registers. 3. **Pass Encoders & Commands**: Command buffers recorded via `GPUCommandEncoder`, scheduling render passes, compute dispatches (`dispatchWorkgroups(x, y, z)`), and asynchronous buffer copies. 4. **Buffer Storage & Uniforms**: Storage buffers (`read_write`), uniform buffers, texture samplers, and staging buffers synchronizing dynamic data between the V8 JavaScript heap and GPU VRAM. REA lacks a dedicated WebGPU semantic engine capable of decompiling WGSL shaders, reconstructing pipeline state objects, and mapping the end-to-end JavaScript-to-GPU dataflow graph. ### Proposed Architecture ```mermaid flowchart TD A["Web Application (HTML / JS Bundles / CDP Session)"] --> B["WebGPU Semantic Engine"] B --> C["WGSL Shader Decompiler & AST Parser"] B --> D["Pipeline & Bind Group Reconstructor"] B --> E["Command Pass & Compute Dispatch Inspector"] B --> F["JS Heap ↔ GPU Buffer Dataflow Mapper"] C --> C1["WGSL AST: Entrypoints (@vertex, @compute), Structs, Functions"] C --> C2["Resource Bindings (@group(x) @binding(y))"] D --> D1["GPUBindGroupLayout & Buffer Bindings"] D --> D2["Render & Compute Pipeline Layouts"] E --> E1["Command Encodes (beginRenderPass, beginComputePass)"] E --> E2["dispatchWorkgroups Grid Topologies"] F --> F1["device.queue.writeBuffer Call Sites"] F --> F2["Asynchronous mapAsync / getMappedRange Readbacks"] C & D & E & F --> G["Synthesized WebGPU Execution Pipeline & Shader Dataflow Graph"] ``` ### Technical Capabilities & Modules 1. **WGSL Shader Parsing & Static Analysis:** - Parse embedded or dynamically constructed WGSL source strings. - Build a typed Abstract Syntax Tree (AST): structs, global variables, uniform blocks, storage buffers, and functions. - Extract entrypoint annotations: `@vertex`, `@fragment`, `@compute` with workgroup dimensions (`@workgroup_size(X, Y, Z)`). 2. **Bind Group & Pipeline Layout Reconstruction:** - Map `@group()` and `@binding()` indices in WGSL to JavaScript `device.createBindGroupLayout()` calls. - Reconstruct layout schemas: buffer visibility, texture sample types, storage buffer access modes (`read`, `read_write`). - Match `createRenderPipeline` / `createComputePipeline` configurations with compiled shader modules. 3. **Compute Pass & Dispatch Geometry Analysis:** - Detect `beginComputePass` sequences and trace `passEncoder.dispatchWorkgroups(x, y, z)` calls. - Calculate total invocation grids ($X \times Y \times Z \times \text{workgroup\_size}$) to deduce tensor shapes and image processing kernel tiling. 4. **CPU-to-GPU Buffer Dataflow Tracing:** - Trace data uploads: `device.queue.writeBuffer`, `writeTexture`, and mapped staging buffer writes. - Correlate JavaScript typed arrays (Float32Array, Uint32Array) with WGSL buffer struct layouts. - Trace asynchronous readback operations (`mapAsync`, `getMappedRange`) to identify output consumers in JavaScript. 5. **AI Inference & Tensor Operator Mapping:** - Recognize common WGSL compute patterns: GEMM (General Matrix Multiply), FlashAttention, LayerNorm, Convolution, Softmax kernels. - Reconstruct high-level neural network execution topologies when WebGPU is used as an ML execution backend. ### Acceptance Criteria - [ ] Robust parsing and AST generation for WGSL shader modules. - [ ] Automated reconstruction of `GPUBindGroupLayout` resource bindings matched to shader attributes. - [ ] Tracing of compute pass dispatches and workgroup geometry calculations. - [ ] Mapping of dataflow between JavaScript typed memory and GPU buffers. - [ ] Export of an interactive WebGPU pipeline diagram depicting shader passes and resource bindings. ### Related Issues & Dependencies - Complements #3620 (Shader and GPU bytecode reverse engineering: SPIR-V, DXBC, DXIL) - Complements #3608 (React Semantic Reconstruction & Decompiler Engine) - Complements #3637 (ML model graph reverse engineering)

bsakaguchi referenced this issue

2026-10-17 21:11:26 +00:00

[PR #1439] [MERGED] perf(cli): defer Playwright and isomorphic-git until a command needs them #2888

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

morluto/rea#1439

No description provided.

Rows
Columns