第八屆 佳作

web
WebGL 與 Three.js 初探
愷開

系列文章

DAY 1

[Day1] WebGL 及 three.js 簡介

隨著科技越來越進步,效能已經不再是瓶頸了。而隨著 webGL 的發展,我們已經不需要安裝其他軟體才能使用 3D,只要有瀏覽器跟先進一點的電腦,很容易就能在電腦裡...

DAY 2

[Day2] 為什麼是 webGL 與 Three.js?

為什麼是 webGL 我知道,es6 語法簡介的迷人、react 的火紅、webpack...框架不斷竄出,從今年的鐵人幫大賽就看得出來。 不過,前端的可能性絕...

DAY 3

[Day3] 影像、GPU、webGL

身為一位工程師,我知道各位已經迫不急待想要動手開始寫程式了。先不要急,我們先來了解一下基本的知識吧! 我們是如何看見影像的 基本上我們是透過用眼睛接受光線的方式...

DAY 4

[Day4] WebGL 修羅道(1) - 用 100行程式碼畫...一個點

WebGL 修羅道(1) - 用 100行程式碼畫點 前一個章節提到的 Shader,就是負責繪製每個像素的顏色跟位置。跟 canvas 本身的原理很像,我們先...

DAY 5

[Day5] WebGL 修羅道(2) - 資料傳遞

上一篇文章中,我們將 gl_Position 跟 gl_PointSize 等變數寫死在 shader 裡頭,這顯然不是個好方法,光是看到 C/C++ like...

DAY 6

[Day6] three.js 前置 webGL 修羅道(3) - 動畫與 varying

[Day6] webGL 修羅道(3) - Animation 與 varying demo 昨天我們介紹完了如何傳遞資料給著色器,並且透過著色器畫了三個點,昨...

DAY 7

[Day7] webGL修羅道(4) - 3D 與動畫

[Day7] webGL修羅道 - 3D 與動畫 3D 圖形基礎 在電腦上看到圖形的方式,通常是透過 camera 的概念。可以想像人的眼睛(或螢幕)就是一台相...

DAY 8

[Day8] webGL 修羅道 - 3D 紋理貼圖

Sampler 在 GSGL 中,有一個特殊的類別是 sampler,負責接收由 Javascript 中傳來的 texture。我們可以將圖像的數據放到一個特...

DAY 9

[Day9] webGL 修羅道 - 特效實戰及總結

到目前為止,已經介紹了不少 webGL 的 API 以及 GLSL 的使用與撰寫。是時候來寫寫看有趣的特效了,其實在網路上隨便搜尋關鍵字都能看到不少絢爛奪目的...

DAY 10

[Day10] 寫在 Three.js 之前 - 投影基礎

雖然 three.js 幫我們簡化了許多複雜的工作,可以很快地用簡單 API 的方式馬上畫出圖形。不過我們仍然要介紹一下背後的原理,之後操作起來才會得心應手。...