Skip to content

WebGL: implement advanced blend modes via fragment shaders #1318

@obiot

Description

@obiot

Summary

The following CSS blend modes are only supported by the Canvas renderer and fall back to "normal" in WebGL:

  • overlay
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion

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.

Image

Current state

Implementation approach

Each advanced blend mode would need:

  1. A custom fragment shader with the blend formula (e.g. overlay: base < 0.5 ? 2*base*blend : 1-2*(1-base)*(1-blend))
  2. A two-pass render: first pass renders to a texture, second pass blends using the shader
  3. Integration with the existing setBlendMode API

Reference

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions