Three.js Shading Language All In One

Three.js Shading Language All In One

TSL / Three.js 着色语言

https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language

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

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

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

Three.js 支持的主流 3D 模型格式有哪些？

import { TGALoader } from 'three/addons/loaders/TGALoader.js';

const loader = new TGALoader();

loader.load('/texture.tga', (texture) => {
  material.map = texture;
  material.needsUpdate = true;
});

https://chatgpt.com/c/6a38f2b0-e05c-83ea-ac66-8a89929ea09f

refs

https://www.cnblogs.com/xgqfrms/p/15908681.html

---

---

©xgqfrms 2012-2021

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

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

---