Three.js 著色語言和有符號距離場

學習 Three.js 著色語言的全部內容，並專注於有符號距離場。

從這 5.5 小時的課程，你會學到

Three.js 著色語言( Shading Language )
有符號距離場 (Signed Distance Fields，SDF)
使用 TSL 匯入貼圖或建置工具
建構開發環境
TSL 導入（顏色、紋理、convertColorSpace 和 positionLocal）
編寫片段著色器和頂點著色器
使用 fract、sin、cos、atan、floor 和 mod 產生圖案
繪製 2D 和 3D SDF 線條和形狀
使用 Uniform 和 UniformArray
繪製距離線
為 2D 和 3D SDF 著色
光線步進
為 3D SDF 照明
SDF 陰影
SDF 反射
SDF 並集、交集和減集
環境光遮蔽
菲涅爾效應
自適應 DPR
大氣散射
分形布朗運動
Gerstner/三曲面水演算法
添加雲
域重複
Mandelbulb、Juliabulb 和 Kleinian 反演分形
以及更多

要求

這是一門關於 Three.js 的中級課程，您應該已經具備一定的使用經驗。
您需要一塊能夠運行 GLSL 和 WGSL 著色器程式碼的現代顯示卡。

課程說明

Three.js 著色語言 (TSL) 是一個旨在簡化 Three.js 生態系內著色器開發的框架。

有符號距離場是一種主要使用數學函數繪製場景和動畫的方法。

您可以使用有符號距離場繪製任何內容，而 TSL 使開發者更容易上手，尤其是那些對底層 GLSL、WGSL 或圖形程式設計缺乏深入了解的開發者。

因此，在本課程中，我們將涵蓋以下內容：

基礎環境開發設置，
導入所需庫，
使用導入映射或打包/建置工具，
討論 TSL 場景的先決條件，
片段著色器座標，
創造多個由淺入深的動畫圖案，
繪製各種樣式的線條，
實作 uniform 變數和 uniform 陣列，
使用 GUI 與場景互動，
學習符號距離場 (SDF) 的基礎知識，
使用 SDF 資訊繪製距離線，
為 2D SDF 著色和添加動畫，
透過建立模型並添加鍵盤互動進行練習，
學習光線步進的基礎知識，
為 3D SDF 照明，
使用 Lambertian 光、環境光和 Phong 光，
使用硬陰影和軟陰影，
實現 SDF 反射，
實現自適應設備像素比，
為 3D SDF 著色和添加動畫，
添加大氣效果散射
實現環境光遮蔽( Ambient Occlusion )
應用菲涅爾效應( Fresnel Effect )
學習分形布朗運動( Fractal Brownian Motion )
新增格斯特納/擺線演算法水體效果
加 Clouds,
域重複
曼德爾球( Mandelbulb )、朱利亞球( Juliabulb )和克萊因反演分形( Kleinian Inversion fractals )
以及更多內容

透過使用 TSL 基於節點的著色器圖系統，開發者無需手動編寫複雜的 GLSL 或 WGSL 程式碼即可建立和管理著色器。

TSL 與渲染器無關，這意味著使用它創建的著色器可以無縫地在不同的渲染後端（例如 WebGL 和 WebGPU）上運行。

由於 TSL 是在 JavaScript 或 TypeScript 層編寫的，與您現有的 Three.js 程式碼並行，因此您可以受益於 IDE 提供的各種功能，例如 IntelliSense 程式碼補全、程式碼格式化和程式碼檢查。您的最終生產代碼還可以受益於打包工具提供的 tree shaking 功能。

感謝您參加我的 Three.js 著色語言 (TSL) 和有符號距離場課程。

Sean

目標受眾

有 Threejs 使用經驗並希望使用有符號距離場技術編寫著色器程式碼的人。

講師簡介

Sean Bradley

您好，我是 Sean。

我從事IT工程工作超過 25 年，致力於為教育、航空、銀行、無人機、遊戲和電信等行業構建和管理即時、低延遲、高可用性、非同步、多執行緒、遠端管理、全自動監控的解決方案。

此外，我還創建並撰寫了數百個 GitHub 開源程式碼庫、Medium 文章和 YouTube 影片教學。

Udemy 永久擁有課程許多課程約 NT400(點擊連結看更多)
✨年訂閱每月 NT350(再享特別優惠：年度訂閱首年享 25% 折扣) 🌈 悠遊 Udemy 的 26000+ 門課，最大化學習 ( 原價 NT635/月 )
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現