@pacem/pacem-3d 1.0.3 → 1.0.5-archimedes

package/dist/browser/pacem-3d.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-3d v1.0.3 (https://js.pacem.it)
+ * @pacem/pacem-3d v1.0.5-archimedes (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -887,84 +887,155 @@
     class Pacem3DAdapterElement extends pacemCore.PacemEventTarget {
     }
 
-    //namespace Pacem.Components.Drawing3D {
-    /** @deprecated*/
-    class Pacem3DDetector {
-        /** Probes the browser for WebGL support by attempting to create a rendering context, populating {@link info} and {@link supported}. */
-        constructor() {
-            this._detected = {
-                supported: false, info: {}
-            };
-            let cvs = document.createElement('canvas');
-            let contextNames = ['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'];
-            let ctx;
-            let getParam = function (str) {
-                if (!str)
-                    return undefined;
-                return ctx.getParameter(str);
-            };
-            // addLine
-            let addLine = (section, name, value) => {
-                let detected = this._detected;
-                var info = detected.info[section] = detected.info[section] || {};
-                name = name.replace(/[^\w]+/g, '');
-                name = name.substring(0, 1).toLowerCase() + name.substring(1);
-                info[name] = value;
-            };
-            if (navigator.userAgent.indexOf('MSIE') >= 0) {
-                try {
-                    ctx = window['WebGLHelper'].CreateGLContext(cvs, 'canvas');
+    //namespace Pacem.Drawing3D {
+    /**
+     * Property decorator factory that turns the decorated field into an accessor backed by a private field, invoking
+     * `callback` with the property name and old/new values whenever it is set to a different value. Used by
+     * {@link NodeGeometry}/{@link LineGeometry}/{@link MeshGeometry} to flag themselves as dirty ({@link StalePropertyFlag.Geometry})
+     * whenever their vertex data changes.
+     * @param callback Invoked (with `this` bound to the decorated instance) on every effective change of the property.
+     */
+    function NotifyChange(callback) {
+        return (target, prop, descriptor) => {
+            const backingField = `_${prop}_${pacemCore.Utils.uniqueCode()}_backingField`;
+            function getter() {
+                return this[backingField];
+            }
+            function setter(val) {
+                if (val !== this[backingField]) {
+                    const old = this[backingField];
+                    this[backingField] = val;
+                    callback.call(this, prop, old, val);
                 }
-                catch (e) { }
             }
-            else {
-                for (var i = 0; i < contextNames.length; i++) {
-                    try {
-                        ctx = cvs.getContext(contextNames[i]);
-                        if (ctx) {
-                            addLine('main', 'Context Name', contextNames[i]);
-                            break;
-                        }
-                    }
-                    catch (e) { }
+            //if (delete target[prop]) {
+            Object.defineProperty(target, prop, {
+                get: function () {
+                    return getter.call(this);
+                },
+                set: function (val) {
+                    setter.call(this, val);
+                },
+                enumerable: true,
+                configurable: false
+            });
+            //}
+        };
+    }
+
+    var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    /**
+     * Abstract base for the concrete geometry classes ({@link LineGeometry}, {@link MeshGeometry}) that back a
+     * {@link Pacem3DMeshElement}'s `geometry` property, providing shared bounding-volume computation helpers.
+     */
+    class NodeGeometry {
+        constructor(positions = []) {
+            this.positions = positions;
+        }
+        /** Computes the centroid (average) of the given positions. */
+        static barycenter(positions) {
+            var bary = { x: 0, y: 0, z: 0 };
+            if (!pacemCore.Utils.isNullOrEmpty(positions)) {
+                var count = positions.length;
+                for (var i = 0; i < positions.length; i++) {
+                    var pt = positions[i];
+                    bary.x += pt.x;
+                    bary.y += pt.y;
+                    bary.z += pt.z;
                 }
+                var countDbl = 1.0 * count;
+                bary.x /= countDbl;
+                bary.y /= countDbl;
+                bary.z /= countDbl;
             }
-            this._detected.supported = !!ctx;
-            addLine('main', 'Platform', navigator.platform);
-            addLine('main', 'Agent', navigator.userAgent);
-            if (ctx) {
-                addLine('main', 'Vendor', getParam(ctx.VENDOR));
-                addLine('main', 'Version', getParam(ctx.VERSION));
-                addLine('main', 'Renderer', getParam(ctx.RENDERER));
-                addLine('main', 'Shading Language Version', getParam(ctx.SHADING_LANGUAGE_VERSION));
-                addLine('bits', 'Rgba Bits', getParam(ctx.RED_BITS) + ', ' + getParam(ctx.GREEN_BITS) + ', ' + getParam(ctx.BLUE_BITS) + ', ' + getParam(ctx.ALPHA_BITS));
-                addLine('bits', 'Depth Bits', getParam(ctx.DEPTH_BITS));
-                addLine('shader', 'Max Vertex Attribs', getParam(ctx.MAX_VERTEX_ATTRIBS));
-                addLine('shader', 'Max Vertex Texture Image Units', getParam(ctx.MAX_VERTEX_TEXTURE_IMAGE_UNITS));
-                addLine('shader', 'Max Varying Vectors', getParam(ctx.MAX_VARYING_VECTORS));
-                addLine('shader', 'Max Uniform Vectors', getParam(ctx.MAX_VERTEX_UNIFORM_VECTORS));
-                addLine('tex', 'Max Combined Texture Image Units', getParam(ctx.MAX_COMBINED_TEXTURE_IMAGE_UNITS));
-                addLine('tex', 'Max Texture Size', getParam(ctx.MAX_TEXTURE_SIZE));
-                addLine('tex', 'Max Cube Map Texture Size', getParam(ctx.MAX_CUBE_MAP_TEXTURE_SIZE));
-                addLine('tex', 'Num. Compressed Texture Formats', getParam(ctx.COMPRESSED_TEXTURE_FORMATS));
-                addLine('misc', 'Max Render Buffer Size', getParam(ctx.MAX_RENDERBUFFER_SIZE));
-                addLine('misc', 'Max Viewport Dimensions', getParam(ctx.MAX_VIEWPORT_DIMS));
-                addLine('misc', 'Aliased Line Width Range', getParam(ctx.ALIASED_LINE_WIDTH_RANGE));
-                addLine('misc', 'Aliased Point Size Range', getParam(ctx.ALIASED_POINT_SIZE_RANGE));
-                addLine('misc', 'Supported Extensions', ctx.getSupportedExtensions() || []);
+            return bary;
+        }
+        /** Computes the axis-aligned {@link Box3D} enclosing the given positions. */
+        static boundingBox(positions) {
+            const output = {
+                minX: +Infinity, minY: +Infinity, minZ: +Infinity,
+                maxX: -Infinity, maxY: -Infinity, maxZ: -Infinity
+            };
+            if (!pacemCore.Utils.isNullOrEmpty(positions)) {
+                for (var i = 0; i < positions.length; i++) {
+                    var pt = positions[i];
+                    output.minX = Math.min(output.minX, pt.x);
+                    output.minY = Math.min(output.minY, pt.y);
+                    output.minZ = Math.min(output.minZ, pt.z);
+                    output.maxX = Math.max(output.maxX, pt.x);
+                    output.maxY = Math.max(output.maxY, pt.y);
+                    output.maxZ = Math.max(output.maxZ, pt.z);
+                }
             }
+            return output;
         }
-        /** @readonly Gets the detected WebGL capabilities/limits, grouped by section (`main`, `bits`, `shader`, `tex`, `misc`). */
-        get info() {
-            return this._detected.info;
+        /** Marks the geometry as stale, flagging it with {@link StalePropertyFlag.Geometry} for the next render. */
+        setAsDirty() {
+            setSelfAsDirty.call(this);
         }
-        /** @readonly Gets whether a WebGL rendering context could be created on this browser/device. */
-        get supported() {
-            return this._detected.supported;
+    }
+    function setSelfAsDirty() {
+        const me = this;
+        me.flags = [/* no further specifications, other than 'geometry' */ StalePropertyFlag.Geometry];
+    }
+    /** A {@link NodeGeometry} rendered as a polyline through its {@link positions} (no faces/triangles). */
+    class LineGeometry extends NodeGeometry {
+    }
+    __decorate$j([
+        NotifyChange(setSelfAsDirty)
+    ], LineGeometry.prototype, "positions", void 0);
+    /** A {@link MeshGeometry} implementation with lazily-computed {@link barycenter}/{@link boundingBox} and settable {@link boundingSphere}, used as the `geometry` of a {@link Pacem3DMeshElement}. */
+    class MeshGeometry extends NodeGeometry {
+        #boundingBox;
+        #boundingSphere;
+        #barycenter;
+        /** Gets or sets the centroid of {@link positions}; computed on first access if not explicitly set. */
+        get barycenter() {
+            return this.#barycenter ??= NodeGeometry.barycenter(this.positions);
+        }
+        set barycenter(point) {
+            this.#barycenter = point;
+        }
+        /** Gets or sets the axis-aligned bounding box; computed from {@link positions} on first access if not explicitly set. */
+        get boundingBox() {
+            return this.#boundingBox ??= NodeGeometry.boundingBox(this.positions);
+        }
+        set boundingBox(bbox) {
+            this.#boundingBox = bbox;
+        }
+        /** Gets or sets the bounding sphere. */
+        get boundingSphere() {
+            return this.#boundingSphere;
+        }
+        set boundingSphere(sphere) {
+            this.#boundingSphere = sphere;
+        }
+        constructor(positions, triangleIndices, textureCoordinates = [], normals = []) {
+            super(positions);
+            this.triangleIndices = triangleIndices;
+            this.textureCoordinates = textureCoordinates;
+            this.normals = normals;
         }
     }
+    __decorate$j([
+        NotifyChange(setSelfAsDirty)
+    ], MeshGeometry.prototype, "positions", void 0);
+    __decorate$j([
+        NotifyChange(setSelfAsDirty)
+    ], MeshGeometry.prototype, "triangleIndices", void 0);
+    __decorate$j([
+        NotifyChange(setSelfAsDirty)
+    ], MeshGeometry.prototype, "textureCoordinates", void 0);
+    __decorate$j([
+        NotifyChange(setSelfAsDirty)
+    ], MeshGeometry.prototype, "normals", void 0);
 
-    var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1054,50 +1125,280 @@
                 }
             }
         }
-        viewActivatedCallback() {
-            super.viewActivatedCallback();
-            this.updateMaterial();
-        }
-        /** Recomputes {@link material} via {@link createMaterial}, flagging it as {@link StalePropertyFlag.Material}. */
-        updateMaterial() {
-            this.createMaterial().then(m => {
-                this.material = pacemCore.Utils.extend(m, { flags: [StalePropertyFlag.Material] });
-            });
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.updateMaterial();
+        }
+        /** Recomputes {@link material} via {@link createMaterial}, flagging it as {@link StalePropertyFlag.Material}. */
+        updateMaterial() {
+            this.createMaterial().then(m => {
+                this.material = pacemCore.Utils.extend(m, { flags: [StalePropertyFlag.Material] });
+            });
+        }
+        /** Builds the base {@link Material} out of the shared watched attributes (`opacity`, `wireframe`, `color`, `hide`, `map`); overridden by subclasses to add their shader-specific properties. */
+        async createMaterial() {
+            return {
+                opacity: this.opacity ?? 1.0,
+                wireframe: this.wireframe ?? false,
+                color: this.color || pacemCore.Utils.Css.getVariableValue(`--${pacemCore.PCSS}-color-primary`),
+                visible: !(this.hide ?? false),
+                map: this.map,
+                texture: await this._loadMap(this.map),
+                shader: this.shader,
+                flags: [],
+            };
+        }
+    }
+    __decorate$i([
+        pacemCore.Watch()
+    ], MaterialElement.prototype, "material", void 0);
+    __decorate$i([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], MaterialElement.prototype, "opacity", void 0);
+    __decorate$i([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], MaterialElement.prototype, "wireframe", void 0);
+    __decorate$i([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], MaterialElement.prototype, "color", void 0);
+    __decorate$i([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], MaterialElement.prototype, "hide", void 0);
+    __decorate$i([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], MaterialElement.prototype, "map", void 0);
+
+    var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Drawing3D {
+    /** Parses the text content of a Wavefront `.obj` file into a {@link MeshGeometry} (vertices, triangle indices, UVs and normals). */
+    class OBJParser {
+        /**
+         * Parses `v` (vertex), `vt` (texture coordinate), `vn` (normal) and `f` (face) records out of `content`,
+         * triangulating any face with more than 3 vertices (fan triangulation).
+         */
+        static parse(content) {
+            // vertices
+            const vertices = [];
+            const vParser = /^v((\s+-?[\d\.]+){3})/gm;
+            let arr = vParser.exec(content);
+            while (arr && arr.length) {
+                vertices.push(Point3DConverter.convert(arr[1]));
+                arr = vParser.exec(content);
+            }
+            // uvmap
+            const vt = [];
+            const tParser = /^vt((\s+-?[\d\.]+){2})/gm;
+            arr = tParser.exec(content);
+            while (arr && arr.length) {
+                vt.push(pacemFoundation.Point.parse(arr[1]));
+                arr = tParser.exec(content);
+            }
+            // normals
+            const vn = [];
+            const nParser = /^vn((\s+-?[\d\.]+){3})/gm;
+            arr = nParser.exec(content);
+            while (arr && arr.length) {
+                vn.push(Point3DConverter.convert(arr[1]));
+                arr = nParser.exec(content);
+            }
+            const normals = [];
+            const uv = [];
+            const positions = [];
+            const fParser = /^f((\s+([\d]+\/[\d]+\/[\d]+)){3,})/gm;
+            arr = fParser.exec(content);
+            while (arr && arr.length) {
+                const fjParser = /([\d]+)\/([\d]+)\/([\d]+)/g;
+                const face = arr[1];
+                let jArr = fjParser.exec(face);
+                let jIndex = 0;
+                var vIndex0, tIndex0, nIndex0;
+                var vIndex, tIndex, nIndex;
+                while (jArr && jArr.length) {
+                    if (jIndex > 2) {
+                        // 4+ vertex-face
+                        // but mesh only allows triangluar faces
+                        // re-add(0)
+                        positions.push(vIndex0);
+                        uv.push(vt[tIndex0]);
+                        normals.push(vn[nIndex0]);
+                        // re-add(last)
+                        positions.push(vIndex);
+                        uv.push(vt[tIndex]);
+                        normals.push(vn[nIndex]);
+                    }
+                    // OBJ indexes are 1-based
+                    vIndex = parseInt(jArr[1]) - 1;
+                    tIndex = parseInt(jArr[2]) - 1;
+                    nIndex = parseInt(jArr[3]) - 1;
+                    positions.push(vIndex);
+                    uv.push(vt[tIndex]);
+                    normals.push(vn[nIndex]);
+                    if (jIndex === 0) {
+                        vIndex0 = vIndex;
+                        tIndex0 = tIndex;
+                        nIndex0 = nIndex;
+                    }
+                    jIndex++;
+                    jArr = fjParser.exec(face);
+                }
+                // loop
+                arr = fParser.exec(content);
+            }
+            // faces
+            return new MeshGeometry(vertices, positions, uv, normals);
+        }
+    }
+    /** Model-file parsing entry point, registered as the `parse3D` markup transformer for converting raw asset text into a {@link NodeGeometry} or {@link Material}. */
+    class Parser3D {
+        /**
+         * Parses `content` according to `type` into a {@link NodeGeometry} (currently only the `'obj'` Wavefront format,
+         * via {@link OBJParser}) or a {@link Material}. Throws for any other/unsupported `type` (e.g. `'mtl'`, not yet implemented).
+         */
+        static parseGeometry(content, type) {
+            switch (type.toLowerCase()) {
+                case 'obj':
+                    return OBJParser.parse(content);
+                default:
+                    throw new Error(`Type '${type}' is not supported.`);
+            }
+        }
+    }
+    __decorate$h([
+        pacemCore.Transformer('parse3D')
+    ], Parser3D, "parseGeometry", null);
+
+    var indexDrawing3d = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        BooleanOrNumberConverter: BooleanOrNumberConverter,
+        DragEvent: DragEvent,
+        get KnownShader () { return KnownShader; },
+        LineGeometry: LineGeometry,
+        MaterialElement: MaterialElement,
+        MeshGeometry: MeshGeometry,
+        NodeGeometry: NodeGeometry,
+        NotifyChange: NotifyChange,
+        Pacem3DAdapterElement: Pacem3DAdapterElement,
+        Pacem3DCameraElement: Pacem3DCameraElement,
+        get Pacem3DGroupElement () { return Pacem3DGroupElement; },
+        get Pacem3DLightElement () { return Pacem3DLightElement; },
+        get Pacem3DMeshElement () { return Pacem3DMeshElement; },
+        get Pacem3DObjectElement () { return Pacem3DObjectElement; },
+        get Pacem3DOrthographicCameraElement () { return Pacem3DOrthographicCameraElement; },
+        get Pacem3DPerspectiveCameraElement () { return Pacem3DPerspectiveCameraElement; },
+        Point3DConverter: Point3DConverter,
+        Point3DOrNumberConverter: Point3DOrNumberConverter,
+        QuaternionConverter: QuaternionConverter,
+        RenderableElement: RenderableElement,
+        RenderableEvent: RenderableEvent,
+        get StalePropertyFlag () { return StalePropertyFlag; },
+        UI3DEvent: UI3DEvent,
+        Ui3DElement: Ui3DElement,
+        computePlaneNormal: computePlaneNormal,
+        computeSharpVertexNormals: computeSharpVertexNormals,
+        isBasicMaterial: isBasicMaterial,
+        isCamera: isCamera,
+        isGeometry: isGeometry,
+        isGroup: isGroup,
+        isInteraction: isInteraction,
+        isLambertMaterial: isLambertMaterial,
+        isLight: isLight,
+        isLineMaterial: isLineMaterial,
+        isMaterial: isMaterial,
+        isMesh: isMesh,
+        isMeshGeometry: isMeshGeometry,
+        isOrthographicCamera: isOrthographicCamera,
+        isPerspectiveCamera: isPerspectiveCamera,
+        isPhongMaterial: isPhongMaterial,
+        isRenderable: isRenderable,
+        isShaderMaterial: isShaderMaterial,
+        isStage: isStage,
+        isStandardMaterial: isStandardMaterial,
+        isUi3DObject: isUi3DObject
+    });
+
+    //namespace Pacem.Components.Drawing3D {
+    /** @deprecated*/
+    class Pacem3DDetector {
+        /** Probes the browser for WebGL support by attempting to create a rendering context, populating {@link info} and {@link supported}. */
+        constructor() {
+            this._detected = {
+                supported: false, info: {}
+            };
+            let cvs = document.createElement('canvas');
+            let contextNames = ['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'];
+            let ctx;
+            let getParam = function (str) {
+                if (!str)
+                    return undefined;
+                return ctx.getParameter(str);
+            };
+            // addLine
+            let addLine = (section, name, value) => {
+                let detected = this._detected;
+                var info = detected.info[section] = detected.info[section] || {};
+                name = name.replace(/[^\w]+/g, '');
+                name = name.substring(0, 1).toLowerCase() + name.substring(1);
+                info[name] = value;
+            };
+            if (navigator.userAgent.indexOf('MSIE') >= 0) {
+                try {
+                    ctx = window['WebGLHelper'].CreateGLContext(cvs, 'canvas');
+                }
+                catch (e) { }
+            }
+            else {
+                for (var i = 0; i < contextNames.length; i++) {
+                    try {
+                        ctx = cvs.getContext(contextNames[i]);
+                        if (ctx) {
+                            addLine('main', 'Context Name', contextNames[i]);
+                            break;
+                        }
+                    }
+                    catch (e) { }
+                }
+            }
+            this._detected.supported = !!ctx;
+            addLine('main', 'Platform', navigator.platform);
+            addLine('main', 'Agent', navigator.userAgent);
+            if (ctx) {
+                addLine('main', 'Vendor', getParam(ctx.VENDOR));
+                addLine('main', 'Version', getParam(ctx.VERSION));
+                addLine('main', 'Renderer', getParam(ctx.RENDERER));
+                addLine('main', 'Shading Language Version', getParam(ctx.SHADING_LANGUAGE_VERSION));
+                addLine('bits', 'Rgba Bits', getParam(ctx.RED_BITS) + ', ' + getParam(ctx.GREEN_BITS) + ', ' + getParam(ctx.BLUE_BITS) + ', ' + getParam(ctx.ALPHA_BITS));
+                addLine('bits', 'Depth Bits', getParam(ctx.DEPTH_BITS));
+                addLine('shader', 'Max Vertex Attribs', getParam(ctx.MAX_VERTEX_ATTRIBS));
+                addLine('shader', 'Max Vertex Texture Image Units', getParam(ctx.MAX_VERTEX_TEXTURE_IMAGE_UNITS));
+                addLine('shader', 'Max Varying Vectors', getParam(ctx.MAX_VARYING_VECTORS));
+                addLine('shader', 'Max Uniform Vectors', getParam(ctx.MAX_VERTEX_UNIFORM_VECTORS));
+                addLine('tex', 'Max Combined Texture Image Units', getParam(ctx.MAX_COMBINED_TEXTURE_IMAGE_UNITS));
+                addLine('tex', 'Max Texture Size', getParam(ctx.MAX_TEXTURE_SIZE));
+                addLine('tex', 'Max Cube Map Texture Size', getParam(ctx.MAX_CUBE_MAP_TEXTURE_SIZE));
+                addLine('tex', 'Num. Compressed Texture Formats', getParam(ctx.COMPRESSED_TEXTURE_FORMATS));
+                addLine('misc', 'Max Render Buffer Size', getParam(ctx.MAX_RENDERBUFFER_SIZE));
+                addLine('misc', 'Max Viewport Dimensions', getParam(ctx.MAX_VIEWPORT_DIMS));
+                addLine('misc', 'Aliased Line Width Range', getParam(ctx.ALIASED_LINE_WIDTH_RANGE));
+                addLine('misc', 'Aliased Point Size Range', getParam(ctx.ALIASED_POINT_SIZE_RANGE));
+                addLine('misc', 'Supported Extensions', ctx.getSupportedExtensions() || []);
+            }
+        }
+        /** @readonly Gets the detected WebGL capabilities/limits, grouped by section (`main`, `bits`, `shader`, `tex`, `misc`). */
+        get info() {
+            return this._detected.info;
         }
-        /** Builds the base {@link Material} out of the shared watched attributes (`opacity`, `wireframe`, `color`, `hide`, `map`); overridden by subclasses to add their shader-specific properties. */
-        async createMaterial() {
-            return {
-                opacity: this.opacity ?? 1.0,
-                wireframe: this.wireframe ?? false,
-                color: this.color || pacemCore.Utils.Css.getVariableValue(`--${pacemCore.PCSS}-color-primary`),
-                visible: !(this.hide ?? false),
-                map: this.map,
-                texture: await this._loadMap(this.map),
-                shader: this.shader,
-                flags: [],
-            };
+        /** @readonly Gets whether a WebGL rendering context could be created on this browser/device. */
+        get supported() {
+            return this._detected.supported;
         }
     }
-    __decorate$j([
-        pacemCore.Watch()
-    ], MaterialElement.prototype, "material", void 0);
-    __decorate$j([
-        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
-    ], MaterialElement.prototype, "opacity", void 0);
-    __decorate$j([
-        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
-    ], MaterialElement.prototype, "wireframe", void 0);
-    __decorate$j([
-        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
-    ], MaterialElement.prototype, "color", void 0);
-    __decorate$j([
-        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
-    ], MaterialElement.prototype, "hide", void 0);
-    __decorate$j([
-        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
-    ], MaterialElement.prototype, "map", void 0);
 
-    var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1110,11 +1411,11 @@
             super(KnownShader.Basic);
         }
     };
-    BasicMaterialElement = __decorate$i([
+    BasicMaterialElement = __decorate$g([
         pacemCore.CustomElement({ tagName: `${pacemCore.P}-${TAG_MIDDLE_NAME}-material-basic` })
     ], BasicMaterialElement);
 
-    var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1147,20 +1448,20 @@
             }
         }
     };
-    __decorate$h([
+    __decorate$f([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], LambertMaterialElement.prototype, "emissiveColor", void 0);
-    __decorate$h([
+    __decorate$f([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], LambertMaterialElement.prototype, "reflectivity", void 0);
-    __decorate$h([
+    __decorate$f([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], LambertMaterialElement.prototype, "refractionRatio", void 0);
-    LambertMaterialElement = __decorate$h([
+    LambertMaterialElement = __decorate$f([
         pacemCore.CustomElement({ tagName: `${pacemCore.P}-${TAG_MIDDLE_NAME}-material-lambert` })
     ], LambertMaterialElement);
 
-    var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1195,16 +1496,16 @@
             }, await super.createMaterial());
         }
     };
-    __decorate$g([
+    __decorate$e([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], LineMaterialElement.prototype, "lineWidth", void 0);
-    __decorate$g([
+    __decorate$e([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], LineMaterialElement.prototype, "lineJoin", void 0);
-    __decorate$g([
+    __decorate$e([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], LineMaterialElement.prototype, "lineCap", void 0);
-    __decorate$g([
+    __decorate$e([
         pacemCore.Watch({
             emit: false, converter: {
                 convert: (attr) => attr?.split(',').map(i => parseInt(i)).filter(i => !Number.isNaN(i)),
@@ -1212,11 +1513,11 @@
             }
         })
     ], LineMaterialElement.prototype, "dashArray", void 0);
-    LineMaterialElement = __decorate$g([
+    LineMaterialElement = __decorate$e([
         pacemCore.CustomElement({ tagName: `${pacemCore.P}-${TAG_MIDDLE_NAME}-material-line` })
     ], LineMaterialElement);
 
-    var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1255,29 +1556,29 @@
             }
         }
     };
-    __decorate$f([
+    __decorate$d([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], PhongMaterialElement.prototype, "emissiveColor", void 0);
-    __decorate$f([
+    __decorate$d([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PhongMaterialElement.prototype, "reflectivity", void 0);
-    __decorate$f([
+    __decorate$d([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PhongMaterialElement.prototype, "refractionRatio", void 0);
-    __decorate$f([
+    __decorate$d([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], PhongMaterialElement.prototype, "specularColor", void 0);
-    __decorate$f([
+    __decorate$d([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PhongMaterialElement.prototype, "shininess", void 0);
-    __decorate$f([
+    __decorate$d([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
     ], PhongMaterialElement.prototype, "flatShading", void 0);
-    PhongMaterialElement = __decorate$f([
+    PhongMaterialElement = __decorate$d([
         pacemCore.CustomElement({ tagName: `${pacemCore.P}-${TAG_MIDDLE_NAME}-material-phong` })
     ], PhongMaterialElement);
 
-    var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1314,26 +1615,26 @@
             }
         }
     };
-    __decorate$e([
+    __decorate$c([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], StandardMaterialElement.prototype, "emissiveColor", void 0);
-    __decorate$e([
+    __decorate$c([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], StandardMaterialElement.prototype, "refractionRatio", void 0);
-    __decorate$e([
+    __decorate$c([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], StandardMaterialElement.prototype, "roughness", void 0);
-    __decorate$e([
+    __decorate$c([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], StandardMaterialElement.prototype, "metalness", void 0);
-    __decorate$e([
+    __decorate$c([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
     ], StandardMaterialElement.prototype, "flatShading", void 0);
-    StandardMaterialElement = __decorate$e([
+    StandardMaterialElement = __decorate$c([
         pacemCore.CustomElement({ tagName: `${pacemCore.P}-${TAG_MIDDLE_NAME}-material-standard` })
     ], StandardMaterialElement);
 
-    var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1354,159 +1655,11 @@
             }
         }
     }
-    __decorate$d([
+    __decorate$b([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
     ], Pacem3DPrimitiveElement.prototype, "geometry", void 0);
 
-    //namespace Pacem.Drawing3D {
-    /**
-     * Property decorator factory that turns the decorated field into an accessor backed by a private field, invoking
-     * `callback` with the property name and old/new values whenever it is set to a different value. Used by
-     * {@link NodeGeometry}/{@link LineGeometry}/{@link MeshGeometry} to flag themselves as dirty ({@link StalePropertyFlag.Geometry})
-     * whenever their vertex data changes.
-     * @param callback Invoked (with `this` bound to the decorated instance) on every effective change of the property.
-     */
-    function NotifyChange(callback) {
-        return (target, prop, descriptor) => {
-            const backingField = `_${prop}_${pacemCore.Utils.uniqueCode()}_backingField`;
-            function getter() {
-                return this[backingField];
-            }
-            function setter(val) {
-                if (val !== this[backingField]) {
-                    const old = this[backingField];
-                    this[backingField] = val;
-                    callback.call(this, prop, old, val);
-                }
-            }
-            //if (delete target[prop]) {
-            Object.defineProperty(target, prop, {
-                get: function () {
-                    return getter.call(this);
-                },
-                set: function (val) {
-                    setter.call(this, val);
-                },
-                enumerable: true,
-                configurable: false
-            });
-            //}
-        };
-    }
-
-    var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    /**
-     * Abstract base for the concrete geometry classes ({@link LineGeometry}, {@link MeshGeometry}) that back a
-     * {@link Pacem3DMeshElement}'s `geometry` property, providing shared bounding-volume computation helpers.
-     */
-    class NodeGeometry {
-        constructor(positions = []) {
-            this.positions = positions;
-        }
-        /** Computes the centroid (average) of the given positions. */
-        static barycenter(positions) {
-            var bary = { x: 0, y: 0, z: 0 };
-            if (!pacemCore.Utils.isNullOrEmpty(positions)) {
-                var count = positions.length;
-                for (var i = 0; i < positions.length; i++) {
-                    var pt = positions[i];
-                    bary.x += pt.x;
-                    bary.y += pt.y;
-                    bary.z += pt.z;
-                }
-                var countDbl = 1.0 * count;
-                bary.x /= countDbl;
-                bary.y /= countDbl;
-                bary.z /= countDbl;
-            }
-            return bary;
-        }
-        /** Computes the axis-aligned {@link Box3D} enclosing the given positions. */
-        static boundingBox(positions) {
-            const output = {
-                minX: +Infinity, minY: +Infinity, minZ: +Infinity,
-                maxX: -Infinity, maxY: -Infinity, maxZ: -Infinity
-            };
-            if (!pacemCore.Utils.isNullOrEmpty(positions)) {
-                for (var i = 0; i < positions.length; i++) {
-                    var pt = positions[i];
-                    output.minX = Math.min(output.minX, pt.x);
-                    output.minY = Math.min(output.minY, pt.y);
-                    output.minZ = Math.min(output.minZ, pt.z);
-                    output.maxX = Math.max(output.maxX, pt.x);
-                    output.maxY = Math.max(output.maxY, pt.y);
-                    output.maxZ = Math.max(output.maxZ, pt.z);
-                }
-            }
-            return output;
-        }
-        /** Marks the geometry as stale, flagging it with {@link StalePropertyFlag.Geometry} for the next render. */
-        setAsDirty() {
-            setSelfAsDirty.call(this);
-        }
-    }
-    function setSelfAsDirty() {
-        const me = this;
-        me.flags = [/* no further specifications, other than 'geometry' */ StalePropertyFlag.Geometry];
-    }
-    /** A {@link NodeGeometry} rendered as a polyline through its {@link positions} (no faces/triangles). */
-    class LineGeometry extends NodeGeometry {
-    }
-    __decorate$c([
-        NotifyChange(setSelfAsDirty)
-    ], LineGeometry.prototype, "positions", void 0);
-    /** A {@link MeshGeometry} implementation with lazily-computed {@link barycenter}/{@link boundingBox} and settable {@link boundingSphere}, used as the `geometry` of a {@link Pacem3DMeshElement}. */
-    class MeshGeometry extends NodeGeometry {
-        #boundingBox;
-        #boundingSphere;
-        #barycenter;
-        /** Gets or sets the centroid of {@link positions}; computed on first access if not explicitly set. */
-        get barycenter() {
-            return this.#barycenter ??= NodeGeometry.barycenter(this.positions);
-        }
-        set barycenter(point) {
-            this.#barycenter = point;
-        }
-        /** Gets or sets the axis-aligned bounding box; computed from {@link positions} on first access if not explicitly set. */
-        get boundingBox() {
-            return this.#boundingBox ??= NodeGeometry.boundingBox(this.positions);
-        }
-        set boundingBox(bbox) {
-            this.#boundingBox = bbox;
-        }
-        /** Gets or sets the bounding sphere. */
-        get boundingSphere() {
-            return this.#boundingSphere;
-        }
-        set boundingSphere(sphere) {
-            this.#boundingSphere = sphere;
-        }
-        constructor(positions, triangleIndices, textureCoordinates = [], normals = []) {
-            super(positions);
-            this.triangleIndices = triangleIndices;
-            this.textureCoordinates = textureCoordinates;
-            this.normals = normals;
-        }
-    }
-    __decorate$c([
-        NotifyChange(setSelfAsDirty)
-    ], MeshGeometry.prototype, "positions", void 0);
-    __decorate$c([
-        NotifyChange(setSelfAsDirty)
-    ], MeshGeometry.prototype, "triangleIndices", void 0);
-    __decorate$c([
-        NotifyChange(setSelfAsDirty)
-    ], MeshGeometry.prototype, "textureCoordinates", void 0);
-    __decorate$c([
-        NotifyChange(setSelfAsDirty)
-    ], MeshGeometry.prototype, "normals", void 0);
-
-    var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1708,29 +1861,29 @@
             }
         }
     };
-    __decorate$b([
+    __decorate$a([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemBoxElement.prototype, "width", void 0);
-    __decorate$b([
+    __decorate$a([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemBoxElement.prototype, "height", void 0);
-    __decorate$b([
+    __decorate$a([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemBoxElement.prototype, "depth", void 0);
-    __decorate$b([
+    __decorate$a([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemBoxElement.prototype, "widthSegments", void 0);
-    __decorate$b([
+    __decorate$a([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemBoxElement.prototype, "heightSegments", void 0);
-    __decorate$b([
+    __decorate$a([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemBoxElement.prototype, "depthSegments", void 0);
-    PacemBoxElement = PacemBoxElement_1 = __decorate$b([
+    PacemBoxElement = PacemBoxElement_1 = __decorate$a([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-box' })
     ], PacemBoxElement);
 
-    var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1868,26 +2021,26 @@
             }
         }
     };
-    __decorate$a([
+    __decorate$9([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemConeElement.prototype, "radius", void 0);
-    __decorate$a([
+    __decorate$9([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemConeElement.prototype, "height", void 0);
-    __decorate$a([
+    __decorate$9([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemConeElement.prototype, "sides", void 0);
-    __decorate$a([
+    __decorate$9([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemConeElement.prototype, "heightSegments", void 0);
-    __decorate$a([
+    __decorate$9([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemConeElement.prototype, "capSegments", void 0);
-    PacemConeElement = PacemConeElement_1 = __decorate$a([
+    PacemConeElement = PacemConeElement_1 = __decorate$9([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-cone' })
     ], PacemConeElement);
 
-    var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2071,26 +2224,26 @@
             }
         }
     };
-    __decorate$9([
+    __decorate$8([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemCylinderElement.prototype, "radius", void 0);
-    __decorate$9([
+    __decorate$8([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemCylinderElement.prototype, "height", void 0);
-    __decorate$9([
+    __decorate$8([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemCylinderElement.prototype, "sides", void 0);
-    __decorate$9([
+    __decorate$8([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemCylinderElement.prototype, "heightSegments", void 0);
-    __decorate$9([
+    __decorate$8([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemCylinderElement.prototype, "capSegments", void 0);
-    PacemCylinderElement = PacemCylinderElement_1 = __decorate$9([
+    PacemCylinderElement = PacemCylinderElement_1 = __decorate$8([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-cylinder' })
     ], PacemCylinderElement);
 
-    var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2118,14 +2271,14 @@
             }
         }
     };
-    __decorate$8([
+    __decorate$7([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
     ], PacemLineElement.prototype, "positions", void 0);
-    PacemLineElement = PacemLineElement_1 = __decorate$8([
+    PacemLineElement = PacemLineElement_1 = __decorate$7([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-line' })
     ], PacemLineElement);
 
-    var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2196,23 +2349,23 @@
             }
         }
     };
-    __decorate$7([
+    __decorate$6([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemPlaneElement.prototype, "width", void 0);
-    __decorate$7([
+    __decorate$6([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemPlaneElement.prototype, "length", void 0);
-    __decorate$7([
+    __decorate$6([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemPlaneElement.prototype, "widthSegments", void 0);
-    __decorate$7([
+    __decorate$6([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemPlaneElement.prototype, "lengthSegments", void 0);
-    PacemPlaneElement = PacemPlaneElement_1 = __decorate$7([
+    PacemPlaneElement = PacemPlaneElement_1 = __decorate$6([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-plane' })
     ], PacemPlaneElement);
 
-    var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2257,7 +2410,7 @@
             return this.createMeshGeometry(1.0);
         }
     }
-    __decorate$6([
+    __decorate$5([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PolyhedronElement.prototype, "radius", void 0);
     // #region Tetrahedron
@@ -2295,7 +2448,7 @@
             return PacemTetrahedronElement_1.createMeshGeometry(radius);
         }
     };
-    PacemTetrahedronElement = PacemTetrahedronElement_1 = __decorate$6([
+    PacemTetrahedronElement = PacemTetrahedronElement_1 = __decorate$5([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-tetrahedron' })
     ], PacemTetrahedronElement);
     // #endregion
@@ -2336,7 +2489,7 @@
             return PacemOctahedronElement_1.createMeshGeometry(radius);
         }
     };
-    PacemOctahedronElement = PacemOctahedronElement_1 = __decorate$6([
+    PacemOctahedronElement = PacemOctahedronElement_1 = __decorate$5([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-octahedron' })
     ], PacemOctahedronElement);
     // #endregion
@@ -2356,7 +2509,7 @@
             return PacemHexahedronElement_1.createMeshGeometry(radius);
         }
     };
-    PacemHexahedronElement = PacemHexahedronElement_1 = __decorate$6([
+    PacemHexahedronElement = PacemHexahedronElement_1 = __decorate$5([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-hexahedron' })
     ], PacemHexahedronElement);
     // #endregion
@@ -2418,7 +2571,7 @@
             return PacemIcosahedronElement_1.createMeshGeometry(radius);
         }
     };
-    PacemIcosahedronElement = PacemIcosahedronElement_1 = __decorate$6([
+    PacemIcosahedronElement = PacemIcosahedronElement_1 = __decorate$5([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-icosahedron' })
     ], PacemIcosahedronElement);
     // #endregion
@@ -2537,12 +2690,12 @@
             return PacemDodecahedronElement_1.createMeshGeometry(radius);
         }
     };
-    PacemDodecahedronElement = PacemDodecahedronElement_1 = __decorate$6([
+    PacemDodecahedronElement = PacemDodecahedronElement_1 = __decorate$5([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-dodecahedron' })
     ], PacemDodecahedronElement);
     // #endregion
 
-    var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2648,17 +2801,17 @@
             }
         }
     };
-    __decorate$5([
+    __decorate$4([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemSphereElement.prototype, "radius", void 0);
-    __decorate$5([
+    __decorate$4([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemSphereElement.prototype, "segments", void 0);
-    PacemSphereElement = PacemSphereElement_1 = __decorate$5([
+    PacemSphereElement = PacemSphereElement_1 = __decorate$4([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-sphere' })
     ], PacemSphereElement);
 
-    var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2735,19 +2888,19 @@
             }
         }
     };
-    __decorate$4([
+    __decorate$3([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemTorusElement.prototype, "radius", void 0);
-    __decorate$4([
+    __decorate$3([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemTorusElement.prototype, "innerRadius", void 0);
-    __decorate$4([
+    __decorate$3([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemTorusElement.prototype, "segments", void 0);
-    __decorate$4([
+    __decorate$3([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemTorusElement.prototype, "sides", void 0);
-    PacemTorusElement = PacemTorusElement_1 = __decorate$4([
+    PacemTorusElement = PacemTorusElement_1 = __decorate$3([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-primitive-torus' })
     ], PacemTorusElement);
 
@@ -2820,7 +2973,7 @@
         }
     }
 
-    var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3479,10 +3632,10 @@
             }
         }
     };
-    __decorate$3([
+    __decorate$2([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
     ], Pacem3DThreeAdapterElement.prototype, "orbit", void 0);
-    Pacem3DThreeAdapterElement = __decorate$3([
+    Pacem3DThreeAdapterElement = __decorate$2([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-3d-three-adapter' })
     ], Pacem3DThreeAdapterElement);
 
@@ -7448,7 +7601,7 @@ fn computeOffsetPosition(p0: vec4f, p1: vec4f, index: u32) -> vec4f {
         }
     }
 
-    var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -7498,13 +7651,13 @@ fn computeOffsetPosition(p0: vec4f, p1: vec4f, index: u32) -> vec4f {
             super.disconnectedCallback();
         }
     };
-    __decorate$2([
+    __decorate$1([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], Pacem3DWgslScriptElement.prototype, "type", void 0);
-    __decorate$2([
+    __decorate$1([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], Pacem3DWgslScriptElement.prototype, "wgsl", void 0);
-    Pacem3DWgslScriptElement = __decorate$2([
+    Pacem3DWgslScriptElement = __decorate$1([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-3d-wgsl-script' })
     ], Pacem3DWgslScriptElement);
     /**
@@ -7757,20 +7910,20 @@ fn computeOffsetPosition(p0: vec4f, p1: vec4f, index: u32) -> vec4f {
             return stage;
         }
     };
-    __decorate$2([
+    __decorate$1([
         pacemCore.Debounce(100)
     ], Pacem3DWebgpuAdapterElement.prototype, "_parseWgslModifiers", null);
-    __decorate$2([
+    __decorate$1([
         pacemCore.Watch({ emit: false })
     ], Pacem3DWebgpuAdapterElement.prototype, "modifiers", void 0);
-    __decorate$2([
+    __decorate$1([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
     ], Pacem3DWebgpuAdapterElement.prototype, "enableValidation", void 0);
-    Pacem3DWebgpuAdapterElement = __decorate$2([
+    Pacem3DWebgpuAdapterElement = __decorate$1([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-3d-webgpu-adapter' })
     ], Pacem3DWebgpuAdapterElement);
 
-    var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -8111,31 +8264,31 @@ fn computeOffsetPosition(p0: vec4f, p1: vec4f, index: u32) -> vec4f {
             }
         }
     };
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemOrbitCameraBehaviorElement.prototype, "maxAzimuth", void 0);
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemOrbitCameraBehaviorElement.prototype, "maxPolar", void 0);
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemOrbitCameraBehaviorElement.prototype, "minAzimuth", void 0);
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemOrbitCameraBehaviorElement.prototype, "minPolar", void 0);
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemOrbitCameraBehaviorElement.prototype, "zoomControl", void 0);
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemOrbitCameraBehaviorElement.prototype, "rotationControl", void 0);
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
     ], PacemOrbitCameraBehaviorElement.prototype, "panControl", void 0);
-    __decorate$1([
+    __decorate([
         pacemCore.Watch({ emit: false, converter: BooleanOrNumberConverter })
     ], PacemOrbitCameraBehaviorElement.prototype, "inertia", void 0);
-    PacemOrbitCameraBehaviorElement = __decorate$1([
+    PacemOrbitCameraBehaviorElement = __decorate([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-orbit-camera' })
     ], PacemOrbitCameraBehaviorElement);
 
@@ -8212,159 +8365,6 @@ fn computeOffsetPosition(p0: vec4f, p1: vec4f, index: u32) -> vec4f {
         Drawing3D: indexComponentsDrawing3d
     });
 
-    var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    //namespace Pacem.Drawing3D {
-    /** Parses the text content of a Wavefront `.obj` file into a {@link MeshGeometry} (vertices, triangle indices, UVs and normals). */
-    class OBJParser {
-        /**
-         * Parses `v` (vertex), `vt` (texture coordinate), `vn` (normal) and `f` (face) records out of `content`,
-         * triangulating any face with more than 3 vertices (fan triangulation).
-         */
-        static parse(content) {
-            // vertices
-            const vertices = [];
-            const vParser = /^v((\s+-?[\d\.]+){3})/gm;
-            let arr = vParser.exec(content);
-            while (arr && arr.length) {
-                vertices.push(Point3DConverter.convert(arr[1]));
-                arr = vParser.exec(content);
-            }
-            // uvmap
-            const vt = [];
-            const tParser = /^vt((\s+-?[\d\.]+){2})/gm;
-            arr = tParser.exec(content);
-            while (arr && arr.length) {
-                vt.push(pacemFoundation.Point.parse(arr[1]));
-                arr = tParser.exec(content);
-            }
-            // normals
-            const vn = [];
-            const nParser = /^vn((\s+-?[\d\.]+){3})/gm;
-            arr = nParser.exec(content);
-            while (arr && arr.length) {
-                vn.push(Point3DConverter.convert(arr[1]));
-                arr = nParser.exec(content);
-            }
-            const normals = [];
-            const uv = [];
-            const positions = [];
-            const fParser = /^f((\s+([\d]+\/[\d]+\/[\d]+)){3,})/gm;
-            arr = fParser.exec(content);
-            while (arr && arr.length) {
-                const fjParser = /([\d]+)\/([\d]+)\/([\d]+)/g;
-                const face = arr[1];
-                let jArr = fjParser.exec(face);
-                let jIndex = 0;
-                var vIndex0, tIndex0, nIndex0;
-                var vIndex, tIndex, nIndex;
-                while (jArr && jArr.length) {
-                    if (jIndex > 2) {
-                        // 4+ vertex-face
-                        // but mesh only allows triangluar faces
-                        // re-add(0)
-                        positions.push(vIndex0);
-                        uv.push(vt[tIndex0]);
-                        normals.push(vn[nIndex0]);
-                        // re-add(last)
-                        positions.push(vIndex);
-                        uv.push(vt[tIndex]);
-                        normals.push(vn[nIndex]);
-                    }
-                    // OBJ indexes are 1-based
-                    vIndex = parseInt(jArr[1]) - 1;
-                    tIndex = parseInt(jArr[2]) - 1;
-                    nIndex = parseInt(jArr[3]) - 1;
-                    positions.push(vIndex);
-                    uv.push(vt[tIndex]);
-                    normals.push(vn[nIndex]);
-                    if (jIndex === 0) {
-                        vIndex0 = vIndex;
-                        tIndex0 = tIndex;
-                        nIndex0 = nIndex;
-                    }
-                    jIndex++;
-                    jArr = fjParser.exec(face);
-                }
-                // loop
-                arr = fParser.exec(content);
-            }
-            // faces
-            return new MeshGeometry(vertices, positions, uv, normals);
-        }
-    }
-    /** Model-file parsing entry point, registered as the `parse3D` markup transformer for converting raw asset text into a {@link NodeGeometry} or {@link Material}. */
-    class Parser3D {
-        /**
-         * Parses `content` according to `type` into a {@link NodeGeometry} (currently only the `'obj'` Wavefront format,
-         * via {@link OBJParser}) or a {@link Material}. Throws for any other/unsupported `type` (e.g. `'mtl'`, not yet implemented).
-         */
-        static parseGeometry(content, type) {
-            switch (type.toLowerCase()) {
-                case 'obj':
-                    return OBJParser.parse(content);
-                default:
-                    throw new Error(`Type '${type}' is not supported.`);
-            }
-        }
-    }
-    __decorate([
-        pacemCore.Transformer('parse3D')
-    ], Parser3D, "parseGeometry", null);
-
-    var indexDrawing3d = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        BooleanOrNumberConverter: BooleanOrNumberConverter,
-        DragEvent: DragEvent,
-        get KnownShader () { return KnownShader; },
-        LineGeometry: LineGeometry,
-        MaterialElement: MaterialElement,
-        MeshGeometry: MeshGeometry,
-        NodeGeometry: NodeGeometry,
-        NotifyChange: NotifyChange,
-        Pacem3DAdapterElement: Pacem3DAdapterElement,
-        Pacem3DCameraElement: Pacem3DCameraElement,
-        get Pacem3DGroupElement () { return Pacem3DGroupElement; },
-        get Pacem3DLightElement () { return Pacem3DLightElement; },
-        get Pacem3DMeshElement () { return Pacem3DMeshElement; },
-        get Pacem3DObjectElement () { return Pacem3DObjectElement; },
-        get Pacem3DOrthographicCameraElement () { return Pacem3DOrthographicCameraElement; },
-        get Pacem3DPerspectiveCameraElement () { return Pacem3DPerspectiveCameraElement; },
-        Point3DConverter: Point3DConverter,
-        Point3DOrNumberConverter: Point3DOrNumberConverter,
-        QuaternionConverter: QuaternionConverter,
-        RenderableElement: RenderableElement,
-        RenderableEvent: RenderableEvent,
-        get StalePropertyFlag () { return StalePropertyFlag; },
-        UI3DEvent: UI3DEvent,
-        Ui3DElement: Ui3DElement,
-        computePlaneNormal: computePlaneNormal,
-        computeSharpVertexNormals: computeSharpVertexNormals,
-        isBasicMaterial: isBasicMaterial,
-        isCamera: isCamera,
-        isGeometry: isGeometry,
-        isGroup: isGroup,
-        isInteraction: isInteraction,
-        isLambertMaterial: isLambertMaterial,
-        isLight: isLight,
-        isLineMaterial: isLineMaterial,
-        isMaterial: isMaterial,
-        isMesh: isMesh,
-        isMeshGeometry: isMeshGeometry,
-        isOrthographicCamera: isOrthographicCamera,
-        isPerspectiveCamera: isPerspectiveCamera,
-        isPhongMaterial: isPhongMaterial,
-        isRenderable: isRenderable,
-        isShaderMaterial: isShaderMaterial,
-        isStage: isStage,
-        isStandardMaterial: isStandardMaterial,
-        isUi3DObject: isUi3DObject
-    });
-
     var Output = /*#__PURE__*/Object.freeze({
         __proto__: null,
         Components: indexComponents,