@littlecarlito/blorktools 0.50.4 → 0.51.0

package/src/asset_debugger/util/data/upload/glb-preview-controller.js

@@ -0,0 +1,317 @@
+import * as THREE from 'three';
+import { 
+    previewAnimationFrame, 
+    previewCamera, 
+    previewControls, 
+    previewRenderer, 
+    previewScene, 
+    setPreviewAnimationFrame, 
+    setPreviewCamera, 
+    setPreviewControls, 
+    setPreviewRenderer, 
+    setPreviewScene
+} from "../../state/glb-preview-state";
+import { OrbitControls } from 'three/examples/jsm/Addons';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+/**
+ * Create a 3D preview of a GLB model
+ * @param {File} file - The GLB file to preview
+ * @param {HTMLElement} container - The container element to render the preview in
+ * @returns {Promise} A promise that resolves with the scene and renderer when preview is created
+ */
+export function createGLBPreview(file, container) {
+    return new Promise((resolve, reject) => {
+        if (!file || !container) {
+            reject(new Error('Missing required parameters for GLB preview'));
+            return;
+        }
+        
+        // Clean up any existing preview
+        cleanupPreview();
+        
+        // Create the preview elements
+        container.innerHTML = '';
+        container.style.position = 'relative';
+        
+        // Create loading indicator
+        const loadingIndicator = document.createElement('div');
+        loadingIndicator.className = 'preview-loading';
+        loadingIndicator.innerHTML = `
+            <div class="preview-loading-spinner"></div>
+            <div class="preview-loading-text">Loading model...</div>
+        `;
+        container.appendChild(loadingIndicator);
+        
+        // Create renderer
+        setPreviewRenderer(new THREE.WebGLRenderer({ antialias: true, alpha: true }));
+        previewRenderer.setPixelRatio(window.devicePixelRatio);
+        previewRenderer.setClearColor(0x000000, 0);
+        previewRenderer.setSize(container.clientWidth, container.clientHeight);
+        previewRenderer.outputEncoding = THREE.sRGBEncoding;
+        container.appendChild(previewRenderer.domElement);
+        
+        // Create scene
+        setPreviewScene(new THREE.Scene());
+        previewScene.background = new THREE.Color(0x111111);
+        
+        // Add lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+        previewScene.add(ambientLight);
+        
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(1, 2, 3);
+        previewScene.add(directionalLight);
+        
+        // Create camera
+        setPreviewCamera(new THREE.PerspectiveCamera(
+            45, container.clientWidth / container.clientHeight, 0.1, 100
+        ));
+        previewCamera.position.set(0, 0, 2);
+        
+        // Create controls
+        setPreviewControls(new OrbitControls(previewCamera, previewRenderer.domElement));
+        previewControls.enableDamping = true;
+        previewControls.dampingFactor = 0.1;
+        previewControls.rotateSpeed = 0.8;
+        previewControls.enableZoom = true;
+        previewControls.zoomSpeed = 0.5;
+        previewControls.enablePan = false;
+        
+        // Create a URL for the model file
+        const modelUrl = URL.createObjectURL(file);
+        
+        // Load the model
+        const loader = new GLTFLoader();
+        loader.load(
+            modelUrl,
+            (gltf) => {
+                // Remove loading indicator
+                loadingIndicator.remove();
+                
+                // Add the model to the scene
+                const model = gltf.scene;
+                
+                // Calculate bounding box to properly scale and center the model
+                const box = new THREE.Box3().setFromObject(model);
+                const size = box.getSize(new THREE.Vector3());
+                const center = box.getCenter(new THREE.Vector3());
+                
+                // Reset position to center
+                model.position.x = -center.x;
+                model.position.y = -center.y;
+                model.position.z = -center.z;
+                
+                // Scale to fit
+                const maxDim = Math.max(size.x, size.y, size.z);
+                if (maxDim > 0) {
+                    const scale = 1.5 / maxDim; // Scale to fit within a 1.5 unit sphere
+                    model.scale.multiplyScalar(scale);
+                    
+                    // Update bounding box after scaling
+                    box.setFromObject(model);
+                    box.getSize(size);
+                    box.getCenter(center);
+                }
+                
+                // Create center group to help with positioning
+                const modelGroup = new THREE.Group();
+                modelGroup.add(model);
+                
+                // Position the model on the grid properly
+                // Find the lowest point of the model after centering
+                const minY = box.min.y;
+                
+                // If the model's minY isn't at the grid level, adjust it
+                if (minY !== 0) {
+                    // Move the model so its bottom is just above the grid
+                    model.position.y -= minY - 0.01; // Slight offset to avoid z-fighting
+                }
+                
+                // Update the bounding box after repositioning
+                box.setFromObject(model);
+                box.getSize(size);
+                box.getCenter(center);
+                
+                // Add to scene
+                previewScene.add(modelGroup);
+                
+                // Add a grid helper
+                const gridSize = Math.max(2, Math.ceil(Math.max(size.x, size.z) * 1.5));
+                const gridHelper = new THREE.GridHelper(gridSize, gridSize * 2, 0x888888, 0x444444);
+                // Position grid at y=0 (standard ground plane)
+                gridHelper.position.y = 0;
+                previewScene.add(gridHelper);
+                
+                // Calculate optimal camera position to ensure the model is fully visible
+                const fov = previewCamera.fov * (Math.PI / 180); // convert to radians
+                const aspectRatio = container.clientWidth / container.clientHeight;
+                
+                // Get model dimensions after scaling
+                const scaledSizeX = size.x;
+                const scaledSizeY = size.y;
+                const scaledSizeZ = size.z;
+                
+                // Calculate the center point of the model for camera targeting
+                // This should be the geometric center, not just (0,0,0)
+                const modelCenter = new THREE.Vector3(0, box.getCenter(new THREE.Vector3()).y, 0);
+                
+                // Calculate required distance for each dimension
+                // For Z dimension, we need to consider the model's depth and our angle of view
+                const distanceForHeight = scaledSizeY / (2 * Math.tan(fov / 2));
+                const distanceForWidth = scaledSizeX / (2 * Math.tan(fov / 2) * aspectRatio);
+                const distanceForDepth = scaledSizeZ * 1.2; // Add more space for depth
+                
+                // Base distance calculation
+                let optimalDistance = Math.max(distanceForWidth, distanceForHeight, distanceForDepth);
+                
+                // Detect extreme model shapes and adjust accordingly
+                const aspectRatioXY = scaledSizeX / scaledSizeY;
+                const aspectRatioXZ = scaledSizeX / scaledSizeZ;
+                const aspectRatioYZ = scaledSizeY / scaledSizeZ;
+                
+                // Add extra buffer for camera distance
+                let bufferMultiplier = 1.6;
+                
+                // Add more buffer for flat/wide models (high aspect ratios)
+                if (aspectRatioXY > 4 || aspectRatioXY < 0.25 || 
+                    aspectRatioXZ > 4 || aspectRatioXZ < 0.25 || 
+                    aspectRatioYZ > 4 || aspectRatioYZ < 0.25) {
+                    bufferMultiplier = 2.0; // More space for extreme shapes
+                    console.log('Extreme model shape detected - using larger buffer');
+                }
+                
+                // Apply buffer to optimal distance
+                optimalDistance *= bufferMultiplier;
+                
+                // Set minimum distance
+                const finalDistance = Math.max(optimalDistance, 2.5);
+                
+                // Calculate X and Y offsets for perspective view
+                const xOffset = finalDistance * 0.4;
+                let yOffset = finalDistance * 0.3;
+                
+                // Auto orient the model for better visibility for flat models
+                if (scaledSizeZ < scaledSizeX * 0.25 && scaledSizeZ < scaledSizeY * 0.25) {
+                    // Model is very flat - orient it to face the camera better
+                    modelGroup.rotation.x = -Math.PI / 12; // Slight tilt
+                    
+                    // Adjust model position to remain on grid after tilting
+                    const elevationOffset = scaledSizeX * Math.sin(Math.PI / 12) / 2;
+                    model.position.y += elevationOffset;
+                }
+                
+                // Calculate optimal camera target (vertical center of the model)
+                // This ensures the camera is looking at the middle of the model, not the bottom
+                const targetY = modelCenter.y;
+                
+                // Special handling for very tall models
+                if (scaledSizeY > scaledSizeX * 3 && scaledSizeY > scaledSizeZ * 3) {
+                    // For very tall models, position camera higher to see from middle
+                    yOffset = Math.min(targetY + finalDistance * 0.2, finalDistance * 0.7);
+                } else if (scaledSizeY < 0.5) {
+                    // For very flat horizontal models, don't position camera too low
+                    yOffset = Math.max(targetY * 2, finalDistance * 0.2);
+                } else {
+                    // For normal models, position camera to see the entire height
+                    // We need to raise the camera enough to see the top of the model
+                    yOffset = Math.max(targetY, finalDistance * 0.2);
+                }
+                
+                // Final camera positioning - position relative to the model's center point
+                previewCamera.position.set(
+                    xOffset,
+                    yOffset,
+                    finalDistance
+                );
+                
+                // Ensure controls target is at the center of the model (y-center, not ground level)
+                previewControls.target.set(0, targetY, 0);
+                previewControls.update();
+                
+                // Animation loop - only updates controls, no auto-rotation
+                const animate = () => {
+                    setPreviewAnimationFrame(requestAnimationFrame(animate));
+                    previewControls.update();
+                    previewRenderer.render(previewScene, previewCamera);
+                };
+                animate();
+                
+                // Handle window resize
+                const handleResize = () => {
+                    if (!container) return;
+                    
+                    const width = container.clientWidth;
+                    const height = container.clientHeight;
+                    
+                    previewCamera.aspect = width / height;
+                    previewCamera.updateProjectionMatrix();
+                    
+                    previewRenderer.setSize(width, height);
+                };
+                
+                window.addEventListener('resize', handleResize);
+                
+                // Clean up object URL and event listener when done
+                const cleanup = () => {
+                    URL.revokeObjectURL(modelUrl);
+                    window.removeEventListener('resize', handleResize);
+                    cleanupPreview();
+                };
+                
+                // Resolve with the scene, model, and cleanup function
+                resolve({ 
+                    scene: previewScene, 
+                    camera: previewCamera, 
+                    renderer: previewRenderer,
+                    controls: previewControls, 
+                    model: model, 
+                    gltf: gltf,
+                    cleanup: cleanup 
+                });
+            },
+            (xhr) => {
+                // Update loading progress
+                const percent = Math.floor((xhr.loaded / xhr.total) * 100);
+                loadingIndicator.querySelector('.preview-loading-text').textContent = 
+                    `Loading model... ${percent}%`;
+            },
+            (error) => {
+                console.error('Error loading model:', error);
+                loadingIndicator.remove();
+                
+                // Show error message
+                const errorMsg = document.createElement('div');
+                errorMsg.className = 'no-image-message-container visible';
+                errorMsg.textContent = 'Error loading model. Please try another file.';
+                container.appendChild(errorMsg);
+                
+                // Reject the promise with the error
+                reject(error);
+            }
+        );
+    });
+}
+
+/**
+ * Clean up the preview resources
+ */
+function cleanupPreview() {
+    if (previewAnimationFrame) {
+        cancelAnimationFrame(previewAnimationFrame);
+        setPreviewAnimationFrame(null);
+    }
+    
+    if (previewControls) {
+        previewControls.dispose();
+        setPreviewControls(null);
+    }
+    
+    if (previewRenderer) {
+        previewRenderer.dispose();
+        setPreviewRenderer(null);
+    }
+    
+    setPreviewScene(null);
+    setPreviewCamera(null);
+}

