Virtual 3D online exhibition with MapBox GL JS

For my last semester in university (summer semester 2018) at the KIT, I was part of a project to create an “online art exhibition”. We planned to produce different media formats in smaller groups. One for video, another for text and promotion and one for the online presence.

I’ve figured out a concept with a two pane view on a simple website. On the left, there’s a real 3D map of the city of Karlsruhe including a virtual gallery building, and on the right is the video player and a text field. Every single exhibit object is shown as a clickable POI. A click on it will load the corresponding video and text. Even though I’m not so convinced of the idea to navigate through an 3D space as part of an website navigation, this concept was at least possible to achieve in a short time for a single developer. And it is working really good ;)

As you can see in the video above, I was using the open source online map framework Mapbox GL JS to render the OSM map with custom additions. Further I was using a custom, better looking HTML5 video player called Videre.

The page is still available at https://www.ausstellung-virtuell.de and there are still several videos online of different artworks from the ZKM, the Kunsthalle Karlsruhe and the St├Ądtische Gallerie Karlsruhe.

I also published the complete source code of the project here with a small setup instruction on how to host the map data yourself.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

* Checkbox GDPR is required

*

I agree

Software
Host your own Mapbox GL JS vector tiles map

I’ve done some research recently on how I could host my own online map viewer with a MapBox GL JS instance, an excellent and modern open-source alternative for Google Maps. The server should also serve own preprocessed map data from OpenStreetmap planet extracts. No external or third-party service will be …

Software
1
Easily setup Signal 2FA on Nextcloud 14

Two-factor authentication (short 2FA) is an important security concept to secure unauthorized access to your web applications. Popular online services like Google Mail, Instagram or Facebook already provide this mechanism to secure user accounts with an additional one-time token. Considering someone is able to obtain your username and password combination, …

Software
Cloud synchronization performance tests of various Linux clients

I already tried using Nextcloud as a backup solution which will sync my complete home directory into a Nextcloud instance. This is very practical if you want to have access to your files when you don’t have your laptop with you or when it gets lost. Of course there are …