看過來看過來！這邊的內容 (希望會) 很有趣

大家好～

我最近即將來到我碩士學業的尾聲，雖然說念的是相關科系，並順利的在某 U 遊戲公司實習，但總覺得自己的創意好有限！沒有有趣的點子，好困擾！

因此透過這 30 天的系列文章，一邊分享現在的酷酷新工具們、一邊探索那些好玩的專案們究竟是如何做到的。這篇的出發點是寫給跟我一樣，對炫砲、漂亮的動畫遊戲有興趣，但基於一些原因（不知道原來有這些工具、背景知識不足、缺少靈感跟創意）沒有動手的工程師們，或甚至是有動畫、3D 背景的人想跨足程式領域，希望這能成為一個墊腳石。

在這 30 天，我主要會使用 Three.js 來操作，首先試做一些最近很流行的 3D 網頁，同時介紹 rendering 的概念和理論，透過 shader 來創造一些美麗有趣的 math art，有機會的話搭配一些其他 library 嘗試來做一些小遊戲。

好的！接下來我來把剛剛提到的專有名詞們都稍做解釋一下。

Three.js

隨著電子設備的普及跟多元性不斷進步，網頁體驗變成近幾年的顯學，加上硬體的進步，網頁中若有 3D 元素似乎更能展現細節、創造互動、也更具現代感。

我個人覺得這些實在是帥死了！酷斃了！每次看到都殷切的好希望自己也能做出類似的網頁～～

Three.js 這時候就發揮用處了！Three.js 是一個 JavaScript 的框架，主要用來做網頁的 3D 互動、動畫、遊戲等。Three.js 也有蠻活躍的社群跟完整的官方文件，因此即便是自學也不困難！

Three.js – JavaScript 3D library

WebGL based

雖說 WebGL 也提供相同的目的，作為 JavaScript 的 API，WebGL 直接在瀏覽器與 GPU 溝通，因此可以提昇運算的效率，但 WebGL 的學習曲線比較緩慢，在初始階段就很容易勸退想學的人！Three.js 基本上是直接建立在 WebGL 之上，又提供更簡單、高階的 API，所以更容易上手，在學習方面，也因為許多複雜的指令被包在一起，簡化後的 function 更好理解、對於非資工背景的人我覺得也很友善。

兼容其他框架

跟 Three.js 齊名並列的，還有 R3F，一個基於 React 的 Three.js 框架，它結合了許多 React component 的概念，讓物件能更好的被管理跟重複使用。跟 Svelte 也有結合的框架，不過相對沒有 R3F 那麼流行跟廣泛使用。

Render

Render 在台灣好像沒有一個比較通用的翻譯，中國翻譯成渲染，台灣應該是翻成算圖，但也有人就直接沿用渲染，因爲線上很多中文的教學內容都是中國的資源，不過我都唸 costco，乾脆就都寫原文好了。

Render 是一個將 data 轉換為畫面，包含圖像或動畫的過程。有時候在做前端也會聽到 render，基本上看得到的，凡舉 3D 動畫、遊戲開發、網頁製作， render 是創造視覺效果的關鍵步驟。而像 real-time 的動畫跟遊戲，則有一大部分會依賴 GPU 平行運算來達到即時的效果。

Shader

Shader 是運行在 GPU 上的程式們，有的我們可以控制 (scriptable)、有的則是 depends on 硬體設備。Shader 直接的控制 3D 的資料要如何被畫在 2D 的螢幕裡，也就是說對於每一個像素，shader 決定要塗什麼顏色。

聽起來非常簡單，太好了！

一般的動畫或遊戲軟體，像是 Blender 跟 Unity，現在都有提供視覺化的 shader 工具 (shader graph)。仔細看的話，會發現一切不過就只是一些國高中學過的數學式子而已 XD

看起來也非常的簡單，太輕鬆了！
(迷之音：到時候就知道了)

Scriptable shader

剛剛提到了，有些 shader 是我們自己可以寫內容的，而經過剛剛的介紹，感覺一切都輕輕鬆鬆、迎刃而解，那就來看大致上有哪些吧！

如果看不懂也沒關係，之後還會有更詳細的介紹。

1. Vertex shader

Vertex shader 主要處理跟頂點資料有關的處理，舉例來說當 import 一個模型，放在你的場景中，會需要將頂點加入座標，專業一點的說法是從 object space → world space，接著還有其他的座標轉換，都是在這邊。

2. Fragment shader

有了座標頂點後，GPU 就有辦法畫三角形，有三角形就有地方可以塗顏色，fragment shader 就是決定模型、形狀要如何塗顏色的地方。

3. Compute shader

Compute shader 跟主要的 render pipeline 比較沒有直接關係，常用拿來 call GPU 用於 general purpose 的程式，所以也有地方會看到 GPGPU，指的就是使用 compute shader 來快速進行大量的平行運算。

那至於什麼是 render pipeline 呢？我覺得我自己一直不斷解釋下去，可能光第一篇就會寫不完了 XD 因此在這邊先打住，賣個關子，之後會介紹更多細節。

如果看到這邊覺得有興趣的話，歡迎持續追蹤收看，若有有誤的地方也歡迎留言指正～那我們就明天再見啦！