@needle-tools/engine 4.6.1-next.f9f2e7d → 4.6.2

package/lib/engine-components/postprocessing/utils.js

@@ -37,25 +37,27 @@ export function getPostProcessingManager(effect) {
     return manager;
 }
 /**
- * Default priority for post-processing effects. This can be used to sort effects by their rendering order when creating custom effects.
- * E.g. in your custom effect, you can set `priority: PostProcessingEffectPriority.Bloom + 1;` to ensure it gets rendered after the bloom effect.
- * OR `priority: PostProcessingEffectPriority.Bloom - 1;` to ensure it gets rendered before the bloom effect.
+ * Default order for post-processing effects. This can be used to sort effects by their rendering order when creating custom effects.
+ * E.g. in your custom effect, you can set `order: PostProcessingEffectOrder.Bloom + 1;` to ensure it gets rendered after the bloom effect.
+ * OR `order: PostProcessingEffectOrder.Bloom - 1;` to ensure it gets rendered before the bloom effect.
  * @example
  * ```typescript
- * import { PostProcessingEffectPriority } from "@needle-tools/engine"
+ * import { PostProcessingEffectOrder } from "@needle-tools/engine"
  *
  * export class MyCustomEffect extends PostProcessingEffect {
- *    priority: PostProcessingEffectPriority.Bloom + 1; // render after bloom
+ *    order: PostProcessingEffectPriority.Bloom + 1; // render after bloom
  *
  *    // ... your effect code
  * }
  * ```
  */
-export const PostProcessingEffectPriority = {
+export const PostProcessingEffectOrder = {
+    /** Used to render effects at the start of the post-processing chain */
+    AT_START: -10_000,
     NormalPass: 0,
     DepthDownsamplingPass: 10,
-    SMAA: 20,
-    SSAO: 30,
+    SSAO: 20,
+    SMAA: 30,
     TiltShift: 40,
     DepthOfField: 50,
     ChromaticAberration: 60,
@@ -65,7 +67,9 @@ export const PostProcessingEffectPriority = {
     ToneMapping: 100,
     HueSaturation: 110,
     BrightnessContrast: 120,
-    // Sharpening: 130,
+    Sharpening: 130,
+    /** Used to render effects at the end of the post-processing chain, e.g. for final adjustments or overlays. */
+    AT_END: 10_000,
 };
 // let effectsOrder: Array<Constructor<Effect | Pass>> | null = null;
 let builtinOrder = null;
@@ -74,62 +78,42 @@ export function orderEffects(effects) {
         console.debug("Before ordering effects", [...effects]);
     if (!builtinOrder) {
         builtinOrder = new Map();
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.NormalPass, PostProcessingEffectPriority.NormalPass);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthDownsamplingPass, PostProcessingEffectPriority.DepthDownsamplingPass);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SMAAEffect, PostProcessingEffectPriority.SMAA);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SSAOEffect, PostProcessingEffectPriority.SSAO);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.TiltShiftEffect, PostProcessingEffectPriority.TiltShift);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect, PostProcessingEffectPriority.DepthOfField);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ChromaticAberrationEffect, PostProcessingEffectPriority.ChromaticAberration);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BloomEffect, PostProcessingEffectPriority.Bloom);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.VignetteEffect, PostProcessingEffectPriority.Vignette);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.PixelationEffect, PostProcessingEffectPriority.Pixelation);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ToneMappingEffect, PostProcessingEffectPriority.ToneMapping);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.HueSaturationEffect, PostProcessingEffectPriority.HueSaturation);
-        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect, PostProcessingEffectPriority.BrightnessContrast);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.NormalPass, PostProcessingEffectOrder.NormalPass);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthDownsamplingPass, PostProcessingEffectOrder.DepthDownsamplingPass);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SMAAEffect, PostProcessingEffectOrder.SMAA);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SSAOEffect, PostProcessingEffectOrder.SSAO);
+        builtinOrder.set(MODULES.POSTPROCESSING_AO.MODULE.N8AOPostPass, PostProcessingEffectOrder.SSAO);
+        builtinOrder.set(MODULES.POSTPROCESSING_AO.MODULE.N8AOPass, PostProcessingEffectOrder.SSAO);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.TiltShiftEffect, PostProcessingEffectOrder.TiltShift);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect, PostProcessingEffectOrder.DepthOfField);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ChromaticAberrationEffect, PostProcessingEffectOrder.ChromaticAberration);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BloomEffect, PostProcessingEffectOrder.Bloom);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SelectiveBloomEffect, PostProcessingEffectOrder.Bloom);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.VignetteEffect, PostProcessingEffectOrder.Vignette);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.PixelationEffect, PostProcessingEffectOrder.Pixelation);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ToneMappingEffect, PostProcessingEffectOrder.ToneMapping);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.HueSaturationEffect, PostProcessingEffectOrder.HueSaturation);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect, PostProcessingEffectOrder.BrightnessContrast);
     }
     // enforce correct order of effects (e.g. DOF before Bloom)
     effects.sort((a, b) => {
         // we use find index here because sometimes constructor names are prefixed with `_`
         // TODO: find a more robust solution that isnt name based (not sure if that exists tho... maybe we must give effect TYPES some priority/index)
-        const aidx = typeof a.priority === "number" ? a.priority : builtinOrder.get(a.effect.constructor) || -1;
-        const bidx = typeof b.priority === "number" ? b.priority : builtinOrder.get(b.effect.constructor) || -1;
+        const aidx = typeof a.priority === "number" ? a.priority : builtinOrder.get(a.effect.constructor) ?? Number.NEGATIVE_INFINITY;
+        const bidx = typeof b.priority === "number" ? b.priority : builtinOrder.get(b.effect.constructor) ?? Number.NEGATIVE_INFINITY;
         // Unknown effects should be rendered first
-        if (aidx < 0) {
+        if (aidx === Number.NEGATIVE_INFINITY) {
             if (debug)
-                console.warn("Unknown effect found: ", a.constructor.name);
-            return -1;
+                console.warn("Unknown effect found: ", a.constructor.name, a);
+            return 1;
         }
-        else if (bidx < 0) {
+        else if (bidx === Number.NEGATIVE_INFINITY) {
             if (debug)
-                console.warn("Unknown effect found: ", b.constructor.name);
-            return 1;
+                console.warn("Unknown effect found: ", b.constructor.name, b);
+            return -1;
         }
-        // if (aidx < 0) return 1;
-        // if (bidx < 0) return -1;
         return aidx - bidx;
     });
-    // effects.sort((a, b) => {
-    //     if (a.beforeEffect) {
-    //         const beforeA = effectsOrder!.findIndex(e => a.beforeEffect!.constructor.name.endsWith(e.name));
-    //         if (beforeA >= 0) {
-    //             return -1; // before effect should be rendered first
-    //         }
-    //         else {
-    //             return 1; // no before effect, so we can keep the order
-    //         }
-    //     }
-    //     else if (b.beforeEffect) {
-    //         const beforeB = effectsOrder!.findIndex(e => b.beforeEffect!.constructor.name.endsWith(e.name));
-    //         if (beforeB >= 0) {
-    //             return 1; // before effect should be rendered first
-    //         }
-    //         else if (a.beforeEffect) {
-    //             return -1; // no before effect, so we can keep the order
-    //         }
-    //     }
-    //     return 0; // no before effect, so we can keep the order
-    // });
     if (debug === "verbose")
         console.debug("After ordering effects", [...effects]);
 }

package/lib/engine-components/postprocessing/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/engine-components/postprocessing/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/engine-components/postprocessing/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.6.1-next.f9f2e7d",
+  "version": "4.6.2",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {
@@ -167,4 +167,4 @@
   "module": "lib/needle-engine.js",
   "typings": "lib/needle-engine.d.ts",
   "types": "lib/needle-engine.d.ts"
-}
+}

package/src/engine/engine_context.ts

@@ -40,6 +40,7 @@ import type { CoroutineData, ICamera, IComponent, IContext, ILight, LoadedModel,
 import { deepClone, delay, DeviceUtilities, getParam } from './engine_utils.js';
 import type { INeedleXRSessionEventReceiver, NeedleXRSession } from './engine_xr.js';
 import { NeedleMenu } from './webcomponents/needle menu/needle-menu.js';
+import type { NeedleEngineWebComponent } from './webcomponents/needle-engine.js';
 
 const debug = getParam("debugcontext");
 const stats = getParam("stats");
@@ -224,7 +225,7 @@ export class Context implements IContext {
 	hash?: string;
 
 	/** The `<needle-engine>` web component */
-	domElement: HTMLElement;
+	domElement: NeedleEngineWebComponent | HTMLElement;
 
 	appendHTMLElement(element: HTMLElement) {
 		if (this.domElement.shadowRoot)
@@ -1186,8 +1187,9 @@ export class Context implements IContext {
 		this._dispatchReadyAfterFrame = true;
 		const res = ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this, { files: loadedFiles });
 		if (res) {
-			if ("internalSetLoadingMessage" in this.domElement && typeof this.domElement.internalSetLoadingMessage === "function")
-				this.domElement?.internalSetLoadingMessage("finish loading");
+			const domElement = this.domElement as HTMLElement;
+			if ("internalSetLoadingMessage" in domElement && typeof domElement.internalSetLoadingMessage === "function")
+				domElement?.internalSetLoadingMessage("finish loading");
 			await res;
 		}
 		if (opts?.abortSignal?.aborted) {

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/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);