EXT_float_blend extension
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
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
Specifications
Specification |
---|
WebGL EXT_float_blend Extension Specification |
Browser compatibility
BCD tables only load in the browser