课程介绍
全面掌握Three.js着色语言，专攻符号距离场（Signed Distance Fields）。
您将会学到
- Three.js 着色语言
- 符号距离场（Signed Distance Fields）
- 使用带有导入映射或构建工具的 TSL
- 设置开发环境
- TSL 中颜色、纹理、转换颜色空间和局部位置的导入
- 编写片段着色器和顶点着色器
- 使用 fract、sin、cos、atan、floor、mod 生成图案
- 在2D和3D中绘制SDF线条和形状
- 使用一致变量（Uniform）和一致变量数组（UniformArray）
- 绘制距离线
- 对2D和3D SDF进行着色
- 光线步进（Raymarching）
- 对3D SDF进行照明
- SDF阴影
- SDF反射
- SDF联合、交集和减法操作
- 环境遮挡（Ambient Occlusion）
- 菲涅耳效应（Fresnel Effect）
- 自适应设备像素比（Adaptive Device Pixel Ratio, DPR）
- 大气散射（Atmospheric Scattering）
- 分形布朗运动（Fractal Brownian Motion）
- Gerstner/特罗奇oidal 水算法
- 添加云层
- 域重复（Domain Repetition）
- 曼德尔球（Mandelbulb）、朱利亚球（Juliabulb）和克莱因群反转（Kleinian Inversion）分形
- 以及更多内容
要求
- 这是一门关于 Three.js 的中级课程，你应该已经有一些使用它的经验。
- 你需要一块能够运行 GLSL 和 WGSL 着色器代码的现代显卡。
描述
Three.js Shading Language (TSL) 是一个专为简化在 Three.js 生态系统中着色器开发而构建的框架。
符号距离场（Signed Distance Fields, SDF）是一种主要使用数学函数来绘制场景和动画的方法。
利用符号距离场，你可以绘制任何东西，而 TSL 使得开发者，特别是那些没有低级 GLSL、WGSL 或图形编程深入知识的人，更加容易接触到这些功能。
因此，在本课程中，我们将涵盖以下内容：
- 基础环境开发设置
- 导入必要的库
- 使用导入映射或捆绑器/构建工具
- 讨论 TSL 场景的前提条件
- 碎片着色器坐标
- 创建从简单到复杂的几种动画模式
- 绘制各种风格的线条
- 实现一致变量和一致变量数组
- 使用 GUI 与我们的场景互动
- 学习符号距离场的基础知识
- 使用 SDF 信息绘制距离线
- 对 2D SDF 进行着色和动画处理
- 通过构建一些东西并添加键盘交互进行实践
- 学习光线步进的基础知识
- 对 3D SDF 进行照明
- 使用兰伯特式、环境光和 Phong 高光
- 使用硬阴影和软阴影
- 实现 SDF 反射
- 实现自适应设备像素比
- 对 3D SDF 进行动画处理和着色
- 添加大气散射
- 实现环境遮挡
- 应用菲涅耳效应
- 学习所有关于分形布朗运动的知识
- 添加 Gerstner/Trochoidal 算法水效果
- 添加云层
- 域重复
- Mandelbulb、Juliabulb 和 Kleinian Inversion 分形等
通过使用 TSL 的基于节点的着色器图系统，开发者可以创建和管理着色器，而无需手动编写复杂的 GLSL 或 WGSL 代码。
TSL 不依赖于渲染器，这意味着使用它创建的着色器可以在不同的渲染后端（如 WebGL 和 WebGPU）之间无缝工作。
由于 TSL 是在 Javascript 或 TypeScript 层面上编写的，位于您现有的 Three.js 代码旁边，您将能够从 IDE 提供的功能中受益，比如 IntelliSense 代码补全、代码格式化和 linting。您的最终生产代码也可以从捆绑器提供的摇树优化中受益。
感谢您参与我的 Three.js Shading Language (TSL) 和 Signed Distance Fields 课程。
此课程面向哪些人：
- 有 Three.js 使用经验并希望使用符号距离场技术编写着色器代码的人。