為什麼是 webGL

我知道，es6 語法簡介的迷人、react 的火紅、webpack...框架不斷竄出，從今年的鐵人幫大賽就看得出來。

不過，前端的可能性絕對不是如此而已，對我來說，儘管 React 生態圈非常熱絡，而且社群也逐漸趨於成熟，大幅度的提升前端工程化的可能性，但我們始終會面對到最純粹的問題，「畫面的呈現」。

所以這次既然都挑戰鐵人賽了，不如來講一些自己比較不擅長的部分。儘管學習這些技術，對一位前端工程師來講並沒辦法在前端開發或是工程化上有太大的幫助。不過，能夠自己動手創造一些有趣的圖像、動畫、互動，不就是當初我們傻傻踏入這行的初衷嗎？

前置條件

為了之後良好的閱讀體驗，在繼續之前，我希望各位有：

• HTML 基本語法
• 基本的 javascript 語法了解：由於本系列文都會圍繞在 three.js 跟 webGL 之上，所以盡量有 js 的基礎會比較容易看懂程式碼，當然如果你熟悉其他程式語言，其實也能很快地了解
• 不怕數學：系列文章中期會介紹一些數學概念，畢竟 3D 世界多了一個維度，用到數學的機會也無可避免地變多了

本系列簡介

由於 3D 所涵蓋的範圍實在太廣了，每一項都要細講 30 天絕對不夠。不過，這邊我會把我所理解的部分列出來，讓不得其門而入的初學者們（包含自己）也有個大概的方向。

• 3D 的世界：我們所看見的物體是如何構成的？
  這一個章節，我們會來談談 3D 的基礎，包含影像如何形成的，以及光線、camera、scene 等等在 3D 繪圖當中常常用到的概念。某些概念可能會需要一些數學基礎（像是微積分、矩陣、三角函數），別擔心，我們只會用到基礎，不會有太複雜的公式出現
  • FPS
  • camera
  • Scene
• webGL 語法簡介：原本想說直接從 three.js 開始講的，但想了想，讓自己（和各位）接觸一下 webGL 語法也不錯，畢竟當 three.js 的 API 不滿足你的需求時，我們一樣可以透過 webGL 來擴充自己想要的功能。
• three.js 語法簡介：這邊會是本系列文的重點，我會盡我所能地介紹常用的 Three.js API，並且使用這些 API 來做一些應用
• 基本動畫與互動
• 基本影像處理：如果時間上來得及，我會介紹一些影像處理常見的技巧，並且用 three.js 或是單純操作 imageData 來做處理。

一起踏入 3D 的世界吧！