Filter

A visual container that renders its children to a texture for post-processing effects.

Filter renders its children to a RenderTexture, allowing you to:

• Apply shader effects to groups of visuals
• Add blur, glow, or other post-processing effects
• Blend or transform rendered results as a single texture
• Create complex visual effects like reflections or distortions
• Improve performance by caching complex visuals

The filter process:

1. Children are rendered to an internal RenderTexture
2. The texture can be processed with shaders or effects
3. The result is displayed as a single quad/mesh

Features:

• Automatic render texture management
• Optional custom mesh for advanced effects
• Toggle effects without changing hierarchy
• Explicit render control for performance
• Support for texture atlases via TextureTilePacker

// Create a blur filter
var blurFilter = new Filter();
blurFilter.size(400, 300);
blurFilter.shader = assets.shader('blur');

// Add content to be blurred
var text = new Text();
text.content = 'Blurred Text';
blurFilter.content.add(text);

// Toggle effect
blurFilter.enabled = false; // Disable blur

Instance Members #

Default is false, automatically set to true when any of this instance's observable variables has changed.

Optional ID assigned to the internal render texture. Useful for debugging or identifying textures in tools.

Optional mesh for advanced rendering effects.

By default, the filter renders as a simple quad. Providing a custom mesh allows for advanced effects like:

• Distortion effects with deformed vertices
• Multi-pass rendering with custom UVs
• Complex shader effects requiring custom attributes

The mesh will be added as a child and the render texture assigned to it.

If set to true, when assigning null or a new mesh intance to the mesh field will destroy any existing mesh previously assigned.

The container for visuals to be rendered through this filter. Add your visuals as children of this content quad. Everything added here will be rendered to the filter's texture and processed according to the filter's settings.

If provided, visuals in content will react to hit tests and touch events as if they were inside this hit visual. By default, hitVisual is the Filter instance itself.

Toggle the filter effect on/off.

When false:

• No render texture is used
• Children render directly to screen
• No performance overhead from filtering
• Useful for toggling effects without changing hierarchy

Default is true (filter enabled).

The filtering mode for the render texture.

• LINEAR: Smooth filtering (default, good for most effects)
• NEAREST: No filtering (good for pixel art)

Whether to use a depth buffer for the render texture. Enable when rendering 3D content or when precise depth testing is needed. Default is true.

Whether to use a stencil buffer for the render texture. Enable for masking effects or when using stencil-based rendering techniques. Default is true.

Antialiasing level for the render texture. 0 = no antialiasing (default) 2, 4, 8, etc. = multisampling levels Higher values provide smoother edges but use more GPU resources.

Whether the render texture updates automatically. Set to false for manual control over when rendering happens. Useful for static content that doesn't need continuous updates. Default is true.

Enable manual control over when the filter renders.

When true:

• Children don't render automatically
• Use render() method to trigger rendering
• Filter manages children's active state
• Useful for performance optimization

Default is false (automatic rendering).

Optional texture tile packer for efficient texture atlas usage. When set, the filter will allocate tiles from the packer's texture atlas instead of creating dedicated render textures. Useful for optimizing many small filters.

The allocated texture tile when using a TextureTilePacker. Read-only. Automatically managed when textureTilePacker is set.

The render texture used for this filter. Read-only. Automatically created based on filter size and settings. Can be observed for changes using the @observe attribute.

Texture density/resolution multiplier. -1 = use screen density (default) 1.0 = normal density 2.0 = double density (retina) Affects the internal resolution of the render texture.

Force the filter to render even when content is empty.

By default, empty filters don't render (optimization). Set to true when you need the filter to process even without content, such as for time-based shader effects or render passes that don't depend on input visuals.

Adds a hidden 1x1 quad to ensure rendering occurs.

Manually trigger rendering when explicitRender is true.

This method:

1. Activates content for rendering
2. Waits for the render pass
3. Updates the render texture
4. Deactivates content
5. Calls the done callback

Handles concurrent render calls gracefully by queuing callbacks.

Test if a visual inside the filter's content is hit at the given coordinates.

This method handles the coordinate transformation from screen space through the filter's render texture to the visual's local space. Used internally for touch/mouse hit testing on filtered content.

Private Members #

Internal flag used to keep track of current explicit render state

Used internally when concurrent renders are trigerred

Event when any observable value as changed on this instance.

Event when renderTexture field changes.

Metadata #