Needle Engine 3.43.0-beta

Files changed (20) hide show

src/engine/webcomponents/api.ts +2 -1
src/engine-components/codegen/components.ts +2 -1
src/engine/engine_context.ts +3 -4
src/engine/engine_tonemapping.ts +1 -0
src/engine/engine_utils_format.ts +1 -1
src/engine-components/postprocessing/index.ts +2 -1
src/engine/webcomponents/needle-button.ts +1 -1
src/engine/webcomponents/needle menu/needle-menu-spatial.ts +10 -4
src/engine-components/postprocessing/PostProcessingEffect.ts +14 -1
src/engine-components/postprocessing/PostProcessingHandler.ts +4 -0
src/engine/codegen/register_types.ts +4 -2
src/engine-components/postprocessing/Effects/Tonemapping.ts +4 -4
src/engine-components/export/usdz/USDZExporter.ts +1 -1
src/engine-components/postprocessing/Volume.ts +91 -23
src/engine-components/postprocessing/VolumeProfile.ts +13 -1
src/engine-components/webxr/WebXR.ts +1 -1
src/engine/webcomponents/WebXRButtons.ts +4 -4
src/engine-components/postprocessing/Effects/EffectWrapper.ts +22 -0
src/engine-components/postprocessing/Effects/Sharpening.ts +102 -0
src/engine-components/postprocessing/utils.ts +50 -0

src/engine/webcomponents/api.ts CHANGED Viewed

@@ -3,4 +3,5 @@
 export { ButtonsFactory } from "./buttons.js"
 export * from "./icons.js"
 export { type NeedleMenuPostMessageModel } from "./needle menu/needle-menu.js"
-export { NeedleButtonElement } from "./needle-button.js"
+export { NeedleButtonElement } from "./needle-button.js"
+export { WebXRButtonFactory } from "./WebXRButtons.js"

src/engine-components/codegen/components.ts CHANGED Viewed

@@ -62,6 +62,7 @@
 export { DragControls } from "../DragControls.js";
 export { DropListener } from "../DropListener.js";
 export { Duplicatable } from "../Duplicatable.js";
+export { EffectWrapper } from "../postprocessing/Effects/EffectWrapper.js";
 export { EmissionModule } from "../ParticleSystemModules.js";
 export { EmphasizeOnClick } from "../export/usdz/extensions/behavior/BehaviourComponents.js";
 export { EventList } from "../EventList.js";
@@ -147,6 +148,7 @@
 export { SetActiveOnClick } from "../export/usdz/extensions/behavior/BehaviourComponents.js";
 export { ShadowCatcher } from "../ShadowCatcher.js";
 export { ShapeModule } from "../ParticleSystemModules.js";
+export { SharpeningEffect } from "../postprocessing/Effects/Sharpening.js";
 export { SignalAsset } from "../timeline/SignalAsset.js";
 export { SignalReceiver } from "../timeline/SignalAsset.js";
 export { SignalReceiverEvent } from "../timeline/SignalAsset.js";
@@ -204,7 +206,6 @@
 export { WebARCameraBackground } from "../webxr/WebARCameraBackground.js";
 export { WebARSessionRoot } from "../webxr/WebARSessionRoot.js";
 export { WebXR } from "../webxr/WebXR.js";
-export { WebXRButtonFactory } from "../../engine/webcomponents/WebXRButtons.js";
 export { WebXRImageTracking } from "../webxr/WebXRImageTracking.js";
 export { WebXRImageTrackingModel } from "../webxr/WebXRImageTracking.js";
 export { WebXRPlaneTracking } from "../webxr/WebXRPlaneTracking.js";

src/engine/engine_context.ts CHANGED Viewed

@@ -1,11 +1,10 @@
 import { EffectComposer, RenderPass } from "postprocessing";
 import {
+	AgXToneMapping,
 	BufferGeometry, Cache, Camera, Clock, Color, DepthTexture, Group,
 	Material, NearestFilter, NoToneMapping, Object3D, PCFSoftShadowMap,
 	PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace,
-	Texture, WebGLRenderer, type WebGLRendererParameters, WebGLRenderTarget, type WebXRArrayCamera,
-	AgXToneMapping
-} from 'three';
+	Texture, WebGLRenderer, type WebGLRendererParameters, WebGLRenderTarget, type WebXRArrayCamera} from 'three';
 import * as Stats from 'three/examples/jsm/libs/stats.module.js';
 import { isDevEnvironment, LogType, showBalloonError, showBalloonMessage, showBalloonWarning } from './debug/index.js';