package/src/asset_debugger/util/data/upload/lighting-file-handler.js

@@ -0,0 +1,194 @@
+import { updateState } from '../../state/scene-state';
+import { processLightingFile } from '../../workers/worker-manager';
+import * as worldPanelModule from '../../../panels/world-panel/world-panel';
+import { hidePreviewLoading, showPreviewLoading } from '../../../loading-splash/preview-loading-splash';
+import { formatFileSize } from './file-upload-manager';
+import { createClearButton } from '../../../landing-page/landing-page';
+
+/**
+ * Handle lighting file upload
+ * @param {File} file - The uploaded file
+ * @param {HTMLElement} infoElement - Element to display file info
+ * @param {HTMLElement} previewElement - Element to display file preview
+ * @param {HTMLElement} dropzone - The dropzone element
+ */
+export function handleLightingUpload(file, infoElement, previewElement, dropzone) {
+    // Store the file in the state
+    updateState('lightingFile', file);
+    
+    // Store original h3 title
+    const originalTitle = dropzone.querySelector('h3').textContent;
+    
+    // Mark dropzone as having a file
+    dropzone.classList.add('has-file');
+    
+    // Clear the entire dropzone content
+    dropzone.innerHTML = '';
+    
+    // Add back just the title as a header
+    const titleElement = document.createElement('h3');
+    titleElement.textContent = originalTitle;
+    dropzone.appendChild(titleElement);
+    
+    // Add the clear button using the shared function
+    dropzone.appendChild(createClearButton(dropzone, 'lighting', originalTitle));
+    
+    // Add file info
+    infoElement = document.createElement('p');
+    infoElement.className = 'file-info';
+    infoElement.textContent = `${file.name} (${formatFileSize(file.size)})`;
+    dropzone.appendChild(infoElement);
+    
+    // Create a container for the preview that will hold both the canvas and the loading indicator
+    const previewDiv = document.createElement('div');
+    previewDiv.className = 'preview';
+    dropzone.appendChild(previewDiv);
+    
+    const containerDiv = document.createElement('div');
+    containerDiv.className = 'hdr-preview-container';
+    
+    // Add event listener to prevent click events from reaching the dropzone
+    containerDiv.addEventListener('click', (e) => {
+        e.stopPropagation();
+    });
+    
+    // Add event listener to prevent mousedown events to avoid accidental drag interactions
+    containerDiv.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+    });
+    
+    previewDiv.appendChild(containerDiv);
+    
+    // Show loading state directly on the container
+    showPreviewLoading(containerDiv);
+    
+    // Create canvas for the preview with appropriate size but keep it hidden initially
+    const canvas = document.createElement('canvas');
+    canvas.className = 'hdr-preview-canvas';
+    
+    // Make canvas dimensions equal for a square aspect ratio
+    const previewSize = 256;
+    canvas.width = previewSize;
+    canvas.height = previewSize;
+    
+    canvas.classList.add('hidden'); // Initially hidden until loaded
+    
+    // Create a message element for errors/status
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'no-image-message-container hidden';
+    
+    // Add elements to the container
+    containerDiv.appendChild(canvas);
+    containerDiv.appendChild(messageDiv);
+    
+    // Process the lighting file in a web worker
+    processLightingFile(file)
+        .then(result => {
+            // Use the worker result to process the lighting file
+            const fileType = result.fileType;
+            const arrayBuffer = result.arrayBuffer;
+            
+            // For EXR files
+            if (fileType === 'exr') {
+                import('three').then(THREE => {
+                    import('three/addons/loaders/EXRLoader.js').then(({ EXRLoader }) => {
+                        const loader = new EXRLoader();
+                        loader.setDataType(THREE.FloatType);
+                        
+                        // Create a Blob from the array buffer
+                        const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
+                        const url = URL.createObjectURL(blob);
+                        
+                        loader.load(url, texture => {
+                            // Show the canvas
+                            canvas.classList.add('visible');
+                            canvas.classList.remove('hidden');
+                            
+                            // Create a sphere preview with proper controls
+                            worldPanelModule.createSpherePreview(THREE, texture, canvas, messageDiv);
+                            
+                            // Clean up URL after loading
+                            URL.revokeObjectURL(url);
+                            
+                            // Hide loading indicator
+                            hidePreviewLoading(containerDiv);
+                            
+                            // Store the lighting texture for use in previews
+                            updateState('environmentTexture', texture);
+                        }, undefined, error => {
+                            console.error('Error loading EXR texture:', error);
+                            canvas.classList.add('visible');
+                            canvas.classList.remove('hidden');
+                            hidePreviewLoading(containerDiv);
+                            if (messageDiv) {
+                                messageDiv.classList.remove('hidden');
+                                messageDiv.classList.add('visible');
+                                messageDiv.textContent = 'Error loading EXR file';
+                            }
+                        });
+                    }).catch(handleLightingError);
+                }).catch(handleLightingError);
+            } 
+            // For HDR files
+            else if (fileType === 'hdr') {
+                import('three').then(THREE => {
+                    import('three/addons/loaders/RGBELoader.js').then(({ RGBELoader }) => {
+                        const loader = new RGBELoader();
+                        
+                        // Create a Blob from the array buffer
+                        const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
+                        const url = URL.createObjectURL(blob);
+                        
+                        loader.load(url, texture => {
+                            // Show the canvas
+                            canvas.classList.add('visible');
+                            canvas.classList.remove('hidden');
+                            
+                            // Create a sphere preview with proper controls
+                            worldPanelModule.createSpherePreview(THREE, texture, canvas, messageDiv);
+                            
+                            // Clean up URL after loading
+                            URL.revokeObjectURL(url);
+                            
+                            // Hide loading indicator
+                            hidePreviewLoading(containerDiv);
+                            
+                            // Store the lighting texture for use in previews
+                            updateState('environmentTexture', texture);
+                        }, undefined, error => {
+                            console.error('Error loading HDR texture:', error);
+                            canvas.classList.add('visible');
+                            canvas.classList.remove('hidden');
+                            hidePreviewLoading(containerDiv);
+                            if (messageDiv) {
+                                messageDiv.classList.remove('hidden');
+                                messageDiv.classList.add('visible');
+                                messageDiv.textContent = 'Error loading HDR file';
+                            }
+                        });
+                    }).catch(handleLightingError);
+                }).catch(handleLightingError);
+            }
+            else {
+                handleLightingError(new Error('Unsupported file type: ' + fileType));
+                return -1;
+            }
+        })
+        .catch(error => {
+            console.error('Error processing lighting file:', error);
+            handleLightingError(error);
+        });
+        
+    // Helper function to handle lighting errors
+    function handleLightingError(error) {
+        console.error('Lighting error:', error);
+        canvas.classList.add('visible');
+        canvas.classList.remove('hidden');
+        hidePreviewLoading(containerDiv);
+        if (messageDiv) {
+            messageDiv.classList.remove('hidden');
+            messageDiv.classList.add('visible');
+            messageDiv.textContent = 'Error loading lighting file';
+        }
+    }
+}

