已經知道自己要做什麼、要選哪個 stack？直接看需求導向篇。
這篇的目的是建立整個領域的心智模型：這些技術是什麼、彼此什麼關係、整個領域在往哪裡走。
1. WebGL → Three.js → R3F → Drei #
這四個東西是同一條路上的四個層次，越下層越接近 GPU，越上層越接近 React 元件。
WebGL ← 瀏覽器底層 GPU API
↓
Three.js ← WebGL 的高階 3D 引擎
↓
React Three Fiber (R3F) ← React renderer for Three.js
↓
Drei ← R3F 的工具函式庫
WebGL #
瀏覽器直接操作 GPU 的 API，接近 OpenGL ES。需要自己管理 shader、buffer、matrix、camera、rendering pipeline。幾乎沒有人直接寫 WebGL——除非在做底層引擎或學圖學。
Three.js #
WebGL 的高階封裝。把「建一個場景、放一個模型、打一盞燈、讓相機可以旋轉」這些事情從幾百行 WebGL 壓縮到幾十行。業界做 3D 官網、產品展示、互動體驗的主流選擇。
React Three Fiber（R3F） #
Three.js 的 React renderer。同樣的 3D 場景，用 JSX 元件來描述而不是命令式的 JS。
// Three.js 寫法
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({ color: 'red' })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// R3F 寫法
<mesh>
<boxGeometry />
<meshStandardMaterial color="red" />
</mesh>
好處是可以直接整合 React hooks、Zustand、Next.js、Suspense。代價是多了一層抽象，debug 相對複雜。
Drei #
R3F 的工具函式庫，提供大量現成元件：OrbitControls、Environment、Html、Text、useGLTF、Float、ContactShadows……幾乎是 R3F 專案的標配，大幅減少重複造輪子。
2. 動畫工具：GSAP、Framer Motion、Lenis #
三個常一起出現，但解決的是不同問題。
GSAP #
高階動畫引擎，強項是 timeline 和 scroll animation。Apple 風格的官網、有敘事感的 landing page 幾乎都用它。
gsap.timeline()
.from('.title', { opacity: 0, y: 60, duration: 1 })
.from('.subtitle', { opacity: 0, y: 40, duration: 0.8 }, '-=0.4')
ScrollTrigger 是它的插件，讓動畫跟著捲動進度走，做出「捲到這裡才觸發」的效果。
適合： hero section、scroll storytelling、sequence animation、SVG animation
Framer Motion #
React 動畫框架，declarative，跟 React state 深度整合。
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
whileHover={{ scale: 1.05 }}
/>
layout animation 特別強——元素位置改變時自動補間，不需要手動計算。
適合： UI interaction、hover、modal、page transition、list reorder
Lenis #
smooth scrolling 函式庫，讓原生捲動加上慣性，滾起來有 cinematic 質感。通常跟 GSAP ScrollTrigger 搭配。
const lenis = new Lenis()
lenis.on('scroll', ScrollTrigger.update)
三者定位 #
| GSAP | Framer Motion | Lenis | |
|---|---|---|---|
| 風格 | Imperative | Declarative | — |
| 強項 | Complex timeline | React UI animation | Smooth scroll |
| 適合 | Cinematic experience | Product UI | 搭配 GSAP |
3. HDRI 與 3D 光照 #
HDRI（High Dynamic Range Image）是一張 360 度的全景圖，記錄真實世界各方向的光線資訊。Three.js / R3F 把它當作環境光源，讓模型反射真實光線。
<Environment preset="studio" /> // Drei 內建 HDRI
同一個模型，換不同 HDRI 會有截然不同的質感：
studio：攝影棚白光，適合產品展示city：城市反光，金屬件會反射建築輪廓sunset：暖色側光，有電影感forest：漫射綠光，有戶外感
為什麼重要： PBR 材質的真實感高度依賴環境光。沒有 HDRI，金屬材質看起來就像塑膠；加了 HDRI，同樣的材質參數立刻有質感。
4. GLSL Shader #
GLSL（OpenGL Shading Language）是跑在 GPU 上的程式語言。前端開發中主要用來做 Three.js 無法用內建材質實現的視覺效果。
// fragment shader 範例：讓顏色隨時間變化
uniform float uTime;
varying vec2 vUv;
void main() {
vec3 color = vec3(vUv.x, vUv.y, sin(uTime) * 0.5 + 0.5);
gl_FragColor = vec4(color, 1.0);
}
Shader 能做什麼：
- 液體流動效果
- 全息投影感
- 扭曲、波紋
- 程序生成紋理
- 粒子系統
- 自訂光照模型
現代高規格前端大量依賴 shader 做差異化視覺。這是純 CSS / JS 無法實現的效果，也是「普通前端」和「creative developer」之間最明顯的技術分野。
5. WebGPU 與未來趨勢 #
WebGPU 是下一代瀏覽器 GPU API，比 WebGL 更現代，接近 Vulkan / Metal / DirectX 12。
比 WebGL 多了什麼：
- Compute shader（讓 GPU 做通用運算，不只是渲染）
- 更現代的 rendering pipeline
- 更好的 GPU 利用率
- 平行運算能力
2026 年 WebGPU 在主流瀏覽器的支援已經夠穩定，Three.js 也有 WebGPU renderer（WebGPURenderer）。短期內不會取代 WebGL，但高效能的 3D 應用開始往 WebGPU 遷移。
6. 前端職位正在分化 #
過去「前端工程師」是一個職位。現在開始分成三條路：
Product Frontend #
- React、TypeScript、business logic
- SaaS products、dashboard、CRM
- 核心能力：狀態管理、效能優化、component 設計
Creative Frontend #
- WebGL、shader、motion design
- 互動官網、品牌體驗、storytelling
- 核心能力：圖學、動畫、視覺敏感度
AI Full-stack Engineer #
- Next.js、AI SDK、agent orchestration
- AI 產品、automation、backend systems
- 核心能力：LLM 整合、prompt engineering、系統設計
三條路的薪資天花板不同，稀缺程度也不同。Creative Frontend 在台灣幾乎是空白市場。
7. 最有價值的能力組合 #
React + motion + shaders + WebGL/WebGPU
為什麼稀缺：
- 大多數前端只會 React，不碰圖學
- 大多數圖學工程師不熟 React 生態
- 兩者都懂的人極少
能做的事：
- 高級互動體驗
- 差異化產品視覺
- 別人做不出來的東西
8. 前端正在往哪裡走 #
過去前端在做：頁面
現在前端在做：即時互動體驗
這個轉變背後是：
- 遊戲化：更多動畫、即時反饋、沉浸感
- 圖學化：WebGL、shader、GPU 進入主流前端
- Cinematic 化：網站開始有電影敘事的質感
- GPU 化：運算從 CPU 移向 GPU，WebGPU 讓這件事在瀏覽器裡可行
現代高階前端工程師的身份越來越接近： technical artist、graphics engineer、creative developer、realtime experience engineer
這不是每個前端都要走的路，但它是目前薪資溢價最高、競爭者最少的方向。