PhysiViz

PhysiViz Transforms complex physics problems into 3D visualizations. Using AI to bridge the gap between abstract equations and spatial intuition for engineering students.

Comment

PhysiViz — Turning Physics Problems into Spatial Intuition

Inspiration

As a first-year AI and Computer Science engineering student at ENSAM Casablanca, I noticed a recurring hurdle: translating a paragraph of text into a clear mental model. Whether it’s a complex mechanics problem involving a beam under stress or a spatial kinematics scenario, the abstraction gap often leads to errors before a single equation is even written.

I built PhysiViz to bridge this gap—turning static textbook descriptions into immediate spatial intuition.

What It Does

PhysiViz is an AI-powered visualization engine.

A user inputs a physics problem—either via text or an image—and the application parses the physical constraints to generate a high-fidelity 3D visualization. It doesn’t just solve the math; it builds the scene.

Students can:

  • Rotate, zoom, and inspect the scene
  • Visualize vectors, forces, and components
  • Interact with the problem in a 3D environment

This makes abstract physical laws tangible and intuitive.

How We Built It

The project follows a modular React + TypeScript architecture designed for scalability:

  • The Brain (geminiService.ts)
    Communicates with the Gemini API to extract structured physical parameters from natural language.

  • The Eyes (SceneViewer.tsx)
    A Three.js–powered component that renders the 3D scene based on the extracted data.

  • The Interface

    • ChatInterface.tsx handles user interaction
    • InfoPanel.tsx provides contextual details about physical properties

  • The Blueprint (types.ts)
    A central type definition file that enforces strict data contracts between the AI output and the 3D renderer.

Challenges We Ran Into

The most persistent challenge was spatial layout management.

Because the Gemini API parses natural language, it occasionally generated coordinates that were mathematically correct but visually problematic—often placing objects so far apart that they fell outside the camera’s view.

The Solution

I wrapped the entire scene content in a:

<Center top />

component from the @react-three/drei library.

This automatically:

  • Recalculates the bounding box of the scene

  • Centers all objects in the camera’s view

  • Ensures a consistent and seamless visualization experience

Accomplishments We’re Proud Of

I’m particularly proud of the modular architecture.

By isolating the AI logic into a dedicated service, I created a system where the visualization engine remains independent of the input method. Achieving this level of technical organization during the Gemini 3 Hackathon was a major milestone for me.

What We Learned

This project reinforced the importance of Type Safety in AI applications.

  • TypeScript allowed me to define exactly what a Physical Object is

  • Reduced bugs when the AI returned complex structured data

  • Deepened my understanding of the Three.js lifecycle in a React environment

  • Learned how to effectively leverage the @react-three/drei ecosystem to solve spatial UI issues

What’s Next for PhysiViz

Next steps include:

  • Expanding beyond mechanics into other fields like electromagnetism

  • Visualizing field vectors and flux lines

  • Going beyond static visualizations into 3D simulations

Built With

Share this project:

Updates