iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

成為Canvas Ninja ! ~ 理解2D渲染的精髓 系列

整體規劃是要探討canvas 的2D渲染環境在實務上的各種運用, 例如如何使用canvas 創建web端2D粒子系統等多種特效模擬的探究。

鐵人鍊成 | 共 31 篇文章 | 27 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21 - 物理模擬篇 - 原生Canvas建構粒子系統 - 成為Canvas Ninja ~ 理解2D渲染的精髓

在開始之前,我可能需要先給各位科普一些基礎的CG動畫(Computer Graphic)常識~也就是我們這個chapter 的主角粒子(Particles) 什...

2021-10-06 ‧ 由 Mizok 分享
DAY 22

Day 22 - 物理模擬篇 - 二維布料模擬 - 成為Canvas Ninja ~ 理解2D渲染的精髓

時間過得很快,這邊我們已經來到物理模擬篇的最後一節 ~ 二維布料模擬了。 原本其實我是打算把這一篇放在彈性模擬後面做講解,因為這個案例其實就是上位版本的彈性模擬...

2021-10-07 ‧ 由 Mizok 分享
DAY 23

Day 23 - 影像處理篇 - 影像與色彩 - 成為Canvas Ninja ~ 理解2D渲染的精髓

老實說我決定要寫影像處理這個部分的時候還蠻猶豫的,因為在javascript 做影像處理的這個領域,IT邦之前其實就有蠻多寫的蠻不錯的文章。 例如第11屆鐵人賽...

2021-10-08 ‧ 由 Mizok 分享
DAY 24

Day 24 - 影像處理篇 - 用Canvas實作動態綠幕摳像 - 成為Canvas Ninja ~ 理解2D渲染的精髓

上一篇我們提到我們接著要開始玩一些比較有趣的實作~ 所以我們就來講講怎麼在web端實作綠幕摳像(Green Screen Keying)~ 什麼是綠幕摳像?...

2021-10-09 ‧ 由 Mizok 分享
DAY 25

Day 25 - 影像處理篇 - 用Canvas實作在IE上也可運行的模糊濾鏡I - 成為Canvas Ninja ~ 理解2D渲染的精髓

在這一篇我們要來講一些比較進階的內容。 那就是圖像模糊演算法~ 大部分有Debug過IE的人應該都知道,IE是不支援css的filter屬性的。 但是很多時候設...

2021-10-10 ‧ 由 Mizok 分享
DAY 26

Day 26 - 影像處理篇 - 用Canvas實作在IE上也可運行的模糊濾鏡II - 成為Canvas Ninja ~ 理解2D渲染的精髓

在這篇文章中,我們要來實作上一篇提到的圖像模糊演算法~ 在開始之前,因為有個小狀況是上一篇文中我們沒有提到的,我們要先稍微講解一下 --- 也就是邊緣像素的處...

2021-10-11 ‧ 由 Mizok 分享
DAY 27

Day 27 - 3D繪圖篇 - 2D圖片上面的3D物件是怎麼產生的? I - 成為Canvas Ninja ~ 理解2D渲染的精髓

鐵人賽終於也進入尾聲了~ (加上今天還剩下4天) 我們也終於來到規劃中最後的篇章 --- 3D繪圖篇 而我們今天要討論的題目是 ~『2D圖片上面的3D圖樣是怎...

2021-10-12 ‧ 由 Mizok 分享
DAY 28

Day 28 - 3D繪圖篇 - 2D圖片上面的3D物件是怎麼產生的?II - 成為Canvas Ninja ~ 理解2D渲染的精髓

離賽程結束還有3天~ 今天我們要來延續昨天的問題探討~ 我在上一篇似乎沒有把問題描述的很好,所以可能大家蠻confused的 :( 我這邊再仔細的講講這個...

2021-10-13 ‧ 由 Mizok 分享
DAY 29

Day 29 - 3D繪圖篇 - 噪聲地形演算I - 成為Canvas Ninja ~ 理解2D渲染的精髓

再兩天 ~!! 在鐵人賽的最後,我想要給各位帶來的是噪聲地形的演算~ 之所以想要寫這個題目,原因是因為這個題目也可以承接我們上一篇講的內容(透視投影), 而...

2021-10-14 ‧ 由 Mizok 分享
DAY 30

Day 30 - 3D繪圖篇 - 噪聲地形演算II - 成為Canvas Ninja ~ 理解2D渲染的精髓

這是我最後的波紋了。 其實我一直想試著講一次這句話(X) 首先來丟一張案例完成後的圖片~ 大家應該多少有看過這種類型的圖樣,最常見的應該就是在遊戲的3D場...

2021-10-15 ‧ 由 Mizok 分享