import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Monitor, Cpu, Box, Layers, Activity, Eye } from 'lucide-react'; // ========================================== // Constants & Configuration // ========================================== const WIDTH = 1200; const HEIGHT = 700; const BACKGROUND_COLOR = "#0f172a"; const PRIMARY_COLOR = "#0ea5e9"; // Sky blue const SECONDARY_COLOR = "#6366f1"; // Indigo const ACCENT_COLOR = "#10b981"; // Emerald const WARNING_COLOR = "#f59e0b"; // Amber const DANGER_COLOR = "#ef4444"; // Red const ANIMATION_DURATION = 12000; // 12 seconds per loop // ========================================== // Math & 3D Helpers // ========================================== const random = (seed) => { const x = Math.sin(seed++) * 10000; return x - Math.floor(x); }; // Generate a sphere/polyhedron based on Fibonacci lattice const generateSpherePoints = (numPoints, radius) => { const points = []; const phi = Math.PI * (3 - Math.sqrt(5)); for (let i = 0; i < numPoints; i++) { const y = 1 - (i / (numPoints - 1)) * 2; const radiusAtY = Math.sqrt(1 - y * y); const theta = phi * i; const x = Math.cos(theta) * radiusAtY; const z = Math.sin(theta) * radiusAtY; points.push({ x: x * radius, y: y * radius, z: z * radius }); } return points; }; // Simple connections for wireframe look (connecting close points) const generateConnections = (points, maxDist) => { const connections = []; for (let i = 0; i < points.length; i++) { for (let j = i + 1; j < points.length; j++) { const d = Math.sqrt( Math.pow(points[i].x - points[j].x, 2) + Math.pow(points[i].y - points[j].y, 2) + Math.pow(points[i].z - points[j].z, 2) ); if (d < maxDist) { connections.push([i, j]); } } } return connections; }; // 3D Rotation const rotate3D = (point, angleX, angleY) => { let { x, y, z } = point; // Rotate around Y let cosY = Math.cos(angleY); let sinY = Math.sin(angleY); let x1 = x * cosY - z * sinY; let z1 = z * cosY + x * sinY; // Rotate around X let cosX = Math.cos(angleX); let sinX = Math.sin(angleX); let y2 = y * cosX - z1 * sinX; let z2 = z1 * cosX + y * sinX; return { x: x1, y: y2, z: z2 }; }; // Perspective Projection const project = (point, viewDist, fov = 600) => { const scale = fov / (viewDist + point.z); return { x: point.x * scale, y: point.y * scale, scale: scale, z: point.z // keep z for sorting if needed }; }; // ========================================== // Main Component // ========================================== export default function LODPrincipleAnimation() { // State for animation frame data const [animState, setAnimState] = useState({ distance: 0, // 0 to 1 rotation: 0, lodLevel: 0, // 0: High, 1: Med, 2: Low vertexCount: 0, triangleCount: 0, fps: 60 }); const requestRef = useRef(); const startTimeRef = useRef(null); const prevTimeRef = useRef(0); // ========================================== // Geometry Generation (Memoized) // ========================================== const models = useMemo(() => { // LOD 0: High Poly (Sphere-like) const pts0 = generateSpherePoints(250, 180); const edges0 = generateConnections(pts0, 45); // Tighter connections // LOD 1: Medium Poly const pts1 = generateSpherePoints(80, 180); const edges1 = generateConnections(pts1, 90); // LOD 2: Low Poly const pts2 = generateSpherePoints(20, 180); const edges2 = generateConnections(pts2, 180); // Loose connections return [ { points: pts0, edges: edges0, name: "LOD 0", label: "HIGH POLY", color: PRIMARY_COLOR, tris: 480 }, { points: pts1, edges: edges1, name: "LOD 1", label: "MED POLY", color: WARNING_COLOR, tris: 156 }, { points: pts2, edges: edges2, name: "LOD 2", label: "LOW POLY", color: DANGER_COLOR, tris: 36 } ]; }, []); // ========================================== // Animation Loop // ========================================== const animate = useCallback((time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; const progress = (elapsed % ANIMATION_DURATION) / ANIMATION_DURATION; // Calculate FPS roughly const delta = time - prevTimeRef.current; prevTimeRef.current = time; const currentFps = delta > 0 ? 1000 / delta : 60; // Simulation Logic // We simulate an object moving away (distance increasing) then resetting // Distance curve: Ease out slightly const distFactor = progress < 0.5 ? (progress * 2) // 0 to 1 : (2 - progress * 2); // 1 to 0 (ping pong) or just loop? Let's loop 0->1 for clarity // Let's do a linear scan 0 -> 1 then hold then reset let normalizedDist = (elapsed % ANIMATION_DURATION) / (ANIMATION_DURATION * 0.8); if (normalizedDist > 1) normalizedDist = 1; // Hold at end if (elapsed % ANIMATION_DURATION > ANIMATION_DURATION * 0.9) normalizedDist = 0; // Quick reset // Determine LOD Level based on Distance // 0.0 - 0.35 : LOD 0 // 0.35 - 0.70 : LOD 1 // 0.70 - 1.0 : LOD 2 let currentLodIndex = 0; if (normalizedDist > 0.3) currentLodIndex = 1; if (normalizedDist > 0.7) currentLodIndex = 2; setAnimState(prev => ({ distance: normalizedDist, rotation: elapsed * 0.0005, lodLevel: currentLodIndex, vertexCount: models[currentLodIndex].points.length, triangleCount: models[currentLodIndex].tris, fps: currentFps })); requestRef.current = requestAnimationFrame(animate); }, [models]); useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); // ========================================== // Render Helpers // ========================================== // Calculate current model projection const currentModel = models[animState.lodLevel]; // Base distance + animation distance // We want the object to visually shrink as it moves away const zDistance = 400 + (animState.distance * 1500); const projectedPoints = useMemo(() => { return currentModel.points.map(p => { const rotated = rotate3D(p, animState.rotation * 0.5, animState.rotation); return project(rotated, zDistance, 800); }); }, [currentModel, animState.rotation, zDistance]); // Generate SVG Path for wireframe const wireframePath = useMemo(() => { let d = ""; currentModel.edges.forEach(([i, j]) => { const p1 = projectedPoints[i]; const p2 = projectedPoints[j]; // Simple optimization: don't draw if scale is too small or behind camera (unlikely here) if (p1 && p2) { d += `M ${p1.x + WIDTH/2} ${p1.y + HEIGHT/2} L ${p2.x + WIDTH/2} ${p2.y + HEIGHT/2} `; } }); return d; }, [projectedPoints, currentModel]); // Generate Vertex Circles const vertexCircles = useMemo(() => { return projectedPoints.map((p, i) => ( )); }, [projectedPoints, animState.distance]); // Grid Floor Simulation const gridLines = useMemo(() => { const lines = []; const speed = (animState.rotation * 1000) % 200; // Horizontal moving lines for(let i=0; i<10; i++) { const z = 200 + (i * 200) - speed; if (z < 100) continue; const scale = 600 / z; const y = 200 * scale + HEIGHT/2 + 100; lines.push(); } // Perspective vertical lines for(let i=-5; i<=5; i++) { const x = i * 200; lines.push( ); } return lines; }, [animState.rotation]); // ========================================== // UI Styles // ========================================== const textStyle = { fontFamily: 'Menlo, monospace', fontWeight: 600, textShadow: '0 0 5px rgba(0,0,0,0.5)' }; const labelStyle = { fontFamily: 'sans-serif', fontWeight: 700, letterSpacing: '1px' }; // Calculate LOD threshold positions for the slider const lod1X = WIDTH * 0.2 + (WIDTH * 0.6) * 0.3; const lod2X = WIDTH * 0.2 + (WIDTH * 0.6) * 0.7; const currentCursorX = WIDTH * 0.2 + (WIDTH * 0.6) * animState.distance; return (

{/* Background Grid/Noise */} {/* React Icons Overlay for decorations */}

VIEWPORT

GPU OPTIMIZED

{Math.round(animState.fps)} FPS

); }