myagent-ai 1.11.2 → 1.12.2

package/skills/web-shader-extractor/references/shaders-com.md

@@ -1,190 +0,0 @@
-# shaders.com 提取工作流
-
-shaders.com 是一个 shader 设计工具，使用 Nuxt.js + Three.js r183 TSL + Supabase。
-
-## 识别特征
-
-- URL: `shaders.com/collection/{slug}/{presetId}` 或 `shaders.com/preset/{id}`
-- Canvas: `data-renderer="shaders"` + `data-engine="three.js r183"`
-- Nuxt.js (`_nuxt/` 路径)
-- Clerk 认证
-- Supabase 存储 (`data.shaders.com/storage/v1/`)
-
-## 关键架构差异
-
-与 Unicorn Studio 完全不同：
-- **不使用 GLSL** — 使用 Three.js TSL (Three Shader Language) 节点系统
-- **87 种组件类型** — 每种有自己的 TSL `fragmentNode` 函数
-- **定义数据是 XOR + base64 编码的**
-- **组件可嵌套** — 树形结构（Glass 的 children 是其内部效果）
-
-## 数据获取
-
-### API 端点
-
-```bash
-# 集合变体（含编码定义）— 公开，无需认证
-curl -s "https://shaders.com/api/collections/{slug}/{variantId}"
-
-# 预览 API（含编码定义 + 水印注入）
-curl -s "https://shaders.com/api/preview/preset/{presetId}"
-
-# Nuxt payload（只含元数据，不含 shader 定义）
-curl -s "https://shaders.com/collection/{slug}/{id}/_payload.json"
-```
-
-### 定义解码
-
-定义使用 XOR + base64 编码，有两套密钥：
-
-1. **网站 API**（`/api/collections/`）：
-   - 混淆密钥: `a5e7244ad0973f07e10285bfa75ddbe4`（来自 Nuxt runtime config）
-   - 组件/属性名用短代码（`C52`=Plasma, `p06`=angle, 等）
-   - 解码: `JSON.parse(XOR(base64decode(encoded), keyBytes))`
-   - 然后需要 code→name 映射表还原可读名称
-
-2. **预览 API**（`/api/preview/`）：
-   - 密钥: `shaders-preview-key`
-   - 使用人类可读属性名（无需映射）
-   - 注意：会注入水印 `ImageTexture` 组件
-
-### 代码映射表
-
-87 种组件按字母排序编号 `C00-C86`，233 种属性按字母排序编号 `p00-p232`。
-映射表可从 JS bundle 中提取。
-
-## 已知陷阱
-
-### Y 轴翻转（反复出现！）
-
-**SDF 纹理和 UV 坐标系统性 Y 翻转** — 已在多次提取中确认：
-
-shaders.com 的 SDF 二进制（`.bin`）使用**图像坐标系**（Y=0 在顶部），
-而 WebGL 纹理坐标 Y=0 在底部。直接加载会导致形状上下翻转。
-
-```glsl
-// 错误：直接用 shapeUV 采样
-float sdf = texture(tSDF, shapeUV).r;
-
-// 正确：翻转 Y
-vec2 sdfUV = vec2(shapeUV.x, 1.0 - shapeUV.y);
-float sdf = texture(tSDF, sdfUV).r;
-
-// 注意：梯度的 Y 分量也需要取反
-float dSdy = -(texture(tSDF, sdfUV - vec2(0, eps)).r - sdf) / eps;
-```
-
-同样，组件定义中的 `center.y` 使用 DOM 坐标（Y=0 在顶部），
-在 Glass shader 中需要翻转：`center.y = 1.0 - center.y`。
-
-### SDF 二进制格式
-
-- 格式：512×512 Float32 单通道（1,048,576 bytes = 512² × 4）
-- 值域：有符号距离，负值=内部，正值=外部（如 [-0.065, 0.486]）
-- **不需要重映射**（不要做 `*2-1`），直接使用原始值
-- 需要 `OES_texture_float_linear` 扩展做线性过滤
-- WebGL2 加载：`gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, 512, 512, 0, gl.RED, gl.FLOAT, data)`
-
-## 组件类型速查
-
-| 类别 | 组件 | 复杂度 |
-|------|------|--------|
-| 纹理 | Plasma, Godrays, SimplexNoise, LinearGradient, RadialGradient | 中 |
-| 形状 | Glass, Blob, Circle, Ring, Star, RoundedRect, Polygon | 高（Glass 最复杂） |
-| 畸变 | WaveDistortion, ChromaticAberration, Liquify, Twirl, Bulge | 低-中 |
-| 风格化 | FilmGrain, Halftone, Ascii, Dither, Glow, Bloom | 低-中 |
-| 后处理 | Blur, ProgressiveBlur, BrightnessContrast, HueShift | 低 |
-
-## 渲染管线
-
-```
-Three.js r183 TSL 渲染器
-├─ 优先尝试 WebGPU，降级到 WebGL
-├─ 正交相机 + 单个全屏四边形
-├─ 组件树从底到顶合成
-├─ 有 children 的组件用 RTT (render-to-texture) 捕获子内容
-├─ blend mode 用自定义混合函数
-└─ Glass 组件最复杂：SDF 评估 → 梯度法线 → 折射 → 色差 → 模糊 → 着色 → 高光 → 菲涅尔 → 合成
-```
-
-## 移植策略
-
-1. **TSL 不能直接复制** — 需要翻译为 GLSL
-2. **从 JS bundle 提取 TSL `fragmentNode`** → 反混淆 → 翻译为 GLSL
-3. **组件树 → multi-pass FBO 管线**
-4. **SDF 纹理需要 Y-flip**（见上方陷阱）
-5. **Glass 组件参数多**（20+），需要精确匹配每个值
-
-## 颜色空间处理（关键）
-
-shaders.com 的 Three.js 渲染器全程在 **linear 空间** 工作：
-- 组件定义中的 hex 颜色（如 `#2c2c42`）是 **sRGB** 值
-- TSL 的 `color()` 函数自动将 sRGB→linear
-- 所有中间 FBO 均存储 linear 值
-- 最终由渲染器做 linear→sRGB 输出编码
-
-移植时：
-```glsl
-// 1. 颜色定义时：sRGB hex → linear
-vec3 colorA = pow(vec3(0.173, 0.173, 0.259), vec3(2.2));  // #2c2c42
-
-// 2. 中间 pass：全部在 linear 空间计算，不做 gamma
-// 3. 最终输出 pass（仅一次）：linear → sRGB
-fragColor = vec4(pow(color.rgb, vec3(1.0/2.2)), color.a);
-```
-
-**常见错误**：在中间 pass 做 gamma 校正，导致后续 pass 在错误空间累加高光/菲涅尔。
-
-## 参数精确对齐原则
-
-**绝对禁止手动调参**。所有参数必须严格匹配 TSL 翻译中的公式和乘数：
-
-```
-TSL 原始乘数                → GLSL 必须使用的值
-aberration * 0.06           → 不能改为 0.12
-fresnelSoftness * 0.06      → 不能改为 0.12
-fresnel (0.17)              → 不能改为 0.4
-SDF gradient eps = 0.01     → 不能改为 0.005
-```
-
-如果视觉效果不匹配，应检查：
-1. 颜色空间是否正确（sRGB/linear 混乱是最常见原因）
-2. 噪声函数实现差异（Perlin 实现 vs `mx_noise_float`）
-3. 时间基准是否正确
-4. FBO 管线顺序是否与组件树匹配
-
-**不要**通过修改乘数来"补偿"视觉差异 — 这会在其他参数配置下崩溃。
-
-## TSL 时间约定
-
-`timerLocal(speed)` = 每秒递增 `speed` 单位。移植时：`uTime = seconds * speed`。
-
-然后 shader 内部再乘自己的系数：
-
-| 组件 | speed 参数 | shader 内部乘数 | 实际速率/秒 |
-|------|-----------|----------------|------------|
-| Plasma | 2 | × 0.125 | 0.25 |
-| Godrays | 0.7 | × 0.2 | 0.14 |
-| WaveDistortion | 0.8 | × 0.5 | 0.4 |
-| FilmGrain | — | 无时间（静态） | 0 |
-
-## TSL→GLSL 标识符映射（SPCVwBqR.js）
-
-常用映射（随构建版本变化，需动态提取）：
-
-| 本地名 | TSL 函数 | GLSL |
-|--------|---------|------|
-| C / z | vec4() | vec4 |
-| x / D | vec2() | vec2 |
-| q / N | vec3() | vec3 |
-| P / J | resolution | u_resolution |
-| A / $ | uv | vUv |
-| se / Oe | sin() | sin() |
-| W / I | cos() | cos() |
-| ne | mix() | mix() |
-| D | smoothstep() | smoothstep() |
-| fe | clamp() | clamp() |
-| ar | mx_noise_float() | perlinNoise3D() |
-| dr / Gt | timerLocal() | u_time × speed |
-| Me / wt | rtt() | FBO pass |
-| Ce | renderOutput() | fragColor |

