Summary
The following CSS blend modes are only supported by the Canvas renderer and fall back to "normal" in WebGL:
overlaycolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusion
These modes require per-pixel conditional math that cannot be expressed with gl.blendFunc/gl.blendEquation. The only way to implement them in WebGL is via custom fragment shaders.
Current state
Implementation approach
Each advanced blend mode would need:
- A custom fragment shader with the blend formula (e.g. overlay:
base < 0.5 ? 2*base*blend : 1-2*(1-base)*(1-blend))
- A two-pass render: first pass renders to a texture, second pass blends using the shader
- Integration with the existing
setBlendMode API
Reference
Summary
The following CSS blend modes are only supported by the Canvas renderer and fall back to "normal" in WebGL:
overlaycolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionThese modes require per-pixel conditional math that cannot be expressed with
gl.blendFunc/gl.blendEquation. The only way to implement them in WebGL is via custom fragment shaders.Current state
darken/lightenin WebGL2 viagl.MIN/gl.MAXsetBlendModereturns the actually applied mode, so callers can detect unsupported modesImplementation approach
Each advanced blend mode would need:
base < 0.5 ? 2*base*blend : 1-2*(1-base)*(1-blend))setBlendModeAPIReference