@needle-tools/engine 4.6.0 → 4.6.1-next.20d54cd

package/src/engine/engine_three_utils.ts

@@ -1,4 +1,4 @@
-import { AnimationAction, Box3, Box3Helper, Camera, Color, Euler, GridHelper, Layers, Material, Mesh, MeshStandardMaterial, Object3D, PerspectiveCamera, PlaneGeometry, Quaternion, Scene, ShadowMaterial, Texture, Uniform, Vector2Like, Vector3 } from "three";
+import { AnimationAction, Box3, Box3Helper, Camera, Color, DepthTexture, Euler, GridHelper, Layers, Material, Mesh, MeshStandardMaterial, Object3D, OrthographicCamera, PerspectiveCamera, PlaneGeometry, Quaternion, Scene, ShadowMaterial, Texture, Uniform, Vector2Like, Vector3, WebGLRenderTarget } from "three";
 import { ShaderMaterial, WebGLRenderer } from "three";
 import { GroundedSkybox } from "three/examples/jsm/objects/GroundedSkybox.js";
 
@@ -95,7 +95,7 @@ export function lookAtObject(object: Object3D, target: Object3D, keepUpDirection
  *  });
  * ```
  */
-export function lookAtScreenPoint(object: Object3D, target: Vector2Like, camera: Camera, factor : number = 1): Vector3 | null {
+export function lookAtScreenPoint(object: Object3D, target: Vector2Like, camera: Camera, factor: number = 1): Vector3 | null {
 
     if (camera) {
         const pos = getTempVector(0, 0, 0);
@@ -426,42 +426,69 @@ export function isAnimationAction(obj: object) {
 
 
 
+class BlitMaterial extends ShaderMaterial {
+    static vertex = `
+varying vec2 vUv;
+void main(){
+    vUv = uv;
+    gl_Position = vec4(position.xy, 0., 1.0);
+}`;
+
+    constructor() {
+        super({
+            vertexShader: BlitMaterial.vertex,
+            uniforms: {
+                map: new Uniform(null),
+                flipY: new Uniform(true),
+                writeDepth: new Uniform(false),
+                depthTexture: new Uniform(null)
+            },
+            fragmentShader: `
+uniform sampler2D map;
+uniform bool flipY;
+uniform bool writeDepth;
+uniform sampler2D depthTexture;
+
+varying vec2 vUv;
+
+void main(){ 
+    vec2 uv = vUv;
+    if (flipY) uv.y = 1.0 - uv.y;
+    gl_FragColor = texture2D(map, uv);
+
+    if (writeDepth) {
+        float depth = texture2D(depthTexture, uv).r;
+        gl_FragDepth = depth;
+
+        // float linearDepth = (depth - 0.99) * 100.0; // Enhance near 1.0 values
+        // gl_FragColor = vec4(linearDepth, linearDepth, linearDepth, 1.0);
+    }
+}`
+        });
+    }
+
+    reset() {
+        this.uniforms.map.value = null;
+        this.uniforms.flipY.value = true;
+        this.uniforms.writeDepth.value = false;
+        this.uniforms.depthTexture.value = null;
+        this.needsUpdate = true;
+        this.uniformsNeedUpdate = true;
+    }
+}
+
 /**
  * Utility class to perform various graphics operations like copying textures to canvas
  */
 export class Graphics {
-    private static planeGeometry = new PlaneGeometry(2, 2, 1, 1);
-    private static renderer: WebGLRenderer | undefined = undefined;
-    private static perspectiveCam = new PerspectiveCamera();
-    private static scene = new Scene();
-    private static readonly vertex = `
-    varying vec2 vUv;
-    void main(){
-        vUv = uv;
-        gl_Position = vec4(position.xy * 1.0,0.,.999999);
-    }`;
-    private static readonly fragment = `
-    uniform sampler2D map; 
-    varying vec2 vUv;
-    void main(){ 
-        vec2 uv = vUv;
-        uv.y = 1.0 - uv.y;
-        gl_FragColor = texture2D( map, uv);
-        // gl_FragColor = vec4(uv.xy, 0, 1);
-    }`;
-    private static blitMaterial: ShaderMaterial | undefined = undefined;
+    private static readonly planeGeometry = new PlaneGeometry(2, 2, 1, 1);
+    private static readonly renderer: WebGLRenderer = new WebGLRenderer({ antialias: false, alpha: true });
+    private static readonly perspectiveCam = new PerspectiveCamera();
+    private static readonly orthographicCam = new OrthographicCamera();
+    private static readonly scene = new Scene();
+    private static readonly blitMaterial: BlitMaterial = new BlitMaterial();
+    private static readonly mesh: Mesh = new Mesh(Graphics.planeGeometry, Graphics.blitMaterial);
 
-    /**
-     * Create a blit material for copying textures
-     */
-    static createBlitMaterial(fragment: string): ShaderMaterial {
-        return new ShaderMaterial({
-            uniforms: { map: new Uniform(null) },
-            vertexShader: this.vertex,
-            fragmentShader: fragment
-        });
-    }
-    private static mesh: Mesh | undefined = undefined;
 
     /** 
      * Copy a texture to a new texture
@@ -470,17 +497,16 @@ export class Graphics {
      * @returns the newly created, copied texture
     */
     static copyTexture(texture: Texture, blitMaterial?: ShaderMaterial): Texture {
+
         // ensure that a blit material exists
-        if (!this.blitMaterial) {
-            this.blitMaterial = new ShaderMaterial({
-                uniforms: { map: new Uniform(null) },
-                vertexShader: this.vertex,
-                fragmentShader: this.fragment
-            });
-        }
+        if (!blitMaterial) {
+            blitMaterial = this.blitMaterial;
+        };
+        this.blitMaterial.reset();
 
         const material = blitMaterial || this.blitMaterial;
 
+        // TODO: reset the uniforms...
         material.uniforms.map.value = texture;
         material.needsUpdate = true;
         material.uniformsNeedUpdate = true;
@@ -488,17 +514,13 @@ export class Graphics {
 
         // ensure that the blit material has the correct vertex shader
         const origVertexShader = material.vertexShader;
-        material.vertexShader = this.vertex;
+        material.vertexShader = BlitMaterial.vertex;
 
-        if (!this.mesh)
-            this.mesh = new Mesh(this.planeGeometry, this.blitMaterial);
         const mesh = this.mesh;
         mesh.material = material;
         mesh.frustumCulled = false;
         this.scene.children.length = 0;
         this.scene.add(mesh);
-        if (!this.renderer)
-            this.renderer = new WebGLRenderer({ antialias: false });
         this.renderer.setSize(texture.image.width, texture.image.height);
         this.renderer.clear();
         this.renderer.render(this.scene, this.perspectiveCam);
@@ -512,19 +534,73 @@ export class Graphics {
         return tex;
     }
 
-    // static blit(src: Texture, target: Texture, blitMaterial?: ShaderMaterial) {
-    //     let material = blitMaterial ?? this.blipMaterial;
-    //     material.uniforms.map.value = src;
-    //     this.mesh.material = material;
-    //     this.mesh.frustumCulled = false;
-    //     this.mesh.matrix.identity();
-    //     this.scene.children.length = 0;
-    //     this.scene.add(this.mesh);
-    //     this.renderer.setSize(src.image.width, src.image.height);
-    //     this.renderer.clear();
-    //     this.renderer.render(this.scene, this.perspectiveCam);
-    //     return new Texture(this.renderer.domElement);
-    // }
+    static blit(src: Texture, target: WebGLRenderTarget, options?: {
+        renderer?: WebGLRenderer,
+        blitMaterial?: ShaderMaterial,
+        flipY?: boolean,
+        depthTexture?: DepthTexture | null,
+        depthTest?: boolean,
+        depthWrite?: boolean,
+    }) {
+        const {
+            renderer = this.renderer,
+            blitMaterial = this.blitMaterial,
+            flipY = false,
+            depthTexture = null,
+            depthTest = true,
+            depthWrite = true,
+        } = options || {};
+
+        this.blitMaterial.reset();
+
+        if (blitMaterial.uniforms.map) blitMaterial.uniforms.map.value = src;
+        if (blitMaterial.uniforms.flipY) blitMaterial.uniforms.flipY.value = flipY;
+
+        if (depthTexture) {
+            blitMaterial.uniforms.writeDepth = new Uniform(true);
+            blitMaterial.uniforms.depthTexture.value = depthTexture;
+        }
+        else {
+            blitMaterial.uniforms.writeDepth = new Uniform(false);
+            blitMaterial.uniforms.depthTexture.value = null;
+        }
+        blitMaterial.needsUpdate = true;
+        blitMaterial.uniformsNeedUpdate = true;
+
+        const mesh = this.mesh;
+        mesh.material = blitMaterial;
+        mesh.frustumCulled = false;
+        this.scene.children.length = 0;
+        this.scene.add(mesh);
+
+        // Save state
+        const renderTarget = renderer.getRenderTarget();
+        const gl = renderer.getContext();
+        const depthTestEnabled = gl.getParameter(gl.DEPTH_TEST);
+        const depthWriteMask = gl.getParameter(gl.DEPTH_WRITEMASK);
+        const depthFunc = gl.getParameter(gl.DEPTH_FUNC);
+
+
+        // Set state
+        if (depthTest) renderer.getContext().enable(renderer.getContext().DEPTH_TEST);
+        else renderer.getContext().disable(renderer.getContext().DEPTH_TEST);
+        renderer.state.buffers.depth.setMask(depthWrite);
+
+        renderer.setClearColor(new Color(0, 0, 0), 0);
+        // renderer.setSize(target.width, target.height);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setRenderTarget(target);
+        renderer.clear();
+        renderer.render(this.scene, this.perspectiveCam);
+
+
+        // Restore state
+        renderer.setRenderTarget(renderTarget); // reset render target
+        const depthBuffer = renderer.state.buffers.depth;
+        depthBuffer.setTest(depthTestEnabled);
+        depthBuffer.setMask(depthWriteMask);
+        depthBuffer.setFunc(depthFunc);
+    }
 
     /**
      * Copy a texture to a HTMLCanvasElement

package/src/engine/engine_tonemapping.ts

@@ -1,4 +1,4 @@
-import { ShaderChunk } from "three";
+import { ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping, NoToneMapping, ShaderChunk, ToneMapping } from "three";
 
 import { isDevEnvironment } from "./debug/index.js";
 import type { Context } from "./engine_setup";
@@ -185,26 +185,25 @@ vec3 AgXToneMapping( vec3 color ) {
 }
 
 
-
-
-
-
-
-
-// function resetShaders(ctx: Context) {
-//     const scene = ctx.scene;
-//     const gl = ctx.renderer;
-//     scene.traverse(object => {
-//         if ((object as Mesh).isMesh) {
-//             const mesh = object as Mesh;
-//             if (Array.isArray(mesh.material)) {
-//                 mesh.material.forEach(mat => gl.properties.remove(mat));
-//             }
-//             else {
-//                 gl.properties.remove(mesh.material);
-//             }
-//         }
-//     })
-//     if (gl.info?.programs)
-//         gl.info.programs.length = 0;
-// }
+type TonemappingName = "none" | "neutral" | "aces" | "agx" | "khronos_neutral";
+
+export function nameToThreeTonemapping(str: null | undefined | TonemappingName | ({} & string)): undefined | ToneMapping {
+    if (typeof str !== "string")
+        return undefined;
+    str = str.toLowerCase();
+    switch (str) {
+        case "none":
+            return NoToneMapping;
+        case "neutral":
+            return NeutralToneMapping;
+        case "aces":
+            return ACESFilmicToneMapping;
+        case "agx":
+            return AgXToneMapping;
+        case "khronos_neutral":
+            return NeutralToneMapping;
+        default:
+            console.warn("[PostProcessing] Unknown tone mapping mode", str);
+            return undefined;
+    }
+}

package/src/engine/engine_utils.ts

@@ -7,7 +7,7 @@ import { needleLogoOnlySVG } from "./assets/index.js";
 import type { Context } from "./engine_context.js";
 import { ContextRegistry } from "./engine_context_registry.js";
 import { type SourceIdentifier } from "./engine_types.js";
-import type { NeedleEngineHTMLElement } from "./webcomponents/needle-engine.js";
+import type { NeedleEngineWebComponent } from "./webcomponents/needle-engine.js";
 
 // https://schneidenbach.gitbooks.io/typescript-cookbook/content/nameof-operator.html
 /** @internal */
@@ -1008,7 +1008,7 @@ async function addOverlays(canvas: HTMLCanvasElement, args: { showLogo?: boolean
 
     // Draw the website's icon in the center of the QR code
     const faviconImage = new Image();
-    const element = document.querySelector("needle-engine") as NeedleEngineHTMLElement;
+    const element = document.querySelector("needle-engine") as NeedleEngineWebComponent;
     const logoSrc = element?.getAttribute("loading-logo-src") || needleLogoOnlySVG;
     if (!logoSrc) return;
 

package/src/engine/engine_utils_screenshot.ts

@@ -45,7 +45,7 @@ export declare type ScreenshotOptions = {
     /**
      * The context to take the screenshot from. If not provided, the current context will be used.
      */
-    context?: Pick<Context, "scene" | "renderer" | "mainCamera" | "renderNow" | "updateAspect" | "updateSize" | "currentFrameEvent">,
+    context?: Pick<Context, "scene" | "renderer" | "mainCamera" | "renderNow" | "updateAspect" | "updateSize" | "currentFrameEvent" | "devicePixelRatio">,
     /**
      * The width of the screenshot - if not provided, the width of the current renderer will be used.
      */
@@ -205,11 +205,21 @@ export function screenshot2(opts: ScreenshotOptionsDataUrl | ScreenshotOptionsTe
     const renderWidth = width;
     const renderHeight = height;
 
-    // apply page zoom
-    const zoomLevel = window.devicePixelRatio || 1;
+    // Apply page zoom
+    let zoomLevel = (window.devicePixelRatio || 1);
+    let contextZoomLevel = 1;
+    // Apply context zoom level
+    if (context.devicePixelRatio === 'auto' || context.devicePixelRatio === 'manual')
+        contextZoomLevel = 1;
+    else
+        contextZoomLevel = context.devicePixelRatio / window.devicePixelRatio;
+    zoomLevel *= contextZoomLevel;
     width /= zoomLevel;
     height /= zoomLevel;
 
+    width = Math.floor(width);
+    height = Math.floor(height);
+
     // save XR state and reset it for screenshot
     const xrframe = renderer.xr.isPresenting && renderer.xr.getFrame();
     const previousXRState = renderer.xr.enabled;

package/src/engine/webcomponents/needle-engine.extras.ts

@@ -10,7 +10,7 @@ DO NOT IMPORT ENGINE_ELEMENT FROM HERE
  * Use the addAttributeChangeCallback utility methods to register callback events
  */
 export async function registerObservableAttribute(name: string) {
-    const { NeedleEngineHTMLElement } = await import("./needle-engine.js");
-    if (!NeedleEngineHTMLElement.observedAttributes.includes(name))
-        NeedleEngineHTMLElement.observedAttributes.push(name);
+    const { NeedleEngineWebComponent } = await import("./needle-engine.js");
+    if (!NeedleEngineWebComponent.observedAttributes.includes(name))
+        NeedleEngineWebComponent.observedAttributes.push(name);
 }

package/src/engine/webcomponents/needle-engine.ts

@@ -1,5 +1,3 @@
-import { AgXToneMapping, Color, LinearToneMapping, NeutralToneMapping, NoToneMapping } from "three";
-
 import { isDevEnvironment, showBalloonWarning } from "../debug/index.js";
 import { PUBLIC_KEY, VERSION } from "../engine_constants.js";
 import { registerLoader } from "../engine_gltf.js";
@@ -7,6 +5,7 @@ import { hasCommercialLicense } from "../engine_license.js";
 import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "../engine_loaders.gltf.js";
 import { NeedleLoader } from "../engine_loaders.js";
 import { Context, ContextCreateArgs } from "../engine_setup.js";
+import { nameToThreeTonemapping } from "../engine_tonemapping.js";
 import { type INeedleEngineComponent, type LoadedModel } from "../engine_types.js";
 import { getParam } from "../engine_utils.js";
 import { RGBAColor } from "../js-extensions/RGBAColor.js";
@@ -30,7 +29,7 @@ const desktopSessionActiveClassName = "desktop-session-active";
 const observedAttributes = [
     "public-key",
     "version",
-    
+
     "hash",
     "src",
     "camera-controls",
@@ -60,7 +59,7 @@ const observedAttributes = [
  * @example
  * <needle-engine src="https://example.com/scene.glb" camera-controls="false"></needle-engine>
 */
-export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngineComponent {
+export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngineComponent {
 
     static get observedAttributes() {
         return observedAttributes
@@ -352,6 +351,12 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
         }
     }
 
+    /** The tonemapping setting configured as an attribute on the <needle-engine> component */
+    get toneMapping(): TonemappingAttributeOptions | null | undefined {
+        const attribute = (this.getAttribute("tonemapping") || this.getAttribute("tone-mapping")) as TonemappingAttributeOptions | null | undefined;
+        return attribute;
+    }
+
     private _loadId: number = 0;
     private _abortController: AbortController | null = null;
     private _lastSourceFiles: Array<string> | null = null;
@@ -521,26 +526,10 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
     private applyAttributes() {
         // set tonemapping if configured
         if (this._context?.renderer) {
-            const attribute = this.getAttribute("tonemapping") || this.getAttribute("tone-mapping") as TonemappingAttributeOptions | null | undefined;
-            switch (attribute?.toLowerCase()) {
-                case "none":
-                    this._context.renderer.toneMapping = NoToneMapping;
-                    break;
-                case "linear":
-                    this._context.renderer.toneMapping = LinearToneMapping;
-                    break;
-                case "neutral":
-                    this._context.renderer.toneMapping = NeutralToneMapping;
-                    break;
-                case "agx":
-                    this._context.renderer.toneMapping = AgXToneMapping;
-                    break;
-                default:
-                    if (attribute !== null && attribute !== undefined) {
-                        console.warn("Invalid tone-mapping attribute: " + attribute);
-                    }
+            const threeTonemapping = nameToThreeTonemapping(this.toneMapping);
+            if (threeTonemapping !== undefined) {
+                this._context.renderer.toneMapping = threeTonemapping;
             }
-
             const exposure = this.getAttribute("tone-mapping-exposure");
             if (exposure !== null && exposure !== undefined) {
                 const value = parseFloat(exposure);
@@ -561,7 +550,7 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
         if (this._context?.renderer) {
             if (typeof backgroundColor === "string" && backgroundColor.length > 0) {
                 const rgbaColor = RGBAColor.fromColorRepresentation(backgroundColor);
-                if(debug) console.debug("<needle-engine> background-color changed, str:", backgroundColor, "→", rgbaColor)
+                if (debug) console.debug("<needle-engine> background-color changed, str:", backgroundColor, "→", rgbaColor)
                 this._context.renderer.setClearColor(rgbaColor, rgbaColor.alpha);
                 this.context.scene.background = null;
             }
@@ -803,7 +792,7 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
 }
 
 if (typeof window !== "undefined" && !window.customElements.get(htmlTagName))
-    window.customElements.define(htmlTagName, NeedleEngineHTMLElement);
+    window.customElements.define(htmlTagName, NeedleEngineWebComponent);
 
 
 

package/src/engine-components/CameraUtils.ts

@@ -6,7 +6,7 @@ import { Context } from "../engine/engine_context.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import type { ICamera, IContext } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
-import { NeedleEngineHTMLElement } from "../engine/webcomponents/needle-engine.js";
+import { NeedleEngineWebComponent } from "../engine/webcomponents/needle-engine.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { OrbitControls } from "./OrbitControls.js";
 import { EnvironmentScene } from "./utils/EnvironmentScene.js";
@@ -69,7 +69,7 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     cameraObject.position.y = 1;
     cameraObject.position.z = 2;
 
-    const engineElement = evt.context.domElement as NeedleEngineHTMLElement
+    const engineElement = evt.context.domElement as NeedleEngineWebComponent
     // If the camera is missing and the <needle-engine controls> is not set to false, create default camera controls
     // That way we still create controls if the attribute is not added to <needle-engine> at all
     if (engineElement?.cameraControls != false) {
@@ -92,7 +92,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreated, (evt) => {
     }
 
     // check if <needle-engine camera-controls> attribute is present or enabled
-    const engineElement = evt.context.domElement as NeedleEngineHTMLElement
+    const engineElement = evt.context.domElement as NeedleEngineWebComponent
     if (engineElement?.cameraControls == true) {
 
         // Check if something else already acts as a camera controller

package/src/engine-components/ReflectionProbe.ts

@@ -22,6 +22,10 @@ export class ReflectionProbe extends Behaviour {
 
     private static _probes: Map<Context, ReflectionProbe[]> = new Map();
 
+    static isUsingReflectionProbe(material: Material) {
+        return !!(material[$reflectionProbeKey] || material[$originalMaterial]?.[$reflectionProbeKey]);
+    }
+
     public static get(object: Object3D | null | undefined, context: Context, isAnchor: boolean, anchor?: Object3D): ReflectionProbe | null {
         if (!object || object.isObject3D !== true) return null;
         if (disable) return null;
@@ -29,7 +33,7 @@ export class ReflectionProbe extends Behaviour {
         if (probes) {
             for (const probe of probes) {
                 if (!probe.__didAwake) probe.__internalAwake();
-                if (probe.enabled) {
+                if (probe.activeAndEnabled) {
                     if (anchor) {
                         // test if anchor is reflection probe object
                         if (probe.gameObject === anchor) {

package/src/engine-components/Renderer.ts

@@ -708,7 +708,15 @@ export class Renderer extends Behaviour implements IRenderer {
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
             this._reflectionProbe.onSet(this);
         }
-
+        // since three 163 we need to set the envMap to the scene envMap if it is not set
+        // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
+        // internal issue: https://linear.app/needle/issue/NE-6363
+        for (const mat of this._sharedMaterials) {
+            // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
+            if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
+                mat.envMap = this.context.scene.environment;
+            }
+        }
     }
 
     private onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
@@ -716,11 +724,6 @@ export class Renderer extends Behaviour implements IRenderer {
             const factor = this.hasLightmap ? Math.PI : 1;
             const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
-            
-            // since three 163 we need to set the envMap to the scene envMap if it is not set
-            // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
-            // internal issue: https://linear.app/needle/issue/NE-6363
-            if (!material.envMap) material.envMap = this.context.scene.environment;
         }
 
         if (this._lightmaps) {
@@ -856,7 +859,7 @@ export class SkinnedMeshRenderer extends MeshRenderer {
                         mesh.computeBoundingSphere();
                         mesh.geometry = geometry;
                     }
-                    catch(err) {
+                    catch (err) {
                         console.error(`Error updating bounding sphere for ${mesh.name}`, err);
                     }
                 }

package/src/engine-components/postprocessing/Effects/Antialiasing.ts

@@ -33,7 +33,9 @@ export class Antialiasing extends PostProcessingEffect {
     onCreateEffect(): EffectProviderResult {
         const effect = new MODULES.POSTPROCESSING.MODULE.SMAAEffect({
             preset: MODULES.POSTPROCESSING.MODULE.SMAAPreset.HIGH,
-            edgeDetectionMode: MODULES.POSTPROCESSING.MODULE.EdgeDetectionMode.DEPTH
+            edgeDetectionMode: MODULES.POSTPROCESSING.MODULE.EdgeDetectionMode.LUMA,
+            // Keep predication mode disabled (default) since it looks better
+            // predicationMode: MODULES.POSTPROCESSING.MODULE.PredicationMode.DEPTH,
         });
 
         this.preset.onValueChanged = (newValue) => {

package/src/engine-components/postprocessing/Effects/BloomEffect.ts

@@ -1,4 +1,4 @@
-import type { BloomEffect as _BloomEffect } from "postprocessing";
+import { BloomEffect as _BloomEffect, EffectAttribute } from "postprocessing";
 import { MathUtils } from "three";
 
 import { MODULES } from "../../../engine/engine_modules.js";
@@ -48,10 +48,10 @@ export class BloomEffect extends PostProcessingEffect {
 
     /**
      * Scatter value. The higher the value, the more the bloom will scatter.
-     * @default 0.3
+     * @default 0.7
      */
     @serializable(VolumeParameter)
-    readonly scatter: VolumeParameter = new VolumeParameter(.3);
+    readonly scatter: VolumeParameter = new VolumeParameter(.7);
 
     /**
      * Set to true to use selective bloom when the effect gets created.
@@ -91,8 +91,10 @@ export class BloomEffect extends PostProcessingEffect {
                 luminanceThreshold: this.threshold.value,
                 luminanceSmoothing: this.scatter.value,
                 radius: 0.85, // default value
-                intensity: this.intensity.value,
+                intensity: this.intensity.value, 
             });
+            // @ts-ignore Well... it's protected but bloom needs this :(
+            bloom.setAttributes(EffectAttribute.CONVOLUTION);
         }
 
         this.intensity.onValueChanged = newValue => {