WebGL 使得在支持HTML 的 canvas 標籤的瀏覽器中，不需要安裝任何插件，便可以使用基於 OpenGL ES 2.0 的 API 在 canvas 中進行2D和3D渲染。WebGL程序包括用 JavaScript 寫的控制代碼，以及在圖形處理單元（GPU, Graphics Processing Unit）中執行的着色代碼（GLSL，注：GLSL爲OpenGL着色語言）。WebGL 元素可以和其他 HTML 元素混合使用，並且可以和網頁其他部分或者網頁背景結合起來。
本文將向您介紹 WebGL 的基礎使用。此處假定您對三維圖形方面的數學知識已經有一定的理解，本文也不會試圖向您教授 3D圖像概念本身。在我們的學習空間 Learn WebGL for 2D and 3D graphics有一個面向初學者的指南、以及完整的代碼例子。
本文的代碼也可以在這裏下載 webgl-examples GitHub repository 。
準備 3D 渲染Section
爲了使用 WebGL 進行 3D 渲染，你首先需要一個 canvas 元素。下面的 HTML 片段用來建立一個 canvas 元素並設置一個 onload 事件處理程序來初始化我們的 WebGL 上下文 。
<body onload="main()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</body>
準備 WebGL 上下文Section
我們的 JavaScript 代碼中的 main() 函數將會在文檔加載完成之後被調用。它的任務是設置 WebGL 上下文並開始渲染內容。
//
// start here
//
function main() {
const canvas = document.querySelector("#glcanvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (!gl) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
}
我們所要做的第一件事就是是獲取 canvas 的引用，把它保存在 ‘canvas’ 變量裏。
當我們獲取到 canvas之後，我們會試着通過調用一個getContext 的函數並傳遞給它一個"webgl"字符串來獲取WebGLRenderingContext。如果瀏覽器不支持webgl,getContext將會返回null，我們就可以顯示一條消息給用戶然後退出。
如果WebGL上下文成功初始化，變量 ‘gl’ 會用來引用該上下文。在這個例子裏，我們將清除色設爲黑色，然後用該顏色清除上下文。（用背景顏色重繪canvas）。