WebGL Context上下文 - tw511教學網

要編寫一個WebGL的應用程式，第一步是讓WebGL渲染上下文 - Context 物件。這個物件與 WebGL 繪製緩衝區進行互動，可以呼叫所有WebGL的方法。執行以下操作來獲取WebGL的上下文-

建立HTML5 canvas
獲取畫布 canvas 的 ID
獲取WebGL

建立HTML5 canvas元素

我們知道，建立一個HTML5 canvas 元素 -

在HTML5主體內寫入canvas語句宣告
給定 canvas 一個ID
使用高度和寬度(height & width)屬性(可選)更改畫布尺寸

一個例子在這裡應該更清楚。

範例

下面的例子說明如何建立一個 canvas 元素。建立了一個邊框使用 CSS 可視性畫布的尺寸(500×500)。複製並貼上到下面的程式碼到 my_canvas.html 檔案。

<!DOCTYPE HTML>
<html>
   <head>
      <title>Canvas範例  -www.tw511.com</title
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
	
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
	
</html>

這將產生以下結果 -

獲取Canvas的ID

Canvas ID是通過呼叫DOM(文件物件模型)的getElementById()方法獲得的。這個方法接受一個字串值作為引數，所以我們傳遞了當前 Canvas 的名字。

例如，如果 canvas 名稱是my_canvas，則canvas ID被得到 - 如圖如下

var canvas = document.getElementById('my_Canvas');

獲取WebGL的繪圖上下文

為了得到 WebGLRenderingContext 物件(或圖形的WebGL上下文物件或只在WebGL的情況下)，呼叫當前 HTMLCanvasElement 的getContext()方法。getContext()的語法如下 -

canvas.getContext(contextType, contextAttributes);

通過 WebGL字串或experimental-webgl 作為 contentType。contextAttributes引數是可選的。 (雖然在進行這一步，請確保您的瀏覽器實現了WebGL 1.0版本(OpenGL ES 2.0))。

下面的程式碼片段展示了如何獲取WebGL的渲染上下文。在這裡，gl是參考變數所獲得的上下文物件。

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

引數 WebGLContextAttributes 不是強制性的。此引數提供接受布林值，如下面列出各種選項 -

Alpha	如果它的值是 true，它提供了一個alpha緩衝區到畫布上。預設情況下，它的值是 true
depth	如果它的值是true，會得到一個繪圖的緩衝區，其中包含至少16位元的深度緩衝。預設情況下，它的值是true
stencil	如果它的值是true，會得到一個繪圖的緩衝區，其中包含至少8位元的模板快取。預設情況下，它的值是false
antialias	如果它的值是true，會得到一個繪圖緩衝區，執行抗鋸齒。預設情況下，它的值是true
premultipliedAlpha	如果它的值是true，會得到一個繪圖緩衝區，其中包含的顏色與預乘alpha。預設情況下它的值是true
preserveDrawingBuffer	如果它的值是true，緩衝區將不會被清零，直到被清除或由作者改寫將保留它們的值。預設情況下，它的值是false

下面的程式碼片段展示了如何建立一個WebGL的上下文模板快取，這將不執行抗鋸齒。

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

在建立 WebGLRenderingContext 的時候，一個繪圖緩衝器被建立。上下文物件管理OpenGL 狀態，並呈現到圖形緩衝區。

WebGLRenderingContext

它是 WebGL 的主要介面。它表示 WebGL 繪圖上下文。該介面包含了所有用於在繪圖緩衝執行各種任務的方法。此介面的屬性給出在下表中。

S.No.	屬性和說明
1	Canvas 這是一個對建立此 canvas 元素的上下文
2	drawingBufferWidth 此屬性表示繪圖緩衝器的實際寬度。它可以不同於 HTMLCanvasElement 的寬度屬性。
3	drawingBufferHeight 此屬性表示繪圖緩衝器的實際高度。它可以不同於 HTMLCanvasElement 的高度屬性。