DAY 3 我們開始使用 Canvas，讓 JavaScript 可以控制畫布並製作簡單動畫。
今天要再往前一步，認識 WebGL。
WebGL 可以讓瀏覽器使用 GPU 進行圖形運算，讓網頁可以呈現更複雜的 2D 與 3D 圖形。
這也是我們之後使用 Three.js 製作 3D 太陽系的重要基礎。
今天我們會完成三件事情：
今天先不急著製作真正的 3D 太陽系。
我們先確認 WebGL 可以正常運作，為接下來的 Three.js 做準備。
今天的流程 Canvas -> WebGL
今後繼續使用已經建立好的分檔方式
index.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>從 Web 到宇宙</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>從 Web 到宇宙</h1>
<p>DAY 4｜WebGL</p>
<canvas
id="canvas"
width="800"
height="500"
></canvas>
</div>
<script src="js/main.js"></script>
</body>
</html>
css/style.css
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #050816;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}
.container {
padding: 40px;
}
h1 {
font-size: 42px;
margin-bottom: 10px;
}
p {
color: #aaaaaa;
font-size: 18px;
}
canvas {
display: block;
margin-top: 20px;
border: 1px solid #444;
}
js/main.js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
alert("你的瀏覽器不支援 WebGL");
} else {
// 設定背景顏色
gl.clearColor(
0.02,
0.03,
0.08,
1.0
);
// 清除畫面
gl.clear(gl.COLOR_BUFFER_BIT);
}
WebGL 全名是 Web Graphics Library 簡單來說 WebGL 是讓瀏覽器可以使用 GPU 進行圖形渲染的技術。
之前我們使用 Canvas canvas.getContext("2d"); 主要是進行 2D 繪圖。
今天則使用 canvas.getContext("webgl"); 取得 WebGL 的繪圖環境。
首先找到 HTML 裡的 Canvas：
const canvas = document.getElementById("canvas");
接著取得 WebGL：
const gl = canvas.getContext("webgl");
這樣 JavaScript 就可以透過 gl 操作 WebGL。
我們使用：
if (!gl) {
alert("你的瀏覽器不支援 WebGL");
}
如果取得不到 WebGL，就代表目前的瀏覽器環境不支援 WebGL。
如果成功取得，就可以繼續使用 WebGL。
接著使用：
gl.clearColor(
0.02,
0.03,
0.08,
1.0
);
設定 WebGL 畫面的背景顏色。
這裡的數值是 RGBA：
R → 紅色
G → 綠色
B → 藍色
A → 透明度
最後 gl.clear(gl.COLOR_BUFFER_BIT); 將畫面清除並套用剛剛設定的背景。
DAY 3 我們使用 Canvas 製作動畫，今天則是把 Canvas 交給 WebGL 使用。
可以把它想成：
Canvas → 一塊畫布
WebGL → 使用這塊畫布進行 GPU 圖形渲染
因此 Canvas 並不是只能拿來畫 2D，它也可以搭配 WebGL，成為 3D 圖形的顯示區域。
今天我們認識了 WebGL 是瀏覽器進入 3D 世界的重要技術，但直接使用 WebGL 會比較複雜。
因此下一步我們會使用 Three.js，讓建立 3D 世界變得更加簡單。
到這裡，我們已經完成 HTML + CSS + JavaScript、Canvas、WebGL
接下來就要正式進入 3D。
「Three.js：正式建立第一個 3D 世界」
明天開始使用 Three.js。
我們會第一次建立真正的 3D 場景，並讓瀏覽器出現第一個 3D 物件。
從明天開始，就正式進入我們這次專案的核心 3D Web × Three.js
iThome鐵人賽
看影片追技術