visualifyjs 2.5.3-2.dev → 3.0.0

package/src/core/modules/threejs/Renderer.js

@@ -0,0 +1,364 @@
+/**
+ * Renderer.js - Three.js WebGL Renderer for Visualify.js
+ * Handles renderer setup, antialiasing, resize handling, and pixel ratio support
+ */
+
+import * as THREE from 'three';
+
+/**
+ * RendererManager class for managing WebGL renderers
+ */
+export class RendererManager {
+	constructor(options = {}) {
+		this.renderers = new Map();
+		this.activeRendererId = null;
+
+		this.defaultOptions = {
+			antialias: true,
+			alpha: true,
+			powerPreference: 'high-performance',
+			precision: 'highp',
+			stencil: false,
+			depth: true,
+			logarithmicDepthBuffer: false,
+			...options,
+		};
+	}
+
+	/**
+	 * Create a new WebGL renderer
+	 * @param {string} id - Renderer identifier
+	 * @param {HTMLCanvasElement} canvas - Canvas element
+	 * @param {Object} options - Renderer options
+	 * @returns {THREE.WebGLRenderer}
+	 */
+	createRenderer(id, canvas, options = {}) {
+		if (this.renderers.has(id)) {
+			console.warn(`Renderer with id "${id}" already exists. Returning existing renderer.`);
+			return this.renderers.get(id).renderer;
+		}
+
+		const config = { ...this.defaultOptions, ...options };
+
+		// Create renderer
+		const renderer = new THREE.WebGLRenderer({
+			canvas,
+			antialias: config.antialias,
+			alpha: config.alpha,
+			powerPreference: config.powerPreference,
+			stencil: config.stencil,
+			depth: config.depth,
+			logarithmicDepthBuffer: config.logarithmicDepthBuffer,
+		});
+
+		// Configure renderer
+		this.configureRenderer(renderer, config);
+
+		// Store renderer
+		this.renderers.set(id, {
+			renderer,
+			config,
+			canvas,
+			resizeObserver: null,
+			createdAt: Date.now(),
+		});
+
+		// Set as active if it's the first renderer
+		if (!this.activeRendererId) {
+			this.activeRendererId = id;
+		}
+
+		return renderer;
+	}
+
+	/**
+	 * Configure renderer settings
+	 * @param {THREE.WebGLRenderer} renderer
+	 * @param {Object} config
+	 */
+	configureRenderer(renderer, config) {
+		// Set pixel ratio (capped at 2 for performance)
+		const pixelRatio = Math.min(window.devicePixelRatio, 2);
+		renderer.setPixelRatio(pixelRatio);
+
+		// Set size
+		if (config.width && config.height) {
+			renderer.setSize(config.width, config.height);
+		}
+
+		// Set precision
+		if (config.precision) {
+			renderer.capabilities.precision = config.precision;
+		}
+
+		// Configure shadow map
+		if (config.shadowMap !== false) {
+			renderer.shadowMap.enabled = true;
+			renderer.shadowMap.type = config.shadowMapType || THREE.PCFSoftShadowMap;
+		}
+
+		// Set output color space
+		renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+		// Set tone mapping
+		if (config.toneMapping) {
+			renderer.toneMapping = config.toneMapping;
+			if (config.toneMappingExposure) {
+				renderer.toneMappingExposure = config.toneMappingExposure;
+			}
+		}
+
+		// Set clear color
+		if (config.clearColor !== undefined) {
+			renderer.setClearColor(config.clearColor, config.clearAlpha ?? 1);
+		}
+	}
+
+	/**
+	 * Get a renderer by ID
+	 * @param {string} id - Renderer identifier
+	 * @returns {THREE.WebGLRenderer|null}
+	 */
+	getRenderer(id) {
+		const rendererData = this.renderers.get(id);
+		return rendererData ? rendererData.renderer : null;
+	}
+
+	/**
+	 * Get the currently active renderer
+	 * @returns {THREE.WebGLRenderer|null}
+	 */
+	getActiveRenderer() {
+		return this.activeRendererId ? this.getRenderer(this.activeRendererId) : null;
+	}
+
+	/**
+	 * Set the active renderer
+	 * @param {string} id - Renderer identifier
+	 */
+	setActiveRenderer(id) {
+		if (!this.renderers.has(id)) {
+			throw new Error(`Renderer with id "${id}" does not exist`);
+		}
+		this.activeRendererId = id;
+	}
+
+	/**
+	 * Update renderer size
+	 * @param {string} id - Renderer identifier
+	 * @param {number} width
+	 * @param {number} height
+	 */
+	updateSize(id, width, height) {
+		const rendererData = this.renderers.get(id);
+		if (!rendererData) return;
+
+		const renderer = rendererData.renderer;
+		renderer.setSize(width, height);
+
+		// Update config
+		rendererData.config.width = width;
+		rendererData.config.height = height;
+	}
+
+	/**
+	 * Update pixel ratio
+	 * @param {string} id - Renderer identifier
+	 * @param {number} pixelRatio
+	 */
+	updatePixelRatio(id, pixelRatio) {
+		const rendererData = this.renderers.get(id);
+		if (!rendererData) return;
+
+		const renderer = rendererData.renderer;
+		renderer.setPixelRatio(Math.min(pixelRatio, 2));
+	}
+
+	/**
+	 * Enable automatic resize handling
+	 * @param {string} id - Renderer identifier
+	 * @param {HTMLElement} container - Container element
+	 */
+	enableAutoResize(id, container) {
+		const rendererData = this.renderers.get(id);
+		if (!rendererData) return;
+
+		// Clean up existing observer
+		if (rendererData.resizeObserver) {
+			rendererData.resizeObserver.disconnect();
+		}
+
+		// Create resize observer
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				this.updateSize(id, width, height);
+			}
+		});
+
+		resizeObserver.observe(container);
+		rendererData.resizeObserver = resizeObserver;
+	}
+
+	/**
+	 * Disable automatic resize handling
+	 * @param {string} id - Renderer identifier
+	 */
+	disableAutoResize(id) {
+		const rendererData = this.renderers.get(id);
+		if (!rendererData || !rendererData.resizeObserver) return;
+
+		rendererData.resizeObserver.disconnect();
+		rendererData.resizeObserver = null;
+	}
+
+	/**
+	 * Render a scene with a camera
+	 * @param {string} id - Renderer identifier
+	 * @param {THREE.Scene} scene
+	 * @param {THREE.Camera} camera
+	 */
+	render(id, scene, camera) {
+		const renderer = this.getRenderer(id);
+		if (!renderer) return;
+
+		renderer.render(scene, camera);
+	}
+
+	/**
+	 * Take a screenshot
+	 * @param {string} id - Renderer identifier
+	 * @param {string} mimeType - Image mime type
+	 * @param {number} quality - Image quality (0-1)
+	 * @returns {string} Data URL
+	 */
+	takeScreenshot(id, mimeType = 'image/png', quality = 1) {
+		const renderer = this.getRenderer(id);
+		if (!renderer) return null;
+
+		return renderer.domElement.toDataURL(mimeType, quality);
+	}
+
+	/**
+	 * Get WebGL info
+	 * @param {string} id - Renderer identifier
+	 * @returns {Object|null}
+	 */
+	getWebGLInfo(id) {
+		const renderer = this.getRenderer(id);
+		if (!renderer) return null;
+
+		return {
+			renderer: renderer.info.render,
+			memory: renderer.info.memory,
+			programs: renderer.info.programs?.length || 0,
+		};
+	}
+
+	/**
+	 * Reset WebGL info counters
+	 * @param {string} id - Renderer identifier
+	 */
+	resetInfo(id) {
+		const renderer = this.getRenderer(id);
+		if (!renderer) return;
+
+		renderer.info.reset();
+	}
+
+	/**
+	 * Compile shaders for a scene
+	 * @param {string} id - Renderer identifier
+	 * @param {THREE.Scene} scene
+	 * @param {THREE.Camera} camera
+	 */
+	compile(id, scene, camera) {
+		const renderer = this.getRenderer(id);
+		if (!renderer) return;
+
+		renderer.compile(scene, camera);
+	}
+
+	/**
+	 * Dispose of a renderer
+	 * @param {string} id - Renderer identifier
+	 */
+	removeRenderer(id) {
+		const rendererData = this.renderers.get(id);
+		if (!rendererData) return;
+
+		// Disable auto resize
+		this.disableAutoResize(id);
+
+		// Dispose renderer
+		rendererData.renderer.dispose();
+
+		// Remove from map
+		this.renderers.delete(id);
+
+		// Update active renderer if needed
+		if (this.activeRendererId === id) {
+			const remainingRenderers = Array.from(this.renderers.keys());
+			this.activeRendererId = remainingRenderers.length > 0 ? remainingRenderers[0] : null;
+		}
+	}
+
+	/**
+	 * Get all renderer IDs
+	 * @returns {string[]}
+	 */
+	getRendererIds() {
+		return Array.from(this.renderers.keys());
+	}
+
+	/**
+	 * Dispose all renderers
+	 */
+	dispose() {
+		this.getRendererIds().forEach((id) => this.removeRenderer(id));
+		this.activeRendererId = null;
+	}
+}
+
+/**
+ * Create a renderer from configuration
+ * @param {HTMLCanvasElement} canvas
+ * @param {Object} config
+ * @returns {THREE.WebGLRenderer}
+ */
+export function createRendererFromConfig(canvas, config = {}) {
+	const manager = new RendererManager(config);
+	return manager.createRenderer('default', canvas, config);
+}
+
+/**
+ * Handle window resize for a renderer
+ * @param {THREE.WebGLRenderer} renderer
+ * @param {THREE.Camera} camera
+ * @param {HTMLElement} container
+ */
+export function handleResize(renderer, camera, container) {
+	const width = container.clientWidth;
+	const height = container.clientHeight;
+
+	renderer.setSize(width, height);
+
+	if (camera.isPerspectiveCamera) {
+		camera.aspect = width / height;
+		camera.updateProjectionMatrix();
+	} else if (camera.isOrthographicCamera) {
+		const aspect = width / height;
+		const frustumSize = Math.max(
+			camera.right - camera.left,
+			camera.top - camera.bottom
+		);
+
+		camera.left = -frustumSize * aspect / 2;
+		camera.right = frustumSize * aspect / 2;
+		camera.top = frustumSize / 2;
+		camera.bottom = -frustumSize / 2;
+		camera.updateProjectionMatrix();
+	}
+}
+
+export default RendererManager;

