@woosh/meep-engine 2.33.23 → 2.33.27

package/engine/ecs/foliage/ecs/Foliage2System.js

@@ -1,7 +1,7 @@
 import { System } from "../../System.js";
 import { InstancedFoliage } from "../InstancedFoliage.js";
 import { Cache } from "../../../../core/cache/Cache.js";
-import { Foliage2 } from "./Foliage2.js";
+import { InstancedMeshComponent } from "./InstancedMeshComponent.js";
 import { guessAssetType } from "../../../asset/guessAssetType.js";
 
 
@@ -19,7 +19,7 @@ function cleanupLayer(layerData, renderLayer) {
 
 /**
  *
- * @param {FoliageLayer} layer
+ * @param {InstancedMeshLayer} layer
  * @param {AssetManager} assetManager
  * @returns {Promise<InstancedFoliage>}
  */
@@ -60,7 +60,7 @@ export function loadFoliageLayer(layer, assetManager) {
 
 /**
  *
- * @param {FoliageLayer} layer
+ * @param {InstancedMeshLayer} layer
  * @param {Cache<string, Promise<InstancedFoliage>>} cache
  * @param {AssetManager} assetManager
  * @returns {Promise<InstancedFoliage>}
@@ -83,7 +83,7 @@ export class Foliage2System extends System {
      * @param {AssetManager} assetManager
      * @param {GraphicsEngine} graphicsEngine
      * @constructor
-     * @extends {System.<Foliage2>}
+     * @extends {System.<InstancedMeshComponent>}
      */
     constructor(assetManager, graphicsEngine) {
         super();
@@ -96,7 +96,7 @@ export class Foliage2System extends System {
          */
         this.renderLayer = null;
 
-        this.dependencies = [Foliage2];
+        this.dependencies = [InstancedMeshComponent];
 
         /**
          *
@@ -166,7 +166,7 @@ export class Foliage2System extends System {
 
     /**
      *
-     * @param {Foliage2} foliage
+     * @param {InstancedMeshComponent} foliage
      * @param entity
      */
     link(foliage, entity) {
@@ -181,7 +181,7 @@ export class Foliage2System extends System {
         for (let i = 0; i < layer_count; i++) {
             /**
              *
-             * @type {FoliageLayer}
+             * @type {InstancedMeshLayer}
              */
             const foliage_layer = layerList.get(i);
 

package/engine/ecs/foliage/ecs/InstancedMeshComponent.js

@@ -0,0 +1,37 @@
+import List from "../../../../core/collection/list/List.js";
+import { InstancedMeshLayer } from "./InstancedMeshLayer.js";
+
+
+export class InstancedMeshComponent {
+    constructor() {
+        /**
+         *
+         * @type {List<InstancedMeshLayer>}
+         * @readonly
+         */
+        this.layers = new List();
+    }
+
+    toJSON() {
+        return this.layers.toJSON();
+    }
+
+    fromJSON(data) {
+        this.layers.fromJSON(data, InstancedMeshLayer);
+    }
+
+    dispose() {
+
+        const layers = this.layers;
+        const n = layers.length;
+
+        for (let i = 0; i < n; i++) {
+            const layer = layers.get(i);
+
+            layer.dispose();
+        }
+    }
+}
+
+InstancedMeshComponent.typeName = "InstancedMeshComponent";
+

package/engine/ecs/foliage/ecs/{Foliage2.js → InstancedMeshLayer.js}

@@ -1,12 +1,11 @@
+import { InstancedFoliage } from "../InstancedFoliage.js";
 import ObservedString from "../../../../core/model/ObservedString.js";
-import List from "../../../../core/collection/list/List.js";
 import ObservedBoolean from "../../../../core/model/ObservedBoolean.js";
-import { InstancedFoliage } from "../InstancedFoliage.js";
+import { computeHashIntegerArray } from "../../../../core/collection/array/computeHashIntegerArray.js";
 import { Base64 } from "../../../../core/binary/Base64.js";
 import { BinaryBuffer } from "../../../../core/binary/BinaryBuffer.js";
-import { computeHashIntegerArray } from "../../../../core/math/MathUtils.js";
 
-export class FoliageLayer {
+export class InstancedMeshLayer {
     constructor() {
         /**
          *
@@ -22,12 +21,6 @@ export class FoliageLayer {
          */
         this.modelURL = new ObservedString("");
 
-        /**
-         * @deprecated
-         * @type {ObservedString}
-         */
-        this.dataURL = new ObservedString("");
-
         /**
          *
          * @type {ObservedBoolean}
@@ -123,38 +116,3 @@ export class FoliageLayer {
         this.data.deserialize(buffer);
     }
 }
-
-
-export class Foliage2 {
-    constructor() {
-        /**
-         *
-         * @type {List<FoliageLayer>}
-         * @readonly
-         */
-        this.layers = new List();
-    }
-
-    toJSON() {
-        return this.layers.toJSON();
-    }
-
-    fromJSON(data) {
-        this.layers.fromJSON(data, FoliageLayer);
-    }
-
-    dispose() {
-
-        const layers = this.layers;
-        const n = layers.length;
-
-        for (let i = 0; i < n; i++) {
-            const layer = layers.get(i);
-
-            layer.dispose();
-        }
-    }
-}
-
-Foliage2.typeName = "Foliage2";
-

package/engine/ecs/foliage/ecs/InstancedMeshSerializationAdapter.js

@@ -1,18 +1,19 @@
 import { BinaryClassSerializationAdapter } from "../../storage/binary/BinaryClassSerializationAdapter.js";
-import { Foliage2, FoliageLayer } from "./Foliage2.js";
+import { InstancedMeshComponent } from "./InstancedMeshComponent.js";
+import { InstancedMeshLayer } from "./InstancedMeshLayer.js";
 
 export class InstancedMeshSerializationAdapter extends BinaryClassSerializationAdapter {
     constructor() {
         super();
 
-        this.klass = Foliage2;
+        this.klass = InstancedMeshComponent;
         this.version = 0;
     }
 
     /**
      *
      * @param {BinaryBuffer} buffer
-     * @param {Foliage2} value
+     * @param {InstancedMeshComponent} value
      */
     serialize(buffer, value) {
         value.layers.toBinaryBuffer(buffer);
@@ -21,10 +22,10 @@ export class InstancedMeshSerializationAdapter extends BinaryClassSerializationA
     /**
      *
      * @param {BinaryBuffer} buffer
-     * @param {Foliage2} value
+     * @param {InstancedMeshComponent} value
      */
     deserialize(buffer, value) {
 
-        value.layers.fromBinaryBuffer(buffer, FoliageLayer);
+        value.layers.fromBinaryBuffer(buffer, InstancedMeshLayer);
     }
 }

package/engine/ecs/foliage/ecs/InstancedMeshUtils.js

@@ -2,13 +2,14 @@ import EntityBuilder from "../../EntityBuilder.js";
 import { loadFoliageLayer } from "./Foliage2System.js";
 import Mesh, { MeshFlags } from "../../../graphics/ecs/mesh/Mesh.js";
 import { Transform } from "../../transform/Transform.js";
-import { Foliage2, FoliageLayer } from "./Foliage2.js";
+import { InstancedMeshComponent } from "./InstancedMeshComponent.js";
 import { InstancedFoliage } from "../InstancedFoliage.js";
 import { buildTreeOptimizationTask } from "../../../../core/bvh2/BVHTasks.js";
 import Task from "../../../../core/process/task/Task.js";
 import TaskSignal from "../../../../core/process/task/TaskSignal.js";
 import { countTask, promiseTask } from "../../../../core/process/task/TaskUtils.js";
 import { assert } from "../../../../core/assert.js";
+import { InstancedMeshLayer } from "./InstancedMeshLayer.js";
 
 /**
  * Convert all existing instanced mesh components to individual Transform+Mesh pairs
@@ -23,7 +24,7 @@ export function convertInstancedMeshComponents2Entities(dataset, assetManager) {
 
     /**
      *
-     * @param {Foliage2} foliage2
+     * @param {InstancedMeshComponent} foliage2
      * @param entity
      */
     function visitFoliageEntities(foliage2, entity) {
@@ -59,11 +60,11 @@ export function convertInstancedMeshComponents2Entities(dataset, assetManager) {
         entitiesToStrip.push(entity);
     }
 
-    dataset.traverseEntities([Foliage2], visitFoliageEntities);
+    dataset.traverseEntities([InstancedMeshComponent], visitFoliageEntities);
 
     //remove converted foliage components
     entitiesToStrip.forEach(function (entity) {
-        dataset.removeComponentFromEntity(entity, Foliage2);
+        dataset.removeComponentFromEntity(entity, InstancedMeshComponent);
     });
 }
 
@@ -125,7 +126,7 @@ export function optimizeIndividualMeshesEntitiesToInstances(dataset, threshold =
 
     const tasks = [];
 
-    const foliage2 = new Foliage2();
+    const foliage2 = new InstancedMeshComponent();
 
     const tBuild = new Task({
         name: "Build Meshes",
@@ -213,7 +214,7 @@ export function optimizeIndividualMeshesEntitiesToInstances(dataset, threshold =
             cycleFunction: function () {
 
                 //create foliage layer
-                const layer = new FoliageLayer();
+                const layer = new InstancedMeshLayer();
 
                 layer.data = instancedFoliage;
                 layer.modelURL.set(modelURL);

package/engine/ecs/fow/FogOfWar.js

@@ -75,6 +75,10 @@ export class FogOfWar {
          */
         this.texture = null;
 
+        /**
+         * Resolution scale of FoW versus terrain resolution, higher number makes FoW more detailed
+         * @type {Vector1}
+         */
         this.scale = new Vector1(1);
 
         /**

package/engine/ecs/fow/FogOfWarSystem.js

@@ -12,6 +12,7 @@ import { BlendingType } from "../../graphics/texture/sampler/BlendingType.js";
 import { FogOfWarRenderer } from "./shader/FogOfWarRenderer.js";
 import { StandardFrameBuffers } from "../../graphics/StandardFrameBuffers.js";
 import { CompositLayer } from "../../graphics/composit/CompositLayer.js";
+import { CompositingStages } from "../../graphics/composit/CompositingStages.js";
 
 
 const frustum = new Frustum();
@@ -133,6 +134,7 @@ export class FogOfWarSystem extends System {
 
         const compositerLayer = graphics.layerComposer.createLayer({}, BlendingType.Normal);
         compositerLayer.name = 'Fog of War';
+        compositerLayer.stage = CompositingStages.POST_TRANSPARENT;
 
         // Fog of war should be drawn last typically, over everything else, so we set order to a large number
         compositerLayer.order = 1000;

package/engine/ecs/fow/shader/FogOfWarRenderer.js

@@ -1,8 +1,8 @@
 import { buildScreenSpaceFogOfWarShader } from "./screenSpaceFogOfWarShader.js";
 import { assert } from "../../../../core/assert.js";
 import { Mesh, OrthographicCamera, Scene } from "three";
-import { isValueBetweenInclusive } from "../../../../core/math/MathUtils.js";
 import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../../../graphics/geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js";
+import { isValueBetweenInclusive } from "../../../../core/math/isValueBetweenInclusive.js";
 
 /**
  *

package/engine/ecs/gui/GUIElement.js

@@ -6,9 +6,9 @@ import ObservedBoolean from "../../../core/model/ObservedBoolean.js";
 import { BinaryClassSerializationAdapter } from "../storage/binary/BinaryClassSerializationAdapter.js";
 import { COMPONENT_SERIALIZATION_TRANSIENT_FIELD } from "../storage/COMPONENT_SERIALIZATION_TRANSIENT_FIELD.js";
 import { assert } from "../../../core/assert.js";
-import { computeHashIntegerArray } from "../../../core/math/MathUtils.js";
 import { objectDeepEquals } from "../../../core/model/object/objectDeepEquals.js";
 import { computeStringHash } from "../../../core/primitives/strings/computeStringHash.js";
+import { computeHashIntegerArray } from "../../../core/collection/array/computeHashIntegerArray.js";
 
 /**
  *

package/engine/ecs/gui/hud/HeadsUpDisplay.js

@@ -7,7 +7,7 @@
 
 import Vector3 from '../../../../core/geom/Vector3.js';
 import { HeadsUpDisplayFlag } from "./HeadsUpDisplayFlag.js";
-import { computeHashIntegerArray } from "../../../../core/math/MathUtils.js";
+import { computeHashIntegerArray } from "../../../../core/collection/array/computeHashIntegerArray.js";
 
 class HeadsUpDisplay {
     /**

package/engine/ecs/gui/hud/HeadsUpDisplaySystem.js

@@ -144,7 +144,9 @@ class HeadsUpDisplaySystem extends System {
                 up.set(worldPositionX, worldPositionY + 1, worldPositionZ, 1);
                 up.threeApplyMatrix4(projectionMatrix);
 
+                // compute perspective divide
                 const d = 1 / Math.abs(up.w);
+
                 up.x *= d;
                 up.y *= d;
                 up.z *= d;

package/engine/ecs/gui/position/ViewportPosition.js

@@ -5,7 +5,8 @@
 import Vector2 from "../../../../core/geom/Vector2.js";
 import ObservedBoolean from "../../../../core/model/ObservedBoolean.js";
 import { BinaryClassSerializationAdapter } from "../../storage/binary/BinaryClassSerializationAdapter.js";
-import { computeHashFloat, computeHashIntegerArray } from "../../../../core/math/MathUtils.js";
+import { computeHashIntegerArray } from "../../../../core/collection/array/computeHashIntegerArray.js";
+import { computeHashFloat } from "../../../../core/math/hash/computeHashFloat.js";
 
 /**
  * @readonly

package/engine/ecs/storage/binary/BinarySerializationRegistry.js

@@ -37,7 +37,7 @@ export class BinarySerializationRegistry {
      * @returns {boolean}
      */
     registerAdapter(adapter, className) {
-        assert.notEqual(adapter, undefined, 'adapter is undefined');
+        assert.defined(adapter, 'adapter');
         assert.ok(adapter.isBinaryClassSerializationAdapter, 'adapter is not a BinaryClassSerializationAdapter');
 
         if (className === undefined) {

package/engine/ecs/system/AbstractContextSystem.js

@@ -38,7 +38,7 @@ export class AbstractContextSystem extends System {
                 // TODO
             },
             (ctx) => {
-                ctx.unlink();
+                //ctx.unlink();
             }
         );
 

package/engine/ecs/systems/RangedAttackSystem.js

@@ -8,7 +8,7 @@ import PhysicalBody from '../components/PhysicalBody.js';
 import Motion from '../components/Motion.js';
 import Renderable from '../components/Renderable.js';
 import { Matrix4 as ThreeMatrix4, Vector3 as ThreeVector3 } from 'three';
-import { solveQuadratic } from "../../../core/math/MathUtils.js";
+import { solveQuadratic } from "../../../core/math/solveQuadratic.js";
 
 /**
  * Return the firing solution for a projectile starting at 'src' with

package/engine/ecs/systems/SteeringSystem.js

@@ -10,10 +10,10 @@ import PhysicalBody from '../components/PhysicalBody.js';
 import Motion from '../components/Motion.js';
 import { Transform } from '../transform/Transform.js';
 import Steering, { SteeringEvents, SteeringFlags } from '../components/Steering.js';
-import { solveQuadratic } from "../../../core/math/MathUtils.js";
 import Vector3 from "../../../core/geom/Vector3.js";
 import { alignToVector } from "../terrain/ecs/ClingToTerrainSystem.js";
 import { v3_dot } from "../../../core/geom/v3_dot.js";
+import { solveQuadratic } from "../../../core/math/solveQuadratic.js";
 
 /**
  *

package/engine/ecs/systems/TagSystem.js

@@ -13,6 +13,23 @@ class TagSystem extends System {
 
         this.entityManager = null;
     }
+
+    /**
+     *
+     * @param {string} tag
+     * @param {EntityComponentDataset} ecd
+     * @returns  {number[]}
+     */
+    static find_entities_with_tag(tag, ecd) {
+        const r = [];
+        ecd.traverseComponents(Tag, (t, e) => {
+            if (t.contains(tag)) {
+                r.push(e);
+            }
+        });
+
+        return r;
+    }
 }
 
 

package/engine/ecs/terrain/ecs/layers/TerrainLayer.js

@@ -5,6 +5,7 @@ import { Cache } from "../../../../../core/cache/Cache.js";
 import { computeUTF8StringByteSize } from "../../../../../core/primitives/strings/StringUtils.js";
 import Signal from "../../../../../core/events/signal/Signal.js";
 import { computeStringHash } from "../../../../../core/primitives/strings/computeStringHash.js";
+import { copy_Sampler2D_channel_data } from "../../../../graphics/texture/sampler/copy_Sampler2D_channel_data.js";
 
 /**
  *
@@ -107,33 +108,28 @@ export class TerrainLayer {
             .then(assert => {
                 const image = assert.create();
 
-                const s = image.width * image.height;
+                const source_item_size = image.itemSize;
 
-                const data = image.data;
+                const source_data = image.data;
+
+                // RGB
+                const destination_item_size = 3;
 
                 if (this.diffuse === null || this.diffuse.width !== image.width || this.diffuse.height !== image.height) {
                     // loaded image does not match the side of the layer
-                    this.diffuse = Sampler2D.uint8(3, image.width, image.height);
+                    this.diffuse = Sampler2D.uint8(destination_item_size, image.width, image.height);
                 }
 
-                const layerData = this.diffuse.data;
-
-                // copy RGBA image data into the layer's RGB data
+                const source = new Sampler2D(source_data,source_item_size,image.width, image.height);
 
-                for (let i = 0; i < s; i++) {
-                    const a4 = i * 4;
-                    const a3 = i * 3;
-
-                    layerData[a3] = data[a4];
-                    layerData[a3 + 1] = data[a4 + 1];
-                    layerData[a3 + 2] = data[a4 + 2];
-                }
+                copy_Sampler2D_channel_data(source,this.diffuse);
 
                 this.onChanged.send0();
 
-                const cacheCopy = Sampler2D.uint8(3, image.width, image.height);
+                // write to cache
+                const cacheCopy = Sampler2D.uint8(destination_item_size, image.width, image.height);
 
-                cacheCopy.data.set(layerData);
+                cacheCopy.data.set(this.diffuse.data);
 
                 cache.put(path, cacheCopy);
 

package/engine/ecs/terrain/tiles/TerrainTileManager.js

@@ -14,7 +14,6 @@ import CheckersTexture from '../../../graphics/texture/CheckersTexture.js';
 import { MeshPhongMaterial } from 'three';
 import { assert } from "../../../../core/assert.js";
 import { Color } from "../../../../core/color/Color.js";
-import { randomFloatBetween } from "../../../../core/math/MathUtils.js";
 import { noop } from "../../../../core/function/Functions.js";
 import Vector3 from "../../../../core/geom/Vector3.js";
 import { SurfacePoint3 } from "../../../../core/geom/3d/SurfacePoint3.js";
@@ -24,6 +23,7 @@ import { traverseBinaryNodeUsingVisitor } from "../../../../core/bvh2/traversal/
 import { aabb2_overlapExists } from "../../../../core/geom/AABB2.js";
 import ObservedInteger from "../../../../core/model/ObservedInteger.js";
 import { NumericInterval } from "../../../../core/math/interval/NumericInterval.js";
+import { randomFloatBetween } from "../../../../core/math/random/randomFloatBetween.js";
 
 class TerrainTileManager {
     /**

package/engine/ecs/tooltip/TooltipComponent.js

@@ -1,3 +1,5 @@
+import { computeStringHash } from "../../../core/primitives/strings/computeStringHash.js";
+
 export class TooltipComponent {
     constructor() {
         /**
@@ -7,6 +9,19 @@ export class TooltipComponent {
         this.key = '';
     }
 
+    hash() {
+        return computeStringHash(this.key);
+    }
+
+    /**
+     *
+     * @param {TooltipComponent} other
+     * @return {boolean}
+     */
+    equals(other) {
+        return this.key === other.key;
+    }
+
     toJSON() {
         return {
             key: this.key

package/engine/ecs/transform/Transform.js

@@ -5,14 +5,13 @@
 import Vector3 from "../../../core/geom/Vector3.js";
 import Quaternion from "../../../core/geom/Quaternion.js";
 import { Matrix4 } from "../../../core/geom/Matrix4.js";
-import { Quaternion as ThreeQuaternion } from "three";
-import { composeMatrix4 } from "../../graphics/util/composeMatrix4.js";
+import { compose_matrix4_array } from "../../graphics/util/composeMatrix4.js";
+import { decompose_matrix_4_array } from "../../graphics/util/decompose_matrix_4_array.js";
 
 const delta = new Vector3();
 
 const m4_0 = new Matrix4();
 const m4_1 = new Matrix4();
-const threeQuaternion = new ThreeQuaternion();
 
 export class Transform {
     /**
@@ -166,9 +165,15 @@ export class Transform {
      * @param {Matrix4} matrix
      */
     fromThreeMatrix4(matrix) {
-        matrix.decompose(this.position, threeQuaternion, this.scale);
+        this.fromMatrix4(matrix.elements);
+    }
 
-        this.rotation.copy(threeQuaternion);
+    /**
+     *
+     * @param {mat4|number[]|Float32Array} m
+     */
+    fromMatrix4(m) {
+        decompose_matrix_4_array(m, this.position, this.rotation, this.scale);
     }
 
     /**
@@ -176,7 +181,15 @@ export class Transform {
      * @param {Matrix4} matrix
      */
     toThreeMatrix(matrix) {
-        composeMatrix4(matrix, this.position, this.rotation, this.scale);
+        this.toMatrix4(matrix.elements);
+    }
+
+    /**
+     *
+     * @param {number[]|Float32Array} result
+     */
+    toMatrix4(result) {
+        compose_matrix4_array(result, this.position, this.rotation, this.scale);
     }
 }
 

package/engine/graphics/GraphicsEngine.js

@@ -40,6 +40,7 @@ import { ShadowMapRenderer } from "./shadows/ShadowMapRenderer.js";
 import { CameraViewManager } from "./render/view/CameraViewManager.js";
 import { StandardFrameBuffers } from "./StandardFrameBuffers.js";
 import { load_environment_map } from "./texture/cubemap/load_environment_map.js";
+import { CompositingStages } from "./composit/CompositingStages.js";
 
 /**
  *
@@ -96,7 +97,13 @@ function GraphicsEngine(camera, entityManger) {
         preRender: new Signal(),
         postRender: new Signal(),
 
+        /**
+         * @deprecated
+         */
         preComposite: new Signal(),
+        /**
+         * @deprecated
+         */
         postComposite: new Signal(),
 
         buffersRendered: new Signal(),
@@ -370,7 +377,7 @@ GraphicsEngine.prototype.start = function () {
     const domElement = this.domElement = webGLRenderer.domElement;
     //disable selection
     const style = domElement.style;
-    domElement.classList.add("renderer-engine-render-canvas");
+    domElement.classList.add("graphics-engine-render-canvas");
     style.userSelect = style.webkitUserSelect = style.mozUserSelect = "none";
     // see : https://www.w3.org/TR/pointerevents/#the-touch-action-css-property
     style.touchAction = "none";
@@ -628,16 +635,14 @@ GraphicsEngine.prototype.render = function (renderTarget) {
     //do the opaque pass
     this.renderOpaque();
 
+    this.layerComposer.composite(renderer, CompositingStages.POST_OPAQUE);
+
     this.on.buffersRendered.send3(renderer, camera, scene);
 
     // transparent pass
     this.renderTransparent();
 
-    this.on.preComposite.send3(renderer, camera, scene);
-
-    this.layerComposer.composite(renderer);
-
-    this.on.postComposite.send3(renderer, camera, scene);
+    this.layerComposer.composite(renderer, CompositingStages.POST_TRANSPARENT);
 
 
     //dispatch post-render event

package/engine/graphics/composit/CompositLayer.js

@@ -5,6 +5,7 @@ import { blendingType2three } from "../texture/sampler/blendingType2Three.js";
 import { ScreenSpaceQuadShader } from "../shaders/ScreenSpaceQuadShader.js";
 import { BlendingType } from "../texture/sampler/BlendingType.js";
 import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js";
+import Signal from "../../../core/events/signal/Signal.js";
 
 /**
  *
@@ -29,11 +30,15 @@ function assignMaterialBlending(material, blending) {
 export class CompositLayer {
     /**
      *
-     * @param {WebGLRenderTarget} renderTarget
+     * @param {THREE.WebGLRenderTarget} renderTarget
      * @param {BlendingType} blending
      * @param {number} renderTargetScale
      */
-    constructor({ renderTarget, blending, renderTargetScale = 1 }) {
+    constructor({
+                    renderTarget,
+                    blending,
+                    renderTargetScale = 1
+                }) {
         /**
          * Human-readable name, useful for debugging
          * @type {string}
@@ -57,9 +62,13 @@ export class CompositLayer {
          */
         this.renderTargetScale = renderTargetScale;
 
-        const material = this.buildMaterial();
+        this.object = new Mesh(FULL_SCREEN_TRIANGLE_GEOMETRY, this.buildMaterial());
 
-        this.object = new Mesh(FULL_SCREEN_TRIANGLE_GEOMETRY, material);
+        /**
+         * Which compositing stage this layer belongs to, stages are rendered independently
+         * @type {number}
+         */
+        this.stage = 0;
 
         this.size = new Vector2();
 
@@ -74,6 +83,10 @@ export class CompositLayer {
          * @type {number}
          */
         this.__order = 0;
+
+        this.on = {
+            preRender: new Signal()
+        };
     }
 
     /**