@3driseai/3drise-core 1.0.1

package/dist/utils/GalleryCreator.js

@@ -0,0 +1,465 @@
+export class GalleryCreator {
+    /**
+     * Creates a scattered gallery layout with concentric circles
+     * Center image + rings of images around it, with side images rotated inward
+     */
+    static scattered(imageUrls, spacing = 3.5, count) {
+        const numImages = count || imageUrls.length;
+        const frames = [];
+        const actualCount = Math.min(numImages, imageUrls.length);
+        if (actualCount === 0)
+            return frames;
+        // First image at center
+        frames.push({
+            url: imageUrls[0],
+            position: [0, 0, 0],
+            rotation: [0, 0, 0],
+            videoSrc: null,
+        });
+        let imageIndex = 1;
+        let ringNumber = 1;
+        // Distribute remaining images across rings
+        while (imageIndex < actualCount) {
+            const radius = ringNumber * spacing;
+            // Each ring can hold more images as radius increases
+            const imagesInRing = Math.min(Math.ceil(6 + ringNumber * 2), // 8, 10, 12, 14... images per ring
+            actualCount - imageIndex);
+            for (let i = 0; i < imagesInRing && imageIndex < actualCount; i++) {
+                const angle = (i / imagesInRing) * Math.PI * 2;
+                const x = Math.cos(angle) * radius;
+                const z = Math.sin(angle) * radius;
+                frames.push({
+                    url: imageUrls[imageIndex],
+                    position: [x, 0, z],
+                    rotation: [0, 0, 0], // All images face forward for now
+                    videoSrc: null,
+                });
+                imageIndex++;
+            }
+            ringNumber++;
+        }
+        return frames;
+    }
+    /**
+     * Creates a grid/tile layout with frames arranged in rows and columns
+     */
+    static tiles(imageUrls, columns = 3, spacing = 2.5) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        const rows = Math.ceil(totalImages / columns);
+        // Calculate centering offset to position gallery center at [0, 0, 0]
+        const totalWidth = (columns - 1) * spacing;
+        const totalHeight = (rows - 1) * spacing;
+        const offsetX = -totalWidth / 2;
+        const offsetY = -totalHeight / 2;
+        for (let i = 0; i < totalImages; i++) {
+            const row = Math.floor(i / columns);
+            const col = i % columns;
+            frames.push({
+                url: imageUrls[i],
+                position: [
+                    offsetX + col * spacing,
+                    offsetY + row * spacing,
+                    0, // Centered at origin
+                ],
+                rotation: [0, 0, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a horizontal row layout
+     */
+    static horizontal(imageUrls, spacing = 2.5, startX = 0) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        // Calculate centering offset to position gallery center at [0, 0, 0]
+        const totalWidth = (totalImages - 1) * spacing;
+        const offsetX = startX - totalWidth / 2;
+        for (let i = 0; i < totalImages; i++) {
+            frames.push({
+                url: imageUrls[i],
+                position: [offsetX + i * spacing, 0, 0],
+                rotation: [0, 0, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a vertical column layout
+     */
+    static vertical(imageUrls, spacing = 2.0, startY = 0) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        // Calculate centering offset to position gallery center at [0, 0, 0]
+        const totalHeight = (totalImages - 1) * spacing;
+        const offsetY = startY - totalHeight / 2;
+        for (let i = 0; i < totalImages; i++) {
+            frames.push({
+                url: imageUrls[i],
+                position: [0, offsetY + i * spacing, 0],
+                rotation: [0, 0, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a circular layout with images arranged in a ring
+     */
+    static circular(imageUrls, radius = 5) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const angle = (i / totalImages) * Math.PI * 2;
+            const x = Math.cos(angle) * radius;
+            const z = Math.sin(angle) * radius;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, 0, z],
+                rotation: [0, -angle, 0], // Face inward
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a spiral layout ascending or expanding outward
+     */
+    static spiral(imageUrls, radius = 5, rotations = 2, heightIncrement = 0.5) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const progress = i / totalImages;
+            const angle = progress * rotations * Math.PI * 2;
+            const currentRadius = radius * (1 - progress * 0.3); // Spiral inward slightly
+            const x = Math.cos(angle) * currentRadius;
+            const z = Math.sin(angle) * currentRadius;
+            const y = progress * totalImages * heightIncrement - (totalImages * heightIncrement) / 2;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, y, z],
+                rotation: [0, -angle, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates an arc/curved layout
+     */
+    static arc(imageUrls, radius = 5, arcAngle = Math.PI) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const progress = i / (totalImages - 1 || 1);
+            const angle = -arcAngle / 2 + progress * arcAngle;
+            const x = Math.sin(angle) * radius;
+            const z = Math.cos(angle) * radius;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, 0, z],
+                rotation: [0, -angle, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a pyramid stack layout
+     */
+    static pyramid(imageUrls, layers = 3, spacing = 2.5) {
+        const frames = [];
+        let imageIndex = 0;
+        for (let layer = layers; layer > 0; layer--) {
+            const itemsInLayer = layer;
+            const layerY = (layers - layer) * spacing - (layers * spacing) / 2;
+            const layerWidth = (itemsInLayer - 1) * spacing;
+            const offsetX = -layerWidth / 2;
+            for (let i = 0; i < itemsInLayer && imageIndex < imageUrls.length; i++) {
+                frames.push({
+                    url: imageUrls[imageIndex],
+                    position: [offsetX + i * spacing, layerY, 0],
+                    rotation: [0, 0, 0],
+                    videoSrc: null,
+                });
+                imageIndex++;
+            }
+        }
+        return frames;
+    }
+    /**
+     * Creates a helix (DNA-style spiral)
+     */
+    static helix(imageUrls, radius = 3, rotations = 3, heightIncrement = 0.4) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const progress = i / totalImages;
+            const angle = progress * rotations * Math.PI * 2;
+            const x = Math.cos(angle) * radius;
+            const z = Math.sin(angle) * radius;
+            const y = progress * totalImages * heightIncrement - (totalImages * heightIncrement) / 2;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, y, z],
+                rotation: [0, -angle - Math.PI / 2, 0], // Tangent to helix
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a 3D box layout with images on all 6 faces
+     */
+    static box(imageUrls, size = 5) {
+        const frames = [];
+        const imagesPerFace = Math.ceil(imageUrls.length / 6);
+        let imageIndex = 0;
+        // Define the 6 faces: Front, Back, Right, Left, Top, Bottom
+        const faceConfigs = [
+            { name: 'Front', basePos: [0, 0, size], baseRot: [0, 0, 0] },
+            { name: 'Back', basePos: [0, 0, -size], baseRot: [0, Math.PI, 0] },
+            { name: 'Right', basePos: [size, 0, 0], baseRot: [0, Math.PI / 2, 0] },
+            { name: 'Left', basePos: [-size, 0, 0], baseRot: [0, -Math.PI / 2, 0] },
+            { name: 'Top', basePos: [0, size, 0], baseRot: [-Math.PI / 2, 0, 0] },
+            { name: 'Bottom', basePos: [0, -size, 0], baseRot: [Math.PI / 2, 0, 0] }
+        ];
+        for (let faceIndex = 0; faceIndex < 6 && imageIndex < imageUrls.length; faceIndex++) {
+            const config = faceConfigs[faceIndex];
+            const itemsOnFace = Math.min(imagesPerFace, imageUrls.length - imageIndex);
+            const cols = Math.ceil(Math.sqrt(itemsOnFace));
+            const rows = Math.ceil(itemsOnFace / cols);
+            const spacing = (size * 1.8) / Math.max(cols, rows);
+            for (let i = 0; i < itemsOnFace; i++) {
+                const row = Math.floor(i / cols);
+                const col = i % cols;
+                const offsetX = (col - (cols - 1) / 2) * spacing;
+                const offsetY = (row - (rows - 1) / 2) * spacing;
+                // Calculate position based on face orientation
+                let position;
+                if (faceIndex === 0)
+                    position = [offsetX, offsetY, size]; // Front
+                else if (faceIndex === 1)
+                    position = [-offsetX, offsetY, -size]; // Back (mirror X)
+                else if (faceIndex === 2)
+                    position = [size, offsetY, -offsetX]; // Right (X fixed, offset in -Z)
+                else if (faceIndex === 3)
+                    position = [-size, offsetY, offsetX]; // Left (X fixed, offset in +Z)
+                else if (faceIndex === 4)
+                    position = [offsetX, size, -offsetY]; // Top (Y fixed, offset in -Z)
+                else
+                    position = [offsetX, -size, offsetY]; // Bottom (Y fixed, offset in +Z)
+                frames.push({
+                    url: imageUrls[imageIndex],
+                    position,
+                    rotation: config.baseRot,
+                    videoSrc: null,
+                });
+                imageIndex++;
+            }
+        }
+        return frames;
+    }
+    /**
+     * Creates a sphere layout with images distributed evenly on a sphere surface
+     * Uses Fibonacci sphere algorithm for even distribution
+     */
+    static sphere(imageUrls, radius = 5) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        const goldenRatio = (1 + Math.sqrt(5)) / 2;
+        const angleIncrement = Math.PI * 2 * goldenRatio;
+        for (let i = 0; i < totalImages; i++) {
+            // Fibonacci sphere distribution
+            const t = i / totalImages;
+            const inclination = Math.acos(1 - 2 * t); // 0 to PI (theta - angle from north pole)
+            const azimuth = angleIncrement * i; // phi - angle around equator
+            // Convert spherical to Cartesian coordinates
+            const x = radius * Math.sin(inclination) * Math.cos(azimuth);
+            const y = radius * Math.cos(inclination);
+            const z = radius * Math.sin(inclination) * Math.sin(azimuth);
+            frames.push({
+                url: imageUrls[i],
+                position: [x, y, z],
+                rotation: [0, 0, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a fan/radial layout
+     */
+    static fan(imageUrls, radius = 5, arcAngle = Math.PI * 1.5) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const progress = i / (totalImages - 1 || 1);
+            const angle = -arcAngle / 2 + progress * arcAngle;
+            const x = Math.sin(angle) * radius;
+            const z = Math.cos(angle) * radius;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, 0, z],
+                rotation: [0, -angle, 0], // All face center
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a wave pattern layout
+     */
+    static wave(imageUrls, amplitude = 2, frequency = 2, spacing = 1.5) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        const totalWidth = (totalImages - 1) * spacing;
+        const offsetX = -totalWidth / 2;
+        for (let i = 0; i < totalImages; i++) {
+            const x = offsetX + i * spacing;
+            const progress = i / totalImages;
+            const y = Math.sin(progress * frequency * Math.PI * 2) * amplitude;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, y, 0],
+                rotation: [0, 0, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a tunnel/perspective layout
+     */
+    static tunnel(imageUrls, depth = 20, scaleFactor = 0.8) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const progress = i / totalImages;
+            const z = -progress * depth;
+            const scale = Math.pow(scaleFactor, i);
+            frames.push({
+                url: imageUrls[i],
+                position: [0, 0, z],
+                rotation: [0, 0, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a tunnel-pyramid layout combining depth perspective with pyramid stacking
+     * Starts with 1 frame at front, expands as it recedes. All at y=0
+     */
+    static tunnelPyramid(imageUrls, depth = 20, layers = 6, spacing = 2.5) {
+        const frames = [];
+        let imageIndex = 0;
+        let currentLayer = 1;
+        // Continue adding layers until all images are placed
+        while (imageIndex < imageUrls.length) {
+            const itemsInLayer = currentLayer;
+            const layerProgress = (currentLayer - 1) / (layers - 1 || 1);
+            const z = -layerProgress * depth;
+            const layerWidth = (itemsInLayer - 1) * spacing;
+            const offsetX = -layerWidth / 2;
+            for (let i = 0; i < itemsInLayer && imageIndex < imageUrls.length; i++) {
+                frames.push({
+                    url: imageUrls[imageIndex],
+                    position: [offsetX + i * spacing, 0, z], // Y always 0
+                    rotation: [0, 0, 0],
+                    videoSrc: null,
+                });
+                imageIndex++;
+            }
+            currentLayer++;
+        }
+        return frames;
+    }
+    /**
+     * Creates a tunnel-wave layout combining depth perspective with wave pattern
+     * Wave pattern in X axis, all at y=0, receding in Z
+     */
+    static tunnelWave(imageUrls, depth = 20, amplitude = 2, frequency = 2, spacing = 1.5) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const progress = i / totalImages;
+            const x = Math.sin(progress * frequency * Math.PI * 2) * amplitude;
+            const z = -progress * depth;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, 0, z], // Y always 0, wave in X
+                rotation: [0, 0, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Creates a random/organic layout
+     */
+    static random(imageUrls, bounds = 8) {
+        const frames = [];
+        const totalImages = imageUrls.length;
+        for (let i = 0; i < totalImages; i++) {
+            const x = (Math.random() - 0.5) * bounds * 2;
+            const y = (Math.random() - 0.5) * bounds;
+            const z = (Math.random() - 0.5) * bounds * 2;
+            const rotY = Math.random() * Math.PI * 2;
+            frames.push({
+                url: imageUrls[i],
+                position: [x, y, z],
+                rotation: [0, rotY, 0],
+                videoSrc: null,
+            });
+        }
+        return frames;
+    }
+    /**
+     * Main method to generate gallery layout based on settings
+     */
+    static generateGallery(imageUrls, settings) {
+        console.log('GalleryCreator.generate called with settings:', settings);
+        switch (settings.layout) {
+            case 'scattered':
+                return this.scattered(imageUrls, settings.spacing || 3.5);
+            case 'tiles':
+                return this.tiles(imageUrls, settings.columns || 3, settings.spacing || 2.5);
+            case 'horizontal':
+                return this.horizontal(imageUrls, settings.spacing || 2.5, settings.startX || 0);
+            case 'vertical':
+                return this.vertical(imageUrls, settings.spacing || 2.0, settings.startY || 0);
+            case 'circular':
+                return this.circular(imageUrls, settings.radius || 5);
+            case 'spiral':
+                return this.spiral(imageUrls, settings.radius || 5, settings.rotations || 2, settings.heightIncrement || 0.5);
+            case 'arc':
+                return this.arc(imageUrls, settings.radius || 5, settings.arcAngle || Math.PI);
+            case 'pyramid':
+                return this.pyramid(imageUrls, settings.layers || 3, settings.spacing || 2.5);
+            case 'helix':
+                return this.helix(imageUrls, settings.radius || 3, settings.rotations || 3, settings.heightIncrement || 0.4);
+            case 'box':
+                return this.box(imageUrls, settings.size || 5);
+            case 'sphere':
+                return this.sphere(imageUrls, settings.radius || 5);
+            case 'fan':
+                return this.fan(imageUrls, settings.radius || 5, settings.arcAngle || Math.PI * 1.5);
+            case 'wave':
+                return this.wave(imageUrls, settings.amplitude || 2, settings.frequency || 2, settings.spacing || 1.5);
+            case 'tunnel':
+                return this.tunnel(imageUrls, settings.depth || 20, settings.scaleFactor || 0.8);
+            case 'tunnelPyramid':
+                return this.tunnelPyramid(imageUrls, settings.depth || 20, settings.layers || 3, settings.spacing || 2.5);
+            case 'tunnelWave':
+                return this.tunnelWave(imageUrls, settings.depth || 20, settings.amplitude || 2, settings.frequency || 2, settings.spacing || 1.5);
+            case 'random':
+                return this.random(imageUrls, settings.bounds || 8);
+            default:
+                return this.scattered(imageUrls);
+        }
+    }
+}

package/dist/utils/GalleryLayouts.d.ts

@@ -0,0 +1,10 @@
+import { GalleryLayout, GalleryLayoutConfig, GalleryLayoutSettings } from "../types/gallery";
+export declare const GALLERY_LAYOUT_CONFIGS: Record<GalleryLayout, GalleryLayoutConfig>;
+export declare const getLayoutSettings: (layout: GalleryLayout, layoutSettings: GalleryLayoutSettings) => GalleryLayoutSettings;
+export declare const getLayoutSettingsFields: (layout: GalleryLayout) => Array<keyof Omit<GalleryLayoutSettings, "layout">>;
+export declare const getLayoutPresets: () => {
+    label: string;
+    value: GalleryLayout;
+}[];
+export declare const layoutUsesField: (layout: GalleryLayout, field: keyof Omit<GalleryLayoutSettings, "layout">) => boolean;
+//# sourceMappingURL=GalleryLayouts.d.ts.map

package/dist/utils/GalleryLayouts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryLayouts.d.ts","sourceRoot":"","sources":["../../src/utils/GalleryLayouts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7F,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,aAAa,EAAE,mBAAmB,CAkB7E,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,aAAa,EAAE,gBAAgB,qBAAqB,KAAG,qBAmBhG,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,aAAa,KAAG,KAAK,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAyD,CAAC;AAC3K,eAAO,MAAM,gBAAgB,QAAO;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACxB,EAA0F,CAAC;AAChG,eAAO,MAAM,eAAe,GAAI,QAAQ,aAAa,EAAE,OAAO,MAAM,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,KAAG,OAAkF,CAAC"}

package/dist/utils/GalleryLayouts.js

@@ -0,0 +1,43 @@
+const GOLDENRATIO = 1.61803398875;
+export const GALLERY_LAYOUT_CONFIGS = {
+    scattered: { name: 'Scattered', value: 'scattered', label: 'Scattered', settingsFields: ['spacing'] },
+    tiles: { name: 'Tiles (Grid)', value: 'tiles', label: 'Tiles (Grid)', settingsFields: ['columns', 'spacing'] },
+    horizontal: { name: 'Horizontal', value: 'horizontal', label: 'Horizontal', settingsFields: ['spacing', 'startX'] },
+    vertical: { name: 'Vertical', value: 'vertical', label: 'Vertical', settingsFields: ['spacing', 'startY'] },
+    circular: { name: 'Circular', value: 'circular', label: 'Circular', settingsFields: ['radius'] },
+    spiral: { name: 'Spiral', value: 'spiral', label: 'Spiral', settingsFields: ['radius', 'rotations', 'heightIncrement'] },
+    arc: { name: 'Arc', value: 'arc', label: 'Arc', settingsFields: ['radius', 'arcAngle'] },
+    pyramid: { name: 'Pyramid', value: 'pyramid', label: 'Pyramid', settingsFields: ['layers', 'spacing'] },
+    helix: { name: 'Helix', value: 'helix', label: 'Helix', settingsFields: ['radius', 'rotations', 'heightIncrement'] },
+    box: { name: 'Box (3D)', value: 'box', label: 'Box (3D)', settingsFields: ['size'] },
+    sphere: { name: 'Sphere', value: 'sphere', label: 'Sphere', settingsFields: ['radius'] },
+    fan: { name: 'Fan', value: 'fan', label: 'Fan', settingsFields: ['radius', 'arcAngle'] },
+    wave: { name: 'Wave', value: 'wave', label: 'Wave', settingsFields: ['amplitude', 'frequency', 'spacing'] },
+    tunnel: { name: 'Tunnel', value: 'tunnel', label: 'Tunnel', settingsFields: ['depth', 'scaleFactor'] },
+    tunnelPyramid: { name: 'Tunnel Pyramid', value: 'tunnelPyramid', label: 'Tunnel Pyramid', settingsFields: ['depth', 'layers', 'spacing'] },
+    tunnelWave: { name: 'Tunnel Wave', value: 'tunnelWave', label: 'Tunnel Wave', settingsFields: ['depth', 'amplitude', 'frequency', 'spacing'] },
+    random: { name: 'Random', value: 'random', label: 'Random', settingsFields: ['bounds'] },
+};
+export const getLayoutSettings = (layout, layoutSettings) => {
+    const baseSettings = {
+        geometryType: layoutSettings.geometryType,
+        layout,
+        outerFrameScale: layoutSettings.outerFrameScale || 1,
+        width: layoutSettings.width || 1,
+        height: layoutSettings.height || GOLDENRATIO,
+        numImages: layoutSettings.numImages || 20,
+    };
+    const config = GALLERY_LAYOUT_CONFIGS[layout];
+    if (!config)
+        return baseSettings;
+    const settings = { ...baseSettings };
+    config.settingsFields.forEach(field => {
+        if (layoutSettings[field] !== undefined) {
+            settings[field] = layoutSettings[field];
+        }
+    });
+    return settings;
+};
+export const getLayoutSettingsFields = (layout) => GALLERY_LAYOUT_CONFIGS[layout]?.settingsFields || [];
+export const getLayoutPresets = () => Object.values(GALLERY_LAYOUT_CONFIGS).map(c => ({ label: c.label, value: c.value }));
+export const layoutUsesField = (layout, field) => GALLERY_LAYOUT_CONFIGS[layout]?.settingsFields.includes(field) || false;

package/dist/utils/MaterialCompiler.d.ts

@@ -0,0 +1,30 @@
+import type { UniformDefinition } from "../types/types";
+import type { Asset } from "../types/users";
+export interface MaterialAsset extends Asset {
+    uniforms: UniformDefinition[];
+    vertex: string;
+    fragment: string;
+}
+/**
+ * Check if an asset is a compilable material asset
+ */
+export declare function isMaterialAsset(asset: Asset): asset is MaterialAsset;
+/**
+ * Compile a single material asset and register it with MaterialRegistry
+ * Returns true if compilation was successful, false if skipped or failed
+ */
+export declare function compileMaterialAsset(asset: MaterialAsset): boolean;
+/**
+ * Compile all material assets from an array of assets
+ * Returns the count of newly compiled materials
+ */
+export declare function compileAllMaterialAssets(assets: Asset[]): number;
+/**
+ * Check if a material has already been compiled
+ */
+export declare function isMaterialCompiled(assetId: string): boolean;
+/**
+ * Clear compiled materials cache (useful for testing or reloading)
+ */
+export declare function clearCompiledMaterials(): void;
+//# sourceMappingURL=MaterialCompiler.d.ts.map

package/dist/utils/MaterialCompiler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaterialCompiler.d.ts","sourceRoot":"","sources":["../../src/utils/MaterialCompiler.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,MAAM,WAAW,aAAc,SAAQ,KAAK;IACxC,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CACpB;AAMD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,IAAI,aAAa,CAKpE;AACD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAmClE;AACD;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAWhE;AACD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAE3D;AACD;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAE7C"}

package/dist/utils/MaterialCompiler.js

@@ -0,0 +1,91 @@
+/**
+ * MaterialCompiler - Deferred material shader compilation
+ *
+ * This service handles compiling material assets' shaders and registering them
+ * with the MaterialRegistry. It's designed to be called lazily (e.g., when
+ * entering Studio) rather than on user data fetch.
+ */
+import { createCustomShaderMaterial } from "../shaders/CustomShaderMaterial.js";
+import { MaterialRegistryAPI } from "../services/MaterialRegistry.js";
+import { uniformConverter } from "../services/UniformConverter.js";
+import { createUniformsText } from "./utils.js";
+// Track which materials have been compiled to avoid recompilation
+const compiledMaterials = new Set();
+``;
+/**
+ * Check if an asset is a compilable material asset
+ */
+export function isMaterialAsset(asset) {
+    return (asset.type === 'material' &&
+        Array.isArray(asset.uniforms) &&
+        typeof asset.vertex === 'string' &&
+        typeof asset.fragment === 'string');
+}
+/**
+ * Compile a single material asset and register it with MaterialRegistry
+ * Returns true if compilation was successful, false if skipped or failed
+ */
+export function compileMaterialAsset(asset) {
+    // Skip if already compiled
+    if (compiledMaterials.has(asset.id)) {
+        return false;
+    }
+    try {
+        const compiledShaders = {
+            vertex: createUniformsText(asset.uniforms) + '\n' + asset.vertex,
+            fragment: createUniformsText(asset.uniforms) + '\n' + asset.fragment
+        };
+        const settings = {};
+        asset.uniforms.forEach((uniform) => {
+            settings[uniform.name] = uniform.defaultValue;
+        });
+        const uniforms = uniformConverter.convertToUniforms(settings);
+        const material = createCustomShaderMaterial({
+            uniforms,
+            vertexShader: compiledShaders.vertex,
+            fragmentShader: compiledShaders.fragment
+        });
+        const variant = {
+            name: asset.name,
+            description: asset.description || '',
+            materialClass: material,
+            defaultSettings: settings,
+        };
+        MaterialRegistryAPI.addCustomMaterial(variant);
+        compiledMaterials.add(asset.id);
+        console.log(`[MaterialCompiler] Compiled material: ${asset.name}`);
+        return true;
+    }
+    catch (error) {
+        console.error(`[MaterialCompiler] Failed to compile material ${asset.name}:`, error);
+        return false;
+    }
+}
+/**
+ * Compile all material assets from an array of assets
+ * Returns the count of newly compiled materials
+ */
+export function compileAllMaterialAssets(assets) {
+    let compiledCount = 0;
+    for (const asset of assets) {
+        if (isMaterialAsset(asset)) {
+            if (compileMaterialAsset(asset)) {
+                compiledCount++;
+            }
+        }
+    }
+    console.log(`[MaterialCompiler] Compiled ${compiledCount} new materials`);
+    return compiledCount;
+}
+/**
+ * Check if a material has already been compiled
+ */
+export function isMaterialCompiled(assetId) {
+    return compiledMaterials.has(assetId);
+}
+/**
+ * Clear compiled materials cache (useful for testing or reloading)
+ */
+export function clearCompiledMaterials() {
+    compiledMaterials.clear();
+}