初識WEBGL
WebGL 使得在支援HTML 的 canvas 標籤的瀏覽器中，不需要安裝任何外掛，便可以使用基於 OpenGL ES 2.0 的 API 在 canvas 中進行2D和3D渲染。WebGL程式包括用 JavaScript 寫的控制程式碼，以及在圖形處理單元（GPU, Graphics Processing Unit）中執行的著色程式碼（GLSL，注：GLSL為OpenGL著色語言）。WebGL 元素可以和其他 HTML 元素混合使用，並且可以和網頁其他部分或者網頁背景結合起來。
本文將向您介紹 WebGL 的基礎使用。此處假定您對三維圖形方面的數學知識已經有一定的理解，本文也不會試圖向您教授 3D影象概念本身。在我們的學習空間
本文的程式碼也可以在這裡下載 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）。