WebGL - 上下文

上一頁
下一頁

要編寫WebGL應用程式，第一步是獲取WebGL渲染上下文物件。此物件與WebGL繪圖緩衝區互動，並可以呼叫所有WebGL方法。獲取WebGL上下文需要執行以下操作：

  • 建立HTML-5畫布
  • 獲取畫布ID
  • 獲取WebGL

建立HTML-5畫布元素

在第5章中，我們討論瞭如何建立HTML-5畫布元素。在HTML-5文件的body內，編寫一個畫布，為其命名，並將其作為引數傳遞給id屬性。可以使用width和height屬性（可選）定義畫布的尺寸。

示例

以下示例顯示瞭如何建立一個尺寸為500×500的畫布元素。為了方便檢視，我們使用CSS為畫布建立了一個邊框。將以下程式碼複製並貼上到名為my_canvas.html的檔案中。

線上演示 
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

這將產生以下結果：

獲取畫布ID

建立畫布後，您必須獲取WebGL上下文。獲取WebGL繪圖上下文的第一步是獲取當前畫布元素的id。

透過呼叫DOM（文件物件模型）方法getElementById()來獲取畫布ID。此方法接受字串值作為引數，因此我們將當前畫布的名稱傳遞給它。

例如，如果畫布名稱為my_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（OpenGL ES 2.0）。）

以下程式碼片段顯示瞭如何獲取WebGL渲染上下文。這裡gl是獲取的上下文物件的引用變數。

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

WebGLContextAttributes

引數WebGLContextAttributes不是必需的。此引數提供各種接受布林值作為引數的選項，如下所示：

序號 屬性和描述
1

Alpha

如果其值為true，則為畫布提供alpha緩衝區。

預設情況下，其值為true。
2

depth

如果其值為true，您將獲得一個繪圖緩衝區，其中包含至少16位的深度緩衝區。

預設情況下，其值為true。
3

stencil

如果其值為true，您將獲得一個繪圖緩衝區，其中包含至少8位的模板緩衝區。

預設情況下，其值為false。
4

antialias

如果其值為true，您將獲得一個執行抗鋸齒的繪圖緩衝區。

預設情況下，其值為true。
5

premultipliedAlpha

如果其值為true，您將獲得一個包含預乘alpha顏色的繪圖緩衝區。

預設情況下，其值為true。
6

preserveDrawingBuffer

如果其值為true，則緩衝區將不會被清除，並且將保留其值，直到被作者清除或覆蓋。

預設情況下，其值為false。

以下程式碼片段顯示瞭如何建立一個具有模板緩衝區的WebGL上下文，該上下文將不執行抗鋸齒。

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

建立WebGLRenderingContext時，會建立一個繪圖緩衝區。上下文物件管理OpenGL狀態並渲染到繪圖緩衝區。

WebGLRenderingContext

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

序號 屬性和描述
1

Canvas

這是對建立此上下文的畫布元素的引用。
2

drawingBufferWidth

此屬性表示繪圖緩衝區的實際寬度。它可能與HTMLCanvasElement的width屬性不同。
3

drawingBufferHeight

此屬性表示繪圖緩衝區的實際高度。它可能與HTMLCanvasElement的height屬性不同。
列印頁面
上一頁
下一頁
廣告