iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 1
3
Modern Web

寫給工程師的 WebGL 學習心得系列 第 1

[WebGL - Day01] 導覽、系列大綱

WebGL-Fluid-Simulation
https://paveldogreat.github.io/WebGL-Fluid-Simulation/ , MIT Licensed

GIF DEMO:
WebGL-Fluid-Simulation/
https://paveldogreat.github.io/WebGL-Fluid-Simulation/ , MIT Licensed

Hi 大家好,
今年的主題是 WebGL,
一個難度不低、可能會容易有挫折感的主題

WebGL 涵蓋範圍很大,可以大到 CPU 與 GPU 的運算方式、
歷史、線性代數與數學理論、圖學等

因為 WebGL 涵蓋了不少領域,寫法也不盡相同
unity3D、遊戲引擎、特效軟體皆可能會使用到

數學要很好嗎?

我數學沒有很好,最多就是知道有三角函數
sin, cos 哪個是哪個總是沒背起來
寫 WebGL 在運算鏡頭或各種變形會用到矩陣運算,
開始學習時較容易遇到挫折
如果使用 JavaScript library,
可先用 JavaScript library 的功能
再一步步看數學與理論公式

系列文的目標

對象

我希望傳達的對象是幾年前的自己,
喜歡華麗效果,
不排斥數學

也許可以花時間在數學理論,
但希望可以先用程式解決數學運算就好
總希望在起步時,
即使只有一點點,改了一點點就能直接看到效果是非常開心的

WebGL 與 JavaScript library

使用 WebGL 的2D、3D JavaScript library 相當多,
隨著各個 JavaScript library 的版本更新,
本身對於自訂 shader 的支援也提高了不少 (例如 PixiJS v4 以上),
會大致提到要怎麼自己寫,省略一些什麼部分

是否要使用 WebGL 的討論

雖然可以手刻 WebGL,
但常見的 WebGL 效果已經有各種實作了,
自行開發的成本高,也可能會有維護的問題
(無人交接)

交流

內容我會盡量自我要求正確,
但更歡迎指正,我會很高興

希望能因此多認識對 WebGL 有興趣的朋友
想認識學過圖學、線性代數的朋友、
目前工作有使用 WebGL 的朋友 (或是 unity3D)

系列文的段落區分

  • WebGL介紹、學習資源與自身學習經驗
  • 如何寫
  • 實際寫個什麼,如何用

感謝大家


下一篇
[WebGL - Day02] 幾個漂亮 WebGL 網頁介紹
系列文
寫給工程師的 WebGL 學習心得30

2 則留言

1
King Tzeng
iT邦新手 4 級 ‧ 2019-09-17 15:36:03

前輩發文,必屬好文!(追蹤已按下!!/images/emoticon/emoticon31.gif

感謝感謝 (心)

0
Claire Chang
iT邦新手 4 級 ‧ 2019-09-18 10:22:23

期待你的系列文喔!!!>///<

感謝 Claire!

我要留言

立即登入留言