網頁視覺特效最強必殺技大全：用 Three.js 與 Shader 圖說核心原理 x 閃避踩雷 x 創作指南（iThome鐵人賽系列書）【軟精裝】

蘇桓晨（Umas）

跨足前端、設計、3D 領域的前端3D視覺特效創作家，擁有智慧建築、BIM、GIS 等系統開發經驗，熱愛研究獨特技術與探索複雜主題，經常在社群中分享研究成果、組織讀書會研究相關領域，並且創作前端 3D 視覺特效作品。

推薦序
序言

CHAPTER 01 導論：前端 3D 視覺特效是什麼？
誰適合學習前端 3D 視覺特效？
學習前端 3D 視覺特效有什麼好處？
網頁視覺特效包含哪些做法？
我所準備的資源
本書內容

PART Ⅰ | 用 three.js 理解 3D 世界觀
CHAPTER 02 安裝、建置環境
透過 CodePen 上手
透過 Live Server 上手
CHAPTER 03 Hello three.js!
三者關係
從 three.js 開始，要怎麼起頭？
開始程式碼
CHAPTER 04 three.js 空間座標――讓世界繞著我旋轉！
巢狀結構
以程式碼示範
設定空間的方法？
CHAPTER 05 什麼！空間被扭曲了？我 three 願稱你為最強――矩陣
順序到底有沒有差？
在 three.js 看這個問題
矩陣
在 three.js 實作該方法
CHAPTER 06 The World ！砸瓦魯多！歐拉歐拉歐拉！――歐拉角跟四元數
天球問題
在 three.js 應用歐拉角
在 three.js 應用四元數
製作天球
CHAPTER 07 three.js 圓弧的藝術家！弧線的教授！――OrbitControls 軌道控制器
Control
OrbitControls 控制「目標」跟「鏡頭」
實作
Target 不正確問題
總結：target 跟 lookAt 的差異
CHAPTER 08 three.js 的一方通行：矢量操作――全面釐清向量與底層特性
我們需要有向量操作能力
學一方通行在短時間內分析向量來反擊 immutable
不止向量，這觀念遍布 three.js
必學的向量函式
如同「矢量操作」般必殺的向量函式
CHAPTER 09 你有被光速踢過嗎？解析 3D 界的黃猿――光的底層原理與介紹
最常用的光源及其原理
這些光怎麼來的？
光就是內積算出的結果
以上 three.js 都幫你包好了
CHAPTER 10 傲慢的太陽――光的開發
實作地球與太陽

PART Ⅱ | 用 Three.js 實戰 3D 作品
CHAPTER 11 前端視覺特效工程師實戰：全球戰情室――貼圖原理
做一個地球可以做什麼？――地球的應用
理解貼圖的運作模式
數不清的貼圖
小結
CHAPTER 12 前端 3D 視覺特效開發實戰：全球戰情室――實作地球
成品
運用貼圖
加上雲圖
跨入修圖領域
加上互動
CHAPTER 13 3D 地球特效開發實戰：留下飛雷神術式吧！――經緯度座標轉換
開發鏡頭跳躍功能
完成品
經緯度轉三維空間座標
結論
CHAPTER 14 three.js 3D 地球特效開發實戰：飛雷神之術走跳地球！――鏡頭追蹤與浮動文字
開發功能
地球的潛力
CHAPTER 15 three.js 3D 圖表特效開發實戰――繪畫就跟佐為下棋一樣簡單：線段原理
線段是什麼？

三個重要的線段物件：Shape、Path、Curve
線段物件：路徑 Path
線段物件：曲線 Curve
CHAPTER 16 3D 圖表特效開發實戰――來人！餵公子吃餅：圓餅圖
開發線段
小結
CHAPTER 17 3D 圖表特效開發實戰――你爹只給個爛餅，大不了還你 3D 爛餅：用粉圓體做立體圓餅圖
完成品
開發立體圓餅圖
加上圖例
完成品
小結
CHAPTER 18 three.js GIS 系統開發實戰――鄉鎮市區 GIS 系統：SVG、GeoJson 的應用
由 SVG 渲染模型
讀取 SVG
將 Path 轉成 3D Mesh
將數值轉成物件高度
完成品
CHAPTER 19 three.js GIS 系統開發實戰――成為網頁特效的鹿丸！影子模仿術：陰影的終極原理
陰影的實作
陰影的本質
渲染問題解決方法
Self-Shadow Aliasing 問題
Bias 修正
延伸的陰影技術：Shadow Map、PCF、PCSS
各種光源所產生的陰影差異
小結
CHAPTER 20 three.js 前端 3D 視覺特效開發實戰――設備檢視器：倒影特效
成品
鏡面反射原理
開發鏡面特效
成果
envMap 是什麼？
envMap 流程
CubeCamera 怎麼照出 360 度照片的？
什麼是 HDRI
Cube 是什麼意思？
CHAPTER 21 前端 3D 視覺特效開發實戰――智慧工廠：倒影特效
成品
開發鏡面特效
進階鏡面特效
成品
小結
CHAPTER 22 智慧工廠開發實戰――Dejavu！讓鏡頭跟著拓海一起飄移：鏡頭追蹤、飄移特效
準備程式碼
鏡頭追蹤
鏡頭飄移
小結

PART Ⅲ | 用 Shader 實戰視覺特效
CHAPTER 23 WebGL Shader――你好啊大哥哥，沒想到你可以到 Shader 來呢！
Shader 是什麼　
Shader 要如何開發
小結
延伸閱讀
CHAPTER 24 WebGL Shader――從認識 GLSL 開始釐清 Shader
Shader 是什麼？
寫Shader 從認識 GLSL 開始
小結
CHAPTER 25 WebGL Shader――透過自製環境光實作 Shader 傳值
實作即時變化的環境光
完成品
從實作過程中釐清變數類型
小結
CHAPTER 26 使用 Shader 創造漸層
為甚麼要用 Shader?
快速建置 Shader 環境――透過 p5.js
快速建置 Shader 環境――透過 three.js
建立具有光暈的粒子――原理
建立具有光暈的粒子――實作放射狀漸層
建立具有光暈的粒子――移動中心點
建立具有光暈的粒子――反白整個畫面
更多探索
CHAPTER 27 WebGL Shader――透過 Shader 製作光暈：速成篇
用 three.js 製作 Shader 材質
在 Vertex Shader 加上 vertexNormal
在 Fragment Shader 加上「神祕的程式碼」
完成品
小結
CHAPTER 28 WebGL Shader――透過 Shader 製作光暈：Shader 傳值的原理
觀察程式碼
vertexNormal 有值嗎？如果有的話，數值是從哪裡來的？
CHAPTER 29 WebGL Shader――透過 Shader 製作光暈：光暈原理與多種變化形式
dot() 是在哪裡宣告的？它的作用是什麼？
我們釐清了關鍵問題，現在順一遍程式碼
透過 intensity 生成顏色
延伸嘗試
小結
CHAPTER 30 WebGL Shader――用 Shader 做全視角內光暈、星球材質
成品
全視角的內光暈
內光暈在地球的應用
外光暈
小結

後記