I was responsible for planning and developing the real-time 360 tour functionality and integrating it into the wider web platform.
I worked closely with the development team to integrate the viewer with Azure-hosted APIs and storage, while establishing the data structures and content conventions required to support the large volume of tour assets.
As this was my first commercial web development project, I rapidly adopted a new technology stack including React, Next.js, TypeScript, Three.js and React Three Fiber, applying my existing experience in real-time 3D development to a web-based environment.
I also developed an external content-processing and automation application to validate, process and generate the data required to populate the platform's backend systems.
The main technical challenge was creating a 360 tour experience that felt like navigating a fully modelled 3D environment, while using high-quality 360 imagery rather than rendering a fully detailed 3D scene.
I implemented a lightweight low-poly mesh onto which the 360 imagery was projected from the current viewpoint. I then developed a custom GLSL shader to control the projection and blend between different 360 images as the user moved between viewpoints.
This created a smooth transition between viewpoints while keeping the real-time rendering requirements manageable within a browser-based WebGL application.
Large-Scale Content & Data Processing
The platform required a consistent structure for a large volume of 360-tour assets. I designed the naming convention and data structure used across the platform, allowing content to be processed automatically rather than configured manually.
The resulting pipeline processed a structured folder containing:
Camera viewpoint data was exported from 3ds Max using a custom Python script.
I developed an automation application that validated the complete folder structure, checked that required assets were present and correctly named, and generated actionable error messages when content was missing or incorrectly configured.
Once validation was complete, the application generated the JSON configuration files required to populate the backend systems and create the corresponding 360 tours.
This significantly reduced the manual configuration required for each tour while improving consistency and reducing errors across large volumes of content.
