OES_draw_buffers_indexed
OES_draw_buffers_indexed 扩展是 WebGL API 的一部分，它允许在同时写入多个颜色缓冲区时使用不同的混合选项。
可以使用 WebGLRenderingContext.getExtension() 方法获取 WebGL 扩展。有关更多信息，请参阅 使用扩展（位于 WebGL 教程 中）。
注意：此扩展仅适用于 WebGL2 上下文。
实例方法
OES_draw_buffers_indexed.blendEquationiOES()-
为特定的绘制缓冲区设置 RGB 和 alpha 混合方程。
OES_draw_buffers_indexed.blendEquationSeparateiOES()-
为特定的绘制缓冲区分别设置 RGB 和 alpha 混合方程。
OES_draw_buffers_indexed.blendFunciOES()-
定义为特定的绘制缓冲区混合像素时使用的函数。
OES_draw_buffers_indexed.blendFuncSeparateiOES()-
定义为特定的绘制缓冲区分别混合 RGB 和 alpha 分量的像素时使用的函数。
OES_draw_buffers_indexed.colorMaskiOES()-
设置在为特定的绘制缓冲区绘制或渲染时要启用或禁用哪些颜色分量。
OES_draw_buffers_indexed.disableiOES()-
禁用特定绘制缓冲区的混合。
OES_draw_buffers_indexed.enableiOES()-
启用特定绘制缓冲区的混合。
示例
使用 OES_draw_buffers_indexed 扩展
通过调用 WebGLRenderingContext.getExtension() 启用扩展。
js
const ext = gl.getExtension("OES_draw_buffers_indexed");
现在，您可以为特定的绘制缓冲区启用混合、设置混合方程、混合函数和颜色掩码。
js
// For gl.DRAW_BUFFER0
ext.enableiOES(gl.BLEND, 0);
ext.blendEquationiOES(0, gl.FUNC_ADD);
ext.blendFunciOES(0, gl.ONE, gl.ONE);
ext.colorMaskiOES(0, 1, 0, 0, 0);
// For gl.DRAW_BUFFER1
ext.enableiOES(gl.BLEND, 1);
ext.blendEquationSeparateiOES(1, gl.FUNC_ADD, gl.FUNC_SUBTRACT);
ext.blendFuncSeparateiOES(
1,
gl.SRC_ALPHA,
gl.ONE_MINUS_SRC_ALPHA,
gl.ZERO,
gl.ZERO,
);
ext.colorMaskiOES(1, 0, 1, 0, 0);
要检索特定绘制缓冲区的设置，请使用 WebGL2RenderingContext.getIndexedParameter()。
js
// For gl.DRAW_BUFFER0
gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 0);
gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 0);
gl.getIndexedParameter(gl.BLEND_SRC_RGB, 0);
gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 0);
gl.getIndexedParameter(gl.BLEND_DST_RGB, 0);
gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 0);
gl.getIndexedParameter(gl.COLOR_WRITEMASK, 0);
// For gl.DRAW_BUFFER1
gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 1);
gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 1);
gl.getIndexedParameter(gl.BLEND_SRC_RGB, 1);
gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 1);
gl.getIndexedParameter(gl.BLEND_DST_RGB, 1);
gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 1);
gl.getIndexedParameter(gl.COLOR_WRITEMASK, 1);
您可以使用 WebGLRenderingContext.getParameter() 查看可用的绘制缓冲区数量。
js
const maxDrawBuffers = gl.getParameter(gl.MAX_DRAW_BUFFERS);
规范
| 规范 |
|---|
| WebGL OES_draw_buffers_indexed 扩展规范 |
浏览器兼容性
BCD 表格仅在启用了 JavaScript 的浏览器中加载。