package/skills/web-shader-extractor/references/tech-signatures.md

@@ -1,54 +0,0 @@
-# 框架识别特征
-
-## Three.js
-
-**未混淆**：`THREE.`, `WebGLRenderer`, `ShaderMaterial`, `BufferGeometry`
-
-**混淆后**（通过构造参数推断）：
-
-| 调用模式 | 原始类 |
-|---------|--------|
-| `new X({canvas, antialias, alpha})` | `WebGLRenderer` |
-| `new X(fov, aspect, near, far)` — 4 数字 | `PerspectiveCamera` |
-| `new X(-1, 1, 1, -1, 0, 1)` — 6 参数 | `OrthographicCamera` |
-| `new X(w, h, {wrapS, minFilter})` | `WebGLRenderTarget` |
-| `new X(data, w, h, format, type)` — Float32Array | `DataTexture` |
-| `new X(2, 2)` 作为几何体 | `PlaneGeometry` |
-| `new X({uniforms, vertexShader, fragmentShader})` | `ShaderMaterial` |
-| `X.getElapsedTime()` | `Clock` |
-
-**常量**：`ClampToEdgeWrapping`, `NearestFilter`, `RGBAFormat`, `FloatType`, `DoubleSide`
-
-## 2D Canvas
-
-`dataEngine: null` 时，用 `getContext('2d')` 有无 + `createShader`/`shaderSource` 有无区分：
-- 有 `getContext('2d')`，无 WebGL 调用 → 纯 2D Canvas
-- 有 WebGL 调用 → Raw WebGL / PixiJS
-
-## Raw WebGL
-
-```javascript
-gl.createShader / gl.shaderSource / gl.compileShader / gl.createProgram
-gl.bindBuffer / gl.bindFramebuffer / gl.drawArrays
-```
-
-## PixiJS
-
-`PIXI.Application`, `PIXI.Filter`, `new PIXI.Filter(vertSrc, fragSrc, uniforms)`
-
-## Babylon.js
-
-`BABYLON.Engine`, `BABYLON.ShaderMaterial`, `BABYLON.Effect.ShadersStore`
-
-## GPGPU 模式
-
-两个 `WebGLRenderTarget`（ping-pong）+ `OrthographicCamera(-1,1,1,-1,0,1)` + `PlaneGeometry(2,2)` + `DataTexture` 初始位置 + `setRenderTarget` 循环
-
-## 常见噪声
-
-| 函数 | 类型 |
-|------|------|
-| `snoise` | Simplex noise (Ashima) |
-| `cnoise` | Classic Perlin |
-| `cellular` | Worley/Voronoi |
-| `fbm` | Fractal Brownian Motion |

