WebGL WEBGL_blend_equation_advanced_coherent Extension Draft Specification




WebGL working group (public_webgl 'at' khronos.org)


Ashley Gullen (ashley at scirra dot com)

Members of the WebGL working group


Last modified date: September 25, 2019
Revision: 5


WebGL extension #42


Written against the WebGL API 1.0 specification.


This extension exposes the KHR_blend_equation_advanced_coherent functionality to WebGL.

There are no WebGL-specific behavioral changes.

Consult the above extension for documentation, issues and new functions and enumerants.

This extension exposes the KHR_blend_equation_advanced_coherent functionality to WebGL.

CanvasRenderingContext2D provides a series of common blend functions with globalCompositeOperation, such as "multiply" and "screen". KHR_blend_equation_advanced_coherent provides, with the exception of "xor", exactly the same list of blend functions for WebGL, as detailed below:

These effects are useful for high-quality artistic blends. They can be implemented using shaders and rendering via an intermediate texture. However this has a high performance overhead both in draw calls and GPU bandwidth. Advanced blend modes allow a much simpler, high-performance way of implementing these blends. Using shaders rendering to an intermediate texture can be used as a fallback if this extension is not supported.

Note only the coherent variant of this extension is exposed in order to eliminate the possibility of undefined behavior in KHR_blend_equation_advanced. This also simplifies the extension and removes the need to insert blend barriers during rendering.

When this extension is enabled:


interface WEBGL_blend_equation_advanced_coherent  {
  const GLenum MULTIPLY       = 0x9294;
  const GLenum SCREEN         = 0x9295;
  const GLenum OVERLAY        = 0x9296;
  const GLenum DARKEN         = 0x9297;
  const GLenum LIGHTEN        = 0x9298;
  const GLenum COLORDODGE     = 0x9299;
  const GLenum COLORBURN      = 0x929A;
  const GLenum HARDLIGHT      = 0x929B;
  const GLenum SOFTLIGHT      = 0x929C;
  const GLenum DIFFERENCE     = 0x929E;
  const GLenum EXCLUSION      = 0x92A0;
  const GLenum HSL_HUE        = 0x92AD;
  const GLenum HSL_SATURATION = 0x92AE;
  const GLenum HSL_COLOR      = 0x92AF;
  const GLenum HSL_LUMINOSITY = 0x92B0;

IP Status

Additions to the WebGL Specification


New State

New Implementation-Dependent State

Sample Code

var ext = gl.getExtension("WEBGL_blend_equation_advanced_coherent");
gl.getParameter(gl.BLEND_EQUATION) == ext.MULTIPLY;

Conformance Tests

Security Considerations


Revision History

Revision 1, 2015/05/26

Revision 2, 2018/08/21

Revision 3, 2018/08/23

Revision 4, 2018/09/13

Revision 5, 2019/09/25