系列文章
[Day1] WebGL 及 three.js 簡介
隨著科技越來越進步，效能已經不再是瓶頸了。而隨著 webGL 的發展，我們已經不需要安裝其他軟體才能使用 3D，只要有瀏覽器跟先進一點的電腦，很容易就能在電腦裡...
[Day2] 為什麼是 webGL 與 Three.js？
為什麼是 webGL 我知道，es6 語法簡介的迷人、react 的火紅、webpack...框架不斷竄出，從今年的鐵人幫大賽就看得出來。 不過，前端的可能性絕...
[Day3] 影像、GPU、webGL
身為一位工程師，我知道各位已經迫不急待想要動手開始寫程式了。先不要急，我們先來了解一下基本的知識吧！ 我們是如何看見影像的 基本上我們是透過用眼睛接受光線的方式...
[Day4] WebGL 修羅道(1) - 用 100行程式碼畫...一個點
WebGL 修羅道(1) - 用 100行程式碼畫點 前一個章節提到的 Shader，就是負責繪製每個像素的顏色跟位置。跟 canvas 本身的原理很像，我們先...
[Day5] WebGL 修羅道(2) - 資料傳遞
上一篇文章中，我們將 gl_Position 跟 gl_PointSize 等變數寫死在 shader 裡頭，這顯然不是個好方法，光是看到 C/C++ like...
[Day6] three.js 前置 webGL 修羅道（3) - 動畫與 varying
[Day6] webGL 修羅道(3) - Animation 與 varying demo 昨天我們介紹完了如何傳遞資料給著色器，並且透過著色器畫了三個點，昨...
[Day7] webGL修羅道（4） - 3D 與動畫
[Day7] webGL修羅道 - 3D 與動畫 3D 圖形基礎 在電腦上看到圖形的方式，通常是透過 camera 的概念。可以想像人的眼睛（或螢幕）就是一台相...
[Day8] webGL 修羅道 - 3D 紋理貼圖
Sampler 在 GSGL 中，有一個特殊的類別是 sampler，負責接收由 Javascript 中傳來的 texture。我們可以將圖像的數據放到一個特...
[Day9] webGL 修羅道 - 特效實戰及總結
到目前為止，已經介紹了不少 webGL 的 API 以及 GLSL 的使用與撰寫。是時候來寫寫看有趣的特效了，其實在網路上隨便搜尋關鍵字都能看到不少絢爛奪目的...
[Day10] 寫在 Three.js 之前 - 投影基礎
雖然 three.js 幫我們簡化了許多複雜的工作，可以很快地用簡單 API 的方式馬上畫出圖形。不過我們仍然要介紹一下背後的原理，之後操作起來才會得心應手。...