mantle-ai-trader/skills/web-shader-extractor/references/extraction-workflow.md

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 符号

通过构造参数和方法调用推断：

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 中