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.
Availability: 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.
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
Specifications
Specification | Status |
EXT_float_blend | Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 75 |
Edge
Full support 79 |
Firefox
Full support 67 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android Full support 75 Full support 75 Notes' Until Chrome 77, this extension was unavailable on several Android devices powered by GLES 3.2. See bug 964208. |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
See also
- WebGL API
- Using WebGL extensions
- WebGL tutorial
WebGLRenderingContext.getExtension()
EXT_color_buffer_float
WEBGL_color_buffer_float
WebGLRenderingContext.drawArrays()
WebGLRenderingContext.drawElements()
EXT_float_blend by Mozilla Contributors is licensed under CC-BY-SA 2.5.