浏览器里，用 TSL 把灵感直接变成沉浸式视觉体验。
【节点编排】写 JS/TS 就能像搭模块一样拼 shader【双端发布】GLSL/WGSL 自动编译，WebGL2/WebGPU 同步上线
XR Beta：在“准备工作”模块查看兼容性与降级方案。
为什么选 TSL
更少代码，同等画面
以节点组合替代手写着色器模板，降低心智负担。
一份代码，双管线
同一套节点可编译为 GLSL（WebGL2）或 WGSL（WebGPU）。
可复用，可调参
把复杂逻辑拆成可组合片段，暴露少量参数即可迭代。
适用场景
- 示例 · Showroom
商业展示
沉浸式 Landing、品牌空间与数据大屏，搭配“示例 · Showroom”按钮即可直接播放 Demo。
- 示例 · Material Lab
工具链
把 TSL 集成进内部材质库/Design System，复用节点模板，让设计师在“示例 · Material Lab”里快速调参。
- 示例 · Playground
实验探索
程序化地形、体积云、XR/传感交互等概念验证，支持一键切换“示例 · Playground”查看实时预览。
准备工作
NodeMaterial 管线
请将材质切换为 MeshStandardNodeMaterial/MeshPhysicalNodeMaterial 等节点版本后再接入。
WebGPU-only 特性
Compute/StorageBuffer 等效果需检测 `navigator.gpu`，自动回退 WebGL2 预设。
一键检测脚本
初始化时运行 checkTSLReady()（文档附代码），输出浏览器支持、XR 状态与降级方案。
下载兼容性矩阵或复制检测脚本，让产品、开发、设计在同一张表上确认依赖。
常见问题
- TSL 和手写 GLSL/WGSL 怎么取舍？
- 大多数效果用 TSL 提升效率；极限性能与特例仍可手写着色器覆盖热点。
- 旧设备能用吗？
- 支持 WebGL2 的浏览器可运行；仅 WebGL1 的环境无法使用。
- 能直接用在现有材质吗？
- 需要替换为对应的 NodeMaterial 类，再把节点接入属性。
- 数据/科研可视化适用吗？
- 适用。可在 GPU 端执行算法并实时渲染大规模数据。