dacha 0.17.0 → 0.17.2

package/build/contrib/systems/renderer/builders/sprite-builder/index.js

@@ -1,26 +1,16 @@
-import { Texture, Sprite as PixiSprite, TilingSprite, } from 'pixi.js';
+import { Texture, Sprite as PixiSprite, TilingSprite } from 'pixi.js';
 import { BLEND_MODE_MAPPING } from '../../consts';
 import { Sprite } from '../../../../components/sprite';
-import { CacheStore } from '../../../../../engine/data-lib';
-import { getTextureSource, getTextureArray } from './utils';
+import { TextureArrayStore } from '../texture-array-store';
 export class SpriteBuilder {
     assets;
-    textureSourceMap;
-    textureArrayMap;
+    textureArrayStore;
     constructor({ assets }) {
         this.assets = assets;
-        this.textureSourceMap = new CacheStore();
-        this.textureArrayMap = new CacheStore();
+        this.textureArrayStore = new TextureArrayStore(assets);
     }
     destroy(sprite) {
-        const textureSourceKey = sprite.renderData?.textureSourceKey;
-        const textureArrayKey = sprite.renderData?.textureArrayKey;
-        if (textureSourceKey) {
-            this.textureSourceMap.release(textureSourceKey, true);
-        }
-        if (textureArrayKey) {
-            this.textureArrayMap.release(textureArrayKey, true);
-        }
+        this.textureArrayStore.removeTextureArray(sprite);
         sprite.renderData?.view.destroy();
         sprite.renderData = undefined;
     }
@@ -61,11 +51,11 @@ export class SpriteBuilder {
         if (this.assets.get(sprite) &&
             (sprite.src !== meta.src || sprite.slice !== meta.slice)) {
             view.label = sprite.src;
-            this.updateTextureArray(sprite);
+            this.textureArrayStore.updateTextureArray(sprite);
             meta.src = sprite.src;
             meta.slice = sprite.slice;
         }
-        const textureArray = this.getTextureArray(sprite);
+        const textureArray = this.textureArrayStore.getTextureArray(sprite);
         const texture = textureArray?.[sprite.currentFrame ?? 0];
         view.texture = texture ?? Texture.WHITE;
         const scaleX = sprite.flipX ? -1 : 1;
@@ -89,43 +79,4 @@ export class SpriteBuilder {
             meta.height = sprite.height;
         }
     }
-    updateTextureArray(sprite) {
-        const oldTextureSourceKey = sprite.renderData.textureSourceKey;
-        const oldTextureArrayKey = sprite.renderData.textureArrayKey;
-        if (oldTextureSourceKey) {
-            this.textureSourceMap.release(oldTextureSourceKey, true);
-        }
-        if (oldTextureArrayKey) {
-            this.textureArrayMap.release(oldTextureArrayKey, true);
-        }
-        sprite.renderData.textureSourceKey = sprite.src;
-        sprite.renderData.textureArrayKey = `${sprite.slice}_${sprite.renderData.textureSourceKey}`;
-        const textureSourceKey = sprite.renderData.textureSourceKey;
-        const textureArrayKey = sprite.renderData.textureArrayKey;
-        if (this.textureArrayMap.has(textureArrayKey)) {
-            this.textureArrayMap.retain(textureArrayKey);
-            this.textureSourceMap.retain(textureSourceKey);
-            return;
-        }
-        if (this.textureSourceMap.has(textureSourceKey)) {
-            const textureSource = this.textureSourceMap.get(textureSourceKey);
-            const textureArray = getTextureArray(textureSource, sprite);
-            this.textureArrayMap.add(textureArrayKey, textureArray);
-            this.textureArrayMap.retain(textureArrayKey);
-            this.textureSourceMap.retain(textureSourceKey);
-        }
-        const image = this.assets.get(sprite);
-        if (!image) {
-            return undefined;
-        }
-        const textureSource = getTextureSource(image);
-        const textureArray = getTextureArray(textureSource, sprite);
-        this.textureSourceMap.add(textureSourceKey, textureSource);
-        this.textureArrayMap.add(textureArrayKey, textureArray);
-        this.textureArrayMap.retain(textureArrayKey);
-        this.textureSourceMap.retain(textureSourceKey);
-    }
-    getTextureArray(sprite) {
-        return this.textureArrayMap.get(sprite.renderData.textureArrayKey);
-    }
 }

