@needle-tools/engine 4.14.0 → 4.15.0-next.f391a30

package/src/engine/engine_accessibility.ts

@@ -0,0 +1,198 @@
+import { Object3D } from "three";
+
+import type { Context } from "./engine_setup";
+import { IComponent, isComponent } from "./engine_types.js";
+
+
+
+/** Data describing the accessible semantics for a 3D object or component. */
+type AccessibilityData = {
+    /** ARIA role (e.g. `"button"`, `"img"`, `"region"`). */
+    role: string;
+    /** Human-readable label announced by screen readers. */
+    label: string;
+    /** When `true`, the element is hidden from the accessibility tree. */
+    hidden?: boolean;
+    /** When `true`, indicates the element's content is being updated. */
+    busy?: boolean;
+}
+
+/**
+ * Manages an accessible, screen-reader-friendly overlay for a Needle Engine {@link Context}.
+ *
+ * The manager maintains a visually-hidden DOM tree that mirrors relevant 3D scene objects
+ * with appropriate ARIA roles and labels. It also provides a live region so that hover
+ * events in the 3D scene can be announced to assistive technology without stealing focus.
+ *
+ * ## Automatic integration
+ * Several built-in components register accessible elements automatically:
+ * - {@link DragControls} — announces draggable objects and drag state
+ * - {@link Button} — exposes UI buttons to the accessibility tree
+ * - {@link Text} — exposes UI text content to screen readers
+ * - {@link ChangeTransformOnClick} — announces clickable transform actions
+ * - {@link ChangeMaterialOnClick} — announces clickable material changes
+ * - {@link EmphasizeOnClick} — announces clickable emphasis effects
+ * - {@link PlayAudioOnClick} — announces clickable audio playback
+ * - {@link PlayAnimationOnClick} — announces clickable animation triggers
+ *
+ * ## What this unlocks
+ * - Hovering over buttons and interactive objects with the cursor announces them to screen readers via an ARIA live region — no focus steal required
+ * - Screen readers can discover and navigate interactive 3D objects in the scene
+ * - Drag operations update the accessibility state (busy, label changes) in real time
+ * - Custom components can participate by calling {@link updateElement}, {@link focus}, and {@link hover}
+ *
+ * Access the manager via `this.context.accessibility` from any component.
+ */
+export class AccessibilityManager {
+
+    private static readonly _managers: WeakMap<object, AccessibilityManager> = new WeakMap();
+
+    /** Returns the {@link AccessibilityManager} associated with the given context or component. */
+    static get(obj: Context | IComponent) {
+        if (isComponent(obj)) {
+            return this._managers.get(obj.context);
+        }
+        else {
+            return this._managers.get(obj);
+        }
+    }
+
+    constructor(
+        private readonly context: Context
+    ) {
+        this.root.style.cssText = `
+            position: absolute;
+            width: 1px; height: 1px;
+            padding: 0; margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        `
+        this.root.setAttribute("role", "region");
+        this.root.setAttribute("aria-label", "3D Needle Engine scene");
+
+        // Live region for announcing hovered 3D elements without stealing focus
+        this.liveRegion.setAttribute("aria-live", "polite");
+        this.liveRegion.setAttribute("aria-atomic", "true");
+        this.liveRegion.setAttribute("role", "status");
+        this.root.appendChild(this.liveRegion);
+        this.enabled = true;
+    }
+
+    private _enabled!: boolean;
+    /** Enables or disables the accessibility overlay. When disabled, the overlay DOM is removed. */
+    set enabled(value: boolean) {
+        if (value === this._enabled) return;
+        this._enabled = value;
+        if (!value) {
+            this.root.remove();
+        }
+        else {
+            AccessibilityManager._managers.set(this.context, this);
+            const target = this.context.domElement.shadowRoot || this.context.domElement;
+            target.prepend(this.root);
+        }
+    }
+
+    /** Removes all tracked accessibility elements, keeping only the live region. */
+    clear() {
+        this.root.childNodes.forEach(child => child.remove());
+        this.root.appendChild(this.liveRegion);
+    }
+
+    /** Removes the overlay from the DOM and unregisters this manager from the context. */
+    dispose() {
+        this.root.remove();
+        AccessibilityManager._managers.delete(this.context);
+    }
+
+    private readonly root: HTMLElement = document.createElement("div");
+    private readonly liveRegion: HTMLElement = document.createElement("div");
+    private readonly treeElements = new WeakMap<object, HTMLElement>();
+
+    /**
+     * Creates or updates the accessible DOM element for a 3D object or component.
+     * @param obj - The scene object or component to represent.
+     * @param data - Partial accessibility data (role, label, hidden, busy) to apply.
+     */
+    updateElement<T extends Object3D | IComponent>(obj: T, data: Partial<AccessibilityData>) {
+        let el = this.treeElements.get(obj);
+        if (!el) {
+            el = document.createElement("div");
+            this.treeElements.set(obj, el);
+            this.root.appendChild(el);
+
+
+            let didSetRole = false;
+
+            if (typeof data === "object") {
+                if (data.role) {
+                    didSetRole = true;
+                    el.setAttribute("role", data.role);
+                }
+                if (data.label) {
+                    el.setAttribute("aria-label", data.label);
+                }
+                if (data.hidden !== undefined) {
+                    el.setAttribute("aria-hidden", String(data.hidden));
+                }
+                if (data.busy !== undefined) {
+                    el.setAttribute("aria-busy", String(data.busy));
+                }
+            }
+
+
+            // if (didSetRole) {
+            //     const role = el.getAttribute("role");
+            //     if (role) {
+            //         el.setAttribute("tabindex", "0");
+            //     } else {
+            //         el.removeAttribute("tabindex");
+            //     }
+            // }
+
+        }
+    }
+
+    /** Moves keyboard focus to the accessible element representing the given object. */
+    focus<T extends Object3D | IComponent>(obj: T) {
+        const el = this.treeElements.get(obj);
+        if (el) {
+            // if (!el.hasAttribute("tabindex")) {
+            //     el.setAttribute("tabindex", "0");
+            // }
+            el.focus();
+        }
+    }
+    /** Removes keyboard focus from the accessible element representing the given object. */
+    unfocus<T extends Object3D | IComponent>(obj: T) {
+        const el = this.treeElements.get(obj);
+        if (el) {
+            el.blur();
+        }
+    }
+
+    /**
+     * Announces a hover event to screen readers via the ARIA live region.
+     * @param obj - The hovered object (used to look up its label if `text` is not provided).
+     * @param text - Optional text to announce. Falls back to the element's `aria-label`.
+     */
+    hover<T extends Object3D | IComponent>(obj: T, text?: string) {
+        const el = this.treeElements.get(obj);
+        // Update the live region text — screen reader announces this without stealing focus
+        this.liveRegion.textContent = text || el?.getAttribute("aria-label") || "";
+    }
+
+    /** Removes the accessible DOM element for the given object and stops tracking it. */
+    removeElement(obj: Object3D | IComponent) {
+        const el = this.treeElements.get(obj);
+        el?.remove();
+        this.treeElements.delete(obj);
+    }
+
+    private set liveRegionMode(mode: "polite" | "assertive") {
+        this.liveRegion.setAttribute("aria-live", mode);
+    }
+
+}

