1.6 KiB
Executable File
1.6 KiB
Executable File
Three.js TSL 识别与重建
Three.js r170+ 的 TSL (Three Shading Language) 用 JS 函数调用链组合 shader 节点图，运行时编译为 GLSL。
识别信号
- Bundle 有大量
uniform/shader但几乎没有precision/gl_FragColor - canvas
data-engine显示 r170+ - 存在
.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 |
重建步骤
- 定位：搜索组件名附近的
fragmentNode属性 - 映射表：从 bundle 顶部 import 语句推断 minified → TSL 函数名
import { A as screenUV, W as sin, ... } from "three-module" - 翻译：链式调用 → GLSL 表达式
// TSL: screenUV.x.sub(center.x).mul(aspect) // GLSL: (uv.x - center.x) * aspect - RTT：
convertToTexture(childNode)→ 独立 pass 渲染到 FBO，主 shader 中texture()采样