package/build/contrib/systems/renderer/builders/texture-array-store/index.d.ts

@@ -0,0 +1,13 @@
+import { Texture } from 'pixi.js';
+import type { Assets } from '../../assets';
+import { Sprite } from '../../../../components/sprite';
+import { Mesh } from '../../../../components/mesh';
+export declare class TextureArrayStore {
+    private assets;
+    private textureSourceMap;
+    private textureArrayMap;
+    constructor(assets: Assets);
+    updateTextureArray(component: Sprite | Mesh): void;
+    removeTextureArray(component: Sprite | Mesh): void;
+    getTextureArray(component: Sprite | Mesh): Texture[] | undefined;
+}

package/build/contrib/systems/renderer/builders/texture-array-store/index.js

@@ -0,0 +1,61 @@
+import { CacheStore } from '../../../../../engine/data-lib';
+import { getTextureSource, getTextureArray } from './utils';
+export class TextureArrayStore {
+    assets;
+    textureSourceMap;
+    textureArrayMap;
+    constructor(assets) {
+        this.assets = assets;
+        this.textureSourceMap = new CacheStore();
+        this.textureArrayMap = new CacheStore();
+    }
+    updateTextureArray(component) {
+        const oldTextureSourceKey = component.renderData.textureSourceKey;
+        const oldTextureArrayKey = component.renderData.textureArrayKey;
+        if (oldTextureSourceKey) {
+            this.textureSourceMap.release(oldTextureSourceKey, true);
+        }
+        if (oldTextureArrayKey) {
+            this.textureArrayMap.release(oldTextureArrayKey, true);
+        }
+        component.renderData.textureSourceKey = component.src;
+        component.renderData.textureArrayKey = `${component.slice}_${component.renderData.textureSourceKey}`;
+        const textureSourceKey = component.renderData.textureSourceKey;
+        const textureArrayKey = component.renderData.textureArrayKey;
+        if (this.textureArrayMap.has(textureArrayKey)) {
+            this.textureArrayMap.retain(textureArrayKey);
+            this.textureSourceMap.retain(textureSourceKey);
+            return;
+        }
+        if (this.textureSourceMap.has(textureSourceKey)) {
+            const textureSource = this.textureSourceMap.get(textureSourceKey);
+            const textureArray = getTextureArray(textureSource, component);
+            this.textureArrayMap.add(textureArrayKey, textureArray);
+            this.textureArrayMap.retain(textureArrayKey);
+            this.textureSourceMap.retain(textureSourceKey);
+        }
+        const image = this.assets.get(component);
+        if (!image) {
+            return undefined;
+        }
+        const textureSource = getTextureSource(image);
+        const textureArray = getTextureArray(textureSource, component);
+        this.textureSourceMap.add(textureSourceKey, textureSource);
+        this.textureArrayMap.add(textureArrayKey, textureArray);
+        this.textureArrayMap.retain(textureArrayKey);
+        this.textureSourceMap.retain(textureSourceKey);
+    }
+    removeTextureArray(component) {
+        const textureSourceKey = component.renderData?.textureSourceKey;
+        const textureArrayKey = component.renderData?.textureArrayKey;
+        if (textureSourceKey) {
+            this.textureSourceMap.release(textureSourceKey, true);
+        }
+        if (textureArrayKey) {
+            this.textureArrayMap.release(textureArrayKey, true);
+        }
+    }
+    getTextureArray(component) {
+        return this.textureArrayMap.get(component.renderData.textureArrayKey);
+    }
+}

package/build/contrib/systems/renderer/builders/{sprite-builder → texture-array-store}/utils.d.ts

@@ -1,4 +1,5 @@
 import { Texture, TextureSource } from 'pixi.js';
