iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起 系列

本系列文章將使用 WebGL,介紹其運作、繪製的機制
從一開始簡單的 2D 三角形,接著到 3D、光照效果、陰影、場景背景等
除了做出 3D 場景之外,也會著墨在這些效果的原理上
分享給對於 3D/GL 有興趣的讀者

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

Hello WebGL

大家好,大家都叫我西瓜。因為想轉職寫遊戲,而遊戲中會讓人第一個想到、也是能在第一瞬間吸引人的就是畫面了,筆者從事網站開發多年,也就順勢從 WebGL 開始學習,...

2021-09-01 ‧ 由 PastLeo 分享
DAY 2

畫一個三角形(上)

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 2 篇文章。本系列...

2021-09-02 ‧ 由 PastLeo 分享
DAY 3

畫一個三角形(下)

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 3 篇文章。本系列...

2021-09-03 ‧ 由 PastLeo 分享
DAY 4

Uniform - shader 之參數

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 4 篇文章。本系列...

2021-09-04 ‧ 由 PastLeo 分享
DAY 5

Varying - fragment shader 之資料

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 5 篇文章。本系列...

2021-09-05 ‧ 由 PastLeo 分享
DAY 6

在 WebGL 取用、顯示圖片 - Textures

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 6 篇文章。本系列...

2021-09-06 ‧ 由 PastLeo 分享
DAY 7

More About Textures

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 7 篇文章。本系列...

2021-09-07 ‧ 由 PastLeo 分享
DAY 8

互動 & 動畫

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 8 篇文章。本系列...

2021-09-08 ‧ 由 PastLeo 分享
DAY 9

2D Transform

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 9 篇文章。本系列...

2021-09-09 ‧ 由 PastLeo 分享
DAY 10

2D transform Continued

大家好,我是西瓜,你現在看到的是 2021 iThome 鐵人賽『如何在網頁中繪製 3D 場景?從 WebGL 的基礎開始說起』系列文章的第 10 篇文章。本系...

2021-09-10 ‧ 由 PastLeo 分享