WEBGL_blend_equation_advanced_coherent WebGL working group (public_webgl 'at' khronos.org) Ashley Gullen (ashley at scirra dot com) Members of the WebGL working group NN

This extension exposes the KHR_blend_equation_advanced_coherent functionality to WebGL.

CanvasRenderingContext2D provides a series of common blend functions with globalComposeOperation, 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:

  • "multiply": MULTIPLY_KHR
  • "screen": SCREEN_KHR
  • "overlay": OVERLAY_KHR
  • "darken": DARKEN_KHR
  • "lighten": LIGHTEN_KHR
  • "color-dodge": COLORDODGE_KHR
  • "color-burn": COLORBURN_KHR
  • "hard-light": HARDLIGHT_KHR
  • "soft-light": SOFTLIGHT_KHR
  • "difference": DIFFERENCE_KHR
  • "exclusion": EXCLUSION_KHR
  • "hue": HSL_HUE_KHR
  • "saturation": HSL_SATURATION_KHR
  • "color": HSL_COLOR_KHR
  • "luminosity": HSL_LUMINOSITY_KHR

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.

The blendEquation entry point is extended to accept the enums in the IDL below
[NoInterfaceObject] 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; };
var ext = gl.getExtension("WEBGL_blend_equation_advanced_coherent");
gl.blendEquation(ext.MULTIPLY);
gl.getParameter(gl.BLEND_EQUATION) == ext.MULTIPLY;
    
Forked from WEBGL_blend_equation_advanced to specify only the coherent variant Converted to extension XML format Revised description Original draft as a TXT file