42 lines
1.6 KiB
Markdown
Executable File
42 lines
1.6 KiB
Markdown
Executable File
# 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()` 采样
|