web-shader-extractor

What problem does it solve?

It automates the complete extraction, deobfuscation, and migration of WebGL/Canvas/Shader visual effects from live websites into independent, runnable JavaScript projects so designers and engineers can reproduce or reuse complex visual effects without manual reverse-engineering.

Core Features & Use Cases

• Rendered capture & asset harvesting: Uses a headless browser to capture the rendered DOM, canvas metadata, screenshots, and runtime network bundles for accurate reconstruction.
• Engine detection & decoding: Identifies Three.js, PixiJS, Babylon, raw WebGL, TSL-based systems (e.g., shaders.com) and decodes encoded definitions (Base64/XOR) or mapping tables when present.
• Shader extraction & deobfuscation: Finds GLSL/TSL sources inside bundles, extracts shader strings and related JS render logic, infers minified symbol meanings, and reconstructs readable shader and renderer code.
• Porting & scaffolding: Generates a runnable project (native WebGL2 or Three.js importmap) with multi-pass FBO pipelines, proper color-space handling, and an optional extraction report documenting decisions and differences.
• Robust fallbacks: Auto-installs and validates tooling, falls back to static-bundle analysis if headless browser rendering is unavailable, and proposes simplification only after verification.

Quick Start

Use the web-shader-extractor skill to extract shaders from https://example.com and generate a standalone WebGL2 or Three.js project with extracted shaders, assets, and an optional extraction report.