package/src/core/modules/threejs/Scene.js

@@ -0,0 +1,266 @@
+/**
+ * Scene.js - Three.js Scene Manager for Visualify.js
+ * Handles scene creation, scene graph operations, and multiple viewport support
+ */
+
+import * as THREE from 'three';
+
+/**
+ * SceneManager class for managing Three.js scenes
+ */
+export class SceneManager {
+	constructor(options = {}) {
+		this.scenes = new Map();
+		this.activeSceneId = null;
+		this.defaultOptions = {
+			backgroundColor: 0x000000,
+			fog: null,
+			...options,
+		};
+	}
+
+	/**
+	 * Create a new scene
+	 * @param {string} id - Unique scene identifier
+	 * @param {Object} options - Scene configuration options
+	 * @returns {THREE.Scene} The created scene
+	 */
+	createScene(id, options = {}) {
+		if (this.scenes.has(id)) {
+			console.warn(`Scene with id "${id}" already exists. Returning existing scene.`);
+			return this.scenes.get(id).scene;
+		}
+
+		const scene = new THREE.Scene();
+		const config = { ...this.defaultOptions, ...options };
+
+		// Set background
+		if (config.backgroundColor !== undefined) {
+			scene.background = new THREE.Color(config.backgroundColor);
+		}
+
+		// Set fog if provided
+		if (config.fog) {
+			scene.fog = new THREE.Fog(
+				config.fog.color || 0x000000,
+				config.fog.near || 1,
+				config.fog.far || 1000
+			);
+		}
+
+		// Store scene with metadata
+		this.scenes.set(id, {
+			scene,
+			config,
+			objects: new Map(),
+			createdAt: Date.now(),
+		});
+
+		// Set as active if it's the first scene
+		if (!this.activeSceneId) {
+			this.activeSceneId = id;
+		}
+
+		return scene;
+	}
+
+	/**
+	 * Get a scene by ID
+	 * @param {string} id - Scene identifier
+	 * @returns {THREE.Scene|null}
+	 */
+	getScene(id) {
+		const sceneData = this.scenes.get(id);
+		return sceneData ? sceneData.scene : null;
+	}
+
+	/**
+	 * Get the currently active scene
+	 * @returns {THREE.Scene|null}
+	 */
+	getActiveScene() {
+		return this.activeSceneId ? this.getScene(this.activeSceneId) : null;
+	}
+
+	/**
+	 * Set the active scene
+	 * @param {string} id - Scene identifier
+	 */
+	setActiveScene(id) {
+		if (!this.scenes.has(id)) {
+			throw new Error(`Scene with id "${id}" does not exist`);
+		}
+		this.activeSceneId = id;
+	}
+
+	/**
+	 * Add an object to a scene
+	 * @param {string} sceneId - Scene identifier
+	 * @param {string} objectId - Object identifier
+	 * @param {THREE.Object3D} object - Three.js object
+	 */
+	addObject(sceneId, objectId, object) {
+		const sceneData = this.scenes.get(sceneId);
+		if (!sceneData) {
+			throw new Error(`Scene with id "${sceneId}" does not exist`);
+		}
+
+		sceneData.scene.add(object);
+		sceneData.objects.set(objectId, object);
+	}
+
+	/**
+	 * Remove an object from a scene
+	 * @param {string} sceneId - Scene identifier
+	 * @param {string} objectId - Object identifier
+	 */
+	removeObject(sceneId, objectId) {
+		const sceneData = this.scenes.get(sceneId);
+		if (!sceneData) return;
+
+		const object = sceneData.objects.get(objectId);
+		if (object) {
+			sceneData.scene.remove(object);
+			this.disposeObject(object);
+			sceneData.objects.delete(objectId);
+		}
+	}
+
+	/**
+	 * Get an object from a scene
+	 * @param {string} sceneId - Scene identifier
+	 * @param {string} objectId - Object identifier
+	 * @returns {THREE.Object3D|null}
+	 */
+	getObject(sceneId, objectId) {
+		const sceneData = this.scenes.get(sceneId);
+		return sceneData ? sceneData.objects.get(objectId) || null : null;
+	}
+
+	/**
+	 * Clear all objects from a scene
+	 * @param {string} sceneId - Scene identifier
+	 */
+	clearScene(sceneId) {
+		const sceneData = this.scenes.get(sceneId);
+		if (!sceneData) return;
+
+		// Remove and dispose all objects
+		sceneData.objects.forEach((object, objectId) => {
+			sceneData.scene.remove(object);
+			this.disposeObject(object);
+		});
+		sceneData.objects.clear();
+	}
+
+	/**
+	 * Remove a scene and dispose all resources
+	 * @param {string} id - Scene identifier
+	 */
+	removeScene(id) {
+		const sceneData = this.scenes.get(id);
+		if (!sceneData) return;
+
+		// Clear all objects
+		this.clearScene(id);
+
+		// Dispose scene
+		if (sceneData.scene.background) {
+			if (sceneData.scene.background.dispose) {
+				sceneData.scene.background.dispose();
+			}
+		}
+
+		this.scenes.delete(id);
+
+		// Update active scene if needed
+		if (this.activeSceneId === id) {
+			const remainingScenes = Array.from(this.scenes.keys());
+			this.activeSceneId = remainingScenes.length > 0 ? remainingScenes[0] : null;
+		}
+	}
+
+	/**
+	 * Dispose a Three.js object and its resources
+	 * @param {THREE.Object3D} object
+	 */
+	disposeObject(object) {
+		if (!object) return;
+
+		// Traverse and dispose geometries and materials
+		object.traverse((child) => {
+			if (child.geometry) {
+				child.geometry.dispose();
+			}
+
+			if (child.material) {
+				if (Array.isArray(child.material)) {
+					child.material.forEach((material) => this.disposeMaterial(material));
+				} else {
+					this.disposeMaterial(child.material);
+				}
+			}
+		});
+	}
+
+	/**
+	 * Dispose material and its textures
+	 * @param {THREE.Material} material
+	 */
+	disposeMaterial(material) {
+		if (!material) return;
+
+		// Dispose textures
+		Object.keys(material).forEach((key) => {
+			const value = material[key];
+			if (value && value.isTexture) {
+				value.dispose();
+			}
+		});
+
+		material.dispose();
+	}
+
+	/**
+	 * Get all scene IDs
+	 * @returns {string[]}
+	 */
+	getSceneIds() {
+		return Array.from(this.scenes.keys());
+	}
+
+	/**
+	 * Dispose all scenes and resources
+	 */
+	dispose() {
+		this.getSceneIds().forEach((id) => this.removeScene(id));
+		this.activeSceneId = null;
+	}
+}
+
+/**
+ * Create a scene from configuration
+ * @param {Object} config - Scene configuration
+ * @returns {THREE.Scene}
+ */
+export function createSceneFromConfig(config = {}) {
+	const scene = new THREE.Scene();
+
+	// Set background color
+	if (config.backgroundColor) {
+		scene.background = new THREE.Color(config.backgroundColor);
+	}
+
+	// Set fog
+	if (config.fog) {
+		scene.fog = new THREE.Fog(
+			config.fog.color || 0x000000,
+			config.fog.near || 1,
+			config.fog.far || 1000
+		);
+	}
+
+	return scene;
+}
+
+export default SceneManager;