|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/threejs-shading-language/
课程评论：没有评论
课程名称：Three.js 着色语言与有符号距离场 课程概述：Three.js 着色语言（TSL）是一个框架，旨在简化 Three.js 生态系统中的着色器开发。有符号距离场（SDF）是一种主要通过数学函数绘制场景和动画的方法。借助 SDF，你可以绘制任何内容，而 TSL 使开发者（尤其是那些没有深入低级 GLSL、WGSL 或图形编程知识的人）更容易使用该技术。 在本课程中，我们将涵盖以下内容： - 基本环境开发设置 - 导入所需库 - 使用导入地图或打包工具 - 讨论 TSL 场景的前置条件 - 片段着色器坐标 - 从简单到复杂创建多个动画图案 - 绘制各种样式的线条 - 实现统一变量和统一数组 - 使用图形用户界面与场景交互 - 学习有符号距离场的基础知识 - 利用 SDF 信息绘制距离线 - 给 2D SDF 上色和动画 - 实践构建项目并添加键盘交互 - 学习光线步进的基础知识 - 照明 3D SDF，包括使用兰伯特光照、环境光和冯氏高光 - 实现硬阴影和软阴影 - 实现 SDF 反射 - 适应设备像素比 - 给 3D SDF 上色和动画 - 添加大气散射 - 实现环境遮蔽 - 应用菲涅尔效应 - 深入了解分形布朗运动 - 添加格斯特纳/旋转算法水效应 - 添加云彩、领域重复等 通过使用 TSL 的节点式着色器图形系统，开发者可以创建和管理着色器，而无需手动编写复杂的 GLSL 或 WGSL 代码。TSL 与渲染器无关，这意味着用该技术创建的着色器能够在 WebGL 和 WebGPU 等不同渲染后端中无缝工作。由于 TSL 是在 JavaScript 或 TypeScript 层编写的，结合你现有的 Three.js 代码，你将能够受益于你的 IDE 提供的功能，如代码自动完成、代码格式化和代码检查。此外，最终的生产代码也可以通过打包工具的树摇优化获得改善。 感谢您参加我的 Three.js 着色语言（TSL）与有符号距离场课程。 Sean
Three.js Shading Language (TSL) is a framework built to simplify shader development within the Three.js ecosystem.Signed Distance Fields are a way to draw scenes and animations predominantly using mathematical functions.You can draw anything with Signed Distance Fields, and TSL makes that more accessible for developers, especially those without deep knowledge of low-level GLSL, WGSL or graphics programming.So, in the course, we will cover,Basic environment development setup,Importing the required libraries,Using import Maps or a bundler / build tool,Discuss the prerequisites of a TSL scene,Fragment Shader coordinates,Create several animated patterns from easy to more advanced,Draw various styles of lines,Implement uniforms and uniform array,Interact with our scenes using a GUI,Learn the basics of sign distance Fields,Draw distance lines using SDF information,Colouring and animating 2D SDFs,Practice by building something and adding keyboard interactivity,Learn the basics of Ray marching,Lighting 3D SDFs,Using Lambertian, Ambient and Phong specular,Using hard and soft shadowing,Implement SDF reflections,Implement adaptive device pixel ratio,Colouring and animating 3D SDFs,Add atmospheric Scattering,Implement, Ambient Occlusion,And apply Fresnel Effect,Learn all about Fractal Brownian Motion,Add Gerstner/Trochoidal algorithm water effect,Add Clouds,Domain Repetition,and much moreBy using TSL's node-based shader graph system, developers can create and manage shaders without needing to write complex GLSL or WGSL code manually.TSL is renderer-agnostic, meaning shaders created with it work seamlessly across different rendering backends like WebGL and WebGPU.Since TSL is written at the Javascript or TypeScript layer, along side your existing Three.js code, you will be able to benefit from the features provided by your IDE, such as IntelliSense code completion, code formatting and linting. Your final production code can also benefit from tree shaking provided by your bundler.Thanks for taking part in my Three.js Shading Language (TSL) and Signed Distance Fields course.Sean
