web-shader-extractor

Web Shader Extractor

从网页提取 WebGL/Canvas/Shader 特效，反混淆并移植为独立项目。

核心原则：

• 先 1:1 复刻，确认正确后再考虑简化框架
• 全程自主执行，不中断用户 — 提取是只读操作，安全性无风险。除 Phase 6 简化提议外，所有步骤自动完成，不询问用户确认。遇到问题自行判断最佳方案继续推进，只在需要用户做产品决策时才询问。

Phase 0: 环境检查（首次自动执行）

在开始提取前，检查并自动安装所需依赖。不要询问用户，直接安装。

# 1. 检查 Node.js
node --version 2>/dev/null || {
  echo "Node.js not found, installing..."
  # macOS
  brew install node 2>/dev/null || {
    # fallback: 直接下载 LTS
    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 及浏览器（fetch-rendered-dom.mjs 内置自动安装，但这里预检可提前发现问题）
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

如果安装过程中遇到权限或网络问题，尝试以下备选方案：

• npm 权限问题 → 使用 --prefix 安装到用户目录
• 网络问题（Chromium 下载慢）→ 设置 PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright 使用国内镜像
• 实在无法安装 Playwright → 降级为纯 curl 模式（跳过 DOM 渲染，仅分析静态 HTML + JS bundle），在 Phase 2 中标注可能缺失 canvas-info

Phase 1: 获取源码

并行执行：Playwright 获取渲染后 DOM + curl 获取静态 HTML。

# Playwright（获取 canvas 引擎版本、组件树、运行时网络请求）
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（获取原始 HTML，用于提取内嵌配置和密钥）
curl -s -L --compressed '<URL>' > /tmp/page.html

如果 Playwright 脚本失败（未安装/启动异常），先尝试自动修复（重新安装依赖），若仍失败则降级为纯 curl 模式继续工作，不要停下来询问用户。

从 network.json 和 HTML 交叉提取 JS URL，批量下载到 /tmp/。

Phase 2: 技术栈识别

canvas-info.json 的 dataEngine 字段：
├─ "three.js rXXX" → Three.js（r170+ 可能是 TSL → references/tsl-extraction.md）
├─ "Babylon.js vX.X" → Babylon.js
├─ null → 进一步区分：
│   ├─ bundle 含 createShader/shaderSource → Raw WebGL / PixiJS
│   └─ bundle 含 getContext('2d') 且无 WebGL 调用 → 2D Canvas（→ references/porting-strategy.md § 2D Canvas）
└─ 无 canvas → CSS/SVG 动画

URL 或 HTML 特征匹配已知平台 → 直接跳转专用工作流（跳过通用 Phase 3-4）：
├─ unicorn.studio → references/unicorn-studio.md（Firestore REST API 直取配置+shader）
└─ shaders.com → references/shaders-com.md（Nuxt payload + XOR 解码 + TSL→GLSL 翻译）

扫描确认：bash scripts/scan-bundle.sh /tmp/*.js
→ 框架特征速查 references/tech-signatures.md