package/src/engine/engine_context.ts

@@ -15,6 +15,7 @@ import { nodeFrame } from "three/examples/jsm/renderers/webgl-legacy/nodes/WebGL
 
 import { initSpectorIfAvailable } from './debug/debug_spector.js';
 import { isDevEnvironment, LogType, showBalloonError, showBalloonMessage } from './debug/index.js';
+import { AccessibilityManager } from './engine_accessibility.js';
 import { Addressables } from './engine_addressables.js';
 import { AnimationsRegistry } from './engine_animation.js';
 import { Application } from './engine_application.js';
@@ -522,6 +523,8 @@ export class Context implements IContext {
 	/** Access the needle menu to add or remove buttons to the menu element */
 	readonly menu: NeedleMenu;
 
+	readonly accessibility: AccessibilityManager;
+
 	/** 
 	 * Checks if the context is fully created and ready
 	 * @returns true if the context is fully created and ready 
@@ -562,7 +565,7 @@ export class Context implements IContext {
 		this.input = new Input(this);
 		this.physics = new Physics(this);
 		this.connection = new NetworkConnection(this);
-		// eslint-disable-next-line deprecation/deprecation
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
 		this.assets = new AssetDatabase();
 		this.sceneLighting = new SceneLighting(this);
 		this.addressables = new Addressables(this);
@@ -571,6 +574,7 @@ export class Context implements IContext {
 		this.menu = new NeedleMenu(this);
 		this.lodsManager = new LODsManager(this);
 		this.animations = new AnimationsRegistry(this);
+		this.accessibility = new AccessibilityManager(this);
 
 
 		const resizeCallback = () => this._needsUpdateSize = true;
@@ -614,6 +618,9 @@ export class Context implements IContext {
 
 		this.renderer = new WebGLRenderer(params);
 
+		this.renderer.domElement.setAttribute("aria-label", "3D rendering");
+		this.renderer.domElement.setAttribute("role", "img");
+
 		this.renderer.debug.checkShaderErrors = isDevEnvironment() || getParam("checkshadererrors") === true;
 
 		// some tonemapping other than "NONE" is required for adjusting exposure with EXR environments
@@ -810,6 +817,7 @@ export class Context implements IContext {
 		this.lightmaps?.clear();
 		this.physics?.engine?.clearCaches();
 		this.lodsManager.disable();
+		this.accessibility?.clear();
 
 		this._onBeforeRenderListeners.clear();
 		this._onAfterRenderListeners.clear();
@@ -831,6 +839,7 @@ export class Context implements IContext {
 	 */
 	dispose() {
 		this.internalOnDestroy();
+		this.accessibility.dispose();
 	}
 
 	/**@deprecated use dispose()  */

package/src/engine/engine_create_objects.ts

@@ -338,7 +338,7 @@ function loadFont(family: string | null): Font | Promise<Font> {
             url = "https://cdn.needle.tools/static/fonts/facetype/Open Sans_Regular_ascii.json";
             break;
         case "Helvetiker":
-            url = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.json";
+            url = "https://cdn.needle.tools/static/fonts/facetype/Helvetiker_Regular_ascii.json";
             break;
     }
     if (fontsDict.has(url)) {

package/src/engine/engine_gizmos.ts

@@ -1,10 +1,10 @@
-import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
-import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
+import { Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
+import ThreeMeshUI, { Text } from "three-mesh-ui"
 import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
 
 import { isDestroyed } from './engine_gameobject.js';
-import { Context, FrameEvent } from './engine_setup.js';
-import { getTempVector, getWorldPosition, lookAtObject, setWorldPositionXYZ } from './engine_three_utils.js';
+import { Context } from './engine_setup.js';
+import { getTempVector, lookAtObject, setWorldPositionXYZ } from './engine_three_utils.js';
 import type { Vec3, Vec4 } from './engine_types.js';
 import { getParam } from './engine_utils.js';
 import { NeedleXRSession } from './engine_xr.js';
@@ -341,7 +341,11 @@ class Internal {
 
         if (!fontFamily) {
             fontFamily = ThreeMeshUI.FontLibrary.addFontFamily(this.familyName);
-            const variant = fontFamily.addVariant("normal", "normal", "https://uploads.needle.tools/include/font-msdf.json", "https://uploads.needle.tools/include/font.png") as any as ThreeMeshUI.FontVariant;
+            const variant = fontFamily.addVariant(
+                "normal", 
+                "normal", 
+                "https://cdn.needle.tools/static/fonts/msdf/arial/arial-msdf.json", 
+                "https://cdn.needle.tools/static/fonts/msdf/arial/arial.png");            
             /** @ts-ignore */
             variant?.addEventListener('ready', () => {
                 ThreeMeshUI.update();

package/src/engine/engine_license.ts

@@ -407,7 +407,12 @@ function insertNonCommercialUseHint(ctx: IContext) {
         padding-left: 30px;
     `;
     if (NEEDLE_ENGINE_LICENSE_TYPE === "edu") {
-        console.log("%c " + "This project is supported by Needle for Education – https://needle.tools", style);
+        if (navigator.webdriver) {
+            console.log("This project is supported by Needle for Education – https://needle.tools");
+        }
+        else {
+            console.log("%c " + "This project is supported by Needle for Education – https://needle.tools", style);
+        }
     }
     else {
         // if the user has a basic license we already show the logo in the menu and log a license message
@@ -502,7 +507,7 @@ async function logNonCommercialUse(_logo?: string) {
     // url must contain https for firefox to make it clickable
     const version = VERSION;
     const licenseText = `Needle Engine — No license active, commercial use is not allowed. Visit https://needle.tools/pricing for more information and licensing options! v${version}`;
-    if (Context.Current?.xr) {
+    if (Context.Current?.xr || navigator.webdriver) {
         console.log(licenseText);
     }
     else {

package/src/engine/engine_materialpropertyblock.ts

@@ -122,17 +122,26 @@ class PropertyBlockRegistry {
 const registry = new PropertyBlockRegistry();
 
 /**
- * MaterialPropertyBlock allows per-object material property overrides without creating new material instances.  
- * This is useful for rendering multiple objects with the same base material but different properties  
- * (e.g., different colors, textures, or shader parameters).  
+ * MaterialPropertyBlock allows per-object material property overrides without creating new material instances.
+ * This is useful for rendering multiple objects with the same base material but different properties
+ * (e.g., different colors, textures, or shader parameters).
  *
- * The property block system works by:  
+ * ## How Property Blocks Work
+ *
+ * **Important**: Overrides are registered on the **Object3D**, not on the material.
+ * This means:
+ * - If you change the object's material, the overrides will still be applied to the new material
+ * - Multiple objects can share the same material but have different property overrides
+ * - If you don't want overrides applied after changing a material, you must remove them using {@link removeOveride}, {@link clearAllOverrides}, or {@link dispose}
+ *
+ * The property block system works by:
  * - Temporarily applying overrides in onBeforeRender
  * - Restoring original values in onAfterRender
  * - Managing shader defines and program cache keys for correct shader compilation
  * - Supporting texture coordinate transforms per object
  *
- * Common use cases:
+ * ## Common Use Cases
+ *
  * - **Lightmaps**: Apply unique lightmap textures to individual objects sharing the same material
  * - **Reflection Probes**: Apply different environment maps per object for localized reflections
  * - **See-through effects**: Temporarily override transparency/transmission properties for X-ray effects
@@ -170,6 +179,26 @@ const registry = new PropertyBlockRegistry();
  * block.setDefine("USE_CUSTOM_FEATURE", 1);
  * ```
  *
+ * @example Material swapping behavior
+ * ```typescript
+ * const mesh = new Mesh(geometry, materialA);
+ * const block = MaterialPropertyBlock.get(mesh);
+ * block.setOverride("color", new Color(1, 0, 0));
+ *
+ * // The color override is red for materialA
+ *
+ * // Swap the material - overrides persist and apply to the new material!
+ * mesh.material = materialB;
+ * // The color override is now red for materialB too
+ *
+ * // If you don't want overrides on the new material, remove them:
+ * block.clearAllOverrides(); // Remove all overrides
+ * // or
+ * block.removeOveride("color"); // Remove specific override
+ * // or
+ * block.dispose(); // Remove the entire property block
+ * ```
+ *
  * @example Lightmap usage
  * ```typescript
  * const block = MaterialPropertyBlock.get(mesh);
@@ -317,8 +346,25 @@ export class MaterialPropertyBlock<T extends Material = Material> {
     }
 
     /**
-     * Removes a specific property override
-     * @param name The property name to clear
+     * Removes a specific property override.
+     * After removal, the material will use its original property value for this property.
+     *
+     * @param name The property name to remove the override for
+     *
+     * @example
+     * ```typescript
+     * const block = MaterialPropertyBlock.get(mesh);
+     *
+     * // Set some overrides
+     * block.setOverride("color", new Color(1, 0, 0));
+     * block.setOverride("roughness", 0.5);
+     * block.setOverride("lightMap", lightmapTexture);
+     *
+     * // Remove a specific override - the material will now use its original color
+     * block.removeOveride("color");
+     *
+     * // Other overrides (roughness, lightMap) remain active
+     * ```
      */
     removeOveride<K extends NonFunctionPropertyNames<T>>(name: K | ({} & string)): void {
         const index = this._overrides.findIndex(o => o.name === name);
@@ -328,7 +374,47 @@ export class MaterialPropertyBlock<T extends Material = Material> {
     }
 
     /**
-     * Removes all property overrides from this block
+     * Removes all property overrides from this block.
+     * After calling this, the material will use its original values for all properties.
+     *
+     * **Note**: This does NOT remove shader defines. Use {@link clearDefine} or {@link dispose} for that.
+     *
+     * @example Remove all overrides but keep the property block
+     * ```typescript
+     * const block = MaterialPropertyBlock.get(mesh);
+     *
+     * // Set multiple overrides
+     * block.setOverride("color", new Color(1, 0, 0));
+     * block.setOverride("roughness", 0.5);
+     * block.setOverride("lightMap", lightmapTexture);
+     *
+     * // Later, remove all overrides at once
+     * block.clearAllOverrides();
+     *
+     * // The material now uses its original values
+     * // The property block still exists and can be reused with new overrides
+     * ```
+     *
+     * @example Temporarily disable all overrides
+     * ```typescript
+     * const block = MaterialPropertyBlock.get(mesh);
+     *
+     * // Save current overrides if you want to restore them later
+     * const savedOverrides = [...block.overrides];
+     *
+     * // Clear all overrides temporarily
+     * block.clearAllOverrides();
+     *
+     * // Do some rendering without overrides...
+     *
+     * // Restore overrides
+     * savedOverrides.forEach(override => {
+     *   block.setOverride(override.name, override.value, override.textureTransform);
+     * });
+     * ```
+     *
+     * @see {@link removeOveride} - To remove a single override
+     * @see {@link dispose} - To completely remove the property block and clean up resources
      */
     clearAllOverrides(): void {
         this._overrides = [];
@@ -797,11 +883,11 @@ function attachPropertyBlockToObject(object: Object3D, _propertyBlock: MaterialP
     if (object.type === "Group") {
         object.children.forEach(child => {
             if (child.type === "Mesh" || child.type === "SkinnedMesh") {
-                attachCallbacksToMesh(child, object);
+                attachCallbacksToMesh(child, object, _propertyBlock);
             }
         });
     } else if (object.type === "Mesh" || object.type === "SkinnedMesh") {
-        attachCallbacksToMesh(object, object);
+        attachCallbacksToMesh(object, object, _propertyBlock);
     }
 }
 /**
@@ -811,7 +897,7 @@ function attachPropertyBlockToObject(object: Object3D, _propertyBlock: MaterialP
  * @param propertyBlockOwner The object that owns the property block (may be the mesh itself or its parent Group)
  * @internal
  */
-function attachCallbacksToMesh(mesh: Object3D, propertyBlockOwner: Object3D): void {
+function attachCallbacksToMesh(mesh: Object3D, propertyBlockOwner: Object3D, _propertyBlock: MaterialPropertyBlock): void {
     // Check if this specific mesh already has our callbacks attached for this property block owner
     if (registry.isHooked(mesh, propertyBlockOwner)) {
         // Already hooked for this property block owner
@@ -820,6 +906,11 @@ function attachCallbacksToMesh(mesh: Object3D, propertyBlockOwner: Object3D): vo
 
     registry.addHook(mesh, propertyBlockOwner);
 
+    /**
+     * Expose the property block for e.g. Needle Inspector
+     */
+    mesh["needle:materialPropertyBlock"] = _propertyBlock;
+
     if (!mesh.onBeforeRender) {
         mesh.onBeforeRender = onBeforeRender_MaterialBlock;
     } else {

package/src/engine/engine_math.ts

@@ -254,7 +254,40 @@ class LowPassFilter {
 }
 
 /**
- * OneEuroFilter is a simple low-pass filter for noisy signals. It uses a one-euro filter to smooth the signal.
+ * [OneEuroFilter](https://engine.needle.tools/docs/api/OneEuroFilter) is a low-pass filter designed to reduce jitter in noisy signals while maintaining low latency.
+ * It's particularly useful for smoothing tracking data from XR controllers, hand tracking, or other input devices where the signal contains noise but responsiveness is important.
+ *
+ * The filter automatically adapts its smoothing strength based on the signal's velocity:
+ * - When the signal moves slowly, it applies strong smoothing to reduce jitter
+ * - When the signal moves quickly, it reduces smoothing to maintain responsiveness
+ *
+ * Based on the research paper: [1€ Filter: A Simple Speed-based Low-pass Filter for Noisy Input](http://cristal.univ-lille.fr/~casiez/1euro/)
+ *
+ * @example Basic usage with timestamp
+ * ```ts
+ * const filter = new OneEuroFilter(120, 1.0, 0.0);
+ *
+ * // In your update loop:
+ * const smoothedValue = filter.filter(noisyValue, this.context.time.time);
+ * ```
+ *
+ * @example Without timestamps (using frequency estimate)
+ * ```ts
+ * // Assuming 60 FPS update rate
+ * const filter = new OneEuroFilter(60, 1.0, 0.5);
+ *
+ * // Call without timestamp - uses the frequency estimate
+ * const smoothedValue = filter.filter(noisyValue);
+ * ```
+ *
+ * @example Smoothing 3D positions
+ * ```ts
+ * const posFilter = new OneEuroFilterXYZ(90, 0.5, 0.0);
+ *
+ * posFilter.filter(trackedPosition, smoothedPosition, this.context.time.time);
+ * ```
+ *
+ * @see {@link OneEuroFilterXYZ} for filtering 3D vectors
  */
 export class OneEuroFilter {
     /**

package/src/engine/engine_networking.ts

@@ -1,5 +1,5 @@
 const defaultNetworkingBackendUrlProvider = "https://urls.needle.tools/default-networking-backend/index";
-let networkingServerUrl: string | undefined = "wss://networking.needle.tools/socket";
+let networkingServerUrl: string | undefined = "wss://networking-2.needle.tools/socket";
 
 import * as flatbuffers from 'flatbuffers';
 import { type Websocket } from 'websocket-ts';

package/src/engine/engine_types.ts

@@ -164,10 +164,15 @@ export interface IHasGuid {
     guid: string;
 }
 
+// DO NOT CHANGE THE SYMBOL NAME
+export const $componentName = Symbol("component-name");
+
 // TODO: we might want to separate the IComponent and IBehaviour where the Behaviour is the one with custom methods and the component only has e.g. the gameobject reference
 export interface IComponent extends IHasGuid {
     get isComponent(): boolean;
 
+    get [$componentName](): string | undefined;
+
     /** the object this component is attached to */
     gameObject: IGameObject;
     // guid: string;

package/src/engine/engine_utils.ts

@@ -607,7 +607,7 @@ export namespace DeviceUtilities {
     /** @returns `true` if it's a phone or tablet */
     export function isMobileDevice() {
         if (_ismobile !== undefined) return _ismobile;
-        // eslint-disable-next-line deprecation/deprecation
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         if ((typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1)) {
             return _ismobile = true;
         }
@@ -677,7 +677,7 @@ export namespace DeviceUtilities {
     /** @returns `true` for mobile Apple devices like iPad, iPhone, iPod, Vision Pro, ... */
     export function isiOS() {
         if (__isiOS !== undefined) return __isiOS;
-        // eslint-disable-next-line deprecation/deprecation
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         return __isiOS = iosDevices.includes(navigator.platform)
             // iPad on iOS 13 detection
             || (navigator.userAgent.includes("Mac") && "ontouchend" in document)

package/src/engine/export/gltf/index.ts

@@ -1,12 +1,12 @@
 import { AnimationClip, Object3D } from "three";
 import { GLTFExporter, GLTFExporterOptions } from "three/examples/jsm/exporters/GLTFExporter.js";
 
-import GLTFMeshGPUInstancingExtension from "../../../include/three/EXT_mesh_gpu_instancing_exporter.js";
 import { AnimationUtils } from "../../engine_animation.js";
 import type { Context } from "../../engine_setup.js";
 import { registerExportExtensions } from "../../extensions/index.js";
 import { __isExporting } from "../state.js";
 import { shouldExport_HideFlags } from "../utils.js";
+import GLTFMeshGPUInstancingExtension from "./EXT_mesh_gpu_instancing_exporter.js";
 import { GizmoWriter as GLTFGizmoWriter, RenderTextureWriter as GLTFRenderTextureWriter } from "./Writers.js";
 
 declare type ExportOptions = {

package/src/engine/webcomponents/icons.ts

@@ -17,6 +17,9 @@ export function getIconElement(str: string): HTMLElement {
     span.innerText = str;
     span.style.visibility = "hidden";
     span.style.userSelect = "none";
+    span.setAttribute("role", "img");
+    span.setAttribute("aria-label", str + " icon");
+    span.setAttribute("aria-hidden", "true");
     fontReady(fontname).then(res => {
         if (res) span.style.visibility = "";
         else {

package/src/engine/webcomponents/logo-element.ts

@@ -20,8 +20,13 @@ export class NeedleLogoElement extends HTMLElement {
         return document.createElement(elementName) as NeedleLogoElement;
     }
 
+    private _didInitialize = false;
+
     constructor() {
         super();
+    }
+
+    private initializeDom() {
         this._root = this.attachShadow({ mode: 'closed' });
         const template = document.createElement('template');
         template.innerHTML = `<style>
@@ -83,22 +88,37 @@ export class NeedleLogoElement extends HTMLElement {
         this.addEventListener("click", () => {
             globalThis.open("https://needle.tools", "_blank");
         });
+    }
+
+    ensureInitialized() {
+        if (!this._didInitialize) {
+            this._didInitialize = true;
+            this.initializeDom();
+        }
+    }
 
-        // set title
+    connectedCallback() {
+        this.ensureInitialized();
+        if (!this.wrapper) return;
         this.wrapper.setAttribute("title", "Made with Needle Engine");
+        this.setAttribute("aria-label", "Needle Engine logo. Click to open the Needle Engine website.");
     }
 
-    private readonly _root: ShadowRoot;
-    private readonly wrapper: HTMLDivElement;
-    private readonly logoElement: HTMLImageElement;
+    private _root!: ShadowRoot;
+    private wrapper!: HTMLDivElement;
+    private logoElement!: HTMLImageElement;
 
     /** Show or hide the logo element (used by the menu) */
     setLogoVisible(val: boolean) {
+        this.ensureInitialized();
+        if (!this.logoElement) return;
         this.logoElement.style.display = val ? "block" : "none";
     }
 
     /** Switch the logo between full and compact versions */
     setType(type: "full" | "compact") {
+        this.ensureInitialized();
+        if (!this.logoElement) return;
         if (type === "full") {
             this.logoElement.src = needleLogoSVG;
             this.logoElement.classList.remove("with-text");