package/skills/web-shader-extractor/references/tsl-extraction.md

@@ -1,41 +0,0 @@
-# Three.js TSL 识别与重建
-
-Three.js r170+ 的 TSL (Three Shading Language) 用 JS 函数调用链组合 shader 节点图，运行时编译为 GLSL。
-
-## 识别信号
-
-1. Bundle 有大量 `uniform`/`shader` 但几乎没有 `precision`/`gl_FragColor`
-2. canvas `data-engine` 显示 r170+
-3. 存在 `.mul()`/`.add()`/`.toVar()`/`.assign()` 链式调用
-
-## TSL → GLSL 映射
-
-| TSL | GLSL |
-|-----|------|
-| `screenUV` | `gl_FragCoord.xy / resolution` |
-| `viewportSize` | `uniform vec2 resolution` |
-| `float()`/`vec2()`/`vec3()`/`vec4()` | 同名（但 TSL 中是 JS 函数） |
-| `.mul()`/`.add()`/`.sub()`/`.div()` | `*`/`+`/`-`/`/` |
-| `sin()`/`cos()`/`mix()`/`smoothstep()` | 同名 |
-| `clamp()`/`abs()`/`fract()`/`floor()` | 同名 |
-| `pow()`/`exp()`/`sqrt()`/`dot()`/`length()` | 同名 |
-| `Fn()` | shader 函数包裹器（内联到 GLSL） |
-| `uniform()` | `uniform <type> name` |
-| `convertToTexture()` | RTT（多 pass 渲染） |
-| `.sample(uv)` | `texture(sampler, uv)` |
-| `.toVar()`/`.assign()` | 声明/赋值可变变量 |
-| `.oneMinus()` | `1.0 - x` |
-
-## 重建步骤
-
-1. **定位**：搜索组件名附近的 `fragmentNode` 属性
-2. **映射表**：从 bundle 顶部 import 语句推断 minified → TSL 函数名
-   ```javascript
-   import { A as screenUV, W as sin, ... } from "three-module"
-   ```
-3. **翻译**：链式调用 → GLSL 表达式
-   ```javascript
-   // TSL: screenUV.x.sub(center.x).mul(aspect)
-   // GLSL: (uv.x - center.x) * aspect
-   ```
-4. **RTT**：`convertToTexture(childNode)` → 独立 pass 渲染到 FBO，主 shader 中 `texture()` 采样