@@ -29,12 +28,12 @@
 import { RendererData as SceneLighting } from './engine_scenelighting.js';
 import { logHierarchy } from './engine_three_utils.js';
 import { Time } from './engine_time.js';
+import { patchTonemapping } from './engine_tonemapping.js';
 import type { CoroutineData, GLTF, ICamera, IComponent, IContext, ILight, LoadedGLTF, Vec2 } from "./engine_types.js";
 import * as utils from "./engine_utils.js";
 import { delay, getParam } from './engine_utils.js';
 import type { INeedleXRSessionEventReceiver, NeedleXRSession } from './engine_xr.js';
 import { NeedleMenu } from './webcomponents/needle menu/needle-menu.js';
-import { patchTonemapping } from './engine_tonemapping.js';
 const debug = utils.getParam("debugcontext");

src/engine/engine_tonemapping.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ShaderChunk } from "three";
 import type { Context } from "./engine_setup";
 let patchedTonemapping = false;

src/engine/engine_utils_format.ts CHANGED Viewed

@@ -25,7 +25,7 @@
         // We want to save on requests so we first check the file extension if there's any
         // In some scenarios we might not have one (e.g. if we're dealing with blob: files or if the URL doesn't contain the filename)
         // In that case we need to check the header
-        let _url = url;
+        const _url = url;
         // if (!_url.startsWith("http") && !url.startsWith("blob:")) {
         //     // _url = "file:" + url;
         // }

src/engine-components/postprocessing/index.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export * from "./PostProcessingEffect.js";
 export * from "./PostProcessingHandler.js"
+export { PostProcessingManager } from "./Volume.js"
 export * from "./VolumeParameter.js"
-export * from "./VolumeProfile.js";
+export * from "./VolumeProfile.js";

src/engine/webcomponents/needle-button.ts CHANGED Viewed

@@ -1,5 +1,5 @@
+import { iconFontUrl, loadFont } from "./fonts.js";
 import { WebXRButtonFactory } from "./WebXRButtons.js";
-import { iconFontUrl, loadFont } from "./fonts.js";
 const htmlTagName = "needle-button";

src/engine/webcomponents/needle menu/needle-menu-spatial.ts CHANGED Viewed

@@ -127,10 +127,16 @@
             existing.add();
             return;
         }
-        const button = node as HTMLButtonElement;
-        const spatialButton = this.createButton(menu, button);
-        this.htmlButtonsMap.set(button, spatialButton);
-        spatialButton.add();
+        if (node instanceof HTMLButtonElement) {
+            const spatialButton = this.createButton(menu, node);
+            this.htmlButtonsMap.set(node, spatialButton);
+            spatialButton.add();
+        }
+        else if (node instanceof HTMLSlotElement) {
+            node.assignedNodes().forEach((node) => {
+                this.createButtonFromHTMLNode(node);
+            });
+        }
     }
     private readonly _menuTarget: Object3D = new Object3D();

src/engine-components/postprocessing/PostProcessingEffect.ts CHANGED Viewed

@@ -5,6 +5,7 @@
 import type { ISerializable, SerializationContext } from "../../engine/engine_serialization_core.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { Component } from "../Component.js";
+import { getPostProcessingManager,IPostProcessingManager } from "./utils.js";
 import { VolumeParameter } from "./VolumeParameter.js";
 const debug = getParam("debugpost");
