【Udemy中英字幕】Three.js Shading Language and Signed Distance Fields

Three.js 着色语言和有符号距离场

学习有关 Three.js 着色语言的所有知识，同时专攻有符号距离场。

讲师：Sean Bradley

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

• Threejs 着色语言
• 有符号距离场
• 使用 TSL 与导入映射或构建工具
• 设置开发环境
• TSL 导入颜色、纹理、convertColorSpace 和 positionLocal
• 编写片段和顶点着色器
• 使用 fract、sin、cos、atan、floor、mod 生成模式
• 在 2D 和 3D 中绘制 SDF 线条和形状
• 使用 Uniform 和 UniformArray
• 绘制距离线
• 为 2D 和 3D SDF 着色
• 光线行进
• 照明 3D SDF
• SDF 阴影
• SDF 反射
• SDF 并集、相交和减法
• 环境光遮蔽
• 菲涅尔效应
• 自适应 DPR
• 大气散射
• 分形布朗运动
• 以及更多

探索相关主题

要求

• 这是关于 Three.js 的中级课程，您应该已经具有一些使用它的经验。
• 您将需要一张能够运行 GLSL 和 WGSL 着色器代码的现代显卡。

描述

Three.js 着色语言 (TSL)是一个为简化 Three.js 生态系统内的着色器开发而构建的框架。

有符号距离场是一种主要使用数学函数来绘制场景和动画的方法。

您可以使用有符号距离场绘制任何东西，TSL 使开发人员更容易理解这一点，特别是那些不具备低级 GLSL、WGSL 或图形编程深度知识的开发人员。

因此，在课程中，我们将介绍

• 基本环境开发设置，

• 导入所需的库，

• 使用导入 Maps 或打包工具/构建工具，

• 讨论 TSL 场景的先决条件，

• 片段着色器坐标，

• 创建从简单到高级的多种动画图案，

• 绘制各种风格的线条，

• 实现制服和制服阵列，

• 使用 GUI 与场景交互，

• 了解符号距离场的基础知识，

• 使用SDF信息绘制距离线，

• 为 2D SDF 着色并制作动画，

• 通过构建一些东西并添加键盘交互来练习，

• 了解射线行进的基础知识，

• 照明 3D SDF，

• 使用 Lambertian、Ambient 和 Phong 镜面反射，

• 使用硬阴影和软阴影，

• 实现 SDF 反射，

• 实现自适应设备像素比率，

• 为 3D SDF 着色并制作动画，

• 添加大气散射，

• 实现、环境光遮蔽、

• 并应用菲涅尔效应，

• 了解有关分形布朗运动的所有信息，

• 以及更多

通过使用 TSL 的基于节点的着色器图形系统，开发人员可以创建和管理着色器，而无需手动编写复杂的 GLSL 或 WGSL 代码。

TSL 与渲染器无关，这意味着用它创建的着色器可以在不同的渲染后端（如 WebGL 和 WebGPU）之间无缝工作。

由于 TSL 是在 Javascript 或 TypeScript 层编写的，与您现有的 Three.js 代码一起，您将能够受益于 IDE 提供的功能，例如 IntelliSense 代码完成、代码格式化和 linting。您的最终生产代码还可以受益于捆绑器提供的 tree shake。

感谢您参加我的 Three.js 着色语言 (TSL) 和有符号距离场课程。

肖恩

本课程适合哪些人：

• 具有 Threejs 经验并希望使用有符号距离场技术编写着色器代码的人。