内容 隐藏
1 Three.js 着色语言与有向距离场
2 Three.js Shading Language and Signed Distance Fields
2.1 学习内容
2.2 要求
2.3 描述
2.4 本课程适合谁：

Three.js 着色语言与有向距离场

Three.js Shading Language and Signed Distance Fields

了解有关 Three.js 着色语言的所有信息，同时专攻有向距离场。

学习内容

  • Threejs 着色语言
  • 有向距离字段
  • 将 TSL 与导入映射或构建工具一起使用
  • 设置开发环境
  • TSL 导入 or color、texture、convertColorSpace 和 positionLocal
  • 编写片段着色器和顶点着色器
  • 使用 fract、sin、cos、atan、floor、mod 生成图案
  • 在 2D 和 3D 中绘制 SDF 线条和形状
  • 使用 Uniform 和 UniformArray
  • 绘制距离线
  • 为 2D 和 3D SDF 着色
  • 射线行进
  • 照明 3D SDF
  • SDF 阴影
  • SDF 反射
  • SDF 并集、相交和差集

要求

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

描述

Three.js 着色语言 （TSL） 是一个框架，旨在简化 Three.js 生态系统中的着色器开发。

有向距离场 （Signed Distance Fields） 是一种主要使用数学函数绘制场景和动画的方法。

您可以使用有符号距离场绘制任何内容，而 TSL 使开发人员更容易使用它，尤其是那些对低级 GLSL、WGSL 或图形编程没有深入了解的人。

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

  • 基本环境开发设置，

  • 使用导入映射或打包器/构建工具导入所需的库，

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

  • Fragment Shader 坐标、

  • 创建多个动画图案，从简单到更高级，

  • 绘制各种风格的线条，

  • 实现 Uniforms 和 UniformArray，

  • 使用 GUI 与我们的场景交互，

  • 了解有向距离场的基础知识，

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

  • 为 2D SDF 着色和动画化

  • 学习 Raymarching 的基础知识，

  • 使用 Lambertian、Ambient 和 Phong 镜面反射照明 3D SDF，

  • 使用硬阴影和软阴影，

  • 实施 SDF 反射，

  • 为 3D SDF 着色和动画。

  • 以及更多

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

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

由于 TSL 是在 Javascript 或 TypeScript 层编写的，因此与现有的 Three.js 代码一起编写，因此您将能够从 IDE 提供的功能中受益，例如 IntelliSense 代码完成、代码格式化和 linting。您的最终产品代码也可以从打包器提供的 tree shaking 中受益。

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

肖恩

本课程适合谁：

  • 具有 Threejs 经验并希望使用有向距离场技术编写着色器代码的人。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。