EXT_float_blend 扩展

WebGL API 的 EXT_float_blend 扩展允许混合和使用具有 32 位浮点分量的绘制缓冲区。

可以使用 WebGLRenderingContext.getExtension() 方法获取 WebGL 扩展。有关更多信息,另请参阅 使用扩展,该内容位于 WebGL 教程 中。

注意:此扩展同时适用于 WebGL1WebGL2 上下文。但是,要使用它,您需要通过启用扩展 WEBGL_color_buffer_float(对于 WebGL1)或 EXT_color_buffer_float(对于 WebGL2)来启用 32 位浮点绘制缓冲区的使用。这样做会自动启用 EXT_float_blend,当且仅当 EXT_float_blend 也受支持时。对 EXT_color_buffer_float 的支持并不意味着对 EXT_float_blend 的支持。

启用此扩展后,调用 drawArrays()drawElements() 并在启用混合且绘制缓冲区具有 32 位浮点分量的情况下,将不再导致 INVALID_OPERATION 错误。

使用说明

在支持 EXT_float_blend 扩展的设备上,当启用 EXT_color_buffer_floatOES_texture_floatWEBGL_color_buffer_float 中的任何一个或多个时,它会自动隐式启用。这确保了在 WebGL 公开 EXT_float_blend 之前编写的內容将按预期工作。

示例

js
const gl = canvas.getContext("webgl2");

// enable necessary extensions
gl.getExtension("EXT_color_buffer_float");
gl.getExtension("EXT_float_blend");

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

// use floating point format
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, 1, 1, 0, gl.RGBA, gl.FLOAT, null);

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  gl.COLOR_ATTACHMENT0,
  gl.TEXTURE_2D,
  tex,
  0,
);

// enable blending
gl.enable(gl.BLEND);

gl.drawArrays(gl.POINTS, 0, 1);
// won't throw gl.INVALID_OPERATION with the extension enabled

规范

规范
WebGL EXT_float_blend 扩展规范

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