-import { Sprite } from '../../../../components/sprite';
 export declare const getTextureSource: (image: HTMLImageElement) => TextureSource;
-export declare const getTextureArray: (textureSource: TextureSource, sprite: Sprite) => Texture[];
+export declare const getTextureArray: (textureSource: TextureSource, component: {
+    slice: number;
+}) => Texture[];

package/build/contrib/systems/renderer/builders/{sprite-builder → texture-array-store}/utils.js

@@ -3,11 +3,11 @@ export const getTextureSource = (image) => TextureSource.from({
     resource: image,
     scaleMode: 'nearest',
 });
-export const getTextureArray = (textureSource, sprite) => {
+export const getTextureArray = (textureSource, component) => {
     const textures = [];
-    const frameWidth = Math.max(textureSource.width / sprite.slice, 1);
+    const frameWidth = Math.max(textureSource.width / component.slice, 1);
     const frameHeight = Math.max(textureSource.height, 1);
-    for (let i = 0; i < sprite.slice; i += 1) {
+    for (let i = 0; i < component.slice; i += 1) {
         const rectangle = new Rectangle(i * frameWidth, 0, frameWidth, frameHeight);
         const texture = new Texture({ source: textureSource, frame: rectangle });
         textures.push(texture);

package/build/contrib/systems/renderer/consts.js

@@ -2,6 +2,7 @@ import { Sprite } from '../../components/sprite';
 import { Shape } from '../../components/shape';
 import { PixiView } from '../../components/pixi-view';
 import { BitmapText } from '../../components/bitmap-text';
+import { Mesh } from '../../components/mesh';
 export const BLEND_MODE_MAPPING = {
     normal: 'normal',
     addition: 'add',
@@ -19,4 +20,5 @@ export const VIEW_COMPONENTS = [
     Shape,
     PixiView,
     BitmapText,
+    Mesh,
 ];

package/build/contrib/systems/renderer/filters/filter-effect.d.ts

@@ -0,0 +1,14 @@
+import type { Filter } from 'pixi.js';
+import type { Constructor } from '../../../../types/utils';
+export interface FilterEffectConfig {
+    name: string;
+    options: Record<string, unknown>;
+}
+export declare abstract class FilterEffect {
+    static behaviorName: string;
+    abstract create(options: unknown): Filter;
+    update?(filter: Filter, options: unknown, elapsedTime: number): void;
+}
+export type FilterEffectConstructor = Constructor<FilterEffect> & {
+    behaviorName: string;
+};

package/build/contrib/systems/renderer/filters/filter-effect.js

@@ -0,0 +1,3 @@
+export class FilterEffect {
+    static behaviorName;
+}

package/build/contrib/systems/renderer/filters/index.d.ts

@@ -0,0 +1,21 @@
+import { type Application } from 'pixi.js';
+import type { Time } from '../types';
+import type { FilterEffectConstructor, FilterEffectConfig } from './filter-effect';
+export interface FiltersSystemOptions {
+    application: Application;
+    time: Time;
+    availableFilterEffects?: FilterEffectConstructor[];
+    filterEffects?: FilterEffectConfig[];
+}
+export declare class FilterSystem {
+    private application;
+    private time;
+    private effects;
+    private filtersMap;
+    constructor({ application, time, availableFilterEffects, filterEffects, }: FiltersSystemOptions);
+    clear(): void;
+    addEffect(config: FilterEffectConfig): void;
+    removeEffect(config: FilterEffectConfig): void;
+    getEffects(): FilterEffectConfig[];
+    update(): void;
+}

package/build/contrib/systems/renderer/filters/index.js

@@ -0,0 +1,64 @@
+import { Filter } from 'pixi.js';
+export class FilterSystem {
+    application;
+    time;
+    effects;
+    filtersMap;
+    constructor({ application, time, availableFilterEffects = [], filterEffects = [], }) {
+        Filter.defaultOptions.resolution = window.devicePixelRatio;
+        this.application = application;
+        this.effects = availableFilterEffects.reduce((acc, FilterEffect) => {
+            if (FilterEffect.behaviorName === undefined) {
+                throw new Error(`Missing behaviorName field for "${FilterEffect.name}" FilterEffect class.`);
+            }
+            if (acc[FilterEffect.behaviorName] !== undefined) {
+                console.warn(`FilterEffect "${FilterEffect.behaviorName}" already exists and will be overridden.`);
+            }
+            acc[FilterEffect.behaviorName] = new FilterEffect();
+            return acc;
+        }, {});
+        this.time = time;
+        this.filtersMap = new Map();
+        filterEffects.forEach((effect) => this.addEffect(effect));
+    }
+    clear() {
+        this.filtersMap.clear();
+        this.application.stage.filters = null;
+    }
+    addEffect(config) {
+        const effect = this.effects[config.name];
+        if (!effect) {
+            throw new Error(`Filter effect not found: ${config.name}`);
+        }
+        const filter = effect.create(config.options);
+        filter.__dacha = { meta: { name: config.name } };
+        this.filtersMap.set(config, filter);
+        const currentFilters = this.application.stage.filters ?? [];
+        this.application.stage.filters = [...currentFilters, filter];
+    }
+    removeEffect(config) {
+        const filter = this.filtersMap.get(config);
+        if (!filter) {
+            return;
+        }
+        this.filtersMap.delete(config);
+        const currentFilters = this.application.stage.filters ?? [];
+        const nextFilters = currentFilters.filter((entry) => entry !== filter);
+        this.application.stage.filters = nextFilters.length ? nextFilters : null;
+    }
+    getEffects() {
+        return Array.from(this.filtersMap.keys());
+    }
+    update() {
+        this.filtersMap.forEach((filter, config) => {
+            const meta = filter.__dacha.meta;
+            if (config.name !== meta.name) {
+                this.removeEffect(config);
+                this.addEffect(config);
+            }
+        });
+        this.filtersMap.forEach((filter, config) => {
+            this.effects[config.name]?.update?.(filter, config.options, this.time.elapsed);
+        });
+    }
+}

package/build/contrib/systems/renderer/index.d.ts

@@ -1,2 +1,4 @@
 export { Renderer } from './renderer';
 export { RendererService } from './service';
+export { FilterEffect } from './filters/filter-effect';
+export { Shader } from './material/shader';

package/build/contrib/systems/renderer/index.js

@@ -1,2 +1,4 @@
 export { Renderer } from './renderer';
 export { RendererService } from './service';
+export { FilterEffect } from './filters/filter-effect';
+export { Shader } from './material/shader';

package/build/contrib/systems/renderer/material/consts.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_VERTEX_SHADER = "\n  precision mediump float;\n\n  attribute vec2 aPosition;\n  attribute vec2 aUV;\n\n  uniform mat3 uProjectionMatrix;\n  uniform mat3 uWorldTransformMatrix;\n  uniform mat3 uTransformMatrix;\n\n  varying vec2 vUV;\n\n  void main() {\n    vUV = aUV;\n\n    mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;\n    vec3 pos = mvp * vec3(aPosition, 1.0);\n    gl_Position = vec4(pos.xy, 0.0, 1.0);\n  }\n";
+export declare const DEFAULT_FRAGMENT_SHADER = "\n  precision mediump float;\n\n  varying vec2 vUV;\n\n  uniform sampler2D uSampler;\n  uniform vec3 uTint;\n  uniform float uAlpha;\n\n  void main() {\n    vec4 color = texture2D(uSampler, vUV);\n    color.rgb *= uTint;\n    color *= uAlpha;\n    gl_FragColor = color;\n  }\n";

package/build/contrib/systems/renderer/material/consts.js

@@ -0,0 +1,36 @@
+export const DEFAULT_VERTEX_SHADER = `
+  precision mediump float;
+
+  attribute vec2 aPosition;
+  attribute vec2 aUV;
+
+  uniform mat3 uProjectionMatrix;
+  uniform mat3 uWorldTransformMatrix;
+  uniform mat3 uTransformMatrix;
+
+  varying vec2 vUV;
+
+  void main() {
+    vUV = aUV;
+
+    mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
+    vec3 pos = mvp * vec3(aPosition, 1.0);
+    gl_Position = vec4(pos.xy, 0.0, 1.0);
+  }
+`;
+export const DEFAULT_FRAGMENT_SHADER = `
+  precision mediump float;
+
+  varying vec2 vUV;
+
+  uniform sampler2D uSampler;
+  uniform vec3 uTint;
+  uniform float uAlpha;
+
+  void main() {
+    vec4 color = texture2D(uSampler, vUV);
+    color.rgb *= uTint;
+    color *= uAlpha;
+    gl_FragColor = color;
+  }
+`;

package/build/contrib/systems/renderer/material/index.d.ts

@@ -0,0 +1,20 @@
+import type { ViewComponent, Time } from '../types';
+import type { ShaderConstructor, MaterialConfig } from './shader';
+interface MaterialSystemOptions {
+    shaders?: ShaderConstructor[];
+    time: Time;
+}
+type MaterialViewComponent = ViewComponent & {
+    material?: MaterialConfig;
+};
+export declare class MaterialSystem {
+    private time;
+    private shaderBuilders;
+    private currentVersion;
+    constructor({ time, shaders }: MaterialSystemOptions);
+    private createShader;
+    destroyShader(component: MaterialViewComponent): void;
+    updateShader(component: MaterialViewComponent): void;
+    reloadShaders(shaders: ShaderConstructor[]): void;
+}
+export {};

package/build/contrib/systems/renderer/material/index.js

@@ -0,0 +1,94 @@
+import { Shader as PixiShader, Color, Texture, } from 'pixi.js';
+import { DEFAULT_FRAGMENT_SHADER, DEFAULT_VERTEX_SHADER } from './consts';
+const createShaderBuilders = (shaders) => {
+    return shaders.reduce((acc, MaterialClass) => {
+        if (MaterialClass.behaviorName === undefined) {
+            throw new Error(`Missing behaviorName field for "${MaterialClass.name}" Shader class.`);
+        }
+        if (acc[MaterialClass.behaviorName] !== undefined) {
+            console.warn(`Material "${MaterialClass.behaviorName}" already exists and will be overridden.`);
+        }
+        acc[MaterialClass.behaviorName] = new MaterialClass();
+        return acc;
+    }, {});
+};
+export class MaterialSystem {
+    time;
+    shaderBuilders;
+    currentVersion;
+    constructor({ time, shaders = [] }) {
+        this.time = time;
+        this.shaderBuilders = createShaderBuilders(shaders);
+        this.currentVersion = 0;
+    }
+    createShader(config) {
+        const builder = config ? this.shaderBuilders[config.name] : undefined;
+        const shader = PixiShader.from({
+            gl: {
+                vertex: (config && builder?.vertex(config.options)) ?? DEFAULT_VERTEX_SHADER,
+                fragment: (config && builder?.fragment(config.options)) ??
+                    DEFAULT_FRAGMENT_SHADER,
+            },
+            resources: {
+                uSampler: Texture.WHITE,
+                uniformsGroup: {
+                    uTime: { value: 0.0, type: 'f32' },
+                    uTint: { value: [1.0, 1.0, 1.0], type: 'vec3<f32>' },
+                    uAlpha: { value: 1.0, type: 'f32' },
+                    uTextureSize: { value: [0.0, 0.0], type: 'vec2<f32>' },
+                    ...(config && builder?.uniforms?.(config.options)),
+                },
+            },
+        });
+        shader.__dacha = { version: this.currentVersion, meta: {} };
+        return shader;
+    }
+    destroyShader(component) {
+        const view = component.renderData.view;
+        if (view.shader) {
+            view.shader.destroy();
+        }
+    }
+    updateShader(component) {
+        const view = component.renderData.view;
+        const material = component.material;
+        const builder = material ? this.shaderBuilders[material.name] : undefined;
+        const shaderKey = (material && builder?.shaderKey?.(material.name, material.options)) ??
+            component.material?.name ??
+            null;
+        if (!view.shader ||
+            shaderKey !== view.shader.__dacha.meta.materialShaderKey ||
+            this.currentVersion !== view.shader.__dacha.version) {
+            this.destroyShader(component);
+            view.shader = this.createShader(component.material);
+            view.shader.__dacha.meta.materialShaderKey = shaderKey;
+        }
+        const meta = view.shader.__dacha.meta;
+        if (meta.materialSampler !== view.texture.source) {
+            meta.materialSampler = view.texture.source;
+            view.shader.resources.uSampler = view.texture.source;
+        }
+        view.shader.resources.uniformsGroup.uniforms.uTime = this.time.elapsed;
+        view.shader.resources.uniformsGroup.uniforms.uAlpha =
+            view.getGlobalAlpha(true);
+        const tint = view.getGlobalTint(true);
+        if (meta.materialTint !== tint) {
+            meta.materialTint = tint;
+            view.shader.resources.uniformsGroup.uniforms.uTint = Color.shared
+                .setValue(tint)
+                .toRgbArray([]);
+        }
+        view.shader.resources.uniformsGroup.uniforms.uTextureSize[0] =
+            view.texture.source.width;
+        view.shader.resources.uniformsGroup.uniforms.uTextureSize[1] =
+            view.texture.source.height;
+        if (!material || !builder) {
+            return;
+        }
+        builder.updateUniforms?.(view.shader.resources.uniformsGroup.uniforms, material.options);
+    }
+    reloadShaders(shaders) {
+        this.shaderBuilders = createShaderBuilders(shaders);
+        this.currentVersion += 1;
+    }
+}

package/build/contrib/systems/renderer/material/shader.d.ts

@@ -0,0 +1,25 @@
+import type { Constructor } from '../../../../types/utils';
+export interface MaterialConfig {
+    name: string;
+    options: Record<string, unknown>;
+}
+type ShaderUniformType = 'f32' | 'i32' | 'vec2<f32>' | 'vec3<f32>' | 'vec4<f32>' | 'mat2x2<f32>' | 'mat3x3<f32>' | 'mat4x4<f32>' | 'mat3x2<f32>' | 'mat4x2<f32>' | 'mat2x3<f32>' | 'mat4x3<f32>' | 'mat2x4<f32>' | 'mat3x4<f32>' | 'vec2<i32>' | 'vec3<i32>' | 'vec4<i32>';
+type ShaderUniformValue = number | boolean | number[] | boolean[] | Float32Array | Int32Array | Uint32Array;
+interface ShaderUniform {
+    value: ShaderUniformValue;
+    type: ShaderUniformType;
+}
+export type ShaderUniformDefinitions = Record<string, ShaderUniform>;
+export type ShaderUniforms = Record<string, ShaderUniformValue>;
+export declare abstract class Shader {
+    static behaviorName: string;
+    shaderKey?(name: string, options: unknown): string;
+    abstract vertex(options: unknown): string;
+    abstract fragment(options: unknown): string;
+    uniforms?(options: unknown): ShaderUniformDefinitions;
+    updateUniforms?(uniforms: ShaderUniforms, options: unknown): void;
+}
+export type ShaderConstructor = Constructor<Shader> & {
+    behaviorName: string;
+};
+export {};

package/build/contrib/systems/renderer/material/shader.js

@@ -0,0 +1,3 @@
+export class Shader {
+    static behaviorName;
+}

package/build/contrib/systems/renderer/renderer.d.ts

@@ -1,4 +1,4 @@
-import { WorldSystem, type WorldSystemOptions } from '../../../engine/system';
+import { WorldSystem, type WorldSystemOptions, type UpdateOptions } from '../../../engine/system';
 import { type Scene } from '../../../engine/scene';
 /**
  * Renderer system that manages 2D graphics rendering using PIXI.js under the hood
@@ -17,6 +17,10 @@ export declare class Renderer extends WorldSystem {
     private cameraService;
     private assets;
     private actorRenderTree?;
+    private filterSystem;
+    private materialSystem;
+    private resources?;
+    private time;
     constructor(options: WorldSystemOptions);
     onWorldLoad(): Promise<void>;
     onWorldDestroy(): void;
@@ -25,5 +29,5 @@ export declare class Renderer extends WorldSystem {
     onSceneExit(): void;
     onSceneDestroy(scene: Scene): void;
     private updateCamera;
-    update(): void;
+    update(options: UpdateOptions): void;
 }

package/build/contrib/systems/renderer/renderer.js

@@ -1,5 +1,5 @@
 import { Application, Container, Color, RenderLayer, } from 'pixi.js';
-import { WorldSystem } from '../../../engine/system';
+import { WorldSystem, } from '../../../engine/system';
 import { Transform } from '../../components/transform';
 import { Camera } from '../../components/camera';
 import { CameraService } from '../camera-system';
@@ -9,6 +9,8 @@ import { composeSort, createSortByLayer, sortByYAxis, sortByXAxis, } from './sor
 import { parseSortingLayers } from './sort/utils';
 import { Assets } from './assets';
 import { ActorRenderTree } from './actor-render-tree';
+import { FilterSystem } from './filters';
+import { MaterialSystem } from './material';
 import { SORTING_ORDER_MAPPING } from './consts';
 /**
  * Renderer system that manages 2D graphics rendering using PIXI.js under the hood
@@ -27,11 +29,16 @@ export class Renderer extends WorldSystem {
     cameraService;
     assets;
     actorRenderTree;
+    filterSystem;
+    materialSystem;
+    resources;
+    time;
     constructor(options) {
         super();
-        const { globalOptions, windowNodeId, backgroundColor, templateCollection, world, } = options;
+        const { globalOptions, windowNodeId, backgroundColor, templateCollection, world, resources, filterEffects, } = options;
         this.backgroundColor = new Color(backgroundColor);
         this.window = getWindowNode(windowNodeId);
+        this.resources = resources;
         const sorting = globalOptions.sorting;
         const sortingOrder = SORTING_ORDER_MAPPING[sorting?.order ?? 'bottomRight'];
         const parsedSortingLayers = parseSortingLayers(sorting?.layers);
@@ -48,12 +55,25 @@ export class Renderer extends WorldSystem {
         this.application = new Application();
         this.worldContainer = new Container();
         this.assets = new Assets({ templateCollection });
+        this.time = { elapsed: 0 };
+        this.materialSystem = new MaterialSystem({
+            shaders: this.resources?.shaders,
+            time: this.time,
+        });
+        this.filterSystem = new FilterSystem({
+            application: this.application,
+            time: this.time,
+            filterEffects,
+            availableFilterEffects: this.resources?.filterEffects,
+        });
         this.cameraService = world.getService(CameraService);
         world.addService(new RendererService({
             application: this.application,
             worldContainer: this.worldContainer,
             getViewEntries: () => this.actorRenderTree?.viewEntries,
             sortFn: this.sortFn,
+            filterSystem: this.filterSystem,
+            materialSystem: this.materialSystem,
         }));
     }
     async onWorldLoad() {
@@ -77,6 +97,7 @@ export class Renderer extends WorldSystem {
         };
     }
     onWorldDestroy() {
+        this.filterSystem.clear();
         this.window.removeChild(this.application.canvas);
         this.application.destroy();
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -92,6 +113,7 @@ export class Renderer extends WorldSystem {
             worldContainer: this.worldContainer,
             assets: this.assets,
             sortingLayers: this.sortingLayers,
+            materialSystem: this.materialSystem,
         });
     }
     onSceneExit() {
@@ -113,9 +135,11 @@ export class Renderer extends WorldSystem {
         this.worldContainer.position.set(this.application.renderer.width / 2, this.application.renderer.height / 2);
         this.worldContainer.pivot.set(x, y);
     }
-    update() {
+    update(options) {
+        this.time.elapsed += options.deltaTime / 1000;
         this.updateCamera();
         this.actorRenderTree?.update();
+        this.filterSystem.update();
         this.application.renderer.render({ container: this.application.stage });
     }
 }