WEBGL_multi_draw 擴充套件

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

WEBGL_multi_draw 擴充套件是 WebGL API 的一部分,它允許透過單次函式呼叫渲染多個圖元。這可以提高 WebGL 應用程式的效能,因為它減少了渲染器中的繫結開銷,並透過統一資料加快了 GPU 執行緒的時間。

啟用此擴充套件後

  • 將新增處理單次呼叫中多個引數列表的新方法(請參閱下面的方法列表)。
  • 將 `gl_DrawID` 內建變數新增到著色語言中。

注意:此擴充套件同時適用於 WebGL 1WebGL 2 上下文。

在著色器程式碼中,需要呼叫 `#extension GL_ANGLE_multi_draw` 指令來啟用該擴充套件。

此擴充套件會隱式啟用 ANGLE_instanced_arrays 擴充套件。

例項方法

ext.multiDrawArraysWEBGL()

從陣列資料渲染多個圖元(與多次呼叫 drawArrays 相同)。

ext.multiDrawElementsWEBGL()

從元素陣列資料渲染多個圖元(與多次呼叫 drawElements 相同)。

ext.multiDrawArraysInstancedWEBGL()

從陣列資料渲染多個圖元(與多次呼叫 drawArraysInstanced 相同)。

ext.multiDrawElementsInstancedWEBGL()

從元素陣列資料渲染多個圖元(與多次呼叫 drawElementsInstanced 相同)。

著色器擴充套件

注意:雖然副檔名為 `WEBGL_multi_draw`,但在著色器中使用該擴充套件時,必須透過 `#extension GL_ANGLE_multi_draw` 指令啟用它。

啟用此擴充套件後,`gl_DrawID` 內建變數可以在著色器程式碼中使用。對於任何 `multi*` 繪製呼叫變體,繪製索引 `i` 可以作為 `gl_DrawID` 被頂點著色器讀取。對於非 `multi*` 呼叫,`gl_DrawID` 的值為 `0`。

html
<script type="x-shader/x-vertex">
  #extension GL_ANGLE_multi_draw : require
  void main() {
    gl_Position = vec4(gl_DrawID, 0, 0, 1);
  }
</script>

示例

啟用擴充套件

可以使用 WebGLRenderingContext.getExtension() 方法來訪問 WebGL 擴充套件。有關更多資訊,請參閱 WebGL 教程中的 使用擴充套件

js
let ext = gl.getExtension("WEBGL_multi_draw");

繪製多個數組

ext.multiDrawArraysWEBGL()ext.multiDrawArraysInstancedWEBGL() 的示例呼叫。

js
// multiDrawArrays variant
const firsts = new Int32Array(/* … */);
const counts = new Int32Array(/* … */);
ext.multiDrawArraysWEBGL(gl.TRIANGLES, firsts, 0, counts, 0, firsts.length);
js
// multiDrawArraysInstanced variant
const firsts = new Int32Array(/* … */);
const counts = new Int32Array(/* … */);
const instanceCounts = new Int32Array(/* … */);
ext.multiDrawArraysInstancedWEBGL(
  gl.TRIANGLES,
  firsts,
  0,
  counts,
  0,
  instanceCounts,
  0,
  firsts.length,
);

繪製多個元素

ext.multiDrawElementsWEBGL()ext.multiDrawElementsInstancedWEBGL() 的示例呼叫。

假定先前已上傳到 `ELEMENT_ARRAY_BUFFER` 的索引將被視為 `UNSIGNED_SHORT`。

js
// multiDrawElements variant
const counts = new Int32Array(/* … */);
const offsets = new Int32Array(/* … */);
ext.multiDrawElementsWEBGL(
  gl.TRIANGLES,
  counts,
  0,
  gl.UNSIGNED_SHORT,
  offsets,
  0,
  counts.length,
);
js
// multiDrawElementsInstanced variant
const counts = new Int32Array(/* … */);
const offsets = new Int32Array(/* … */);
const instanceCounts = new Int32Array(/* … */);
ext.multiDrawElementsInstancedWEBGL(
  gl.TRIANGLES,
  counts,
  0,
  gl.UNSIGNED_SHORT,
  offsets,
  0,
  instanceCounts,
  0,
  counts.length,
);

規範

規範
WebGL WEBGL_multi_draw 擴充套件規範

瀏覽器相容性

另見