WebGL Context上下文


要編寫一個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 的高度屬性。