WEBGL_multi_draw 擴充套件
WEBGL_multi_draw 擴充套件是 WebGL API 的一部分,它允許透過單次函式呼叫渲染多個圖元。這可以提高 WebGL 應用程式的效能,因為它減少了渲染器中的繫結開銷,並透過統一資料加快了 GPU 執行緒的時間。
啟用此擴充套件後
- 將新增處理單次呼叫中多個引數列表的新方法(請參閱下面的方法列表)。
- 將 `gl_DrawID` 內建變數新增到著色語言中。
注意:此擴充套件同時適用於 WebGL 1 和 WebGL 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`。
<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 教程中的 使用擴充套件。
let ext = gl.getExtension("WEBGL_multi_draw");
繪製多個數組
ext.multiDrawArraysWEBGL() 和 ext.multiDrawArraysInstancedWEBGL() 的示例呼叫。
// multiDrawArrays variant
const firsts = new Int32Array(/* … */);
const counts = new Int32Array(/* … */);
ext.multiDrawArraysWEBGL(gl.TRIANGLES, firsts, 0, counts, 0, firsts.length);
// 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`。
// multiDrawElements variant
const counts = new Int32Array(/* … */);
const offsets = new Int32Array(/* … */);
ext.multiDrawElementsWEBGL(
gl.TRIANGLES,
counts,
0,
gl.UNSIGNED_SHORT,
offsets,
0,
counts.length,
);
// 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 擴充套件規範 |
瀏覽器相容性
載入中…