@@ -44,29 +45,41 @@
  */
 export abstract class PostProcessingEffect extends Component implements IEffectProvider, ISerializable, IEditorModification {
+    get isPostProcessingEffect() { return true; }
     constructor(params: any = undefined) {
         super();
+        this.ensureVolumeParameters();
         if (params) {
-            this.ensureVolumeParameters();
             for (const key of Object.keys(params)) {
                 const value = params[key];
                 const param = this[key];
                 if (param instanceof VolumeParameter) {
                     param.value = value;
                 }
+                // allow assigning values to properties that are not VolumeParameters
+                // this is useful when effects are created in code
+                else if(param !== undefined){
+                    this[key] = value;
+                }
             }
         }
     }
     abstract get typeName(): string;
+    private _manager: IPostProcessingManager | null = null;
     onEnable(): void {
+        this._manager = getPostProcessingManager(this);
+        this._manager?.addEffect(this);
         // Dont override the serialized value by enabling (we could also just disable this component / map enabled to active)
         if (this.__internalDidAwakeAndStart)
             this.active = true;
     }
     onDisable(): void {
+        this._manager?.removeEffect(this);
         this.active = false;
     }

src/engine-components/postprocessing/PostProcessingHandler.ts CHANGED Viewed

@@ -7,7 +7,9 @@
 import type { Constructor } from "../../engine/engine_types.js";
 import { getParam, isMobileDevice } from "../../engine/engine_utils.js";
 import { Camera } from "../Camera.js";
+import { Antialiasing } from "./Effects/Antialiasing.js";
 import { ColorAdjustments } from "./Effects/ColorAdjustments.js";
+import { SharpeningEffect } from "./Effects/Sharpening.js";
 import { ToneMapping } from "./Effects/Tonemapping.js";
 import { PostProcessingEffect } from "./PostProcessingEffect.js";
@@ -270,4 +272,6 @@
     HueSaturationEffect,
     BrightnessContrastEffect,
     PixelationEffect,
+    SharpeningEffect,
+    Antialiasing
 ];

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -64,6 +64,7 @@
 import { DragControls } from "../../engine-components/DragControls.js";
 import { DropListener } from "../../engine-components/DropListener.js";
 import { Duplicatable } from "../../engine-components/Duplicatable.js";
+import { EffectWrapper } from "../../engine-components/postprocessing/Effects/EffectWrapper.js";
 import { EmissionModule } from "../../engine-components/ParticleSystemModules.js";
 import { EmphasizeOnClick } from "../../engine-components/export/usdz/extensions/behavior/BehaviourComponents.js";
 import { EventList } from "../../engine-components/EventList.js";
@@ -152,6 +153,7 @@
 import { SetActiveOnClick } from "../../engine-components/export/usdz/extensions/behavior/BehaviourComponents.js";
 import { ShadowCatcher } from "../../engine-components/ShadowCatcher.js";
 import { ShapeModule } from "../../engine-components/ParticleSystemModules.js";
+import { SharpeningEffect } from "../../engine-components/postprocessing/Effects/Sharpening.js";
 import { SignalAsset } from "../../engine-components/timeline/SignalAsset.js";
 import { SignalReceiver } from "../../engine-components/timeline/SignalAsset.js";
 import { SignalReceiverEvent } from "../../engine-components/timeline/SignalAsset.js";
@@ -209,7 +211,6 @@
 import { WebARCameraBackground } from "../../engine-components/webxr/WebARCameraBackground.js";
 import { WebARSessionRoot } from "../../engine-components/webxr/WebARSessionRoot.js";
 import { WebXR } from "../../engine-components/webxr/WebXR.js";
-import { WebXRButtonFactory } from "../webcomponents/WebXRButtons.js";
 import { WebXRImageTracking } from "../../engine-components/webxr/WebXRImageTracking.js";
 import { WebXRImageTrackingModel } from "../../engine-components/webxr/WebXRImageTracking.js";
 import { WebXRPlaneTracking } from "../../engine-components/webxr/WebXRPlaneTracking.js";
@@ -284,6 +285,7 @@
 TypeStore.add("DragControls", DragControls);
 TypeStore.add("DropListener", DropListener);
 TypeStore.add("Duplicatable", Duplicatable);
+TypeStore.add("EffectWrapper", EffectWrapper);
 TypeStore.add("EmissionModule", EmissionModule);
 TypeStore.add("EmphasizeOnClick", EmphasizeOnClick);
 TypeStore.add("EventList", EventList);
