@littlecarlito/blorktools 0.50.3 → 0.51.0

package/src/asset_debugger/util/scene/threejs-model-manager.js

@@ -0,0 +1,437 @@
+/**
+ * Models Module
+ * 
+ * Handles creation and loading of 3D models for debugging.
+ */
+
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { getState, updateState } from '../state/scene-state.js';
+import { createMaterial } from '../animation/render/pbr-material-factory.js';
+import { fitCameraToObject } from '../../util/scene/threejs-scene-controller.js';
+import { updateUvPanel } from '../../panels/asset-panel/uv-heading/uv-heading.js';
+import { processModelFileForHtmlEditor, getCurrentGlbBuffer, setCurrentGlbBuffer } from './glb-controller.js';
+import { createMeshVisibilityPanel } from '../../panels/asset-panel/mesh-heading/mesh-heading.js';
+import { updateAtlasVisualization } from '../../panels/asset-panel/atlas-heading/atlas-heading.js';
+import { updateRigPanel } from '../../panels/asset-panel/rig-heading/rig-heading.js';
+
+/**
+ * Load and setup a custom model from file
+ * @param {HTMLElement} loadingIndicator - Loading indicator element to show/hide
+ * @returns {Promise} A promise that resolves when the model is loaded and set up
+ */
+export function loadAndSetupModel(loadingIndicator) {
+    const state = getState();
+    
+    return new Promise((resolve, reject) => {
+        const loader = new GLTFLoader();
+        const reader = new FileReader();
+        
+        reader.onload = function(event) {
+            const modelData = event.target.result;
+            
+            try {
+                let bufferPromises = [];
+                
+                if (typeof setCurrentGlbBuffer === 'function') {
+                    setCurrentGlbBuffer(modelData);
+                }
+                
+                if (processModelFileForHtmlEditor && state.modelFile) {
+                    bufferPromises.push(processModelFileForHtmlEditor(state.modelFile));
+                }
+                
+                if (!state.currentGlb) {
+                    updateState('currentGlb', {
+                        arrayBuffer: modelData,
+                        fileName: state.modelFile?.name || 'model.glb',
+                        fileSize: state.modelFile?.size || modelData.byteLength
+                    });
+                } else {
+                    state.currentGlb.arrayBuffer = modelData;
+                }
+                
+                Promise.all(bufferPromises).then(() => {
+                    const buffer = state.currentGlb?.arrayBuffer || 
+                                  (getCurrentGlbBuffer && getCurrentGlbBuffer());
+                    
+                    if (!buffer) {
+                        console.warn('GLB buffer was not set during processing.');
+                    }
+                    
+                    return buffer;
+                }).then((buffer) => {
+                    loader.parse(modelData, '', (gltf) => {
+                        try {
+                            processLoadedModel(gltf);
+                            resolve();
+                        } catch (processError) {
+                            console.error('Error processing model:', processError);
+                            reject(processError);
+                        }
+                    }, undefined, function(error) {
+                        console.error('Error loading model. Please make sure it is a valid glTF/GLB file:', error);
+                        reject(error);
+                    });
+                }).catch(error => {
+                    console.warn('Buffer processing failed, attempting direct load:', error);
+                    loader.parse(modelData, '', (gltf) => {
+                        try {
+                            processLoadedModel(gltf);
+                            resolve();
+                        } catch (processError) {
+                            console.error('Error processing model:', processError);
+                            reject(processError);
+                        }
+                    }, undefined, function(error) {
+                        console.error('Error loading model. Please make sure it is a valid glTF/GLB file:', error);
+                        reject(error);
+                    });
+                });
+            } catch (parseError) {
+                console.error('Error parsing model data:', parseError);
+                reject(parseError);
+            }
+        };
+        
+        reader.onerror = function(error) {
+            console.error('Error reading model file:', error);
+            reject(error);
+        };
+        
+        reader.readAsArrayBuffer(state.modelFile);
+    });
+}
+
+/**
+ * Process a loaded GLTF model
+ * @param {Object} gltf - The loaded GLTF data
+ */
+function processLoadedModel(gltf) {
+    const state = getState();
+    
+    try {
+        if (state.scene) {
+            if (state.model) {
+                state.scene.remove(state.model);
+            }
+            if (state.cube) {
+                state.scene.remove(state.cube);
+            }
+        }
+        
+        updateState('meshes', []);
+        updateState('meshGroups', {});
+        
+        const model = gltf.scene;
+        updateState('model', model);
+        
+        const baseMaterial = createMaterial();
+        
+        const meshes = [];
+        model.traverse(node => {
+            if (node.isMesh) {
+                const originalMaterial = node.material;
+                const material = baseMaterial.clone();
+                
+                if (state.textureObjects.baseColor && originalMaterial.map && material.map) {
+                    material.map.offset.copy(originalMaterial.map.offset);
+                    material.map.repeat.copy(originalMaterial.map.repeat);
+                    material.map.rotation = originalMaterial.map.rotation;
+                }
+                
+                node.material = material;
+                
+                if (state.textureObjects.orm && !node.geometry.attributes.uv2 && node.geometry.attributes.uv) {
+                    node.geometry.attributes.uv2 = node.geometry.attributes.uv;
+                }
+                
+                meshes.push(node);
+                node.userData.meshId = meshes.length - 1;
+            }
+        });
+        
+        updateState('meshes', meshes);
+        state.scene.add(model);
+        
+        createMeshVisibilityPanel();
+        fitCameraToObject(model);
+        
+        const atlasTab = document.getElementById('atlas-tab');
+        const uvTab = document.getElementById('uv-tab');
+        
+        if (atlasTab && atlasTab.classList.contains('active')) {
+            updateAtlasVisualization();
+        }
+        if (uvTab && uvTab.classList.contains('active')) {
+            updateUvPanel();
+        }
+        
+        if (updateRigPanel) {
+            try {
+                updateRigPanel();
+            } catch (rigError) {
+                console.error('Error updating rig panel:', rigError);
+            }
+        }
+        
+    } catch (processError) {
+        console.error('Error processing model:', processError);
+        throw processError;
+    }
+}
+
+/**
+ * Create a basic cube with loaded textures for material debugging
+ * @returns {THREE.Mesh} The created cube mesh
+ */
+export function createCube() {
+    const state = getState();
+    
+    if (!state.scene) {
+        throw new Error("Scene not initialized. Try again after scene is ready.");
+    }
+    
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    
+    if (state.textureObjects.orm && state.textureObjects.orm.image) {
+        geometry.attributes.uv2 = geometry.attributes.uv;
+    }
+    
+    const material = createMaterial();
+    const cube = new THREE.Mesh(geometry, material);
+    cube.name = "Cube";
+    
+    state.scene.add(cube);
+    updateState('cube', cube);
+    updateState('meshes', [cube]);
+    
+    createMeshVisibilityPanel();
+    fitCameraToObject(cube);
+    
+    const atlasTab = document.getElementById('atlas-tab');
+    const uvTab = document.getElementById('uv-tab');
+    
+    if (atlasTab && atlasTab.classList.contains('active')) {
+        updateAtlasVisualization();
+    }
+    if (uvTab && uvTab.classList.contains('active')) {
+        updateUvPanel();
+    }
+    
+    return cube;
+}
+
+/**
+ * Create a multi-material test cube for lighting showcase
+ * Each face has a different material to show different lighting properties
+ * @returns {THREE.Mesh} The created lighting test cube mesh
+ */
+export function createLightingTestCube() {
+    const state = getState();
+    
+    if (!state.scene) {
+        throw new Error("Scene not initialized. Try again after scene is ready.");
+    }
+    
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    
+    const materials = [
+        new THREE.MeshStandardMaterial({
+            color: 0x8888ff,
+            metalness: 1.0,
+            roughness: 0.1,
+            name: 'Metal'
+        }),
+        new THREE.MeshStandardMaterial({
+            color: 0xcc3333,
+            metalness: 0.0,
+            roughness: 0.9,
+            name: 'Matte'
+        }),
+        new THREE.MeshStandardMaterial({
+            color: 0x8B4513,
+            metalness: 0.0,
+            roughness: 0.7,
+            name: 'Wood'
+        }),
+        new THREE.MeshStandardMaterial({
+            color: 0x22cc22,
+            metalness: 0.1,
+            roughness: 0.5,
+            name: 'Plastic'
+        }),
+        new THREE.MeshStandardMaterial({
+            color: 0xffffff,
+            metalness: 0.0,
+            roughness: 0.3,
+            name: 'Ceramic'
+        }),
+        new THREE.MeshStandardMaterial({
+            color: 0xaaccff,
+            metalness: 0.2,
+            roughness: 0.1,
+            transparent: true,
+            opacity: 0.7,
+            name: 'Glass'
+        })
+    ];
+    
+    const cube = new THREE.Mesh(geometry, materials);
+    cube.name = "LightingTestCube";
+    
+    state.scene.add(cube);
+    updateState('cube', cube);
+    updateState('meshes', [cube]);
+    
+    createMeshVisibilityPanel();
+    fitCameraToObject(cube);
+    
+    return cube;
+}
+
+/**
+ * Load the appropriate model for debugging
+ * @returns {Promise} A promise that resolves when the model is loaded
+ */
+export function loadDebugModel() {
+    const state = getState();
+    const loadingIndicator = document.getElementById('loading-indicator');
+    
+    if (loadingIndicator) {
+        loadingIndicator.style.display = 'flex';
+    }
+    
+    return new Promise((resolve, reject) => {
+        if (!state.scene) {
+            let attempts = 0;
+            const maxAttempts = 10;
+            const checkInterval = setInterval(() => {
+                attempts++;
+                if (state.scene) {
+                    clearInterval(checkInterval);
+                    handleModelLoading()
+                        .then(() => {
+                            if (loadingIndicator) loadingIndicator.style.display = 'none';
+                            resolve();
+                        })
+                        .catch((error) => {
+                            console.error('Model loading failed:', error);
+                            if (loadingIndicator) loadingIndicator.style.display = 'none';
+                            reject(error);
+                        });
+                } else if (attempts >= maxAttempts) {
+                    clearInterval(checkInterval);
+                    const error = new Error('Scene initialization timeout');
+                    console.error('Scene initialization timeout after', maxAttempts, 'attempts');
+                    if (loadingIndicator) loadingIndicator.style.display = 'none';
+                    reject(error);
+                }
+            }, 300);
+        } else {
+            handleModelLoading()
+                .then(() => {
+                    if (loadingIndicator) loadingIndicator.style.display = 'none';
+                    resolve();
+                })
+                .catch((error) => {
+                    console.error('Model loading failed:', error);
+                    if (loadingIndicator) loadingIndicator.style.display = 'none';
+                    reject(error);
+                });
+        }
+    });
+}
+
+/**
+ * Handle model loading based on current state
+ * @returns {Promise} A promise that resolves when the model is loaded
+ */
+function handleModelLoading() {
+    return prepareGlbBuffer().then(loadModelBasedOnState);
+}
+
+/**
+ * Prepare the GLB buffer for HTML editor integration if a custom model file is available
+ * @returns {Promise} A promise that resolves when the GLB buffer is prepared
+ */
+function prepareGlbBuffer() {
+    const state = getState();
+    
+    if (state.useCustomModel && state.modelFile) {
+        if (processModelFileForHtmlEditor) {
+            return processModelFileForHtmlEditor(state.modelFile)
+                .then(() => {
+                    const updatedState = getState();
+                    const buffer = updatedState.currentGlb?.arrayBuffer || getCurrentGlbBuffer();
+                    
+                    if (!buffer) {
+                        console.warn('GLB buffer was not set during pre-processing.');
+                    }
+                    
+                    return buffer;
+                });
+        }
+        return Promise.resolve(null);
+    }
+    
+    return Promise.resolve(null);
+}
+
+/**
+ * Load the appropriate model based on current state
+ * @returns {Promise} A promise that resolves when the model is loaded
+ */
+function loadModelBasedOnState() {
+    const state = getState();
+    
+    return new Promise((resolve, reject) => {
+        try {
+            if (state.selectedExample) {
+                if (state.selectedExample === 'rig') {
+                    import('../../modals/examples-modal/examples.js').then(examplesModule => {
+                        examplesModule.loadExample('wireframe-cube')
+                            .then(resolve)
+                            .catch(error => {
+                                console.warn('Failed to load rig example:', error);
+                                resolve();
+                            });
+                    }).catch(error => {
+                        console.warn('Failed to import examples module:', error);
+                        resolve();
+                    });
+                } else {
+                    console.warn(`Unknown example type: ${state.selectedExample}`);
+                    resolve();
+                }
+            } else if (state.useCustomModel && state.modelFile) {
+                loadAndSetupModel(null)
+                    .then(resolve)
+                    .catch(reject);
+            } else if (state.useLightingTestCube) {
+                try {
+                    createLightingTestCube();
+                    resolve();
+                } catch (error) {
+                    console.error('Failed to create lighting test cube:', error);
+                    reject(error);
+                }
+            } else if (state.textureObjects.baseColor || 
+                      state.textureObjects.orm || 
+                      state.textureObjects.normal) {
+                try {
+                    createCube();
+                    resolve();
+                } catch (error) {
+                    console.error('Failed to create cube:', error);
+                    reject(error);
+                }
+            } else {
+                resolve();
+            }
+        } catch (error) {
+            console.error('Error in loadModelBasedOnState:', error);
+            reject(error);
+        }
+    });
+}

