@combos-fun/plugin-renderer-3d-graphics 0.0.42 → 0.0.45

package/dist/plugin-renderer-3d-graphics.esm.js

@@ -1,8 +1,8 @@
 import { __decorate } from 'tslib';
 import { Component, OBSERVER_TYPE, decorators } from '@combos-fun/engine';
 import { Field } from '@combos-fun/inspector-decorator';
-import { Renderer3D, Renderer3DSystem, tagObject3D } from '@combos-fun/plugin-renderer-3d';
-import { MeshStandardMaterial, Mesh, BoxGeometry, TorusGeometry, ConeGeometry, PlaneGeometry, CylinderGeometry, SphereGeometry } from 'three';
+import { COMBOS_INSTANCE_GAME_OBJECT_IDS, textureFromNamedImage, Renderer3D, Renderer3DSystem, Transform3D, is3DSceneParent, has3DChildGameObjects, VisualPoseBridge, tagObject3D } from '@combos-fun/plugin-renderer-3d';
+import { Vector3, Quaternion, Euler, Matrix4, InstancedMesh, BoxGeometry, CapsuleGeometry, TorusGeometry, ConeGeometry, PlaneGeometry, CylinderGeometry, SphereGeometry, DoubleSide, FrontSide, MeshStandardMaterial, MeshToonMaterial, MeshLambertMaterial, MeshBasicMaterial, Group, Mesh } from 'three';
 
 class Graphics3D extends Component {
     constructor() {
@@ -14,7 +14,8 @@ class Graphics3D extends Component {
         this.height = 1;
         this.depth = 1;
         this.radius = 0.5;
-        this.segments = 32;
+        this.segments = 12;
+        this.tube = 0;
         this.positionX = 0;
         this.positionY = 0;
         this.positionZ = 0;
@@ -25,6 +26,13 @@ class Graphics3D extends Component {
         this.scaleY = 1;
         this.scaleZ = 1;
         this.opacity = 1;
+        this.roughness = 1;
+        this.metalness = 0;
+        this.emissive = 0;
+        this.map = '';
+        this.doubleSide = false;
+        this.material = 'standard';
+        this.instanced = true;
     }
     static { this.componentName = 'Graphics3D'; }
     init(obj) {
@@ -38,7 +46,8 @@ __decorate([
         group: 'Graphics3D',
         label: 'shape',
         description: 'Primitive shape kind.',
-        editor: 'text',
+        editor: 'enum',
+        enumOptions: ['box', 'sphere', 'cylinder', 'plane', 'cone', 'torus', 'capsule'],
     })
 ], Graphics3D.prototype, "shape", void 0);
 __decorate([
@@ -109,6 +118,16 @@ __decorate([
         editor: 'number-stepper',
     })
 ], Graphics3D.prototype, "segments", void 0);
+__decorate([
+    Field({
+        type: 'number',
+        step: 0.05,
+        group: 'Graphics3D',
+        label: 'tube',
+        description: 'Torus tube radius. 0 means 0.4 × radius.',
+        editor: 'number-stepper',
+    })
+], Graphics3D.prototype, "tube", void 0);
 __decorate([
     Field({
         type: 'number',
@@ -211,31 +230,498 @@ __decorate([
         editor: 'number-slider',
     })
 ], Graphics3D.prototype, "opacity", void 0);
+__decorate([
+    Field({
+        type: 'number',
+        step: 0.05,
+        min: 0,
+        max: 1,
+        group: 'Graphics3D',
+        label: 'roughness',
+        description: 'PBR roughness (standard material).',
+        editor: 'number-slider',
+    })
+], Graphics3D.prototype, "roughness", void 0);
+__decorate([
+    Field({
+        type: 'number',
+        step: 0.05,
+        min: 0,
+        max: 1,
+        group: 'Graphics3D',
+        label: 'metalness',
+        description: 'PBR metalness (standard material).',
+        editor: 'number-slider',
+    })
+], Graphics3D.prototype, "metalness", void 0);
+__decorate([
+    Field({
+        type: 'number',
+        group: 'Graphics3D',
+        label: 'emissive',
+        description: 'Emissive color (hex).',
+        editor: 'number-stepper',
+    })
+], Graphics3D.prototype, "emissive", void 0);
+__decorate([
+    Field({
+        type: 'string',
+        group: 'Graphics3D',
+        label: 'map',
+        description: 'Named IMAGE resource used as a color map.',
+        editor: 'text',
+    })
+], Graphics3D.prototype, "map", void 0);
+__decorate([
+    Field({
+        type: 'boolean',
+        group: 'Graphics3D',
+        label: 'doubleSide',
+        description: 'Render both sides of the mesh.',
+        editor: 'toggle',
+    })
+], Graphics3D.prototype, "doubleSide", void 0);
+__decorate([
+    Field({
+        type: 'string',
+        group: 'Graphics3D',
+        label: 'material',
+        description: 'Surface shader.',
+        editor: 'enum',
+        enumOptions: ['standard', 'basic', 'lambert', 'toon'],
+    })
+], Graphics3D.prototype, "material", void 0);
+__decorate([
+    Field({
+        type: 'boolean',
+        group: 'Graphics3D',
+        label: 'instanced',
+        description: 'Share an InstancedMesh with identical primitives.',
+        editor: 'toggle',
+    })
+], Graphics3D.prototype, "instanced", void 0);
+
+const _pos = new Vector3();
+const _quat = new Quaternion();
+const _scale = new Vector3();
+const _euler = new Euler();
+const _mat = new Matrix4();
+const _swap = new Matrix4();
+function composePose(px, py, pz, rx, ry, rz, sx, sy, sz, target = _mat) {
+    _pos.set(px, py, pz);
+    _euler.set(rx, ry, rz);
+    _quat.setFromEuler(_euler);
+    _scale.set(sx, sy, sz);
+    return target.compose(_pos, _quat, _scale);
+}
+class InstanceBuckets {
+    constructor(scene, shadows) {
+        this.scene = scene;
+        this.shadows = shadows;
+        this.buckets = new Map();
+    }
+    add(key, id, geometry, material, matrix) {
+        let bucket = this.buckets.get(key);
+        if (!bucket) {
+            bucket = this.create(key, geometry, material);
+        }
+        if (bucket.live >= bucket.capacity) {
+            this.grow(bucket);
+        }
+        const index = bucket.live;
+        bucket.ids[index] = id;
+        bucket.indexOf.set(id, index);
+        bucket.mesh.setMatrixAt(index, matrix);
+        bucket.live += 1;
+        bucket.mesh.count = bucket.live;
+        bucket.mesh.instanceMatrix.needsUpdate = true;
+    }
+    setMatrix(key, id, matrix) {
+        const bucket = this.buckets.get(key);
+        if (!bucket)
+            return;
+        const index = bucket.indexOf.get(id);
+        if (index == null)
+            return;
+        bucket.mesh.setMatrixAt(index, matrix);
+        bucket.mesh.instanceMatrix.needsUpdate = true;
+    }
+    remove(key, id) {
+        const bucket = this.buckets.get(key);
+        if (!bucket)
+            return;
+        const index = bucket.indexOf.get(id);
+        if (index == null)
+            return;
+        const last = bucket.live - 1;
+        if (index !== last) {
+            const lastId = bucket.ids[last];
+            bucket.mesh.getMatrixAt(last, _swap);
+            bucket.mesh.setMatrixAt(index, _swap);
+            bucket.ids[index] = lastId;
+            if (typeof lastId === 'number') {
+                bucket.indexOf.set(lastId, index);
+            }
+        }
+        bucket.ids[last] = undefined;
+        bucket.indexOf.delete(id);
+        bucket.live -= 1;
+        bucket.mesh.count = bucket.live;
+        bucket.mesh.instanceMatrix.needsUpdate = true;
+        if (bucket.live <= 0) {
+            this.scene.remove(bucket.mesh);
+            bucket.mesh.dispose();
+            this.buckets.delete(key);
+        }
+    }
+    clear() {
+        for (const bucket of this.buckets.values()) {
+            this.scene.remove(bucket.mesh);
+            bucket.mesh.dispose();
+        }
+        this.buckets.clear();
+    }
+    create(key, geometry, material) {
+        const capacity = 8;
+        const mesh = new InstancedMesh(geometry, material, capacity);
+        mesh.count = 0;
+        mesh.frustumCulled = false;
+        mesh.castShadow = this.shadows;
+        mesh.receiveShadow = this.shadows;
+        const ids = new Array(capacity);
+        mesh.userData[COMBOS_INSTANCE_GAME_OBJECT_IDS] = ids;
+        this.scene.add(mesh);
+        const bucket = {
+            mesh,
+            ids,
+            indexOf: new Map(),
+            live: 0,
+            capacity,
+            geometry,
+            material,
+        };
+        this.buckets.set(key, bucket);
+        return bucket;
+    }
+    grow(bucket) {
+        const capacity = bucket.capacity * 2;
+        const mesh = new InstancedMesh(bucket.geometry, bucket.material, capacity);
+        mesh.count = bucket.live;
+        mesh.frustumCulled = false;
+        mesh.castShadow = this.shadows;
+        mesh.receiveShadow = this.shadows;
+        const ids = new Array(capacity);
+        for (let i = 0; i < bucket.live; i++) {
+            bucket.mesh.getMatrixAt(i, _swap);
+            mesh.setMatrixAt(i, _swap);
+            ids[i] = bucket.ids[i];
+        }
+        mesh.userData[COMBOS_INSTANCE_GAME_OBJECT_IDS] = ids;
+        this.scene.remove(bucket.mesh);
+        bucket.mesh.dispose();
+        this.scene.add(mesh);
+        bucket.mesh = mesh;
+        bucket.ids = ids;
+        bucket.capacity = capacity;
+    }
+}
 
-const GEOMETRY_PROPS = ['shape', 'width', 'height', 'depth', 'radius', 'segments'];
-const MATERIAL_PROPS = ['color', 'wireframe', 'opacity'];
+function torusTube(radius, tube) {
+    return tube && tube > 0 ? tube : radius * 0.4;
+}
+function resolvePrimitive(part, fallback) {
+    const src = { ...fallback, ...part };
+    const radius = src.radius ?? 0.5;
+    return {
+        shape: src.shape || 'box',
+        color: src.color ?? 0x00ff00,
+        wireframe: !!src.wireframe,
+        width: src.width ?? 1,
+        height: src.height ?? 1,
+        depth: src.depth ?? 1,
+        radius,
+        segments: Math.max(3, Math.round(src.segments ?? 12)),
+        tube: torusTube(radius, src.tube),
+        positionX: src.positionX ?? 0,
+        positionY: src.positionY ?? 0,
+        positionZ: src.positionZ ?? 0,
+        rotationX: src.rotationX ?? 0,
+        rotationY: src.rotationY ?? 0,
+        rotationZ: src.rotationZ ?? 0,
+        scaleX: src.scaleX ?? 1,
+        scaleY: src.scaleY ?? 1,
+        scaleZ: src.scaleZ ?? 1,
+        opacity: src.opacity ?? 1,
+        roughness: src.roughness ?? 1,
+        metalness: src.metalness ?? 0,
+        emissive: src.emissive ?? 0,
+        map: src.map || '',
+        doubleSide: !!src.doubleSide,
+        material: src.material || 'standard',
+    };
+}
+function geometryKey(p) {
+    switch (p.shape) {
+        case 'sphere':
+            return `sphere:${p.radius}:${p.segments}`;
+        case 'cylinder':
+            return `cylinder:${p.radius}:${p.height}:${p.segments}`;
+        case 'cone':
+            return `cone:${p.radius}:${p.height}:${p.segments}`;
+        case 'plane':
+            return `plane:${p.width}:${p.height}:${p.segments}`;
+        case 'torus':
+            return `torus:${p.radius}:${p.tube}:${p.segments}`;
+        case 'capsule':
+            return `capsule:${p.radius}:${p.height}:${p.segments}`;
+        case 'box':
+        default:
+            return `box:${p.width}:${p.height}:${p.depth}`;
+    }
+}
+function createGeometry(p) {
+    const segs = p.segments;
+    switch (p.shape) {
+        case 'sphere':
+            return new SphereGeometry(p.radius, segs, segs);
+        case 'cylinder':
+            return new CylinderGeometry(p.radius, p.radius, p.height, segs);
+        case 'plane':
+            return new PlaneGeometry(p.width, p.height, segs, segs);
+        case 'cone':
+            return new ConeGeometry(p.radius, p.height, segs);
+        case 'torus':
+            return new TorusGeometry(p.radius, p.tube, 8, segs);
+        case 'capsule': {
+            const length = Math.max(0, p.height - 2 * p.radius);
+            return new CapsuleGeometry(p.radius, length, 4, segs);
+        }
+        case 'box':
+        default:
+            return new BoxGeometry(p.width, p.height, p.depth);
+    }
+}
+function materialKey(p) {
+    return [
+        p.material,
+        p.color,
+        p.wireframe ? 1 : 0,
+        p.opacity,
+        p.roughness,
+        p.metalness,
+        p.emissive,
+        p.map,
+        p.doubleSide ? 1 : 0,
+    ].join(':');
+}
+function poseKey(px, py, pz, rx, ry, rz, sx, sy, sz) {
+    return `${px},${py},${pz},${rx},${ry},${rz},${sx},${sy},${sz}`;
+}
+
+class RefCache {
+    constructor() {
+        this.items = new Map();
+    }
+    get(key) {
+        return this.items.get(key)?.value;
+    }
+    acquire(key, create) {
+        const hit = this.items.get(key);
+        if (hit) {
+            hit.refs += 1;
+            return hit.value;
+        }
+        const value = create();
+        this.items.set(key, { value, refs: 1 });
+        return value;
+    }
+    release(key, dispose) {
+        const hit = this.items.get(key);
+        if (!hit)
+            return;
+        hit.refs -= 1;
+        if (hit.refs > 0)
+            return;
+        dispose(hit.value);
+        this.items.delete(key);
+    }
+    clear(dispose) {
+        for (const hit of this.items.values()) {
+            dispose(hit.value);
+        }
+        this.items.clear();
+    }
+}
+class GeometryCache {
+    constructor() {
+        this.cache = new RefCache();
+    }
+    acquire(primitive) {
+        const key = geometryKey(primitive);
+        return { key, geometry: this.cache.acquire(key, () => createGeometry(primitive)) };
+    }
+    release(key) {
+        this.cache.release(key, (geometry) => geometry.dispose());
+    }
+    clear() {
+        this.cache.clear((geometry) => geometry.dispose());
+    }
+}
+class TextureCache {
+    constructor() {
+        this.items = new Map();
+        this.inflight = new Map();
+    }
+    async acquire(name) {
+        const hit = this.items.get(name);
+        if (hit) {
+            hit.refs += 1;
+            return hit.texture;
+        }
+        let pending = this.inflight.get(name);
+        if (!pending) {
+            pending = textureFromNamedImage(name);
+            this.inflight.set(name, pending);
+        }
+        const texture = await pending;
+        this.inflight.delete(name);
+        const existing = this.items.get(name);
+        if (existing) {
+            existing.refs += 1;
+            return existing.texture;
+        }
+        this.items.set(name, { texture, refs: 1 });
+        return texture;
+    }
+    release(name) {
+        if (!name)
+            return;
+        const hit = this.items.get(name);
+        if (!hit)
+            return;
+        hit.refs -= 1;
+        if (hit.refs > 0)
+            return;
+        hit.texture.dispose();
+        this.items.delete(name);
+    }
+    clear() {
+        for (const hit of this.items.values()) {
+            hit.texture.dispose();
+        }
+        this.items.clear();
+        this.inflight.clear();
+    }
+}
+function createMaterial(p, map) {
+    const common = {
+        color: p.color,
+        wireframe: p.wireframe,
+        transparent: p.opacity < 1 || !!map,
+        opacity: p.opacity,
+        side: p.doubleSide ? DoubleSide : FrontSide,
+        map,
+    };
+    switch (p.material) {
+        case 'basic':
+            return new MeshBasicMaterial(common);
+        case 'lambert':
+            return new MeshLambertMaterial(common);
+        case 'toon':
+            return new MeshToonMaterial(common);
+        case 'standard':
+        default:
+            return new MeshStandardMaterial({
+                ...common,
+                roughness: p.roughness,
+                metalness: p.metalness,
+                emissive: p.emissive,
+            });
+    }
+}
+class MaterialCache {
+    constructor() {
+        this.cache = new RefCache();
+        this.maps = new Map();
+        this.textures = new TextureCache();
+    }
+    async acquire(primitive) {
+        const key = materialKey(primitive);
+        const hit = this.cache.get(key);
+        if (hit) {
+            this.cache.acquire(key, () => hit);
+            return { key, material: hit };
+        }
+        const texture = primitive.map ? await this.textures.acquire(primitive.map) : null;
+        const again = this.cache.get(key);
+        if (again) {
+            if (primitive.map)
+                this.textures.release(primitive.map);
+            this.cache.acquire(key, () => again);
+            return { key, material: again };
+        }
+        const material = createMaterial(primitive, texture);
+        this.cache.acquire(key, () => material);
+        if (primitive.map)
+            this.maps.set(key, primitive.map);
+        return { key, material };
+    }
+    release(key) {
+        const mapName = this.maps.get(key);
+        this.cache.release(key, (material) => {
+            material.dispose();
+            if (mapName) {
+                this.textures.release(mapName);
+                this.maps.delete(key);
+            }
+        });
+    }
+    clear() {
+        this.cache.clear((material) => material.dispose());
+        this.maps.clear();
+        this.textures.clear();
+    }
+}
+
+const POSE_PROPS = new Set([
+    'positionX', 'positionY', 'positionZ',
+    'rotationX', 'rotationY', 'rotationZ',
+    'scaleX', 'scaleY', 'scaleZ',
+]);
 let Graphics3DSystem = class Graphics3DSystem extends Renderer3D {
     constructor() {
         super(...arguments);
         this.name = 'Graphics3DSystem';
         this.entries = new Map();
+        this.geos = new GeometryCache();
+        this.mats = new MaterialCache();
+        this.buckets = null;
     }
     static { this.systemName = 'Graphics3DSystem'; }
     init() {
         const renderer3DSystem = this.game.getSystem(Renderer3DSystem);
         renderer3DSystem.rendererManager.register(this);
+        this.buckets = new InstanceBuckets(this.threeContext.scene, !!this.threeContext.shadows);
     }
     componentChanged(changed) {
+        if (changed.componentName === 'Transform') {
+            this.handleHierarchyChange(changed.gameObject);
+            return;
+        }
         if (changed.componentName !== 'Graphics3D')
             return;
         if (changed.type === OBSERVER_TYPE.ADD) {
-            this.handleAdd(changed.gameObject, changed.component);
+            this.mount(changed.gameObject, changed.component);
         }
         else if (changed.type === OBSERVER_TYPE.REMOVE) {
             this.handleRemove(changed.gameObject.id);
         }
         else {
-            this.handleChange(changed);
+            const changedProp = changed.prop?.prop?.[0];
+            if (POSE_PROPS.has(changedProp))
+                return;
+            this.handleRemove(changed.gameObject.id);
+            this.mount(changed.gameObject, changed.component);
         }
     }
     rendererUpdate(gameObject) {
@@ -245,87 +731,195 @@ let Graphics3DSystem = class Graphics3DSystem extends Renderer3D {
         const entry = this.entries.get(gameObject.id);
         if (!entry)
             return;
-        entry.mesh.position.set(component.positionX, component.positionY, component.positionZ);
-        entry.mesh.rotation.set(component.rotationX, component.rotationY, component.rotationZ);
-        entry.mesh.scale.set(component.scaleX, component.scaleY, component.scaleZ);
-    }
-    handleAdd(gameObject, component) {
-        const geometry = this.createGeometry(component);
-        const material = new MeshStandardMaterial({
-            color: component.color,
-            wireframe: component.wireframe,
-            transparent: component.opacity < 1,
-            opacity: component.opacity,
-        });
-        const mesh = new Mesh(geometry, material);
-        tagObject3D(mesh, gameObject.id);
-        mesh.position.set(component.positionX, component.positionY, component.positionZ);
-        mesh.rotation.set(component.rotationX, component.rotationY, component.rotationZ);
-        mesh.scale.set(component.scaleX, component.scaleY, component.scaleZ);
-        this.threeContext.scene.add(mesh);
-        this.entries.set(gameObject.id, { mesh });
-    }
-    handleChange(changed) {
-        const component = changed.component;
-        const changedProp = changed.prop?.prop?.[0];
-        const entry = this.entries.get(changed.gameObject.id);
-        if (!entry)
+        const transform = gameObject.getComponent(Transform3D);
+        const applyVisualPose = entry.poseBridge.sync(component, transform);
+        const next = poseKey(component.positionX, component.positionY, component.positionZ, component.rotationX, component.rotationY, component.rotationZ, component.scaleX, component.scaleY, component.scaleZ);
+        if (!applyVisualPose) {
+            entry.lastPose = next;
+            if (entry.group) {
+                entry.group.position.set(0, 0, 0);
+                entry.group.rotation.set(0, 0, 0);
+                entry.group.scale.set(1, 1, 1);
+            }
+            return;
+        }
+        if (entry.lastPose === next)
+            return;
+        entry.lastPose = next;
+        if (entry.mode === 'instance' && entry.bucketKey) {
+            this.buckets?.setMatrix(entry.bucketKey, gameObject.id, composePose(component.positionX, component.positionY, component.positionZ, component.rotationX, component.rotationY, component.rotationZ, component.scaleX, component.scaleY, component.scaleZ));
             return;
-        if (GEOMETRY_PROPS.includes(changedProp)) {
-            entry.mesh.geometry.dispose();
-            entry.mesh.geometry = this.createGeometry(component);
         }
-        if (MATERIAL_PROPS.includes(changedProp)) {
-            const material = entry.mesh.material;
-            material.color.setHex(component.color);
-            material.wireframe = component.wireframe;
-            material.opacity = component.opacity;
-            material.transparent = component.opacity < 1;
+        if (entry.group) {
+            entry.group.position.set(component.positionX, component.positionY, component.positionZ);
+            entry.group.rotation.set(component.rotationX, component.rotationY, component.rotationZ);
+            entry.group.scale.set(component.scaleX, component.scaleY, component.scaleZ);
+        }
+    }
+    async mount(gameObject, component) {
+        const asyncId = this.increaseAsyncId(gameObject.id);
+        let prepared;
+        try {
+            prepared = await this.prepare(component);
+        }
+        catch (err) {
+            console.error(`Graphics3D prepare failed for ${gameObject.name}`, err);
+            return;
+        }
+        if (!this.validateAsyncId(gameObject.id, asyncId)) {
+            this.releasePrepared(prepared);
+            return;
+        }
+        this.attach(gameObject, component, prepared);
+    }
+    async prepare(component) {
+        const specs = this.resolveParts(component);
+        const prepared = [];
+        try {
+            for (const primitive of specs) {
+                const { key: geoKey, geometry } = this.geos.acquire(primitive);
+                try {
+                    const { key: matKey, material } = await this.mats.acquire(primitive);
+                    prepared.push({ primitive, geoKey, matKey, geometry, material });
+                }
+                catch (err) {
+                    this.geos.release(geoKey);
+                    throw err;
+                }
+            }
+        }
+        catch (err) {
+            this.releasePrepared(prepared);
+            throw err;
+        }
+        return prepared;
+    }
+    resolveParts(component) {
+        if (component.parts && component.parts.length > 0) {
+            return component.parts.map((part) => resolvePrimitive(part, component));
+        }
+        return [resolvePrimitive(component)];
+    }
+    handleHierarchyChange(gameObject) {
+        const parent = gameObject.parent;
+        if (parent && parent !== gameObject.scene) {
+            this.ensureGroupMode(parent);
+        }
+        this.ensureGroupMode(gameObject);
+        this.threeContext.reparentGameObject(gameObject);
+    }
+    ensureGroupMode(gameObject) {
+        const entry = this.entries.get(gameObject.id);
+        if (!entry || entry.mode !== 'instance')
+            return;
+        const component = gameObject.getComponent(Graphics3D);
+        if (!component)
+            return;
+        if (entry.bucketKey) {
+            this.buckets?.remove(entry.bucketKey, gameObject.id);
+        }
+        this.attachGroup(gameObject, component, entry.prepared, entry.lastPose);
+    }
+    attach(gameObject, component, prepared) {
+        const useInstance = component.instanced !== false
+            && prepared.length === 1
+            && is3DSceneParent(gameObject)
+            && !has3DChildGameObjects(gameObject)
+            && !gameObject.getComponent(Transform3D)
+            && !this.threeContext.hasTransform3DRoot(gameObject.id);
+        const lastPose = poseKey(component.positionX, component.positionY, component.positionZ, component.rotationX, component.rotationY, component.rotationZ, component.scaleX, component.scaleY, component.scaleZ);
+        if (useInstance) {
+            const part = prepared[0];
+            const bucketKey = `${part.geoKey}|${part.matKey}`;
+            this.buckets?.add(bucketKey, gameObject.id, part.geometry, part.material, composePose(component.positionX, component.positionY, component.positionZ, component.rotationX, component.rotationY, component.rotationZ, component.scaleX, component.scaleY, component.scaleZ));
+            this.entries.set(gameObject.id, {
+                mode: 'instance',
+                bucketKey,
+                prepared,
+                lastPose,
+                poseBridge: new VisualPoseBridge(),
+            });
+            return;
+        }
+        this.attachGroup(gameObject, component, prepared, lastPose);
+    }
+    attachGroup(gameObject, component, prepared, lastPose) {
+        const group = new Group();
+        const shadows = !!this.threeContext.shadows;
+        for (const part of prepared) {
+            const mesh = new Mesh(part.geometry, part.material);
+            mesh.position.set(part.primitive.positionX, part.primitive.positionY, part.primitive.positionZ);
+            mesh.rotation.set(part.primitive.rotationX, part.primitive.rotationY, part.primitive.rotationZ);
+            mesh.scale.set(part.primitive.scaleX, part.primitive.scaleY, part.primitive.scaleZ);
+            mesh.castShadow = shadows;
+            mesh.receiveShadow = shadows;
+            group.add(mesh);
+        }
+        tagObject3D(group, gameObject.id);
+        const transform = gameObject.getComponent(Transform3D);
+        const poseBridge = new VisualPoseBridge();
+        const applyVisualPose = poseBridge.sync(component, transform);
+        if (applyVisualPose) {
+            group.position.set(component.positionX, component.positionY, component.positionZ);
+            group.rotation.set(component.rotationX, component.rotationY, component.rotationZ);
+            group.scale.set(component.scaleX, component.scaleY, component.scaleZ);
+        }
+        else {
+            group.position.set(0, 0, 0);
+            group.rotation.set(0, 0, 0);
+            group.scale.set(1, 1, 1);
+        }
+        this.threeContext.attachVisual(gameObject.id, group, gameObject);
+        this.entries.set(gameObject.id, {
+            mode: 'group',
+            group,
+            prepared,
+            lastPose,
+            poseBridge,
+        });
+    }
+    releasePrepared(prepared) {
+        for (const part of prepared) {
+            this.geos.release(part.geoKey);
+            this.mats.release(part.matKey);
         }
     }
     handleRemove(id) {
+        this.increaseAsyncId(id);
         const entry = this.entries.get(id);
         if (!entry)
             return;
-        this.threeContext.scene.remove(entry.mesh);
-        entry.mesh.geometry.dispose();
-        entry.mesh.material.dispose();
-        this.entries.delete(id);
-    }
-    createGeometry(component) {
-        switch (component.shape) {
-            case 'sphere':
-                return new SphereGeometry(component.radius, component.segments, component.segments);
-            case 'cylinder':
-                return new CylinderGeometry(component.radius, component.radius, component.height, component.segments);
-            case 'plane':
-                return new PlaneGeometry(component.width, component.height);
-            case 'cone':
-                return new ConeGeometry(component.radius, component.height, component.segments);
-            case 'torus':
-                return new TorusGeometry(component.radius, component.radius * 0.4, 16, component.segments);
-            case 'box':
-            default:
-                return new BoxGeometry(component.width, component.height, component.depth);
+        if (entry.mode === 'instance' && entry.bucketKey) {
+            this.buckets?.remove(entry.bucketKey, id);
         }
+        else if (entry.group) {
+            this.threeContext.detachVisual(id, entry.group);
+        }
+        this.releasePrepared(entry.prepared);
+        this.entries.delete(id);
     }
     onDestroy() {
         for (const [id] of this.entries) {
             this.handleRemove(id);
         }
         this.entries.clear();
+        this.buckets?.clear();
+        this.geos.clear();
+        this.mats.clear();
     }
 };
 Graphics3DSystem = __decorate([
     decorators.componentObserver({
         Graphics3D: [
             'shape', 'color', 'wireframe',
-            'width', 'height', 'depth', 'radius', 'segments',
+            'width', 'height', 'depth', 'radius', 'segments', 'tube',
             'positionX', 'positionY', 'positionZ',
             'rotationX', 'rotationY', 'rotationZ',
             'scaleX', 'scaleY', 'scaleZ',
-            'opacity',
+            'opacity', 'roughness', 'metalness', 'emissive',
+            'map', 'doubleSide', 'material', 'instanced', 'parts',
         ],
+        Transform: ['_parent'],
     })
 ], Graphics3DSystem);
 var Graphics3DSystem_default = Graphics3DSystem;