Web Shader Extractor

Web Shader Extractor

Extract WebGL/Canvas/Shader effects from web pages, deobfuscate and port them into independent projects.

Core principles:

• First make a 1:1 replica, and then consider simplifying the framework after confirming it is correct
• The entire process is executed autonomously without interrupting the user — Extraction is a read-only operation, and there is no risk to security. With the exception of the Phase 6 simplified proposal, all steps are completed automatically without asking the user for confirmation. When encountering a problem, make your own judgment on the best solution to move forward, and only ask when you need users to make product decisions.

Phase 0: Environment check (automatically executed for the first time)

Before starting the extraction, required dependencies are checked and automatically installed. Don’t ask the user, install directly.

# 1. Check Node.js
node --version 2>/dev/null || {
  echo "Node.js not found, installing..."
  #macOS
  brew install node 2>/dev/null || {
    # fallback: Download LTS directly
    curl -fsSL https://nodejs.org/dist/v22.15.0/node-v22.15.0-darwin-arm64.tar.gz | tar xz -C /usr/local --strip-components=1
  }
}

# 2. Playwright and browser (fetch-rendered-dom.mjs has built-in automatic installation, but pre-checking here can detect problems in advance)
RUNNER_DIR="$HOME/.cache/playwright-runner"
if [ ! -d "$RUNNER_DIR/node_modules/playwright" ]; then
  echo "Installing Playwright (one-time setup)..."
  mkdir -p "$RUNNER_DIR"
  echo '{"type":"module"}' > "$RUNNER_DIR/package.json"
  npm install playwright --prefix "$RUNNER_DIR"
  npx --prefix "$RUNNER_DIR" playwright install chromium
  echo "Playwright + Chromium installed."
fi

If you encounter permissions or network issues during installation, try the following alternatives:

• npm permission issue → Use --prefix to install to user directory
• Network problem (Chromium download is slow) → Set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright to use domestic mirrors
• It is really impossible to install Playwright → downgrade to pure curl mode (skip DOM rendering, only analyze static HTML + JS bundle), note that canvas-info may be missing in Phase 2

Phase 1: Get source code

Parallel Execution: Playwright gets the post-rendered DOM + curl gets the static HTML.

# Playwright (get canvas engine version, component tree, runtime network request)
node ~/.claude/skills/web-shader-extractor/scripts/fetch-rendered-dom.mjs '<URL>'
# → /tmp/rendered/: dom.html, canvas-info.json, network.json, screenshot.png, console.log

# curl (get raw HTML for extracting inline configuration and keys)
curl -s -L --compressed '<URL>' > /tmp/page.html

If the Playwright script fails (not installed/starts abnormally), first try to automatically repair it (reinstall dependencies). If it still fails, downgrade to pure curl mode and continue working without stopping to ask the user.

Cross-extract JS URLs from network.json and HTML, and download them to /tmp/ in batches.

Phase 2: Technology stack identification

dataEngine field of canvas-info.json:
├─ "three.js rXXX" → Three.js (r170+ may be TSL → references/tsl-extraction.md)
├─ "Babylon.js vX.X" → Babylon.js
├─ null → Further distinction:
│ ├─ bundle with createShader/shaderSource → Raw WebGL / PixiJS
│ └─ bundle with getContext('2d') and no WebGL calls → 2D Canvas (→ references/porting-strategy.md § 2D Canvas)
└─ No canvas → CSS/SVG animation

URL or HTML signature matches known platform → jump directly to dedicated workflow (skipping generic Phase 3-4):
├─ unicorn.studio → references/unicorn-studio.md (Firestore REST API direct configuration + shader)
└─ shaders.com → references/shaders-com.md (Nuxt payload + XOR decoding + TSL → GLSL translation)

Scan confirmation: bash scripts/scan-bundle.sh /tmp/*.js
→ Framework signature quick reference/tech-signatures.md

Phase 3: Configuration extraction

1. Search the public API → get the configuration directly (API returns may be encoded → references/encoded-definitions.md)
2. Extract from Nuxt payload / __NEXT_DATA__ / HTML embedded JSON
3. Extract default values from JS bundle
→ See references/config-extraction.md for details

Phase 4: Shader code extraction

Parse JS bundle with Agent (1MB+ does not fit in main context). → Agent prompt template and anti-obfuscation rules references/extraction-workflow.md

Phase 5: Transplantation

Pure 2D full-screen shader → native WebGL2 (zero dependencies)
3D/PBR/GPGPU → Keep original frame (CDN importmap)
Unsure → Use original framework first, then evaluate in Phase 6
→ See references/porting-strategy.md for details

Phase 6: Simplified Assessment

After the transplantation is completed, verify the effect by yourself (open the page screenshot for comparison). If the effect is correct and there is room for simplification, a simplification plan will be proposed to the user and the user will decide whether to implement it.

Phase 7: Extract report (ask the user whether to generate it)

After the extraction is completed, ask the user whether to generate EXTRACTION-REPORT.md (extra tokens will be consumed to review the conversation history).

Report content structure:

# Extract report: {project name}
**Source/Author/Platform/Time**

## Target effect (one sentence description)
## Extract ideas and timeline (problems in each iteration→fix)
## Scene structure (component tree/layer structure)
## Final rendering pipeline (pass list)
## Key resource files
## Key experiences discovered (Table: Experience/Influence/Precipitation Position)
## Remaining known differences
## Technology stack (original vs ported)

The report is placed in the project directory (e.g. ascii-glyph-dither/EXTRACTION-REPORT.md).

Reference index