Three.js Shading Language All In One

TSL / Three.js 着色语言

TSL

在 Three.js 中，TSL 是 Three.js Shading Language（Three.js 着色语言）的缩写。它是一种基于节点（Node-based）的高级抽象语言，专门用于在 JavaScript/TypeScript 中编写自定义着色器（Shaders）。

TSL 的核心优势与特性

1. 统一跨平台输出：
   TSL 是渲染器无关的。你编写的同一套 TSL 代码，会在运行时被自动编译并转译成目标图形 API 所需的代码：

• 在 WebGL 环境下转译为 GLSL
• 在 WebGPU 环境下转译为 WGSL

2. 无需脱机编写 Shader：
   传统的自定义着色器需要将 GLSL 字符串硬编码在 JS 文件中，缺乏代码提示和高亮。
   TSL 让你可以直接在 JS/TypeScript 中书写着色逻辑，享受类型检查、自动补全（IntelliSense）等完整的 IDE 支持。
3. 强大的模块化与组合性：
   它采用节点系统，可以像搭建积木一样，将数学运算、颜色混合、纹理采样等功能模块组合起来

import { meshStandardMaterial, texture, time, vec2 } from 'three/TSL';

// 使用 TSL 节点来计算材质的颜色和缩放
const baseTexture = texture( myTexture );
const animatedTexture = baseTexture.uv.add( vec2( time, 0 ) ); // 让纹理坐标随时间移动

const material = meshStandardMaterial({
    color: animatedTexture // 将节点直接赋值给颜色属性
});

Three.js TSL 教程与示例 - 深入学习着色器语言

https://www.goodtsl.com/zh-CN

https://www.goodtsl.com/en/learnTSL/r3f-quickstart

基于 Node 的用于 Three.js 着色器的编辑器

https://www.tsl-graph.xyz/

demos

OpenGL Shading Language

GLSL / OpenGL 着色语言

https://github.com/KhronosGroup/glsl

GLSL 着色器

https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders

OpenGL ES 2.0 => WebGL

OpenGL ES 3.0 => WebGL 2

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

npm package.json exports

https://docs.npmjs.com/cli/v11/configuring-npm/package-json#exports

https://chatgpt.com/c/6a3168a8-41b0-83ea-85cd-4eb9fa99f54f

refs

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！