web-shader-extractor

name	web-shader-extractor
description	从网页中提取 WebGL/Canvas/Shader 视觉特效代码，反混淆后移植为独立原生 JS 项目。 触发条件：用户提供网址并要求提取 shader、提取特效、提取动画效果、提取 canvas 效果、 复刻某网站的视觉效果、"把这个网站的背景效果扒下来" 等。

Web Shader Extractor

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

核心原则：

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

前置条件：确认 Chrome DevTools MCP 可用

开始任何提取工作前，必须先确认 Chrome DevTools MCP 已加载。

用 ToolSearch 检索关键字 chrome devtools navigate evaluate：

• 若搜索结果包含 mcp__chrome-devtools__navigate_page → 可以开始
• 若结果中无任何 mcp__chrome-devtools__* 工具 → 立即提示用户安装后再继续：

Chrome DevTools MCP 未安装，请运行：
  claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
安装后重启 Claude Code，再重新触发本 skill。

不要绕过此检查降级到 Playwright 继续提取 — Playwright headless 在复杂 WebGL 站点下无法捕获 shader 源码和渲染管线，会导致提取不完整。

工具优先级：

1. Chrome DevTools MCP（必须）— navigate_page + initScript 注入 WebGL 拦截器，evaluate_script 查询运行时状态，list_network_requests 捕获资源。
2. Playwright（仅限 Phase 3 验证）— headless 截图对比移植效果，不用于侦察阶段。
3. curl（静态补充）— 获取原始 HTML，提取内嵌配置和密钥。

Phase 1: 侦察

目标：一次页面加载，最大化采集所有运行时数据。

1.1 WebGL 拦截注入

在页面脚本执行前注入拦截器，捕获：

• gl.shaderSource() → 所有 shader 源码（vertex + fragment）
• gl.bindFramebuffer() → FBO 切换序列（即渲染管线拓扑）
• gl.uniform*() → uniform 名称与初始值
• gl.drawArrays() / drawElements() → draw call 顺序与参数

同时也拦截 2D Canvas 的 getContext('2d') 以覆盖纯 Canvas 特效。

1.2 运行时查询

页面加载稳定后，主动查询：

• 框架版本：window.THREE?.REVISION、window.BABYLON?.Engine?.Version 等
• GL 能力：gl.getSupportedExtensions()、renderer info
• 全局配置：__NEXT_DATA__、__NUXT__、window 上的自定义全局变量
• Canvas 元素的 data-engine 属性

1.3 静态资源采集

并行用 curl 获取原始 HTML，与运行时数据交叉提取：

• 网络请求中的 JS bundle URL → 批量下载到 /tmp/
• HTML 内嵌的 JSON 配置、API 密钥
• 框架特征速查 → references/tech-signatures.md

1.4 路由判断

根据 URL、HTML 特征、运行时数据判断是否匹配已知平台：

匹配条件	跳转
unicorn.studio 域名或 embed 特征	→ references/unicorn-studio.md
shaders.com 域名或 Nuxt+TSL 特征	→ references/shaders-com.md
无匹配	→ 继续 Phase 2 通用流程

1.5 深度分析（按需）

如果拦截器已捕获完整 shader 源码，可跳过 bundle 分析。仅在以下情况启动 Agent 分析 JS bundle：

• 拦截器未能捕获 shader（如 TSL 节点系统不经过 shaderSource）
• 需要理解混淆后的配置编码逻辑
• 需要还原 onBeforeCompile 注入的 GLSL 片段

Agent 分析规则 → references/extraction-workflow.md

Phase 2: 移植

目标：将提取的 shader/配置/渲染管线重建为可独立运行的项目。

框架选择原则

根据提取结果判断最合适的移植目标：

• 纯 2D 全屏 shader → 原生 WebGL2（零依赖）
• 纯 2D Canvas 特效 → Vanilla JS（零依赖）
• 3D / PBR / GPGPU / onBeforeCompile → 保留原始框架（CDN importmap）
• 不确定 → 先用原始框架，Phase 3 再评估简化

详细策略 → references/porting-strategy.md

关键约束

• 参数严格对齐：从源站提取的值直接使用，不手动调参补偿视觉差异（视觉差异说明有 root cause 未解决）
• 色彩空间一致：全链路 linear，仅最终输出做 linear→sRGB
• 时间基准对齐：确认原站用秒还是帧累加，移植后保持一致

Phase 3: 交付

3.1 验证

打开移植后的页面，截图与原站对比。重点检查：

• 色彩/亮度是否一致
• 动画节奏是否匹配
• 多 pass 渲染的合成顺序是否正确

如发现差异，优先排查 root cause（色彩空间、时间基准、FBO 顺序），不要通过调参修补。

3.2 简化提议（询问用户）

效果验证正确后，如果存在简化空间（如可以剥离框架改用原生 WebGL），向用户提议简化方案，由用户决定是否执行。

3.3 提取报告（询问用户）

询问用户是否生成 EXTRACTION-REPORT.md。报告内容：

• 来源/作者/平台/时间
• 目标效果描述
• 提取思路与迭代时间线
• 场景结构 / 渲染管线 / 关键资源
• 发现的关键经验
• 剩余已知差异
• 技术栈对比（原始 vs 移植）

Reference 索引

需要时	读取
识别框架特征	references/tech-signatures.md
Agent 提取 prompt + 反混淆规则	references/extraction-workflow.md
获取配置参数	references/config-extraction.md
Three.js TSL 节点 shader 重建	references/tsl-extraction.md
编码/加密配置解码	references/encoded-definitions.md
onBeforeCompile GLSL 注入陷阱	references/shader-injection.md
移植框架选择 + 项目结构	references/porting-strategy.md
Unicorn Studio 专用流程	references/unicorn-studio.md
shaders.com 专用流程	references/shaders-com.md