Paragram Virtual Reality
In 2018 my brother and I started experimenting with web-based virtual reality. What started as a simple 3D environment built on Three.js and A-Frame quickly turned into a full-fledged system for building and publishing immersive virtual reality experiences that could be viewed in the browser, on a mobile device or in any virtual reality headset.
Cross-platform Movement
We knew from the beginning that the way users interacted with our virtual spaces could make or break the experience. While there are plenty of existing Three.js and A-Frame components that offer a simple way to navigate 3D spaces on various devices, none of them would give us the level of control we needed to deliver a great cross-platform user experience.
To solve this, I created a robust A-Frame movement component specifically for Paragram experiences. Creating this component from scratch gave us a ton of freedom when it came to designing user-interaction for desktop users, mobile users and VR users; not only giving us full control over every aspect of user navigation, but also allowing us to integrate it into other core Paragram systems. Some of the key features of this component are:
- Various navigation modes for desktop and mobile: Teleport, orbit, point of interest, keyboard movement
- Parabolic teleport for Oculus Rift and HTC Vive
- Optional collision model
- Device-based navigation restrictions
- Public methods for custom integrations with the scene UI
Blender to Three.js Compiler
While my brother focused on 3D modeling, texturing and keeping up-to-speed with rapidly changing WebVR standards, I focused on developing a system that would streamline the process of converting a complex 3D scene in Blender into a highly optimized Three.js scene. Some of the key features of this system are:
- Automated scene geometry optimization to reduce draw calls
- Automated Blender to Three.js material conversion
- Automated compiling of the Three.js objects and the A-Frame scene
- A custom scene editor for updating materials in real time
- Automated asset minification (Google Closure) and code obfuscation
- A templating system for building custom UIs for each scene
- Scene version control
The Website
The website featured a responsive one-page design custom built with minimal HTML, CSS and Javascript. A PHP templating system made it easy to add new project pages and populate their hero videos, image galleries, SEO meta tags and more.