@@ -372,6 +374,7 @@
 TypeStore.add("SetActiveOnClick", SetActiveOnClick);
 TypeStore.add("ShadowCatcher", ShadowCatcher);
 TypeStore.add("ShapeModule", ShapeModule);
+TypeStore.add("SharpeningEffect", SharpeningEffect);
 TypeStore.add("SignalAsset", SignalAsset);
 TypeStore.add("SignalReceiver", SignalReceiver);
 TypeStore.add("SignalReceiverEvent", SignalReceiverEvent);
@@ -429,7 +432,6 @@
 TypeStore.add("WebARCameraBackground", WebARCameraBackground);
 TypeStore.add("WebARSessionRoot", WebARSessionRoot);
 TypeStore.add("WebXR", WebXR);
-TypeStore.add("WebXRButtonFactory", WebXRButtonFactory);
 TypeStore.add("WebXRImageTracking", WebXRImageTracking);
 TypeStore.add("WebXRImageTrackingModel", WebXRImageTrackingModel);
 TypeStore.add("WebXRPlaneTracking", WebXRPlaneTracking);

src/engine-components/postprocessing/Effects/Tonemapping.ts CHANGED Viewed

@@ -8,10 +8,10 @@
 export enum TonemappingMode {
     None = 0,
-    Neutral = 1, // Neutral tonemapper, close to Reinhard
-    ACES = 2,    // ACES Filmic reference tonemapper (custom approximation)
-    AgX = 3,     // AgX Filmic tonemapper
-    KhronosNeutral = 4, // PBR Neural tonemapper
+    Neutral = 1,            // Neutral tonemapper, close to Reinhard
+    ACES = 2,               // ACES Filmic reference tonemapper (custom approximation)
+    AgX = 3,                // AgX Filmic tonemapper
+    KhronosNeutral = 4,     // PBR Neural tonemapper
 }
 export class ToneMapping extends PostProcessingEffect {

src/engine-components/export/usdz/USDZExporter.ts CHANGED Viewed

@@ -6,12 +6,12 @@
 import { serializable } from "../../../engine/engine_serialization.js";
 import { getFormattedDate, Progress } from "../../../engine/engine_time_utils.js";
 import { getParam, isiOS, isMobileDevice, isSafari } from "../../../engine/engine_utils.js";
+import { WebXRButtonFactory } from "../../../engine/webcomponents/WebXRButtons.js";
 import { Behaviour, GameObject } from "../../Component.js";
 import { Renderer } from "../../Renderer.js"
 import { SpriteRenderer } from "../../SpriteRenderer.js";
 import { WebARSessionRoot } from "../../webxr/WebARSessionRoot.js";
 import { WebXR } from "../../webxr/WebXR.js";
-import { WebXRButtonFactory } from "../../../engine/webcomponents/WebXRButtons.js";
 import { XRState, XRStateFlag } from "../../webxr/XRFlag.js";
 import type { IUSDExporterExtension } from "./Extension.js";
 import { AnimationExtension } from "./extensions/Animation.js"

src/engine-components/postprocessing/Volume.ts CHANGED Viewed

@@ -1,30 +1,93 @@
-import { EffectComposer } from "postprocessing";
+import { Effect, EffectComposer } from "postprocessing";
 import { isDevEnvironment, showBalloonMessage } from "../../engine/debug/index.js";
 import type { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync.js";
 import { serializeable } from "../../engine/engine_serialization_decorator.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
+import { EffectWrapper } from "./Effects/EffectWrapper.js";
 import { PostProcessingEffect } from "./PostProcessingEffect.js";
 import { PostProcessingHandler } from "./PostProcessingHandler.js";
+import { IPostProcessingManager, setPostprocessingManagerType } from "./utils.js";
 import { VolumeParameter } from "./VolumeParameter.js";
 import { VolumeProfile } from "./VolumeProfile.js";
 const debug = getParam("debugpost");
-/** Handles PostProcessing effects */
-export class Volume extends Behaviour implements IEditorModificationReceiver {
-    @serializeable(VolumeProfile)
-    sharedProfile?: VolumeProfile;
+/** The Volume/PostprocessingManager component is responsible for managing post processing effects.
+ * Add this component to any object in your scene to enable post processing effects.
+ *
+ * @example Add bloom
+ * ```ts
+ * const volume = new Volume();
+ * volume.addEffect(new BloomEffect({
+ *   intensity: 3,
+ *   luminanceThreshold: .2
+ * }));
+ * gameObject.addComponent(volume);
+ * ```
+ *
+ * @example Remove bloom
+ * ```ts
+ * volume.removeEffect(bloom);
+ * ```
+ *
+ * @example Add pixelation
+ * ```ts
+ * const pixelation = new PixelationEffect();
+ * pixelation.granularity.value = 10;
+ * volume.addEffect(pixelation);
+ * ```
+ */
+export class Volume extends Behaviour implements IEditorModificationReceiver, IPostProcessingManager {
+    get isPostProcessingManager() {
+        return true;
+    }
     /** Currently active postprocessing effects */
     get effects() {
-        return this._effects;
+        return this._activeEffects;
     }
+    @serializeable(VolumeProfile)
+    sharedProfile?: VolumeProfile;
+    /**
+     * Add a post processing effect to the stack and schedules the effect stack to be re-created.
+     */
+    addEffect<T extends PostProcessingEffect | Effect>(effect: T): T {
+        let entry = effect as PostProcessingEffect;
+        if (entry instanceof Effect) {
+            entry = new EffectWrapper(entry);
+        }
+        if (this._effects.includes(entry)) return effect;
+        this._effects.push(entry);
+        this._isDirty = true;
+        return effect;
+    }
+    removeEffect<T extends PostProcessingEffect | Effect>(effect: T): T {
+        let index = -1;
+        if (effect instanceof Effect) {
+            index = this._effects.findIndex(e => e instanceof EffectWrapper && e.effect === effect);
+        }
+        else
+            index = this._effects.indexOf(effect);
+        if (index !== -1) {
+            this._effects.splice(index, 1);
+            this._isDirty = true;
+            return effect;
+        }
+        return effect;
+    }
     private _postprocessing?: PostProcessingHandler;
-    private _effects: PostProcessingEffect[] = [];
+    private readonly _activeEffects: PostProcessingEffect[] = [];
+    private readonly _effects: PostProcessingEffect[] = [];
     /**
      * When dirty the post processing effects will be re-applied
@@ -67,12 +130,12 @@
             // 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._isDirty) {
+                if (this._isDirty) {
                     this.apply();
                 }
             }
-            if (this.context.composer) {
+            if (this.context.composer && this._postprocessing?.composer === this.context.composer) {
                 this.context.composer.setRenderer(this.context.renderer);
                 this.context.composer.setMainScene(this.context.scene);
                 if (this.context.mainCamera)
@@ -105,25 +168,25 @@
         this._isDirty = false;
         this.unapply();
-        this._effects.length = 0;
+        this._activeEffects.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);
+            const comps = this.sharedProfile.components;
+            for (const effect of comps) {
+                if (effect.active && !this._activeEffects.includes(effect))
+                    this._activeEffects.push(effect);
             }
         }
+        // add effects registered via code
+        for (const effect of this._effects) {
+            if (effect.active && !this._activeEffects.includes(effect))
+                this._activeEffects.push(effect);
+        }
-        if (this._effects.length > 0) {
+        if (this._activeEffects.length > 0) {
             if (!this._postprocessing)
                 this._postprocessing = new PostProcessingHandler(this.context);
-            this._postprocessing.apply(this._effects);
+            this._postprocessing.apply(this._activeEffects);
             this._applyPostQueue();
         }
@@ -153,12 +216,12 @@
                 return true;
             }
-            if (!this._effects?.length) return;
+            if (!this._activeEffects?.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) {
+                for (const comp of this._activeEffects) {
                     if (comp.typeName?.toLowerCase() === componentName.toLowerCase()) {
                         if (propertyName === "active") {
@@ -230,3 +293,8 @@
 /** cached VolumeParameter keys per object */
 const effectVolumeProperties: Map<string, string[]> = new Map<string, string[]>();
+setPostprocessingManagerType(Volume);
+export { Volume as PostProcessingManager };

src/engine-components/postprocessing/VolumeProfile.ts CHANGED Viewed

@@ -30,12 +30,24 @@
 /** @internal */
 export class VolumeProfile {
+    /** effects added to the volume */
     @serializeable([d => resolveComponentType(d), PostProcessingEffect])
     components: PostProcessingEffect[] = [];
-    /** call init on all components */
+    /**
+     * call init on all components
+     * @hidden
+     **/
     init() {
         this.components?.forEach(c => c.init());
     }
+    addEffect(effect: PostProcessingEffect) {
+        this.components.push(effect);
+    }
+    removeEffect(effect: PostProcessingEffect) {
+        const idx = this.components.indexOf(effect);
+        if (idx >= 0) this.components.splice(idx, 1);
+    }
 }

src/engine-components/webxr/WebXR.ts CHANGED Viewed

@@ -8,6 +8,7 @@
 import { type NeedleXREventArgs, NeedleXRSession } from "../../engine/engine_xr.js";
 import { ButtonsFactory } from "../../engine/webcomponents/buttons.js";
 import { getIconElement } from "../../engine/webcomponents/icons.js";
+import { WebXRButtonFactory } from "../../engine/webcomponents/WebXRButtons.js";
 import { PlayerSync } from "../../engine-components-experimental/networking/PlayerSync.js";
 import { Behaviour, GameObject } from "../Component.js";
 import { USDZExporter } from "../export/usdz/USDZExporter.js";
@@ -17,7 +18,6 @@
 import { XRControllerModel } from "./controllers/XRControllerModel.js";
 import { XRControllerMovement } from "./controllers/XRControllerMovement.js";
 import { WebARSessionRoot } from "./WebARSessionRoot.js";
-import { WebXRButtonFactory } from "../../engine/webcomponents/WebXRButtons.js";
 import { XRState, XRStateFlag } from "./XRFlag.js";
 const debug = getParam("debugwebxr");

src/engine/webcomponents/WebXRButtons.ts CHANGED Viewed

@@ -1,12 +1,12 @@
+import { USDZExporter } from "../../engine-components/export/usdz/USDZExporter.js";
 import { isDevEnvironment, showBalloonMessage } from "../debug/index.js";
+import { findObjectOfType } from "../engine_components.js";
+import { Context } from "../engine_setup.js";
 import { isMozillaXR } from "../engine_utils.js";
 import { NeedleXRSession } from "../engine_xr.js";
+import { onXRSessionEnd, onXRSessionStart } from "../xr/events.js";
 import { ButtonsFactory } from "./buttons.js";
 import { getIconElement } from "./icons.js";
-import { onXRSessionEnd, onXRSessionStart } from "../xr/events.js";
-import { findObjectOfType } from "../engine_components.js";
-import { USDZExporter } from "../../engine-components/export/usdz/USDZExporter.js";
-import { Context } from "../engine_setup.js";
 // TODO: move these buttons into their own web components so their logic is encapsulated (e.g. the CSS animation when a xr session is requested)

src/engine-components/postprocessing/Effects/EffectWrapper.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { Effect } from "postprocessing";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
+export class EffectWrapper extends PostProcessingEffect {
+    readonly effect: Effect;
+    constructor(effect: Effect) {
+        super();
+        this.effect = effect;
+    }
+    get typeName(): string {
+        return this.effect.constructor.name;
+    }
+    onCreateEffect(): EffectProviderResult | undefined {
+        return this.effect;
+    }
+}

src/engine-components/postprocessing/Effects/Sharpening.ts ADDED Viewed

@@ -0,0 +1,102 @@
+import { BlendFunction, Effect } from "postprocessing";
+import { Uniform } from "three";
+import { serializable } from "../../../engine/engine_serialization.js";
+import { PostProcessingEffect } from "../PostProcessingEffect.js";
+export class SharpeningEffect extends PostProcessingEffect {
+    get typeName() {
+        return "Sharpening";
+    }
+    private _effect?: _SharpeningEffect;
+    onCreateEffect() {
+        return this.effect;
+    }
+    private get effect() {
+        this._effect ??= new _SharpeningEffect();
+        return this._effect;
+    }
+    @serializable()
+    set amount(value: number) {
+        this.effect.uniforms.get("amount")!.value = value;
+    }
+    get amount() {
+        return this.effect.uniforms.get("amount")!.value;
+    }
+    @serializable()
+    set radius(value: number) {
+        this.effect.uniforms.get("radius")!.value = value;
+    }
+    get radius() {
+        return this.effect.uniforms.get("radius")!.value;
+    }
+    // @serializable()
+    // set threshold(value: number) {
+    //     this.effect.uniforms.get("threshold")!.value = value;
+    // }
+    // get threshold() {
+    //     return this.effect.uniforms.get("threshold")!.value;
+    // }
+}
+const vert = `
+  void mainSupport() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`
+const frag = `
+  uniform sampler2D tDiffuse;
+  uniform float amount;
+  uniform float threshold;
+  uniform float radius;
+  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    float tx = 1.0 / resolution.x;
+    float ty = 1.0 / resolution.y;
+    vec2 texelSize = vec2(tx, ty);
+    vec4 color = texture2D(tDiffuse, uv);
+    vec4 blurred = vec4(0.0);
+    float total = 0.0;
+    for (float x = -radius; x <= radius; x++) {
+      for (float y = -radius; y <= radius; y++) {
+        vec2 offset = vec2(x, y) * texelSize;
+        vec4 diffuse = texture2D(tDiffuse, uv + offset);
+        float weight = exp(-length(offset) * amount);
+        blurred += diffuse * weight;
+        total += weight;
+      }
+    }
+    blurred /= total;
+    vec4 sharp = inputColor + (inputColor - blurred) * amount;
+    // float luma = dot(inputColor.rgb, vec3(0.299, 0.587, 0.114));
+    // float blend = smoothstep(threshold, 1.0, luma);
+    outputColor = sharp; //mix(inputColor, sharp, blend);
+}
+`
+class _SharpeningEffect extends Effect {
+    constructor() {
+        super("Sharpening", frag, {
+            vertexShader: vert,
+            blendFunction: BlendFunction.NORMAL,
+            uniforms: new Map<string, Uniform<any>>([
+                ["amount", new Uniform(.8)],
+                ["radius", new Uniform(.5)],
+                // ["threshold", new Uniform(0)],
+            ]),
+        });
+    }
+}

src/engine-components/postprocessing/utils.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { Object3D } from "three";
+import { isDevEnvironment } from "../../engine/debug/index.js";
+import { addComponent } from "../../engine/engine_components.js";
+import { foreachComponentEnumerator } from "../../engine/engine_gameobject.js";
+import { ConstructorConcrete, IComponent } from "../../engine/engine_types.js";
+import { getParam } from "../../engine/engine_utils.js";
+import { type PostProcessingEffect } from "./PostProcessingEffect.js";
+export const debug = getParam("debugpost");
+export type IPostProcessingManager = IComponent & {
+    get isPostProcessingManager(): boolean;
+    addEffect(effect: PostProcessingEffect): void;
+    removeEffect(effect: PostProcessingEffect): void;
+}
+let PostprocessingManagerType: ConstructorConcrete<IPostProcessingManager> | null = null;
+export function setPostprocessingManagerType(type: ConstructorConcrete<IPostProcessingManager>) {
+    PostprocessingManagerType = type;
+}
+export function getPostProcessingManager(effect: PostProcessingEffect): IPostProcessingManager | null {
+    let manager: IPostProcessingManager | null = null;
+    let obj = effect.gameObject as Object3D | null;
+    while (obj) {
+        for (const comp of foreachComponentEnumerator(obj)) {
+            if ((comp as unknown as IPostProcessingManager).isPostProcessingManager === true) {
+                manager = comp as unknown as IPostProcessingManager;
+                break;
+            }
+        }
+        obj = obj.parent;
+    }
+    if (!manager) {
+        if (PostprocessingManagerType) {
+            if (debug)
+                console.warn("Adding postprocessing manager to the scene.");
+            const scene = effect.scene;
+            manager = addComponent(scene, PostprocessingManagerType);
+        }
+        else {
+            if (isDevEnvironment())
+                console.warn("No post processing manager found");
+        }
+    }
+    return manager;
+}