Skip to content

MaskEffect: add image/texture-based mask support #1399

@obiot

Description

@obiot

Summary

Extend MaskEffect to accept an image or sprite as the mask shape, in addition to geometric shapes (Ellipse, Polygon). This would allow custom transition masks using textures — star wipes, heart reveals, game logo transitions, etc.

Current State

MaskEffect currently accepts:

  • Shape presets: "iris" (Ellipse), "diamond" (Polygon)
  • Custom geometric shapes: Ellipse, Polygon

The renderer's setMask() only supports geometric shapes, so image-based masks need a different rendering approach.

API Sketch

// image-based mask transition
state.transition("transition", "#000", 500, loader.getImage("star_silhouette"));

// or directly on the camera
camera.addCameraEffect(new MaskEffect(camera, {
    shape: loader.getImage("star_mask"),
    color: "#000",
    duration: 500,
    direction: "hide",
}));

Implementation Notes

The image's alpha channel defines the visible area. Requires different code paths per renderer:

Canvas:

  • Fill screen with transition color
  • Draw the scaled mask image using globalCompositeOperation = "destination-out" to punch holes where the image has alpha

WebGL:

  • Option A: render the mask image with alpha testing into the stencil buffer, then fill where stencil is not set
  • Option B: use a custom shader that samples the mask texture and discards fragments based on alpha

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions