Prototype

360° Content Viewer

What if…

we could navigate freely through 360° content using standard web technology?

Problem

Google Maps is amazing but you can’t simply use it for your own 360° images. There are already tools for managing them but not if you want to annotate the content, move through doors and streets to the neighboring images and use it with 3dof or 6dof headsets while it all is rendered in the browser.

Solution

We decided to implement this prototype based on TypeScript and babylon.js. The annotations and links used to move from image to image are configured via JSON and can be easily be extended. For now we don’t have a WYSIWYG editor for managing this but extending the library is easily done. This might be a next iteration if we want to extend this prototype.

Challenges

Babylon.js is a powerful tool with many examples but we still struggled with some details which were not self-explaining. Testing webXR was no problem if you use a compatible browser and know about some pitfalls. E.g. the Valve Index with SteamVR requires a host with TLS in order to load the VR content.

Feel free to test the Content Viewer here: 360° Content Viewer