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
Summary
Extend
MaskEffectto 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
MaskEffectcurrently accepts:"iris"(Ellipse),"diamond"(Polygon)Ellipse,PolygonThe renderer's
setMask()only supports geometric shapes, so image-based masks need a different rendering approach.API Sketch
Implementation Notes
The image's alpha channel defines the visible area. Requires different code paths per renderer:
Canvas:
globalCompositeOperation = "destination-out"to punch holes where the image has alphaWebGL:
Related
MaskEffect:src/camera/effects/mask_effect.tssetMask():src/video/canvas/canvas_renderer.js,src/video/webgl/webgl_renderer.js