EXT_float_blend

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

WebGL APIEXT_float_blend 扩展允许使用 32 位浮点数组件来混合和绘制缓冲区。

若要查询该扩展是否存在,可以用方法:WebGLRenderingContext.getExtension()。更多信息可以参考 WebGL tutorial 中的 Using Extensions

备注: 该扩展在 WebGL1WebGL2 上下文中均存在。但是,要使用它,你需要启用对 32 位浮点绘制缓冲区的使用WEBGL_color_buffer_float(for WebGL1)或 EXT_color_buffer_float(WebGL2)。通过启用 32 位浮点缓冲区扩展,将自动启用EXT_float_blend

该组件启用后,使用 32 位浮点数混合方式绘制,调用 drawArrays()drawElements() 时,将不再产生 INVALID_OPERATION 异常。

使用说明

在支持 EXT_float_blend 扩展的设备上,当以下几种有一种或几种扩展启用时EXT_color_buffer_float, OES_texture_float, 或 WEBGL_color_buffer_float,该扩展将会自动、隐式的启用。这确保了在该扩展定义之前的内容也都能够按照预期正确执行。

例子

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

规范

Specification
WebGL EXT_float_blend Extension Specification

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
EXT_float_blend

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

其他参考