@needle-tools/engine 2.67.4-pre → 2.67.5-pre

package/src/engine-components/postprocessing/Volume.ts

@@ -1,201 +1,213 @@
-import { Behaviour, GameObject } from "../Component";
-import { serializeable } from "../../engine/engine_serialization_decorator";
-import { getParam } from "../../engine/engine_utils";
-import { VolumeProfile } from "./VolumeProfile";
-import { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync";
-import { PostProcessingHandler } from "./PostProcessingHandler";
-import { PostProcessingEffect } from "./PostProcessingEffect";
-import { VolumeParameter } from "./VolumeParameter";
-import { getEditorModificationCache } from "../../engine/engine_editor-sync";
-import { isDevEnvironment } from "../../engine/debug";
-
-const debug = getParam("debugpost");
-
-export class Volume extends Behaviour implements IEditorModificationReceiver {
-
-    @serializeable(VolumeProfile)
-    sharedProfile?: VolumeProfile;
-
-    private _postprocessing?: PostProcessingHandler;
-    private _effects: PostProcessingEffect[] = [];
-
-    awake() {
-        // ensure the profile is initialized
-        this.sharedProfile?.init();
-
-        if (debug) {
-            console.log(this);
-            console.log("Press P to toggle post processing");
-            window.addEventListener("keydown", (e) => {
-                if (e.key === "p") {
-                    console.log("Toggle volume: " + this.name, !this.enabled);
-                    this.enabled = !this.enabled;
-                }
-            });
-        }
-    }
-
-    onDisable() {
-        this._postprocessing?.unapply();
-    }
-
-    onBeforeRender(): void {
-        // Wait for the first frame to be rendered before creating because then we know we have a camera (issue 135)
-        if (this.context.mainCamera) {
-            if (!this._postprocessing || !this._postprocessing.isActive)
-                this.apply();
-        }
-
-        if (!this.context.isInXR && this.context.composer && this.context.mainCamera) {
-            this.context.composer.setRenderer(this.context.renderer);
-            this.context.composer.setMainScene(this.context.scene);
-            this.context.composer.setMainCamera(this.context.mainCamera);
-        }
-    }
-
-    onDestroy(): void {
-        this._postprocessing?.dispose();
-    }
-
-    private _lastApplyTime?: number;
-    private _rapidApplyCount = 0;
-
-    private apply() {
-        if (debug) console.log("Apply PostProcessing", this, this.context.mainCamera?.name);
-
-        if (isDevEnvironment()) {
-            if (this._lastApplyTime !== undefined && Date.now() - this._lastApplyTime < 100) {
-                this._rapidApplyCount++;
-                if (this._rapidApplyCount === 5)
-                    console.warn("Detected rapid post processing modifications - this might be a bug", this);
-            }
-            this._lastApplyTime = Date.now();
-        }
-
-
-        this.unapply();
-
-        this._effects.length = 0;
-        // get from profile
-        if (this.sharedProfile?.components) {
-            this._effects.push(...this.sharedProfile.components);
-        }
-        // get additional effects
-        const additionalComponents = this.gameObject.getComponentsInChildren(PostProcessingEffect);
-        if (debug && additionalComponents?.length)
-            console.log("Additional", additionalComponents);
-        if (additionalComponents) {
-            for (const comp of additionalComponents) {
-                if (comp.active) this._effects.push(comp);
-            }
-        }
-
-        if (this._effects.length > 0) {
-            if (!this._postprocessing)
-                this._postprocessing = new PostProcessingHandler(this.context);
-            this._postprocessing.apply(this._effects);
-        }
-
-        this._applyPostQueue();
-    }
-
-    private unapply() {
-        this._postprocessing?.unapply();
-    }
-
-    
-    private _applyPostQueue() {
-        if (this._modificationQueue) {
-            for (const entry of this._modificationQueue.values()) this.onEditorModification(entry);
-            this._modificationQueue.clear();
-        }
-    }
-
-    /** called from needle editor sync package if its active */
-    onEditorModification(modification: EditorModification): void | boolean | undefined {
-
-        if (modification.propertyName.startsWith("postprocessing.")) {
-
-            if (!this._postprocessing) {
-                if (!this._modificationQueue) this._modificationQueue = new Map<string, EditorModification>();
-                this._modificationQueue.set(modification.propertyName, modification);
-                return true;
-            }
-
-            if (!this._effects?.length) return;
-            const path = modification.propertyName.split(".");
-            if (path.length === 3 || path.length === 4) {
-                const componentName = path[1];
-                const propertyName = path[2];
-                for (const comp of this._effects) {
-                    if (comp.typeName?.toLowerCase() === componentName.toLowerCase()) {
-
-                        if (propertyName === "active") {
-                            comp.active = modification.value;
-                            this.scheduleRecreate();
-                            return;
-                        }
-
-                        // cache the volume parameters
-                        if (!effectVolumeProperties.has(componentName)) {
-                            const volumeParameterKeys = new Array<string>();
-                            effectVolumeProperties.set(componentName, volumeParameterKeys);
-                            const keys = Object.keys(comp);
-                            for (const key of keys) {
-                                const prop = comp[key];
-                                if (prop instanceof VolumeParameter) {
-                                    volumeParameterKeys.push(key);
-                                }
-                            }
-                        }
-
-                        if (effectVolumeProperties.has(componentName)) {
-                            const paramName = propertyName.toLowerCase();
-                            const volumeParameterKeys = effectVolumeProperties.get(componentName)!;
-                            for (const key of volumeParameterKeys) {
-                                if (key.toLowerCase() === paramName) {
-                                    const prop = comp[key] as VolumeParameter;
-                                    if (prop instanceof VolumeParameter) {
-                                        const isActiveStateChange = path.length === 4 && path[3] === "active";
-                                        if (isActiveStateChange) {
-                                            prop.overrideState = modification.value;
-                                            this.scheduleRecreate();
-                                        }
-                                        else if (prop && prop.value !== undefined) {
-                                            prop.value = modification.value;
-                                        }
-                                    }
-                                    return;
-                                }
-                            }
-                        }
-
-                        console.warn("Unknown modification", propertyName);
-                        return;
-                    }
-                }
-            }
-            return true;
-        }
-
-        return false;
-    }
-
-    private _modificationQueue?: Map<string, EditorModification>;
-
-    private _recreateId: number = -1;
-    private scheduleRecreate() {
-        // When the editor modifications come in with changed active effects we want/need to re-create the effects
-        // We defer it slightly because multiple active changes could be made and we dont want to recreate the full effect stack multiple times
-        const id = ++this._recreateId;
-        setTimeout(() => {
-            if (id !== this._recreateId) return;
-            this.onDisable();
-            this.onEnable();
-        }, 200);
-    }
-
-}
-
-/** cached VolumeParameter keys per object */
-const effectVolumeProperties: Map<string, string[]> = new Map<string, string[]>();
+import { Behaviour, GameObject } from "../Component";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { getParam } from "../../engine/engine_utils";
+import { VolumeProfile } from "./VolumeProfile";
+import { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync";
+import { PostProcessingHandler } from "./PostProcessingHandler";
+import { PostProcessingEffect } from "./PostProcessingEffect";
+import { VolumeParameter } from "./VolumeParameter";
+import { getEditorModificationCache } from "../../engine/engine_editor-sync";
+import { isDevEnvironment } from "../../engine/debug";
+import { EffectComposer } from "postprocessing";
+
+const debug = getParam("debugpost");
+
+export class Volume extends Behaviour implements IEditorModificationReceiver {
+
+    @serializeable(VolumeProfile)
+    sharedProfile?: VolumeProfile;
+
+    private _postprocessing?: PostProcessingHandler;
+    private _effects: PostProcessingEffect[] = [];
+
+    awake() {
+        // ensure the profile is initialized
+        this.sharedProfile?.init();
+
+        if (debug) {
+            console.log(this);
+            console.log("Press P to toggle post processing");
+            window.addEventListener("keydown", (e) => {
+                if (e.key === "p") {
+                    console.log("Toggle volume: " + this.name, !this.enabled);
+                    this.enabled = !this.enabled;
+                }
+            });
+        }
+    }
+
+    onDisable() {
+        this._postprocessing?.unapply();
+    }
+
+    onBeforeRender(): void {
+        if (!this.context.isInXR) {
+        
+	        if (this.context.composer && (this.context.composer instanceof EffectComposer) === false) {
+	            return;
+	        }
+        
+            // Wait for the first frame to be rendered before creating because then we know we have a camera (issue 135)
+            if (this.context.mainCamera) {
+                if (!this._postprocessing || !this._postprocessing.isActive)
+                    this.apply();
+            }
+
+            if (this.context.composer) {
+                this.context.composer.setRenderer(this.context.renderer);
+                this.context.composer.setMainScene(this.context.scene);
+                if (this.context.mainCamera)
+                    this.context.composer.setMainCamera(this.context.mainCamera);
+            }
+            if (this.context.renderer) {
+                this.context.renderer.autoClear = false;
+            }
+        }
+    }
+
+    onDestroy(): void {
+        this._postprocessing?.dispose();
+    }
+
+    private _lastApplyTime?: number;
+    private _rapidApplyCount = 0;
+
+    private apply() {
+        if (debug) console.log("Apply PostProcessing", this, this.context.mainCamera?.name);
+
+        if (isDevEnvironment()) {
+            if (this._lastApplyTime !== undefined && Date.now() - this._lastApplyTime < 100) {
+                this._rapidApplyCount++;
+                if (this._rapidApplyCount === 5)
+                    console.warn("Detected rapid post processing modifications - this might be a bug", this);
+            }
+            this._lastApplyTime = Date.now();
+        }
+
+
+        this.unapply();
+
+        this._effects.length = 0;
+        // get from profile
+        if (this.sharedProfile?.components) {
+            this._effects.push(...this.sharedProfile.components);
+        }
+        // get additional effects
+        const additionalComponents = this.gameObject.getComponentsInChildren(PostProcessingEffect);
+        if (debug && additionalComponents?.length)
+            console.log("Additional", additionalComponents);
+        if (additionalComponents) {
+            for (const comp of additionalComponents) {
+                if (comp.active) this._effects.push(comp);
+            }
+        }
+
+        if (this._effects.length > 0) {
+            if (!this._postprocessing)
+                this._postprocessing = new PostProcessingHandler(this.context);
+            this._postprocessing.apply(this._effects);
+        }
+
+        this._applyPostQueue();
+    }
+
+    private unapply() {
+        this._postprocessing?.unapply();
+    }
+
+
+    private _applyPostQueue() {
+        if (this._modificationQueue) {
+            for (const entry of this._modificationQueue.values()) this.onEditorModification(entry);
+            this._modificationQueue.clear();
+        }
+    }
+
+    /** called from needle editor sync package if its active */
+    onEditorModification(modification: EditorModification): void | boolean | undefined {
+
+        if (modification.propertyName.startsWith("postprocessing.")) {
+
+            if (!this._postprocessing) {
+                if (!this._modificationQueue) this._modificationQueue = new Map<string, EditorModification>();
+                this._modificationQueue.set(modification.propertyName, modification);
+                return true;
+            }
+
+            if (!this._effects?.length) return;
+            const path = modification.propertyName.split(".");
+            if (path.length === 3 || path.length === 4) {
+                const componentName = path[1];
+                const propertyName = path[2];
+                for (const comp of this._effects) {
+                    if (comp.typeName?.toLowerCase() === componentName.toLowerCase()) {
+
+                        if (propertyName === "active") {
+                            comp.active = modification.value;
+                            this.scheduleRecreate();
+                            return;
+                        }
+
+                        // cache the volume parameters
+                        if (!effectVolumeProperties.has(componentName)) {
+                            const volumeParameterKeys = new Array<string>();
+                            effectVolumeProperties.set(componentName, volumeParameterKeys);
+                            const keys = Object.keys(comp);
+                            for (const key of keys) {
+                                const prop = comp[key];
+                                if (prop instanceof VolumeParameter) {
+                                    volumeParameterKeys.push(key);
+                                }
+                            }
+                        }
+
+                        if (effectVolumeProperties.has(componentName)) {
+                            const paramName = propertyName.toLowerCase();
+                            const volumeParameterKeys = effectVolumeProperties.get(componentName)!;
+                            for (const key of volumeParameterKeys) {
+                                if (key.toLowerCase() === paramName) {
+                                    const prop = comp[key] as VolumeParameter;
+                                    if (prop instanceof VolumeParameter) {
+                                        const isActiveStateChange = path.length === 4 && path[3] === "active";
+                                        if (isActiveStateChange) {
+                                            prop.overrideState = modification.value;
+                                            this.scheduleRecreate();
+                                        }
+                                        else if (prop && prop.value !== undefined) {
+                                            prop.value = modification.value;
+                                        }
+                                    }
+                                    return;
+                                }
+                            }
+                        }
+
+                        console.warn("Unknown modification", propertyName);
+                        return;
+                    }
+                }
+            }
+            return true;
+        }
+
+        return false;
+    }
+
+    private _modificationQueue?: Map<string, EditorModification>;
+
+    private _recreateId: number = -1;
+    private scheduleRecreate() {
+        // When the editor modifications come in with changed active effects we want/need to re-create the effects
+        // We defer it slightly because multiple active changes could be made and we dont want to recreate the full effect stack multiple times
+        const id = ++this._recreateId;
+        setTimeout(() => {
+            if (id !== this._recreateId) return;
+            this.onDisable();
+            this.onEnable();
+        }, 200);
+    }
+
+}
+
+/** cached VolumeParameter keys per object */
+const effectVolumeProperties: Map<string, string[]> = new Map<string, string[]>();