iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

WebGL 與 Three.js 初探 系列

隨著科技越來越發達,繪圖引擎越來越先進,網頁的互動也增加了更多可能性。
當 3D 互動已經不再是瓶頸,webGL 逐漸成熟、甚至還有 webVR 正逐漸萌芽,身為工程師的我們也得趕快跟上腳步。
趁現在,讓我們來看看這些複雜卻又吸引人的技術吧!

鐵人鍊成 | 共 30 篇文章 | 66 人訂閱 訂閱系列文 RSS系列文
DAY 1

達標好文 [Day1] WebGL 及 three.js 簡介

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

2016-12-15 ‧ 由 愷開 分享
DAY 2

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

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

2016-12-16 ‧ 由 愷開 分享
DAY 3

[Day3] 影像、GPU、webGL

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

2016-12-17 ‧ 由 愷開 分享
DAY 4

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

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

2016-12-18 ‧ 由 愷開 分享
DAY 5

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

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

2016-12-19 ‧ 由 愷開 分享
DAY 6

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

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

2016-12-20 ‧ 由 愷開 分享
DAY 7

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

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

2016-12-21 ‧ 由 愷開 分享
DAY 8

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

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

2016-12-22 ‧ 由 愷開 分享
DAY 9

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

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

2016-12-23 ‧ 由 愷開 分享
DAY 10

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

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

2016-12-24 ‧ 由 愷開 分享