身為3D網頁視覺特效工程師，深知此坑水深，我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。

前端視覺特效可以做什麼？

很多，最常見的用途是網頁品牌形象、互動體驗。包含你在awwwards.com看到的網站。這是B2C、C2C上常見的。

而我專攻的領域，是B2B，其範圍就很大。例如：

1. GIS（Geographic Information System 地理資訊系統）
2. BIM（Building Information Modeling 建築資訊模型）
3. CFD（Computational Fluid Dynamics 計算流體力學）
4. 廠房監控系統（Facility Monitoring Control System）
5. 模擬系統（如人流、車流模擬）。
6. 數位戰情室（Digital Boardroom）

網頁視覺特效包含哪些做法？

很多。可以用CSS，也可以用SVG。兩者都能做得很傑出。但我會聚焦在使用WebGL做特效。

為什麼選擇WebGL？

因為WebGL的延展性很大，它可以很底層。

先介紹CSS跟SVG如何運作：

• CSS可透過修改DOM元素屬性產生特效
• SVG身為XML-based的圖檔，修改標籤元素的屬性做特效。甚至透過修改path等方式實作動畫。這些都是相當直覺且快速的特效開發，甚至可以用到少許3D的效果。

然而，如果要往3D走，而且要製作一個自定義的場景，那走入WebGL是不可或缺的。

比如說你要有物理設定：你要做一個有重力的場景，所有物體都會往下掉，甚至每個物體互相有引力。在這個場域中，你就可以完很多互動特效，但若要在CSS或SVG上做，限制就會很多，而且效能上也沒辦法作太多處理。

所以，我這30天會專注在WebGL開發。

WebGL負責將畫面渲染到螢幕上，是低階的API，其寫法跟網頁差異甚大。而開發實務上，大多還是會選定一個較為高階的套件，例如下面幾種：

• Three.js(最多網路資源)
• Babylon(微軟員工為首所創)
• P5.js(Processing.org為首，專注於互動藝術)

以上都能幫助我們實現WebGL。

我所準備的資源

1. CodePen
   所有示例，都會附上程式碼。所有教學的程式碼都在我的codepen。你完全不需要擔心從中間篇章開始看會跟不上。因為我都會準備開頭的程式碼，跟結束的程式碼。30天系列程式碼連結。
   
2. 非常詳細的圖解
   30天全部的圖片總共500張，其中432張都是我自己製作的圖片，從網路上引用的有68張，所以從圖解中更容易吸收我所提到的原理
3. 豐富的動畫解說
   所有GIF動圖總共127張，這些都是我一個一個錄影而成。如此一來，就更容易理解其中的道理。
4. 詳盡的參考資料
   所有原理，我都會附上參考資料，使得大家可以延伸閱讀。但實作相關的文章其參考資料較少，因為大家數都是我在實作憑藉經研而得。如此一來，你就不要採過我採過的坑，不用去繞路，學習速度更快。

接下來30天的介紹內容：

我們主題是前端視覺特效，其應用方法很多種，不會只是單一的three.js，但會由它打頭陣。因為它對前端工程師來說是很好的進入點。

反觀如果從WebGL開始學，那學習曲線就太陡了。

第一章：Three.js世界觀

第一篇聚焦在Three.js，因為它網路資源相當多。雖然它官方說明少得可憐，但很多他沒提到的東西，都是業界知識，我除了介紹Three.js以外，業界知識也本次鐵人賽的重點。以下為第一章所用到的圖片：

• 視角控制
  
• 光的原理
  

從入門到進階，逐一介紹three.js的概念模型。包含：

• Day2: ThreeJS、OpenGL、WebGL：誰是誰？我要怎麼開始？
• Day3: Three.js空間座標！讓世界繞著我旋轉！
• Day4: Three.js 什麼！空間被扭曲了？我願稱你為最強——矩陣
• Day5: The World！砸瓦魯多！歐拉歐拉歐拉！——歐拉角跟四元數
• Day6: three.js 圓弧的藝術家！弧線的教授！——OrbitControl軌道控制器
• Day7: three.js的一方通行：矢量操作——全面釐清向量與底層特性
• Day8: Three.js 你有被光速踢過嗎？解析3D界的黃猿——光的底層原理與介紹
• Day9: Three.js 傲慢的太陽——光的開發與矩形區域光原理

第二章：Three.js實戰視覺特效

介紹完後，我會接著在Three.js上介紹視覺特效的應用，包含鏡面特效以及反射玻璃特效，使得作品精緻度可以提高。以下為文章所用到的圖片：

• 貼圖層次豐富的地球
  
• 地球鏡頭追蹤與浮動文字
  
• 立體圓餅圖
  
• 立體地圖
  
• 工廠檢視器
  
• 工廠倒影
  
• 鏡頭追蹤
  

這階段你會很有成就感。包含：

• Day10: three.js 前端視覺特效工程師實戰：全球戰情室—貼圖原理
• Day11: three.js 前端3D視覺特效開發實戰：全球戰情室—實作地球
• Day12: three.js 3D地球特效開發實戰：留下飛雷神術式吧！—經緯度座標轉換
• Day13: three.js 3D地球特效開發實戰：飛雷神之術走跳地球！—鏡頭追蹤與浮動文字
• Day14: three.js 3D圖表特效開發實戰—繪畫就跟佐為下棋一樣簡單：線段原理
• Day15: three.js 3D圖表特效開發實戰：來人！餵公子吃餅：圓餅圖
• Day16: three.js 3D圖表特效開發實戰：你爹只給個爛餅，大不了還你3D爛餅：用粉圓體做立體圓餅圖
• Day17: three.js GIS系統開發實戰：鄉鎮市區GIS系統：SVG、GeoJson的應用
• Day18: three.js GIS系統開發實戰：成為網頁特效的鹿丸！影子模仿術：陰影的終極原理
• Day19: three.js 智慧工廠開發實戰：梅利奧達斯的全反射！—模型檢視器
• Day20: three.js 智慧工廠開發實戰：倒影特效
• Day21: three.js 智慧工廠開發實戰：Dejavu! 讓鏡頭跟著拓海一起飄移：鏡頭追蹤、飄移特效

第三章：Shader實戰視覺特效

等到這些都介紹完之後，會敞開Shader的大門。從這邊開始世界會變得不太一樣，以下為所用到的圖片：

• 用shader做出來的光暈
  
• 內光暈
  
• 多種shader特效
  
• 將光暈應用到地球
  
• 物件邊框
  

從認識Shader開始，透過Shader創造漸層、光暈。

• Day22: WebGL Shader—你好啊大哥哥，沒想到你可以到Shader來呢！
• Day23: WebGL Shader——從認識GLSL開始釐清Shader
• Day24: WebGL Shader——透過自製環境光實作shader傳值
• Day:25 使用Shader創造漸層
• Day26: WebGL Shader—透過Shader製作光暈：速成篇
• Day27: WebGL Shader—透過Shader製作光暈：Shader傳值的原理
• Day28: WebGL Shader—透過Shader製作光暈（三）
• Day29: WebGL Shader—用Shader做全視角內光暈、星球材質
• Day30: WebGL Shader—製作物件的邊框

以上內容繁多而且涉及很多面向的應用。但我相信看完這些之後一定功力大增。