package/skills/web-shader-extractor/references/unicorn-studio.md

@@ -1,353 +0,0 @@
-# Unicorn Studio 提取工作流
-
-Unicorn Studio (unicorn.studio) 是一个 no-code WebGL 设计工具，使用 curtains.js 作为渲染引擎，Firebase/Firestore 作为后端。
-
-## 识别特征
-
-- URL 模式: `unicorn.studio/remix/{remixId}` 或 `unicorn.studio/edit/{designId}`
-- Meta tag: `<meta name="ai:technical-stack" content="Vue 3, curtains.js, Firebase, JavaScript SDK">`
-- 嵌入 SDK: `unicornStudio-*.js`（~84KB embed 版本）
-- 主应用 bundle: `index-*.js`（~2.1MB，含 shader 模板）
-
-## 数据获取路径
-
-### 路径 1: Firestore REST API（推荐，适用于 remix）
-
-```bash
-# Firebase 配置（从 unicorn.studio 前端 JS bundle 中提取，每次提取时动态获取）
-# 获取方式：curl -s https://www.unicorn.studio/ | grep -oP 'apiKey:"[^"]+"' | head -1
-API_KEY="<从网站 bundle 动态提取>"
-PROJECT="unicorn-studio"
-
-# Step 1: 获取 remix 元数据（含 versionId、designId、cre建者信息）
-curl -s "https://firestore.googleapis.com/v1/projects/$PROJECT/databases/(default)/documents/remixes/{REMIX_ID}?key=$API_KEY"
-
-# Step 2: 获取版本数据（含所有图层定义、参数、纹理引用）
-# versionId 从 Step 1 的 fields.versionId.stringValue 提取
-curl -s "https://firestore.googleapis.com/v1/projects/$PROJECT/databases/(default)/documents/versions/{VERSION_ID}?key=$API_KEY"
-```
-
-### 路径 2: GCS/CDN Embed 数据（适用于已发布的嵌入）
-
-```bash
-# 非 Pro 用户
-curl -s "https://storage.googleapis.com/unicornstudio-production/embeds/{DESIGN_ID}"
-
-# Pro 用户
-curl -s "https://assets.unicorn.studio/embeds/{DESIGN_ID}"
-```
-
-Embed JSON 格式: `{ options: {...}, layers/history: [...], modules: [...] }`
-包含 `compiledFragmentShaders[]` 和 `compiledVertexShaders[]`（已编译的 GLSL）。
-
-### 路径 3: 从页面内嵌 JSON 提取
-
-Unicorn Studio 嵌入使用 `data-us-project` 或 `data-us-project-src` HTML 属性，
-SDK `init()` 会扫描这些属性并加载对应项目。
-
-## 先判断数据形态
-
-Unicorn Studio 至少有两种常见数据形态：
-
-### 1. embed/export scene
-
-- 一般是最终给 `addScene()` 的 scene JSON
-- 往往已经带 `compiledFragmentShaders[]` / `compiledVertexShaders[]`
-- 这种格式可以直接喂给 embed runtime
-
-### 2. editor/version history
-
-- 常见来源是 Firestore `versions/{id}` 的 `history`
-- 这是编辑器原始层数据，**不能**直接喂给 `addScene()`
-
-如果把 `history` 误当 embed scene，典型症状是：
-
-- `Plane: No fragment shader provided, will use a default one`
-- `Plane: No vertex shader provided, will use a default one`
-- `No composite shader data for element`
-- canvas 创建成功，但画面全黑或只剩默认层
-
-## Firestore 集合结构
-
-| Collection | 用途 | 关键字段 |
-|---|---|---|
-| `designs` | 设计元数据 | creatorId, name, versionId, hasEmbed |
-| `versions` | 版本数据（核心） | history[], options |
-| `remixes` | 可 remix 设计 | designId, versionId, creatorId, thumbnail |
-
-## 版本数据结构
-
-Firestore REST 返回格式用 `{stringValue, integerValue, arrayValue, mapValue, ...}` 包裹，需递归解析。
-
-`history` 数组中每个元素是一个图层：
-
-```
-layerType: "effect" | "text" | "image" | "model" | "shape"
-type:      效果类型 (gradient, noiseFill, sdf_shape, glyphDither, bloomFast, ...)
-```
-
-### 图层参数（常见）
-
-- `pos`, `scale`, `speed`, `opacity`, `blendMode`
-- `trackMouse`, `trackAxes`, `mouseMomentum`
-- `parentLayer`: UUID 或 false（关联父元素）
-- `breakpoints[]`: 响应式断点配置
-- `states`: appear/scroll/hover/mousemove 动画
-- `customFragmentShaders[]`, `customVertexShaders[]`（通常为空，用内置效果时）
-
-## 正确初始化策略
-
-如果拿到的是 Firestore `version/history`，优先模仿站点自己的初始化链路，不要硬套 embed API。
-
-典型调用顺序：
-
-1. `unpackageHistory()` 或 `unpackVersion()`
-2. `createFontScript()`
-3. `createCurtains()`
-4. `handleItemPlanes()`
-5. `fullRedraw()`
-
-如果页面 bundle 里有专门的 Remix/Preview 组件，优先跟着它走，不要只看公开 UMD/SDK 文档。
-
-### 资源本地化
-
-- image/font/texture 尽量下载到本地
-- `history` 里的 `src`、`fontCSS.src` 要改成本地路径
-- 某些对象字段可能是数字 key 的 map，落地前要规整成数组
-
-### 效果类型特有参数
-
-| 效果 | 关键参数 |
-|---|---|
-| gradient | fill[], stops[], gradientType, gradientAngle, wrap |
-| noiseFill | noiseType, turbulence, color1, color2, colorPhase, chroma, direction |
-| sdf_shape | shape(0-22), refraction, extrude, smoothing, axis, animationDirection, lightPosition |
-| glyphDither | characters, glyphSet, scale, gamma, monochrome, texture(sprite atlas) |
-| bloomFast | amount, intensity, exposure, tint |
-
-## Shader 代码提取
-
-**关键发现**: Embed SDK（~84KB）不含 GLSL shader 代码。Shader 模板在主应用 bundle（~2.1MB）中，经 7 步编译管线处理后存入 embed JSON。
-
-### Shader 在 App Bundle 中的位置
-
-Shader 模板是字符串字面量，通过变量名标识：
-
-```
-效果名           → 变量名
-glyphDither     → X$ (fragment)
-noiseFill       → WY (fragment)
-sdf_shape       → XY (fragment)
-gradient        → eX (fragment)
-bloomFast       → Hj (fragment)
-通用顶点         → ye (vertex)
-梯度顶点         → ko (vertex)
-合成片段         → Uz (composite fragment)
-合成顶点         → Nz (composite vertex)
-```
-
-注意：变量名会随构建版本变化，需搜索关键特征定位。
-
-### 模板变量
-
-Shader 模板中含 `${variable}` 占位符，编译时替换：
-
-| 变量 | 内容 |
-|---|---|
-| `${fe}` | mask 相关 uniform 声明 |
-| `${Vt}` | 图层混合辅助函数 (applyLayerMix, applyLayerMixAlpha, applyLayerMixClip) |
-| `${gt}` | PCG hash / 随机数函数 (pcg2d, randFibo) |
-| `${ht}` | 混合模式函数 (17 种模式: Normal, Add, Multiply, Screen, Overlay, ...) |
-| `${pe("var")}` | mask 应用 + fragColor 输出 |
-| `${wf}` | BCC noise derivatives (OpenSimplex2S) |
-| `${Aa}` | Perlin noise 函数 |
-| `${yr}` | deband 抖动函数 |
-| `${cm}` | 渐变颜色/停止点 uniform 声明 |
-| `${xz}` | 高斯权重函数 (bloom blur) |
-
-### 编译管线
-
-```
-1. Fz(): 替换 uniform 值为常量
-2. Dz(): 处理渐变颜色数量（switch case 裁剪）
-3. Mz(): 求值常量 switch（死代码消除）
-4. Rz(): 处理 #ifelseopen/#ifelseclose 块（条件编译）
-5. Iz(): 移除未使用函数
-6. Cz(): 移除未使用 uniform 声明
-7. Bp(): 去注释、规范化空白
-```
-
-## 渲染管线（核心，移植时必须正确还原）
-
-```
-curtains.js WebGL2 渲染器
-├─ 每个效果图层 = 一个 Plane + 独立 FBO
-├─ 图层按 renderOrder 线性链式渲染，每个 plane 读前一个 FBO 为 uTexture
-├─ Element（shape/text/image）+ 子效果形成 render group：
-│   1. Element 自身 plane 先渲染 → FBO_elem
-│   2. 子效果按 effects 数组顺序依次渲染 → FBO_child1, FBO_child2, ...
-│   3. Composite plane 最后渲染：alpha-blend 子效果输出到背景场景
-├─ 独立后处理效果 (parentLayer=false) 处理全局场景
-└─ 最后一个 plane 直接输出到 canvas（无 FBO）
-```
-
-### Element + 子效果的 FBO 链（关键）
-
-```
-以 shape group (sdf + noise) 为例：
-
-FBO_before ─────────────────────────────────────────┐
-                                                     │
-Shape 自身 plane → FBO_shape (渲染基础几何)            │
-    ↓                                                 │
-Child noiseFill → FBO_noise (uBgTexture = FBO_shape)  │
-    ↓                                                 │
-Child sdf_shape → FBO_sdf (uTexture = FBO_noise)      │
-    ↓ (showBg=0: 形状外 = vec4(0) 透明)              │
-    ↓                                                 │
-Composite plane → FBO_result                          │
-    uTexture = FBO_sdf (最后一个子效果输出)             │
-    uBgTexture = FBO_before (element 之前的场景) ←─────┘
-    output = alpha_blend(fg, bg) = fg + bg * (1 - fg.a)
-```
-
-### 子效果关联机制
-
-```js
-// Element 的 effects 数组 → 子效果的 parentLayer UUID 列表
-shape.effects = ["e270a7cd-...", "fb591190-..."]
-
-// 每个子效果引用父 element 的 UUID
-noiseFill.parentLayer = "e270a7cd-..."   // effects[0]
-sdf_shape.parentLayer = "fb591190-..."   // effects[1]
-
-// embed SDK 中查找子效果：
-getChildEffectItems() {
-    return this.effects.map(uuid =>
-        state.layers.find(l => l.parentLayer === uuid)
-    ).filter(Boolean)
-}
-```
-
-### uTime 时间基准（关键陷阱）
-
-Embed SDK 中 `uTime` **不是秒数**，而是逐帧累加：
-```js
-// setEffectPlaneUniforms() 中：
-t.uniforms.time.value += speed * 60 / this.fps;
-```
-
-在 60fps 下：`uTime += speed` 每帧。1 秒后 `uTime = speed × 60`。
-
-| 效果层 | speed | 1 秒后 uTime |
-|--------|-------|-------------|
-| noiseFill | 0.25 | 15 |
-| sdf_shape | 0.5 | 30 |
-| gradient | 0.25 | 15 |
-
-**移植时必须乘以 `speed × 60`**，否则动画慢 15-60 倍：
-```js
-// 正确：
-uni1f(prog, 'uTime', elapsedSeconds * speed * 60);
-// 错误：
-uni1f(prog, 'uTime', elapsedSeconds);
-```
-
-### showBg 参数的关键作用
-
-- `showBg=0`：光线未命中几何体时输出 `vec4(0)` **透明**（不是黑色！）
-- `showBg=1`：光线未命中时采样 `uTexture/uBgTexture`（显示背景内容）
-
-**移植时 showBg=0 是最常见的陷阱**：如果错误地输出 `vec4(0,0,0,1)` 不透明黑色，
-composite alpha blend 会被覆盖而不是透过下方图层。必须确保 alpha=0。
-
-## 移植策略
-
-1. **纯 2D 后处理效果** (glyphDither, bloomFast): 原生 WebGL2 全屏四边形
-2. **生成式效果** (noiseFill, gradient): 原生 WebGL2
-3. **3D SDF** (sdf_shape): 原生 WebGL2 raymarching
-4. **复杂场景** (多图层合成): 需要 multi-pass FBO 管线
-5. **文字图层**: Canvas 2D 渲染文字 → 作为纹理上传 WebGL
-
-## Playwright 验证
-
-Playwright 默认 headless 环境可能没有可用 WebGL。出现下面症状时，先怀疑环境，不要立刻怀疑提取逻辑：
-
-- `Renderer: WebGL context could not be created`
-- `0 canvas(es) found`
-- `Error creating Curtains instance`
-- 截图纯黑
-
-这时改用 `swiftshader` 再验证：
-
-```bash
---use-angle=swiftshader
---use-gl=angle
---enable-unsafe-swiftshader
---ignore-gpu-blocklist
-```
-
-建议验证顺序：
-
-1. 看 console 是 shader/runtime 错误，还是 WebGL context 创建失败
-2. 看 DOM 里是否真的生成了 `canvas`
-3. 用 `swiftshader` 截图
-4. 和原站缩略图或首屏截图做构图对比
-
-### Glyph Atlas 生成
-
-原始 glyph atlas 是 base64 PNG（存在跨浏览器兼容问题）。
-推荐用 Canvas 2D 动态生成：
-
-```js
-function createGlyphAtlas(chars, size = 40) {
-  const canvas = document.createElement('canvas');
-  canvas.width = size * chars.length;
-  canvas.height = size;
-  const ctx = canvas.getContext('2d');
-  ctx.fillStyle = '#000';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = '#fff';
-  ctx.font = `bold ${size * 0.8}px monospace`;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  for (let i = 0; i < chars.length; i++) {
-    ctx.fillText(chars[i], size * i + size / 2, size / 2);
-  }
-  return canvas; // → gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas)
-}
-```
-
-## Cloud Functions 端点
-
-所有位于 `https://us-central1-unicorn-studio.cloudfunctions.net/`：
-- `publishEmbedTest` — 发布/更新 embed（需认证）
-- `getUserIdByUsername` — 用户名→userId
-- `handleVideos/handleModels/handleImages` — 资源处理
-- `generateImprovedMSDF` — MSDF 文字渲染
-- `generateDepthMap` — 深度图生成
-- `copyRemixAssets` — remix 资源复制
-
-## 示例：完整提取流程
-
-```bash
-# 1. 从 URL 提取 remix ID
-REMIX_ID="QZxhNFb1X1OaUqaJLT9S"
-
-# 2. 获取 remix 元数据
-curl -s "https://firestore.googleapis.com/v1/projects/unicorn-studio/databases/(default)/documents/remixes/$REMIX_ID?key=$API_KEY" > remix.json
-
-# 3. 提取 versionId
-VERSION_ID=$(python3 -c "import json; print(json.load(open('remix.json'))['fields']['versionId']['stringValue'])")
-
-# 4. 获取版本数据
-curl -s "https://firestore.googleapis.com/v1/projects/unicorn-studio/databases/(default)/documents/versions/$VERSION_ID?key=$API_KEY" > version.json
-
-# 5. 解析版本数据中的图层和参数 → 用 Python/Node 递归解析 Firestore REST 格式
-
-# 6. 从 app bundle 提取对应效果类型的 shader 模板
-curl -s "https://www.unicorn.studio/assets/index-*.js" > app-bundle.js
-# 搜索效果类型名定位 shader 代码
-
-# 7. 组合参数 + shader 模板 → 构建独立 WebGL2 项目
-```