Intro
This project has a lot of firsts associated with it. It was my first web application that I’d written professionally, whilst also being the first time I was exposed to TypeScript and Babylon.js. It was also the first time I’d worked with an external development partner, and as it was worked on during the pandemic lockdowns, it was also the first time I worked from home. As such, building this application provided me with lots of learning experiences and allowed me to grow in confidence as an engineer whilst also preparing me for a potential future of working remotely.
The core concept of this application was that due to pandemic and lockdown regulations, consumers weren’t able to consume in the ways that they were used to. People like seeing the thing they’re about to buy, and in the case of boutique establishments, there’s also a level of customer service that you cannot get with an ordinary website. To resolve this, we were asked to help build an virtual showroom making use of our knowledge of building networked experiences to assist in helping the stakeholder’s vision come to light.
Something that is important to note about this application is that it predates a lot of similar web applications you’ll see nowadays. In 2020 rendering 3D content in the web was still an extremely novel thing. The work I had done on this project had been also used in our partners’ future projects. This includes creating a showroom for Milan Fashion Week which ensured the artists still had a medium to present their designs, as well as being used to power virtual museum experiences.
My Contributions
- ‘Snapping’ logic that allowed the room designer to easily snap objects to surfaces by using a random selection of the model’s verts on complex models
- Material swapping logic that live-modified the GLTF File to allow changing the clothing textures and colours
- Loading visuals that required extending the GLTF loader to anticipate the object’s bounds
- Loading of compressed textures
- Lighting management and skybox loading
- Networked avatar system using Gravatars to visualise where each user was looking.