Design Engineer

Design Engineer

Design Engineer

Design Engineer

Volumetrics

Volumetrics

Volumetrics

Volumetrics

Date

Jan 10, 2024

Client Name

Volumetrics.io

Services

Web design and development

About


Volumetric's mission is to make the spatial web accessible to everyone. Users can collaboratively design, develop, and deploy for mixed reality, in mixed reality.


Our Clients


Clients of Volumetrics are creative developers and designers working with Mixed Reality technologies to craft immersive Virtual and Augmented Reality web experiences. Their code base consists of HTML, CSS, and Javascript.


Challenge


Design with Code required a steep learning curve of javascript to build WebXR interactions. I practiced script writing, styling with CSS, and HTML page hierarchy while working at Volumetrics.


Troubleshooting Alpha Stage Software surfaced issues with operating the framework in creation and assembly of web pages. Testing the software, I filed issues on GitHub page to catch bugs and prioritize team's focus on feature deliverables.


3D Geometry and assets optimization for websites is a significant performance booster if done right. I designed and applied a methodology for mesh optimization and a list of export settings suitable for 3D website projects.


Results


Designed with Code several projects for software showcasing. With guidance from the development team, I was able to progress faster in content creation and aid the team in launching new demos every month.


Troubleshooting Alpha Stage Software with Quality Assurance guidelines and principles resulted in creation of new features and many bugs fixed in early stages of the product.


3D Geometry and asset optimization provided performance boost to the WebXR demos. Additionally, there was a significant bump in the frame rate with lower polygonal 3D shapes.

Design with Code


WebXR demos for product showcases

20+ bugs


filed on GitHub

45 -> 72 FPS


reached with asset optimization

Process

Designing with code is a new interaction with digital design for me. I learned practices for code structure and code optimization in my journey to demo creations. Additionally, I focused on testing newly developed features to flag bugs and report them in GitHub issues. Lastly, I was challenged to optimize 3D meshes to boost the loading times and frame rate of demos.

Wall Anchoring

Wall Anchoring

Embedded 3D Assets

Embedded 3D Assets

Spatial Windows

Spatial Windows

3D Asset Preview in WebXR

This example demo showcases feature to embed animated 3D model into a WebXR page showing the model at a stable frame rate and with shadows adding to 3D depth of the webpage.

Files System

Files are structured such way that the scientists stay up to day with commitments of their collaborators and can track fresh changes in their structures.

Notably, the suggested file system invites the user to collaborate with other scientists in file sharing and note taking.

Spatial Windows

Spatial Windows can be brought anywhere in real world to display the webpage. Combined with 3D models, there are many ways to showcase products or build interactive experiences.

Design with Code

I designed proof of concepts and demos showcasing the capabilities the new framework offers to the developers and designers. I help adopt instruction manuals to increase adoption of features and enabling wider audience to code.

Anchoring Assets to Walls

In this snapshot, we can see a mixed reality experience of a whale swimming through the wall and entering apartment space.

Anchoring Assets to Walls

In this snapshot, we can see a mixed reality experience of a whale swimming through the wall and entering apartment space.

Working with early stage software means a lot of checking for bugs and identifying priorities for future feature releases. I participated in discovery and testing of the software enabling the team to focus on development of software and guiding the feature list for introduction to core in-software interactions.

Web Inspector Preview

I looked through web inspector to identify bugs and software issues while designing demos.

Troubleshooting Alpha Stage Software

Molecular Structure Demo

Blender GLB/GTF export window

GLB/GLTF Export + Animations

Through trial and error, I learned best practices of mesh export utilizing different optimization techniques and developed a right approach to export of animation for 3D immersive websites.

I created a workflow for mesh reduction and 3D assets optimization to increase frame rate and boost performance of WebXR demos built using the software.

3D Geometry and Asset Optimization

3D Geometry and Asset Optimization

©2024 All Rights Reserved. Designed with 🤍