package/src/asset_debugger/util/scene/threejs-preview-manager.js

@@ -0,0 +1,207 @@
+import { infoPanel, resetInfoPanel } from "../../widgets/mesh-info-widget";
+import { logPreviewError } from "../state/log-util";
+import { cleanupCSS3D } from "./css3d-scene-manager";
+import { cleanupThreeJsScene, setupThreeJsScene } from "./threejs-preview-setup";
+import { setIsPreviewActive, setIsPreviewAnimationPaused, setLastTextureUpdateTime } from "../state/animation-state";
+import { reverseAnimationFrameId } from "../state/css3d-state";
+import { 
+    animationCss3dObject,
+    animationCss3dRenderer,
+    animationCss3dScene,
+    animationPreviewCamera,
+    animationPreviewRenderer,
+    animationPreviewScene,
+    frameBuffer,
+    pendingTextureUpdate, 
+    previewPlane, 
+    previewRenderTarget, 
+    resetThreeJsState, 
+    setPendingTextureUpdate 
+} from "../state/threejs-state";
+import { previewAnimationId, resetLastAnimationFrameTime, resetPreviewAnimationId } from "../animation/playback/animation-preview-controller"
+
+/**
+ * Clean up Three.js preview resources using the generic cleanup utility
+ */
+export function cleanupThreeJsPreview() {
+    // Mark preview as inactive to stop animation loop first
+    setIsPreviewActive(false);
+    
+    cleanupCSS3D();
+    cleanupInfoPanel();
+    
+    // Set pending operations to false
+    if (pendingTextureUpdate) {
+        setPendingTextureUpdate(false);
+    }
+
+    // Collect DOM elements to clean up
+    const domElements = [];
+    
+    const textureCanvas = document.getElementById('html-texture-canvas');
+    if (textureCanvas) domElements.push(textureCanvas);
+    
+    const hiddenContent = document.getElementById('hidden-html-content');
+    if (hiddenContent) domElements.push(hiddenContent);
+    
+    const renderIframe = document.getElementById('html-render-iframe');
+    if (renderIframe) domElements.push(renderIframe);
+
+    // Collect event cleanup callbacks
+    const eventCleanupCallbacks = [
+        () => window.removeEventListener('resize', onPreviewResize),
+        () => {
+            if (animationPreviewCamera && animationPreviewCamera.userData && animationPreviewCamera.userData.keyHandler) {
+                document.removeEventListener('keydown', animationPreviewCamera.userData.keyHandler);
+            }
+        }
+    ];
+
+    // Collect objects to clean up
+    const objects = [];
+    if (previewPlane) objects.push(previewPlane);
+    if (animationCss3dObject) objects.push(animationCss3dObject);
+
+    // Additional cleanup configuration
+    const additionalCleanup = {
+        frameBuffer: frameBuffer,
+        animationFrames: [previewAnimationId, reverseAnimationFrameId].filter(id => id !== null),
+        textures: previewRenderTarget && previewRenderTarget.texture ? [previewRenderTarget.texture] : []
+    };
+
+    // Use the generic cleanup utility
+    cleanupThreeJsScene({
+        scene: animationPreviewScene,
+        camera: animationPreviewCamera,
+        renderer: animationPreviewRenderer,
+        objects,
+        domElements,
+        eventCleanupCallbacks,
+        additionalCleanup
+    });
+
+    // Handle CSS3D scene separately since it's not a standard Three.js scene
+    cleanupThreeJsScene({
+        scene: animationCss3dScene,
+        renderer: animationCss3dRenderer,
+        objects: [],
+        domElements: [],
+        eventCleanupCallbacks: [],
+        additionalCleanup: {}
+    });
+
+    // Reset global variables
+    resetThreeJsState();
+
+    // Reset debug flag and global functions
+    window._css3dDebugLogged = false;
+    if (window.animateMessages) {
+        window.animateMessages = null;
+    }
+
+    // Reset animation state
+    setIsPreviewAnimationPaused(false);
+    setLastTextureUpdateTime(0);
+    // TODO Move this variable to animation state object
+    setPendingTextureUpdate(false);
+    resetLastAnimationFrameTime();
+    resetPreviewAnimationId();
+
+    console.log('Three.js and CSS3D resources cleaned up');
+}
+
+// TODO Rename to seomthing better and make it not coupled to specific panel
+/**
+ * Clean up info panel resources
+ * Removes the info panel from the DOM and resets the infoPanel reference
+ * This is called when closing the preview or switching between preview modes
+ */
+function cleanupInfoPanel() {
+    if (infoPanel) {
+        try {
+            if (infoPanel.parentNode) {
+                infoPanel.parentNode.removeChild(infoPanel);
+            }
+        } catch (e) {
+            console.log('Error removing info panel:', e);
+        }
+        resetInfoPanel();
+    }
+}
+
+/**
+ * Handle window resize for the Three.js preview
+ */
+function onPreviewResize() {
+    const container = animationPreviewRenderer.domElement.parentElement;
+    if (!container) return;
+    
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    
+    // Update camera aspect ratio
+    if (animationPreviewCamera) {
+        animationPreviewCamera.aspect = containerWidth / containerHeight;
+        animationPreviewCamera.updateProjectionMatrix();
+    }
+    
+    // Update renderer
+    animationPreviewRenderer.setSize(containerWidth, containerHeight);
+}
+
+/**
+ * Initialize Three.js for HTML preview
+ * @param {HTMLElement} container - The container element for the Three.js canvas
+ * @param {HTMLIFrameElement} iframe - The iframe containing the HTML to render as texture
+ * @param {number} currentMeshId - The ID of the current mesh
+ * @param {boolean} createInfoPanel - Whether to create the info panel
+ */
+export function initThreeJsPreview(container, iframe, currentMeshId, createInfoPanel = true) {
+    // Handle window resize
+    window.addEventListener('resize', onPreviewResize);
+    try {
+        // We already have THREE imported at the top of the file
+        console.log('Using imported Three.js module');
+
+        // Only need to load html2canvas
+        loadHtml2Canvas(() => {
+            setupThreeJsScene(container, iframe, currentMeshId, createInfoPanel);
+        });
+    } catch (error) {
+        console.error('Error initializing Three.js preview:', error);
+        logPreviewError(`Three.js initialization error: ${error.message}`);
+    }
+}
+
+/**
+ * Load html2canvas library
+ * @param {Function} callback - Function to call when loading is complete
+ */
+function loadHtml2Canvas(callback) {
+    // Check if html2canvas is already loaded
+    if (typeof window.html2canvas !== 'undefined') {
+        callback();
+        return;
+    }
+    
+    // Check if it's already being loaded
+    if (document.querySelector('script[src*="html2canvas"]')) {
+        const checkInterval = setInterval(() => {
+            if (typeof window.html2canvas !== 'undefined') {
+                clearInterval(checkInterval);
+                callback();
+            }
+        }, 100);
+        return;
+    }
+    
+    // Load html2canvas
+    console.log('Loading html2canvas library');
+    const script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
+    script.onload = callback;
+    script.onerror = (error) => {
+        console.error('Failed to load html2canvas:', error);
+    };
+    document.head.appendChild(script);
+}