# Web Shader Extractor

> Extract WebGL/Canvas/Shader visual effects code from web pages, deobfuscate and transplant it into an independent native JS project. Trigger conditions: The user provides the URL and requests to extract shader, extract special effects, extract animation effects, extract canvas effects, Replicate the visual effects of a website, "take off the background effects of this website", etc.

- Skill: `zeroix07/web-shader-extractor` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add zeroix07/web-shader-extractor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zeroix07/web-shader-extractor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zeroix07 (https://skillmd.com/u/zeroix07)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/zeroix07/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**.

```bash
# 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.

```bash
# 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:
```markdown
# 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

| When needed | Read |
|--------|------|
| Recognition framework (Three.js/WebGL/PixiJS features) | `references/tech-signatures.md` |
| Agent extraction prompt + anti-obfuscation rules | `references/extraction-workflow.md` |
| Get configuration parameters (API/payload/embedded) | `references/config-extraction.md` |
| Three.js TSL node shader reconstruction | `references/tsl-extraction.md` |
| Encoding/encryption configuration decoding | `references/encoded-definitions.md` |
| onBeforeCompile GLSL injection trap | `references/shader-injection.md` |
| Porting framework selection + project structure | `references/porting-strategy.md` |
| **Unicorn Studio** dedicated process (curtains.js + Firestore) | `references/unicorn-studio.md` |
| **shaders.com** Specialized process (TSL + XOR encoding + Y-flip trap) | `references/shaders-com.md` |