Initial commit

skills/web-shader-extractor/references/extraction-workflow.md

@@ -0,0 +1,61 @@
+# Shader 代码提取：Agent Prompt 与反混淆
+
+## Agent 深度提取 Prompt 模板
+
+启动 Agent（subagent_type: general-purpose）分析 bundle：
+
+```
+分析文件 /tmp/main.js（约 X MB 的 minified JS bundle），提取所有与视觉特效相关的代码。
+
+需要提取的内容：
+
+1. **GLSL Shader 源码**：搜索包含 "precision", "uniform", "void main",
+   "gl_FragColor", "gl_Position" 的字符串。提取完整的 vertex/fragment shader。
+
+2. **渲染相关 JS 类**：canvas/renderer 创建、粒子/几何体管理、
+   requestAnimationFrame 动画循环、鼠标交互代码。
+
+3. **符号映射表**：minified 变量名 → 原始含义
+   （THREE.Vector2, THREE.Color, THREE.Scene 等）
+
+4. **配置和参数**：默认颜色、尺寸、密度等可调参数
+
+将所有提取的代码保存到 /tmp/extracted-effects.txt，按功能分段标注。
+```
+
+**关键**：Agent 能看到完整文件，主上下文放不下 1MB+ 的 bundle。
+
+## 识别 Minified 符号
+
+通过构造参数和方法调用推断：
+
+```javascript
+new ??(40, w/h, 0.1, 1000)       → PerspectiveCamera(fov, aspect, near, far)
+new ??(-1, 1, 1, -1, 0, 1)      → OrthographicCamera
+new ??({canvas, antialias, ...}) → WebGLRenderer
+new ??(2, 2)                     → PlaneGeometry(w, h)
+new ??(data, w, h, fmt, type)    → DataTexture
+new ??(w, h, {minFilter, ...})   → WebGLRenderTarget
+
+??.setRenderTarget()  → renderer
+??.getElapsedTime()   → clock
+??.setAttribute()     → bufferGeometry
+```
+
+## 框架脱壳（React / Vue 等 → Vanilla JS）
+
+Canvas 效果常被 React/Vue 等框架包装。脱壳思路：
+
+1. **找副作用入口**：`useEffect`/`onMounted` 中的 Canvas 初始化代码就是核心逻辑
+2. **收集 cleanup**：所有销毁操作（`removeEventListener`、`cancelAnimationFrame`、`observer.disconnect()`）汇总为 `destroy()` 函数
+3. **丢弃响应式包装**：Canvas 状态（粒子位置、帧计数等）只在 RAF 内读写，直接用 `let` 变量，不需要 `useState`/`ref` 等响应式容器
+
+原生 API（`IntersectionObserver`、`ResizeObserver`、`matchMedia` 等）不受框架影响，原样保留。
+
+## 反混淆规则
+
+1. **类名**：根据构造参数和方法调用推断
+2. **变量名**：根据用途命名（`ringPos`, `particleScale`, `simMaterial`）
+3. **Shader 变量**：uniform/varying 名通常未被 minify（`uTime`, `vPosition`）
+4. **保留原始 GLSL**：shader 代码通常是完整字符串，直接提取
+5. **字符串注入**：`${someVar.noise}` 表示噪声库被注入到 shader 中