EXT_float_blend extension

Limited availability

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

The WebGL API's EXT_float_blend extension allows blending and draw buffers with 32-bit floating-point components.

WebGL extensions are available using the WebGLRenderingContext.getExtension() method. For more information, see also Using Extensions in the WebGL tutorial.

Note: This extension is available to both, WebGL1 and WebGL2 contexts. However, to use it, you need to enable the use of 32-bit floating-point draw buffers by enabling the extension WEBGL_color_buffer_float (for WebGL1) or EXT_color_buffer_float (for WebGL2). Doing so automatically enables EXT_float_blend as well, if and only if EXT_float_blend is also supported. Support for EXT_color_buffer_float does not imply support for EXT_float_blend.

With this extension enabled, calling drawArrays() or drawElements() with blending enabled and a draw buffer with 32-bit floating-point components will no longer result in an INVALID_OPERATION error.

Usage notes

On devices that support the EXT_float_blend extension, it is automatically, implicitly, enabled when any one or more of EXT_color_buffer_float, OES_texture_float, or WEBGL_color_buffer_float are enabled. This ensures that content written before EXT_float_blend was exposed by WebGL will function as expected.

Examples

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