@needle-tools/engine 4.8.4-experimental.c93e134 → 4.8.4-next.68d6468

package/src/engine/extensions/KHR_materials_variants.ts

@@ -1,179 +0,0 @@
-import { type GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { MaterialVariants } from "../../engine-components/MaterialVariants.js";
-import { addComponent } from "../engine_components.js";
-import { InstantiateIdProvider } from "../engine_networking_instantiate.js";
-import { GLTF } from "../engine_types.js";
-import { getParam } from "../engine_utils.js";
-
-const debug = getParam("debugmaterialvariants");
-
-export interface MaterialVariant {
-    name: string;
-}
-
-export interface RootMaterialVariantsExtension {
-    variants: MaterialVariant[];
-}
-
-export interface PrimitiveMaterialVariantsExtension {
-    mappings: Array<{
-        variants: number[];
-        material: number;
-    }>;
-}
-
-export class NEEDLE_material_variants implements GLTFLoaderPlugin {
-    get name() { return "KHR_materials_variants"; }
-
-    private parser: GLTFParser;
-    private variants: MaterialVariant[] = [];
-    private loadingMesh = false;
-
-
-    constructor(parser: GLTFParser) {
-        this.parser = parser;
-    }
-
-    beforeRoot(): Promise<void> | null {
-        const parser = this.parser;
-        const json = parser.json;
-
-        if (!json.extensions || !json.extensions[this.name]) {
-            return null;
-        }
-
-        const extension = json.extensions[this.name] as RootMaterialVariantsExtension;
-        this.variants = extension.variants || [];
-
-        if (debug) {
-            console.log("KHR_materials_variants found variants:", this.variants);
-        }
-
-        return null;
-    }
-
-    afterRoot(result: GLTF): Promise<void> | null {
-        if (this.variants.length > 0) {
-            // Store variants data on the GLTF result for components to access
-            if (!result.userData) result.userData = {};
-            result.userData.materialVariants = {
-                variants: this.variants,
-                parser: this.parser
-            };
-
-            if (debug) {
-                console.log("KHR_materials_variants stored variants data:", result.userData.materialVariants);
-            }
-        }
-
-
-        return null;
-    }
-
-    loadMesh(index: number): Promise<any> | null {
-        // Prevent infinite recursion
-        if (this.loadingMesh) {
-            return null;
-        }
-
-        const json = this.parser.json;
-        const meshDef = json.meshes[index];
-
-        if (!meshDef || !meshDef.primitives) {
-            return null;
-        }
-
-        // Check if any primitive has variant mappings
-        const allMappings: Array<{ variants: number[]; material: number; primitiveIndex: number; }> = [];
-
-        meshDef.primitives.forEach((primitive: any, primitiveIndex: number) => {
-            if (primitive.extensions && primitive.extensions[this.name]) {
-                const extension = primitive.extensions[this.name] as PrimitiveMaterialVariantsExtension;
-
-                extension.mappings.forEach(mapping => {
-                    allMappings.push({
-                        ...mapping,
-                        primitiveIndex
-                    });
-                });
-            }
-        });
-
-        // If no variants, let normal loading proceed
-        if (allMappings.length === 0) {
-            return null;
-        }
-
-        // Load the mesh with recursion protection
-        this.loadingMesh = true;
-
-        return this.parser.loadMesh(index).then(mesh => {
-            if (mesh) {
-                // Attach variant data directly to the loaded mesh
-                this.attachVariantDataToMesh(mesh, index, allMappings);
-
-                if (debug) {
-                    console.log(`KHR_materials_variants processed mesh ${index} with ${allMappings.length} variant mappings`);
-                }
-            }
-            return mesh;
-        }).finally(() => {
-            this.loadingMesh = false;
-        });
-    }
-
-
-    private attachVariantDataToMesh(mesh: any, index: number, mappings: Array<{ variants: number[]; material: number; primitiveIndex: number; }>): void {
-        // Store variant mapping data on the mesh
-        if (!mesh.userData) mesh.userData = {};
-        mesh.userData.materialVariants = {
-            mappings: mappings,
-            variants: this.variants,
-            parser: this.parser
-        };
-
-        const idProvider = new InstantiateIdProvider(index);
-
-        // Automatically add the MaterialVariants component
-        try {
-            const component = addComponent(mesh, MaterialVariants, {}, { callAwake: false });
-            component.guid = idProvider.generateUUID();
-            if (debug) {
-                console.log("KHR_materials_variants added MaterialVariants component to mesh:", mesh.name);
-            }
-        } catch (error) {
-            console.warn("Failed to add MaterialVariants component to mesh:", mesh.name, error);
-        }
-
-        if (debug) {
-            console.log("KHR_materials_variants processed mesh with variants:", mesh.name, {
-                variants: this.variants,
-                mappings: mappings
-            });
-        }
-    }
-
-
-
-
-    // /**
-    //  * Get all available variant names
-    //  */
-    // getVariantNames(): string[] {
-    //     return this.variants.map(variant => variant.name);
-    // }
-
-    // /**
-    //  * Get variant by name
-    //  */
-    // getVariantByName(name: string): MaterialVariant | undefined {
-    //     return this.variants.find(variant => variant.name === name);
-    // }
-
-    // /**
-    //  * Get variant by index
-    //  */
-    // getVariantByIndex(index: number): MaterialVariant | undefined {
-    //     return this.variants[index];
-    // }
-}

package/src/engine-components/MaterialVariants.ts

@@ -1,231 +0,0 @@
-import { Material, Mesh } from "three";
-import { syncField } from "../engine/engine_networking_auto.js";
-
-import { serializable } from "../engine/engine_serialization_decorator.js";
-import { type MaterialVariant } from "../engine/extensions/KHR_materials_variants.js";
-import { Behaviour } from "./Component.js";
-
-export class MaterialVariants extends Behaviour {
-
-    @syncField()
-    @serializable()
-    selectedVariant: string = "";
-
-    @serializable()
-    createMenu: boolean = true;
-
-    private _menu: HTMLElement | null = null;
-
-    private _variants: MaterialVariant[] = [];
-    private _variantMappings: Array<{ variants: number[]; material: number; primitiveIndex: number; }> = [];
-    private _originalMaterials: Material[] = [];
-    private _mesh: Mesh | null = null;
-    private _materialCache = new Map<string, Material>();
-
-    awake() {
-        this._mesh = this.gameObject as any;
-        if (!this._mesh || !this._mesh.isMesh) {
-            console.warn("MaterialVariants component must be attached to a Mesh object", this.gameObject);
-            return;
-        }
-
-        this._initializeVariantData();
-        this._cacheOriginalMaterials();
-
-        if (this.createMenu) this._createVariantSelectionMenu();
-    }
-    onDestroy(): void {
-        this._menu?.remove();
-    }
-
-    private _createVariantSelectionMenu() {
-        const selectElement = document.createElement("select");
-        selectElement.addEventListener("change", (event) => {
-            const selectedVariant = (event.target as HTMLSelectElement).value;
-            this.selectVariant(selectedVariant);
-        });
-
-        // Add options for each variant
-        this._variants.forEach(variant => {
-            const option = document.createElement("option");
-            option.value = variant.name;
-            option.textContent = this.name + ": " + variantNameToDisplayName(variant.name);
-            selectElement.appendChild(option);
-        });
-
-        this._menu = selectElement;
-        this.context.menu.appendChild(selectElement);
-    }
-
-    async start() {
-        if (this.selectedVariant && this.selectedVariant.length > 0) {
-            await this.selectVariant(this.selectedVariant);
-        }
-    }
-
-    private _initializeVariantData() {
-        if (!this._mesh) return;
-
-        // Get variant data from the mesh userData (set by the extension)
-        const variantData = this._mesh.userData.materialVariants;
-        if (variantData) {
-            this._variants = variantData.variants || [];
-            this._variantMappings = variantData.mappings || [];
-        }
-
-        // Also check if the root GLTF has variant data
-        let current = this._mesh.parent;
-        while (current) {
-            if (current.userData.materialVariants) {
-                this._variants = current.userData.materialVariants.variants || [];
-                break;
-            }
-            current = current.parent;
-        }
-    }
-
-    private _cacheOriginalMaterials() {
-        if (!this._mesh) return;
-
-        if (Array.isArray(this._mesh.material)) {
-            this._originalMaterials = [...this._mesh.material];
-        } else {
-            this._originalMaterials = [this._mesh.material];
-        }
-    }
-
-    /**
-     * Get all available variant names
-     */
-    getVariantNames(): string[] {
-        return this._variants.map(variant => variant.name);
-    }
-
-    /**
-     * Get the currently selected variant name
-     */
-    getCurrentVariant(): string {
-        return this.selectedVariant;
-    }
-
-    /**
-     * Select a variant by name
-     * @param variantName The name of the variant to select
-     * @returns Promise that resolves to true if the variant was successfully selected, false otherwise
-     */
-    async selectVariant(variantName: string): Promise<boolean> {
-        if (!this._mesh || !variantName) return false;
-
-        // Find the variant by name
-        const variantIndex = this._variants.findIndex(v => v.name === variantName);
-        if (variantIndex === -1) {
-            console.warn(`Material variant "${variantName}" not found. Available variants:`, this.getVariantNames());
-            return false;
-        }
-
-        return await this.selectVariantByIndex(variantIndex);
-    }
-
-    /**
-     * Select a variant by index
-     * @param variantIndex The index of the variant to select
-     * @returns Promise that resolves to true if the variant was successfully selected, false otherwise
-     */
-    async selectVariantByIndex(variantIndex: number): Promise<boolean> {
-        if (!this._mesh || variantIndex < 0 || variantIndex >= this._variants.length) return false;
-
-        const variant = this._variants[variantIndex];
-
-        // Find mappings that include this variant
-        const applicableMappings = this._variantMappings.filter(mapping =>
-            mapping.variants.includes(variantIndex)
-        );
-
-        if (applicableMappings.length === 0) {
-            console.warn(`No material mappings found for variant "${variant.name}"`);
-            return false;
-        }
-
-        // Apply the variant materials to specific primitives
-        for (const mapping of applicableMappings) {
-            const materialIndex = mapping.material;
-            const primitiveIndex = mapping.primitiveIndex;
-            const material = await this._getMaterial(materialIndex);
-
-            if (material) {
-                if (Array.isArray(this._mesh.material)) {
-                    // For multi-material meshes, update the specific primitive's material
-                    if (primitiveIndex < this._mesh.material.length) {
-                        this._mesh.material[primitiveIndex] = material;
-                    } else {
-                        console.warn(`Primitive index ${primitiveIndex} out of bounds for material array of length ${this._mesh.material.length}`);
-                    }
-                } else {
-                    // Single material mesh - replace the entire material
-                    this._mesh.material = material;
-                }
-            }
-        }
-
-        this.selectedVariant = variant.name;
-        return true;
-    }
-
-    /**
-     * Reset to the original materials
-     */
-    resetToOriginal(): void {
-        if (!this._mesh) return;
-
-        if (Array.isArray(this._mesh.material)) {
-            this._mesh.material = [...this._originalMaterials];
-        } else {
-            this._mesh.material = this._originalMaterials[0];
-        }
-
-        this.selectedVariant = "";
-    }
-
-    private async _getMaterial(materialIndex: number): Promise<Material | null> {
-        // First check if we have it cached
-        const cacheKey = `material_${materialIndex}`;
-        if (this._materialCache.has(cacheKey)) {
-            return this._materialCache.get(cacheKey)!;
-        }
-
-        // Try to get the material from the GLTF parser
-        const variantData = this._mesh?.userData.materialVariants;
-        if (variantData && variantData.parser) {
-            try {
-                const material = await variantData.parser.getDependency('material', materialIndex);
-                this._materialCache.set(cacheKey, material);
-                return material;
-            } catch (error) {
-                console.warn(`Failed to load material at index ${materialIndex}:`, error);
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * Check if a variant exists
-     * @param variantName The name of the variant to check
-     * @returns True if the variant exists
-     */
-    hasVariant(variantName: string): boolean {
-        return this._variants.some(v => v.name === variantName);
-    }
-
-    /**
-     * Get the number of available variants
-     */
-    getVariantCount(): number {
-        return this._variants.length;
-    }
-}
-
-function variantNameToDisplayName(name: string) {
-    // Make uppercase after space and beginning (unless number etc)
-    return name.replace(/(?:^|\s)\S/g, (match) => match.toUpperCase());
-}