iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
4
Modern Web

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

[WebGL - Day02] 幾個漂亮 WebGL 網頁介紹

  • 分享至 

  • xImage
  •  

本文會介紹五個作品
有的是早期很厲害的作品,
有的則是介紹使用 WebGL 技術時可以應用的方式

HelloRacer

HelloRacer

使用3D模型、操控3D摸型

當年令我驚訝的作品,光影並直接套用貼圖,
而是有即時運算(而且效果非常好)
操作時輪胎速度會有變化,轉彎時輪胎也會跟著轉動


WebGL Music Experience

WebGL Music Experience

配合音樂節奏,場景物件、地形、都會跟著變化
網頁已下架,連結為官方說明展示頁

當時另一個令我驚訝的作品
介紹上寫以 three.js 開發,但要完成一些進階效果,
則需要再自己寫 WebGL 語法一起使用


HelloRun

HelloRun

另一種 WebGL 網頁可以玩的玩法,就現在來說也許不太特別
當年則是很厲害的作品
網頁已下架,連結為官方展示影片

同上篇是使用 three.js 技術
作品相當精緻,推測應該也寫客制的 WebGL 語法


Sakura Animation using WebGl

Sakura Animation using WebGl

純 WebGL 的作品,理解 WebGL 的實作方式後可以玩玩看

2013年在 CodePen 上很厲害的作品,
在知道 WebGL 是什麼前,不太容易理解


ViiSUALiiZER

ViiSUALiiZER

使用 WebGL 效果做濾鏡,也是應用的方向之一

最近朋友在討論的效果,
有些 WebGL library 已有相關濾鏡可直接套用
(如 PixiJS、three.js)
這個效果的 WebGL 語法不會太困難,後續的系列文也會介紹


五個作品中,
很多厲害的效果,雖然用的是與 WebGL 有關的技術,
但不全然是用純 WebGL 來寫

已經有許多套件已將 WebGL 語法打包起來,僅需用 JS 控制
但會寫一些 WebGL 語法的話,可以擴充效果


本文提到的 WebGL 語法,實際上是指 Shader,
由於 Shader 是 WebGL 的一部份,就系列文剛開始來說
也許比較不易造成混亂


上一篇
[WebGL - Day01] 導覽、系列大綱
下一篇
[WebGL - Day03] WebGL 學習資源
系列文
寫給工程師的 WebGL 學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
WillHsu
iT邦新手 5 級 ‧ 2019-09-19 17:29:17

同樣也喜歡 3d WEB 看著你的文章進步

感謝!
我也在學習中,希望會因為寫文章認識更多朋友 :D

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-29 00:17:10

好華麗!

我要留言

立即登入留言