package/src/asset_debugger/util/data/upload/model-file-manager.js

@@ -0,0 +1,104 @@
+import { createClearButton } from "../../../landing-page/landing-page";
+import { hidePreviewLoading, showPreviewLoading } from "../../../loading-splash/preview-loading-splash";
+import { updateState } from "../../state/scene-state";
+import { formatFileSize } from "./file-upload-manager";
+import { createGLBPreview } from "./glb-preview-controller";
+import { processGLBFile } from "./glb-file-handler";
+
+/**
+ * Handle model file upload
+ * @param {File} file - The uploaded file
+ * @param {HTMLElement} infoElement - Element to display file info
+ * @param {HTMLElement} dropzone - The dropzone element
+ */
+export function handleModelUpload(file, infoElement, dropzone) {
+    // Store the file in the state with a single update
+    updateState({
+        modelFile: file,
+        useCustomModel: true
+    });
+    
+    // If dropzone is null, find it by ID
+    if (!dropzone) {
+        console.log("Dropzone parameter is null, attempting to find model dropzone by ID");
+        dropzone = document.getElementById('model-dropzone');
+        
+        // If still null, just update state and return early
+        if (!dropzone) {
+            console.error("Could not find model-dropzone element, skipping UI update");
+            return;
+        }
+    }
+    
+    // Store original h3 title
+    const originalTitle = dropzone.querySelector('h3').textContent;
+    
+    // Mark dropzone as having a file
+    dropzone.classList.add('has-file');
+    
+    // Clear the entire dropzone content
+    dropzone.innerHTML = '';
+    
+    // Add back just the title as a header
+    const titleElement = document.createElement('h3');
+    titleElement.textContent = originalTitle;
+    dropzone.appendChild(titleElement);
+    
+    // Add the clear button using the shared function
+    dropzone.appendChild(createClearButton(dropzone, 'model', originalTitle));
+    
+    // Add file info
+    infoElement = document.createElement('p');
+    infoElement.className = 'file-info';
+    infoElement.id = 'model-info';
+    infoElement.textContent = `${file.name} (${formatFileSize(file.size)})`;
+    dropzone.appendChild(infoElement);
+    
+    // Create a preview container
+    const previewDiv = document.createElement('div');
+    previewDiv.className = 'preview model-preview-container';
+    previewDiv.id = 'model-preview';
+    
+    // Add event listener to prevent click events from reaching the dropzone
+    previewDiv.addEventListener('click', (e) => {
+        e.stopPropagation();
+    });
+    
+    // Add event listener to prevent mousedown events to avoid accidental drag interactions
+    previewDiv.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+    });
+    
+    dropzone.appendChild(previewDiv);
+    
+    // Show loading state
+    showPreviewLoading(previewDiv);
+    
+    // Process the model file using our new GLB utility
+    processGLBFile(file)
+        .then(result => {
+            // Create the 3D preview with our new GLB utility
+            return createGLBPreview(file, previewDiv);
+        })
+        .then(result => {
+            // Hide loading indicator
+            hidePreviewLoading(previewDiv);
+            
+            // Update the texture dropzone hints to show textures are optional with GLB
+            const textureHints = document.querySelectorAll('.texture-hint');
+            textureHints.forEach(hint => {
+                hint.textContent = 'Textures are optional with GLB';
+                hint.classList.add('optional');
+            });
+        })
+        .catch(error => {
+            console.error('Error processing model file:', error);
+            hidePreviewLoading(previewDiv);
+            
+            // Show error message in preview
+            const errorMsg = document.createElement('div');
+            errorMsg.className = 'no-image-message-container visible';
+            errorMsg.textContent = 'Error loading model. Please try another file.';
+            previewDiv.appendChild(errorMsg);
+        });
+}