@needle-tools/engine 4.12.0-next.ca2cebd → 4.12.0-next.da19dd0

package/src/engine/debug/debug_console.ts

@@ -1,4 +1,4 @@
-import { getParam } from "../engine_utils.js";
+import { DeviceUtilities,getParam } from "../engine_utils.js";
 import { getErrorCount } from "./debug_overlay.js";
 
 let consoleInstance: VConsole | null | undefined = undefined;
@@ -117,6 +117,12 @@ function createConsole(startHidden: boolean = false) {
             consoleInstance.addPlugin(createInspectPlugin());
         }
 
+        // Add plugin for device utilities
+        consoleInstance.addPlugin(createDeviceUtilitiesPlugin());
+        
+        // Add plugin for graphics info
+        consoleInstance.addPlugin(createGraphicsInfoPlugin());
+
         consoleHtmlElement = getConsoleElement();
         if (consoleHtmlElement) {
             consoleHtmlElement[$defaultConsoleParent] = consoleHtmlElement.parentElement;
@@ -291,6 +297,448 @@ function createInspectPlugin() {
     return plugin;
 }
 
+const CONTAINER_STYLE = "padding: 10px; font-family: monospace;";
+const HEADING_STYLE = "margin-bottom: 10px;";
+const SUBHEADING_STYLE = "margin-bottom: 10px; margin-top: 15px;";
+const TABLE_STYLE = "width: 100%; border-collapse: collapse; border: 1px solid rgba(0,0,0,0.1); table-layout: fixed;";
+const CELL_STYLE = "border: 1px solid rgba(0,0,0,0.1); padding: 5px;";
+const HEADER_CELL_STYLE = CELL_STYLE;
+const VALUE_CELL_STYLE = CELL_STYLE + " word-break: break-all;";
+
+function createTable(rows: Array<{label: string, value: any}>, sortByValue: boolean = false): string {
+    if (sortByValue) {
+        rows.sort((a, b) => (b.value ? 1 : 0) - (a.value ? 1 : 0));
+    }
+    
+    let html = `<table style='${TABLE_STYLE}'>`;
+    html += "<tbody>";
+    
+    for (const row of rows) {
+        const value = typeof row.value === 'boolean' ? (row.value ? "✅" : "❌") : row.value;
+        html += `<tr><td style='${HEADER_CELL_STYLE}'>${row.label}</td><td style='${VALUE_CELL_STYLE}'>${value}</td></tr>`;
+    }
+    
+    html += "</tbody></table>";
+    return html;
+}
+
+function getWebGL2Support(): string {
+    try {
+        const canvas = document.createElement('canvas');
+        const gl = canvas.getContext('webgl2');
+        if (gl) {
+            return "✅";
+        }
+    } catch (e) {
+        // WebGL2 not supported
+    }
+    return "❌";
+}
+
+function createDeviceUtilitiesPlugin() {
+    if (!globalThis.VConsole) return;
+    const plugin = new VConsole.VConsolePlugin("device-utilities", "📱 Device Info");
+    plugin.on('renderTab', function(callback) {
+        let html = `<div style='${CONTAINER_STYLE}'>`;
+        
+        // Device type
+        const deviceType = getDeviceType();
+        html += `<h3 style='${HEADING_STYLE}'>Device: ${deviceType}</h3>`;
+        
+        // Device capabilities table
+        html += createTable([
+            { label: "💻 Desktop", value: DeviceUtilities.isDesktop() },
+            { label: "📱 Mobile Device", value: DeviceUtilities.isMobileDevice() },
+            { label: "🍎 iOS", value: DeviceUtilities.isiOS() },
+            { label: "📱 iPad", value: DeviceUtilities.isiPad() },
+            { label: "🤖 Android", value: DeviceUtilities.isAndroidDevice() },
+            { label: "🦊 Mozilla XR", value: DeviceUtilities.isMozillaXR() },
+            { label: "🌵 Needle App Clip", value: DeviceUtilities.isNeedleAppClip() },
+            { label: "🍏 macOS", value: DeviceUtilities.isMacOS() },
+            { label: "👓 VisionOS", value: DeviceUtilities.isVisionOS() },
+            { label: "🧭 Safari", value: DeviceUtilities.isSafari() },
+            { label: "🕶️ Meta Quest", value: DeviceUtilities.isQuest() },
+            { label: "🔗 QuickLook AR Support", value: DeviceUtilities.supportsQuickLookAR() },
+        ], true);
+        
+        // Versions
+        const versionRows: Array<{label: string, value: any}> = [];
+        const iosVersion = DeviceUtilities.getiOSVersion();
+        if (iosVersion) versionRows.push({ label: "🍎 iOS Version", value: iosVersion });
+        const chromeVersion = DeviceUtilities.getChromeVersion();
+        if (chromeVersion) versionRows.push({ label: "🌐 Chrome Version", value: chromeVersion });
+        const safariVersion = DeviceUtilities.getSafariVersion();
+        if (safariVersion) versionRows.push({ label: "🧭 Safari Version", value: safariVersion });
+        
+        if (versionRows.length > 0) {
+            html += createTable(versionRows, false);
+        }
+        
+        html += "</div>";
+        
+        // User Agent table
+        html += `<div style='${CONTAINER_STYLE} margin-top: 20px;'>`;
+        html += `<h3 style='${HEADING_STYLE}'>User Agent Info</h3>`;
+        
+        const userAgentRows = [
+            { label: "User Agent", value: navigator.userAgent },
+            { label: "Platform", value: navigator.platform },
+            { label: "App Version", value: navigator.appVersion },
+            // @ts-ignore
+            { label: "User Agent Data", value: navigator.userAgentData ? `Platform: ${navigator.userAgentData.platform}, Mobile: ${navigator.userAgentData.mobile}` : "Not supported" },
+            { label: "WebXR", value: 'xr' in navigator ? "✅" : "❌" },
+            { label: "WebGPU", value: 'gpu' in navigator ? "✅" : "❌" },
+            { label: "WebGL 2", value: getWebGL2Support() },
+        ];
+        
+        html += createTable(userAgentRows, false);
+        html += "</div>";
+        
+        callback(html);
+    });
+    return plugin;
+}
+
+function createGraphicsInfoPlugin() {
+    if (!globalThis.VConsole) return;
+    const plugin = new VConsole.VConsolePlugin("graphics-info", "🎨 Graphics Info");
+    plugin.on('renderTab', async function(callback) {
+        let html = `<div style='${CONTAINER_STYLE}'>`;
+        
+        // General GPU Info Table
+        const generalInfo = getGeneralGPUInfo();
+        if (generalInfo.length > 0) {
+            html += `<h3 style='${SUBHEADING_STYLE}'>General GPU Info</h3>`;
+            html += createTable(generalInfo, false);
+        }
+        
+        // WebGL Info Table
+        const webglInfo = getWebGLDetailedInfo();
+        if (webglInfo.length > 0) {
+            html += `<h3 style='${SUBHEADING_STYLE}'>WebGL</h3>`;
+            html += createTable(webglInfo, false);
+        }
+        
+        // WebGL 2 Features Table
+        const webgl2Features = getWebGL2FeaturesTable();
+        if (webgl2Features.length > 0) {
+            html += `<h3 style='${SUBHEADING_STYLE}'>WebGL 2 Features</h3>`;
+            html += createTable(webgl2Features, false);
+        }
+        
+        // WebGL Limits Table
+        const webglLimits = getWebGLLimitsTable();
+        if (webglLimits.length > 0) {
+            html += `<h3 style='${SUBHEADING_STYLE}'>WebGL Limits</h3>`;
+            html += createTable(webglLimits, false);
+        }
+        
+        // Texture Formats Table
+        const textureFormats = getTextureFormatsTable();
+        if (textureFormats.length > 0) {
+            html += `<h3 style='${SUBHEADING_STYLE}'>Texture Formats</h3>`;
+            html += createTable(textureFormats, false);
+        }
+        
+        // WebGPU Info Table
+        const webgpuInfo = await getWebGPUInfoTable();
+        if (webgpuInfo.length > 0) {
+            html += `<h3 style='${SUBHEADING_STYLE}'>WebGPU</h3>`;
+            html += createTable(webgpuInfo, false);
+        }
+        
+        // Safari specific GPU info
+        if (DeviceUtilities.isSafari()) {
+            const safariGPUInfo = getSafariGPUInfo();
+            if (safariGPUInfo.length > 0) {
+                html += `<h3 style='${SUBHEADING_STYLE}'>Safari GPU Info</h3>`;
+                html += createTable(safariGPUInfo, false);
+            }
+        }
+        
+        html += "</div>";
+        
+        callback(html);
+    });
+    return plugin;
+}
+
+function getGeneralGPUInfo(): Array<{label: string, value: string}> {
+    const info: Array<{label: string, value: string}> = [];
+    
+    // Display and window info
+    const dpr = window.devicePixelRatio;
+    info.push({ label: "Device Pixel Ratio", value: dpr.toString() });
+    info.push({ label: "Width (px)", value: (window.innerWidth * dpr).toString() });
+    info.push({ label: "Height (px)", value: (window.innerHeight * dpr).toString() });
+    
+    // Estimated physical screen size in cm (96 DPI desktop, 150 DPI mobile)
+    const isMobile = DeviceUtilities.isMobileDevice();
+    const estimatedDPI = isMobile ? 150 : 96;
+    const widthInches = screen.width / estimatedDPI;
+    const heightInches = screen.height / estimatedDPI;
+    const widthCm = widthInches * 2.54;
+    const heightCm = heightInches * 2.54;
+    info.push({ label: "Estimated Width (cm)", value: widthCm.toFixed(1) });
+    info.push({ label: "Estimated Height (cm)", value: heightCm.toFixed(1) });
+    
+    const webglInfo = getWebGLInfo();
+    if (webglInfo) {
+        info.push({ label: "GPU", value: webglInfo.renderer });
+        info.push({ label: "Driver", value: webglInfo.vendor });
+        info.push({ label: "ANGLE", value: webglInfo.angle || "Not detected" });
+        
+        // Enhanced GPU parsing
+        const gpuDetails = parseGPUDetails(webglInfo.renderer);
+        if (gpuDetails) {
+            if (gpuDetails.manufacturer) info.push({ label: "Manufacturer", value: gpuDetails.manufacturer });
+            if (gpuDetails.cardVersion) info.push({ label: "Card Version", value: gpuDetails.cardVersion });
+            if (gpuDetails.brand) info.push({ label: "Brand", value: gpuDetails.brand });
+            info.push({ label: "Integrated", value: gpuDetails.integrated ? "Yes" : "No" });
+            if (gpuDetails.layer) info.push({ label: "WebGL Layer", value: gpuDetails.layer });
+        }
+    }
+    
+    return info;
+}
+
+function parseGPUDetails(renderer: string): {manufacturer?: string, cardVersion?: string, brand?: string, integrated?: boolean, layer?: string, card?: string} | null {
+    if (!renderer) return null;
+    
+    const extractValue = (reg: RegExp, str: string) => {
+        const matches = str.match(reg);
+        return matches && matches[0];
+    };
+    
+    const layer = extractValue(/(ANGLE)/g, renderer) || undefined;
+    const card = extractValue(/((NVIDIA|AMD|Intel)[^\d]*[^\s]+)/, renderer) || renderer;
+    
+    const tokens = card.split(' ');
+    tokens.shift();
+    
+    const manufacturer = extractValue(/(NVIDIA|AMD|Intel)/g, card) || undefined;
+    const cardVersion = tokens.length > 0 ? tokens.pop() : undefined;
+    const brand = tokens.length > 0 ? tokens.join(' ') : undefined;
+    const integrated = manufacturer === 'Intel';
+    
+    return {
+        manufacturer,
+        cardVersion,
+        brand,
+        integrated,
+        layer,
+        card
+    };
+}
+
+function getWebGLDetailedInfo(): Array<{label: string, value: string}> {
+    const info: Array<{label: string, value: string}> = [];
+    
+    const webglInfo = getWebGLInfo();
+    if (webglInfo) {
+        info.push({ label: "📊 WebGL Version", value: webglInfo.version });
+        info.push({ label: "🎮 WebGL 2 Available", value: getWebGL2Support() });
+    }
+    
+    return info;
+}
+
+function getWebGL2FeaturesTable(): Array<{label: string, value: string}> {
+    const features: Array<{label: string, value: string}> = [];
+    
+    try {
+        const canvas = document.createElement('canvas');
+        const gl = canvas.getContext('webgl2');
+        if (!gl) return features;
+        
+        // Check for important WebGL 2 features
+        features.push({ label: "Float Color Buffer", value: gl.getExtension('EXT_color_buffer_float') ? "✅" : "❌" });
+        features.push({ label: "Anisotropic Filtering", value: gl.getExtension('EXT_texture_filter_anisotropic') ? "✅" : "❌" });
+        features.push({ label: "Float Texture Linear", value: gl.getExtension('OES_texture_float_linear') ? "✅" : "❌" });
+        features.push({ label: "S3TC Compression", value: gl.getExtension('WEBGL_compressed_texture_s3tc') ? "✅" : "❌" });
+        features.push({ label: "ETC Compression", value: gl.getExtension('WEBGL_compressed_texture_etc') ? "✅" : "❌" });
+        features.push({ label: "PVRTC Compression", value: gl.getExtension('WEBGL_compressed_texture_pvrtc') ? "✅" : "❌" });
+        features.push({ label: "ASTC Compression", value: gl.getExtension('WEBGL_compressed_texture_astc') ? "✅" : "❌" });
+        
+    } catch (e) {
+        // WebGL2 not supported
+    }
+    return features;
+}
+
+function getWebGLLimitsTable(): Array<{label: string, value: string}> {
+    const limits: Array<{label: string, value: string}> = [];
+    
+    try {
+        // Try WebGL 2 first, fall back to WebGL 1
+        const canvas = document.createElement('canvas');
+        const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+        if (!gl) return limits;
+        
+        const isWebGL2 = gl instanceof WebGL2RenderingContext;
+        
+        limits.push({ label: "📏 Max Texture Size", value: gl.getParameter(gl.MAX_TEXTURE_SIZE).toString() });
+        limits.push({ label: "🎨 Max Renderbuffer Size", value: gl.getParameter(gl.MAX_RENDERBUFFER_SIZE).toString() });
+        limits.push({ label: "🔗 Max Vertex Attribs", value: gl.getParameter(gl.MAX_VERTEX_ATTRIBS).toString() });
+        limits.push({ label: "🎯 Max Texture Units", value: gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS).toString() });
+        
+        if (isWebGL2) {
+            limits.push({ label: "⚡ Max Samples", value: gl.getParameter(gl.MAX_SAMPLES).toString() });
+            limits.push({ label: "🔄 Max Uniform Buffer Bindings", value: gl.getParameter(gl.MAX_UNIFORM_BUFFER_BINDINGS).toString() });
+            limits.push({ label: "📐 Max 3D Texture Size", value: gl.getParameter(gl.MAX_3D_TEXTURE_SIZE).toString() });
+        }
+        
+    } catch (e) {
+        // WebGL not available
+    }
+    return limits;
+}
+
+function getTextureFormatsTable(): Array<{label: string, value: string}> {
+    const formats: Array<{label: string, value: string}> = [];
+    
+    try {
+        // WebGL 1 texture formats
+        const canvas1 = document.createElement('canvas');
+        const gl1 = canvas1.getContext('webgl');
+        if (gl1) {
+            formats.push({ label: "WebGL 1 RGBA", value: "✅" });
+            formats.push({ label: "WebGL 1 RGB", value: "✅" });
+        }
+        
+        // WebGL 2 texture formats
+        const canvas2 = document.createElement('canvas');
+        const gl2 = canvas2.getContext('webgl2');
+        if (gl2) {
+            formats.push({ label: "WebGL 2 RGBA32F", value: gl2.getExtension('EXT_color_buffer_float') ? "✅" : "❌" });
+            formats.push({ label: "WebGL 2 RGB32F", value: gl2.getExtension('EXT_color_buffer_float') ? "✅" : "❌" });
+            formats.push({ label: "WebGL 2 R11F_G11F_B10F", value: "✅" });
+            formats.push({ label: "WebGL 2 RGB565", value: "✅" });
+            formats.push({ label: "WebGL 2 RGB5_A1", value: "✅" });
+            formats.push({ label: "WebGL 2 RGBA4444", value: "✅" });
+        }
+        
+    } catch (e) {
+        // WebGL not available
+    }
+    return formats;
+}
+
+async function getWebGPUInfoTable(): Promise<Array<{label: string, value: string}>> {
+    const info: Array<{label: string, value: string}> = [];
+    
+    if (!('gpu' in navigator)) {
+        info.push({ label: "🚀 WebGPU Support", value: "❌ Not supported" });
+        return info;
+    }
+    
+    info.push({ label: "🚀 WebGPU Support", value: "✅ Supported" });
+    
+    try {
+        const adapter = await (navigator as any).gpu.requestAdapter();
+        if (!adapter) {
+            info.push({ label: "🎯 Adapter", value: "No adapter available" });
+            return info;
+        }
+        
+        info.push({ label: "🎯 Adapter", value: adapter.name || "Unknown Adapter" });
+        
+        const device = await adapter.requestDevice();
+        info.push({ label: "🔧 Device", value: device.label || "WebGPU Device" });
+        
+        // WebGPU Limits
+        info.push({ label: "📏 Max Texture 2D", value: device.limits.maxTextureDimension2D.toString() });
+        info.push({ label: "📐 Max Texture 3D", value: device.limits.maxTextureDimension3D.toString() });
+        info.push({ label: "📊 Max Texture Array Layers", value: device.limits.maxTextureArrayLayers.toString() });
+        info.push({ label: "💾 Max Buffer Size", value: `${(device.limits.maxBufferSize / 1024 / 1024).toFixed(1)}MB` });
+        info.push({ label: "🔗 Max Bind Groups", value: device.limits.maxBindGroups.toString() });
+        
+    } catch (e) {
+        info.push({ label: "❌ Error", value: (e as Error).message });
+    }
+    
+    return info;
+}
+
+function getWebGLInfo(): {renderer: string, vendor: string, version: string, angle?: string} | null {
+    try {
+        const canvas = document.createElement('canvas');
+        // Try WebGL 2 first, fall back to WebGL 1
+        const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+        if (!gl) return null;
+        
+        const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+        const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : gl.getParameter(gl.RENDERER);
+        const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : gl.getParameter(gl.VENDOR);
+        const version = gl.getParameter(gl.VERSION);
+        
+        // Try to detect ANGLE
+        let angle = undefined;
+        if (renderer && renderer.includes('ANGLE')) {
+            const angleMatch = renderer.match(/ANGLE \(([^)]+)\)/);
+            if (angleMatch) {
+                angle = angleMatch[1];
+            }
+        }
+        
+        return { renderer, vendor, version, angle };
+    } catch (e) {
+        return null;
+    }
+}
+
+function getSafariGPUInfo(): Array<{label: string, value: string}> {
+    const info: Array<{label: string, value: string}> = [];
+    
+    // Try to get Safari-specific GPU info
+    try {
+        const canvas = document.createElement('canvas');
+        const gl = canvas.getContext('webgl');
+        if (gl) {
+            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+            if (debugInfo) {
+                const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+                if (renderer && renderer.includes('Apple')) {
+                    info.push({ label: "🍎 Apple GPU", value: renderer });
+                }
+            }
+        }
+    } catch (e) {
+        // Ignore errors
+    }
+    
+    // Check for WebGL extensions specific to Safari
+    try {
+        const canvas = document.createElement('canvas');
+        const gl = canvas.getContext('webgl');
+        if (gl) {
+            const extensions = gl.getSupportedExtensions() || [];
+            if (extensions.includes('WEBGL_compressed_texture_pvrtc')) {
+                info.push({ label: "🗜️ PVRTC Support", value: "✅" });
+            }
+        }
+    } catch (e) {
+        // Ignore errors
+    }
+    
+    return info;
+}
+
+function getDeviceType(): string {
+    if (DeviceUtilities.isQuest()) return "Meta Quest";
+    if (DeviceUtilities.isVisionOS()) return "Vision Pro";
+    if (DeviceUtilities.isiOS()) {
+        if (DeviceUtilities.isiPad()) return "iPad";
+        return "iPhone/iPod";
+    }
+    if (DeviceUtilities.isAndroidDevice()) return "Android Device";
+    if (DeviceUtilities.isMozillaXR()) return "Mozilla XR Browser";
+    if (DeviceUtilities.isNeedleAppClip()) return "Needle App Clip";
+    if (DeviceUtilities.isMacOS()) return "Mac";
+    if (DeviceUtilities.isDesktop()) return "Desktop PC";
+    return "Unknown Device";
+}
+
 function getConsoleSwitchButton(): HTMLElement | null {
     const el = document.querySelector("#__vconsole .vc-switch");
     if (el) return el as HTMLElement;

package/src/engine/engine_components.ts

@@ -218,13 +218,13 @@ export function getComponents<T extends IComponent>(obj: Object3D, componentType
  * const myComponent = getComponentInChildren(myObject, MyComponent);
  * ```
  */
-export function getComponentInChildren<T extends IComponent>(obj: Object3D, componentType: Constructor<T>, includeInactive?: boolean): T | null {
-    if(includeInactive === false && obj[activeInHierarchyFieldName] === false) return null;
+export function getComponentInChildren<T extends IComponent>(obj: Object3D, componentType: Constructor<T>, includeInactive: boolean = false): T | null {
+    if(includeInactive === false && obj[activeInHierarchyFieldName] === false) return null; 
     const res = getComponent(obj, componentType) as IComponent | null;
-    if (includeInactive === false && res?.enabled === false) return null;
+    if (includeInactive === false && (res?.enabled === false || res?.activeAndEnabled === false)) return null;
     if (res) return res as T;
     for (let i = 0; i < obj?.children?.length; i++) {
-        const res = getComponentInChildren(obj.children[i], componentType);
+        const res = getComponentInChildren(obj.children[i], componentType, includeInactive);
         if (res) return res;
     }
     return null;

package/src/engine/engine_context.ts

@@ -43,6 +43,7 @@ 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';
+import { Telemetry } from './engine_license.js';
 
 const debug = getParam("debugcontext");
 const stats = getParam("stats");
@@ -1403,6 +1404,7 @@ export class Context implements IContext {
 				if (this._renderlooperrors >= 3) {
 					console.warn("Stopping render loop due to error")
 					this.renderer.setAnimationLoop(null);
+					Telemetry.sendError(Context.Current, "renderloop", err instanceof Error ? err : new Error(String(err)) );
 				}
 				this.domElement.dispatchEvent(new CustomEvent("error", { detail: err }));
 			}

package/src/engine/engine_input.ts

@@ -150,6 +150,12 @@ export class NEPointerEvent extends PointerEvent {
     override get pointerType(): PointerTypeNames { return this._pointerType; }
     private readonly _pointerType: PointerTypeNames;
 
+    /**
+     * The button name that raised this event (e.g. for mouse events "left", "right", "middle" or for XRTrigger "xr-standard-trigger" or "xr-standard-thumbstick")    
+     * Use {@link button} to get the numeric button index (e.g. 0, 1, 2...) on the controller or mouse.
+     */
+    readonly buttonName?: ButtonName | "none" = undefined;
+
     // this is set via the init arguments (we override it here for intellisense to show the string options)
     /** The input that raised this event like `pointerdown` */
     override get type(): InputEventNames { return this._type; }
@@ -176,6 +182,7 @@ export class NEPointerEvent extends PointerEvent {
         this.mode = init.mode;
         this._ray = init.ray;
         this.space = init.device;
+        this.buttonName = init.buttonName;
     }
 
     private _immediatePropagationStopped = false;