Prism Demo

Demo Video

About The Site

Prism Demo is an innovative 3D web and VR application that bridges the gap between traditional web browsing and immersive virtual reality experiences. Built collaboratively at Aktiga, this application allows users to view and interact with 3D models in both standard web browsers and VR headsets, providing a seamless transition between viewing modes.

The application enables users to explore detailed 3D environments and models at true scale, whether they're using a desktop computer, mobile device, or VR headset. With custom-built VR controls and movement systems, users can navigate virtual spaces naturally, walking around and teleporting to examine models from different angles and perspectives.

Key Features

  • Dual-Mode Viewing: Seamlessly toggle between browser and VR headset viewing modes, allowing users to switch between platforms without losing their place or context.
  • VR Navigation: Fully custom-built VR controls and movement system that enables natural navigation through 3D spaces, including walking and teleportation mechanics.
  • True-Scale Viewing: View 3D models at their actual scale, providing an accurate representation of size and proportions that's particularly valuable for architectural, product design, and educational applications.
  • Multiple Model Support: Display and manage multiple 3D models within a single environment, enabling comparative viewing and complex scene composition.
  • Dynamic Material System: Toggleable meshes that allow users to change materials and colors on models, providing flexibility in visualization and design exploration.
  • Cross-Platform Compatibility: Works seamlessly on desktop browsers, mobile devices, and VR headsets, ensuring accessibility across different hardware configurations.

My Contributions

Working alongside a co-worker at Aktiga, I contributed significantly to the development of Prism Demo. The project involved building a complex 3D application that required deep understanding of WebGL, Three.js, and VR development principles.

Key areas of development included implementing the VR control system, creating the material toggle functionality, and ensuring smooth transitions between browser and VR viewing modes. The application demonstrates advanced 3D web development techniques and showcases the potential of web-based VR experiences.

Technological Foundation

Prism Demo is built on a powerful 3D web technology stack, leveraging Next.js and React for the application framework. The core 3D rendering is powered by Three.js, one of the most popular JavaScript libraries for creating 3D graphics in web browsers.

React Three Fiber provides a React renderer for Three.js, enabling a component-based approach to 3D scene construction. This allows for more maintainable code and easier integration with React's state management and lifecycle systems.

The VR functionality is implemented using WebXR APIs, which enable immersive experiences directly in web browsers without requiring additional plugins or applications. This approach makes VR accessible to a wider audience and simplifies the deployment process.

The custom VR controls and movement systems were built from scratch, providing precise control over user interactions and ensuring a smooth, natural feel when navigating virtual environments. The material toggle system allows for dynamic visualization changes, enabling users to explore different design options and configurations in real-time.

Use Cases

Prism Demo serves various use cases across different industries:

  • Architecture & Design: Architects and designers can present 3D models to clients, allowing them to explore spaces at true scale before construction begins.
  • Product Visualization: Manufacturers can showcase products in immersive environments, enabling customers to examine details and configurations in detail.
  • Education: Educational institutions can create interactive 3D learning experiences that help students understand complex spatial relationships and concepts.
  • Virtual Showrooms: Businesses can create virtual showrooms that customers can explore from anywhere, reducing the need for physical locations.