Final Project Specification: AI Sphere Visualization (Developer Handoff)

Date: 2025-08-30

Vision and Purpose

The AI Sphere project is a 3D interactive visualization meant to resemble a futuristic AI assistant device sitting on a desk. It should feel alive, glowing, and intelligent — a digital artifact that conveys both technical power and elegance. The orb gives the illusion of a smart machine constantly working inside, showing data dashboards, charts, and glowing activity, even though the data is simulated.

The purpose of the project is to create an immersive, interactive demo that can impress a viewer, inspire design concepts, and demonstrate how AI could be represented visually as a physical object.

It is not just a generic 3D object. It should feel like an experience: glowing glass, real reflections, fake data panels that animate like a futuristic dashboard, and soft neon lighting that spills into the environment. The user should feel like they are looking at a physical AI-powered sphere gadget, similar to the attached concept photo.

Technology Stack

• Three.js (loaded from CDN, global scope, no bundlers, no imports).

• Vanilla JavaScript for logic.

• HTML5 and CSS3 for layout and page styling.

• CanvasTexture in Three.js for rendering charts dynamically.

• Three.js postprocessing with UnrealBloomPass for glow effects.

Core Components

The Sphere

• The central orb is a glass-like translucent sphere.

• Material is slightly tinted dark-blue with transparency.

• The sphere surface has a Fresnel rim glow effect (neon blue edge highlight).

• Glass is reflective, glossy, and feels physically present.

• Inside the sphere, HUD panels (2D canvases mapped onto planes) float and always face outward.

• Panels should look as if they are holographically projected inside the orb.

Data Panels Inside the Sphere

There are four animated panels:

1. Logo / Overview Panel

   • Displays the "AI" logo and the text "AISphere".

   • Includes a waveform animation beneath the logo.

   • Shows small stats like uptime and latency with glowing text.

   • Positioned near the front upper hemisphere.

2. Line Chart Panel

   • Displays an animated line chart of "Active Use".

   • Fake values smoothly update to create the illusion of real data.

   • Includes a glowing cursor line that sweeps across the chart.

   • Positioned on the front-right hemisphere.

3. Gauge Panel

   • Shows a semi-circular gauge with a moving needle.

   • Represents "Models" with a numeric value that fluctuates.

   • Includes small bar charts alongside the gauge.

   • Positioned on the front-left hemisphere.

4. Bars / Overview Panel

   • Displays multiple bar graphs with glowing neon bars.

   • Also overlays a smaller line graph on top.

   • Represents fake system stats.

   • Positioned on the lower-right hemisphere.

Each panel updates continuously with simulated values. The animations are smooth and loop indefinitely, giving the sense that the sphere is “thinking” and working in real time.

Inner Glow and Particles

• Inside the orb, hundreds of small glowing particles float in random distribution.

• The particles slowly rotate and shimmer.

• Color scheme: cyan, light blue, and violet tones.

• They create the impression of internal AI computation, like a living core.

Pedestal and Desk

• The sphere sits on a dark pedestal ring with a glowing neon emissive edge.

• Beneath the pedestal, a blue under-glow disc emits light, casting a halo onto the desk surface.

• The desk itself is a flat plane with a warm wooden material, grounding the sphere in a believable environment.

Lighting

• Ambient and hemisphere lighting provide soft base illumination.

• RectAreaLights act as studio lights, adding glossy highlights on the glass surface.

• A cyan point light inside the sphere gives inner glow.

• A magenta point light behind the sphere provides contrast and atmosphere.

• Together, the lighting system ensures the sphere is never too dark, highlights remain vivid, and the neon glow feels natural.

Postprocessing

• UnrealBloomPass enhances glow from emissive elements (neon ring, rim highlights, particle glints, chart panels).

• Bloom strength is strong but not overwhelming.

• Viewer can toggle bloom with the B key.

Interactions

• Mouse / Touch: OrbitControls allow users to rotate, zoom, and pan around the sphere.

• Idle Animation: The sphere gently rotates left and right when idle, simulating life.

• Data Updates: All charts update continuously with fake but realistic motion.

• Keyboard:

  • Spacebar pauses/resumes data updates.

  • "B" toggles bloom effect on/off.

Appearance and Feel

• The project should feel polished, futuristic, and alive.

• Colors: Cyan, neon blue, purple, magenta.

• Contrast between dark background and bright glowing elements.

• HUD panels are crisp, sharp, and vibrant inside the glass orb.

• Glow effects should give a premium, high-tech look, not cartoonish.

• The pedestal and desk ground the sphere so it feels like a physical device, not a floating model.

• The user should feel that they are looking at a futuristic AI gadget in action, not just a 3D prototype.

Value

• Creates a demo-ready showcase for AI visualization concepts.

• Ideal for concept presentations, product inspiration, or interactive art pieces.

• Runs fully in the browser with no backend.

• Provides both aesthetic appeal (for non-technical users) and technical inspiration (for developers).