Day02] 幾個漂亮WebGL 網頁介紹 - iT 邦幫忙
文章推薦指數: 80 %
另一種WebGL 網頁可以玩的玩法,就現在來說也許不太特別當年則是很厲害的 ... 同上篇是使用three.js 技術作品相當精緻,推測應該也寫客制的WebGL 語法 ...
第11屆iThome鐵人賽
DAY
2
4
ModernWeb
寫給工程師的WebGL學習心得系列第
2篇
[WebGL-Day02]幾個漂亮WebGL網頁介紹
11th鐵人賽
angelliya00
2019-09-1817:52:302144瀏覽
本文會介紹五個作品
有的是早期很厲害的作品,
有的則是介紹使用WebGL技術時可以應用的方式
HelloRacer
使用3D模型、操控3D摸型
當年令我驚訝的作品,光影並直接套用貼圖,
而是有即時運算(而且效果非常好)
操作時輪胎速度會有變化,轉彎時輪胎也會跟著轉動
WebGLMusicExperience
配合音樂節奏,場景物件、地形、都會跟著變化
網頁已下架,連結為官方說明展示頁
當時另一個令我驚訝的作品
介紹上寫以three.js開發,但要完成一些進階效果,
則需要再自己寫WebGL語法一起使用
HelloRun
另一種WebGL網頁可以玩的玩法,就現在來說也許不太特別
當年則是很厲害的作品
網頁已下架,連結為官方展示影片
同上篇是使用three.js技術
作品相當精緻,推測應該也寫客制的WebGL語法
SakuraAnimationusingWebGl
純WebGL的作品,理解WebGL的實作方式後可以玩玩看
2013年在CodePen上很厲害的作品,
在知道WebGL是什麼前,不太容易理解
ViiSUALiiZER
使用WebGL效果做濾鏡,也是應用的方向之一
最近朋友在討論的效果,
有些WebGLlibrary已有相關濾鏡可直接套用
(如PixiJS、three.js)
這個效果的WebGL語法不會太困難,後續的系列文也會介紹
五個作品中,
很多厲害的效果,雖然用的是與WebGL有關的技術,
但不全然是用純WebGL來寫
已經有許多套件已將WebGL語法打包起來,僅需用JS控制
但會寫一些WebGL語法的話,可以擴充效果
本文提到的WebGL語法,實際上是指Shader,
由於Shader是WebGL的一部份,就系列文剛開始來說
也許比較不易造成混亂
留言2
追蹤
檢舉
上一篇
[WebGL-Day01]導覽、系列大綱
下一篇
[WebGL-Day03]WebGL學習資源
系列文
寫給工程師的WebGL學習心得
共30篇
目錄
RSS系列文
訂閱系列文
59人訂閱
26
[WebGL-Day26]DisplacementFilter(1/3)原理
27
[WebGL-Day27]DisplacementFilter(2/3)在Shadertoy上模擬與互動
28
[WebGL-Day28]DisplacementFilter(3/3)在PixiJS上完成互動
29
[WebGL-Day29]WebGL的一些討論
30
[WebGL-Day30]後記與完賽
完整目錄
2則留言
0
WillHsu
iT邦新手5級‧
2019-09-1917:29:17
同樣也喜歡3dWEB看著你的文章進步
回應
1
檢舉
angelliya00
iT邦新手4級‧
2019-09-1921:55:19
檢舉
感謝!
我也在學習中,希望會因為寫文章認識更多朋友:D
感謝!
我也在學習中,希望會因為寫文章認識更多朋友:D
修改
登入發表回應
0
阿展展展
iT邦好手1級‧
2020-01-2900:17:10
好華麗!
回應
檢舉
登入發表回應
我要留言
立即登入留言
iT邦幫忙鐵人賽
參賽組數
1087組
團體組數
52組
累計文章數
20447篇
完賽人數
572人
鐵人賽最新文章
淺談DevOps&Observability
以Ardiuno控制CPU散熱器呼吸燈
超深度鐵人賽後自我審視
建立表與表之間的關聯(Day28)
【Day?(31)】測試環境無法登入
使用程式來管理資料庫(DBMigrate)(Day27)
Day31-遲來的鐵人賽心得
STM32CubeMX專案配置詳細教學,點亮LED
撰寫httprequest的複雜一點的測試(Day26)
2022/02/12更新
前往鐵人賽
技術推廣專區
[Day2]抓取每日收盤價
[Day1]基本工具安裝
利用python取得永豐銀行API的Nonce
[Day03]tinyML開發板介紹
[Day01]在享受tinyML這道美食之前
永豐金融API測試員
[Day3]使用ta-lib製作指標
[Day4]函數打包與買進持有報酬率試算
計算API所需要的參數:HashID
計算API所需要的參數:IV
前往鐵人賽
熱門問題
抽獎程式怎麼都沒被告呢??
將現有系統中心化架構改為去中心化
Windows10設定遠端多人多工要怎麼弄壓
請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏
手提電腦加入DOMAIN後,回家幾日後就不能LOGIN
加入網域後的筆電,登入問題。
關於UPS及停電大樓柴油緊急發電接法的問題
求各位大大幫我
關於Python與Excel
Vmware4.0上的VM要轉移至Vmware7.0無法轉移
IT邦幫忙
熱門tag
看更多
13th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
2018鐵人賽
javascript
2017鐵人賽
windows
python
php
windowsserver
linux
c#
資訊安全
程式設計
css
vue.js
sql
mysql
熱門回答
請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏
抽獎程式怎麼都沒被告呢??
將現有系統中心化架構改為去中心化
VBA只複製數字
Vue3+VueRouter如何在Composables中互相傳值?
SQL2000升級SQL2008R2資料庫發生錯誤?
3combaseline2250plus交換器預設IP和初始連接
HPP4300G2系統重灌
O365SMTP寄發系統信件
工作管理員記錄程序cpu問題
熱門文章
計算機概論-網路通訊與網際網路Networkingandtheinternet(上)
【HTML】【CSS】如何處理inline-block元素之間的空白
DeepLink/DeferredDeepLink深度連結
ISO27001資訊安全管理系統【解析】(十二)
Python入門Day6:#WhileTrue的用法
YouTube轉換為MP3
桌面端YouTube影片下載器-10款最佳
OpenProject安裝在ubuntu20.04LTS
【JavaScript】檢查Array陣列的各種方式
Apple音樂下載到電腦5個方法輕鬆做到【必學】
一週點數排行
更多點數排行
㊣浩瀚星空㊣(yoching)
居然解出來了(partyyaya)
raytracy(raytracy)
天黑(horace_work)
尼克(nickliao1)
海綿寶寶(antijava)
Han(c0952199517)
juck30808(juck30808)
cloudeasy(cloudeasy)
haward79(haward79)
×
At
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{result.label}}
{{result.account}}
關閉
延伸文章資訊
- 1WebGL 1.0 不需外掛的網頁3D遊戲時代,除IE 9的瀏覽器都支援
如果你想了解目前WebGL可以製作出什麼樣的3D效果?那麼可以參考下面兩個網頁(建議使用Firefox 4 beta效果最好,Google Chrome正式版亦可,但我實際測試時Google ...
- 2[分享] 把WebGL、3D 發揮到極致的網站| 列印 - T17
[分享] 把WebGL、3D 發揮到極致的網站 · cmingyan. 今天發現一個神一般的網站。 背景部分是影片,但是前景完全是用3D 運算出來的,一邊播放還可以左右移動像是在玩遊戲 ...
- 3WebGL - 維基百科,自由的百科全書
WebGL是一種JavaScript API,用於在不使用外掛程式的情況下在任何相容的網頁瀏覽器中呈現互動式2D和3D圖形。WebGL完全整合到瀏覽器的所有網頁標準中,可將影像處理和 ...
- 4让你亢奋的20个WebGL网站 - 博客园
显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。本文搜罗了20个非常 ...
- 53D 網站開發入門筆記_WebGL 觀念
WebGL(Web Graphics Library 的縮寫)用於瀏覽器中呈現3D 影像的技術標準,透過WebGL 技術,只需撰寫JavaScript 程式(加少許的著色器程式)即可實現3D 影...