Blend Mode Constraints

In native applications, implementing blend modes is straightforward — the GPU can read any previously rendered pixel directly to compute the blend result.

In WebGL, the framebuffer (the current rendering target) is write-only by default. Reading from it requires copying it to a readable texture, which is slow.

For elements using non-Normal blend modes, FlashFX uses one of two strategies:

Strategy A — Shader Compositing (preferred): The already-rendered background is copied to an offscreen texture before drawing the blend mode element. The element's shader reads from this texture and computes the blend in the same draw call.

• -Adds one texture copy per blend mode layer
• -The copy is performed at canvas resolution (large canvases = expensive copy)
• -Multiple consecutive non-Normal blend layers each add a separate copy

Strategy B — Isolated Pass: The element is rendered to an offscreen buffer, then composited onto the background using a blend mode shader. Used for complex blend modes or groups with blend modes.

• -Requires a full offscreen buffer at the element's bounding box dimensions
• -More memory-intensive but avoids the full-canvas texture copy

These costs multiply with canvas resolution. A blend mode on a 4K canvas costs 4x more than the same blend mode on a 1080p canvas.

FlashFX warns when:

• -More than 6 non-Normal blend mode elements are active simultaneously
• -More than 3 blend mode groups overlap at any point in the canvas

Beyond these thresholds, rendering performance degrades significantly on mid-range hardware.