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
Officepad – Etherpad alternative based on Onlyoffice

During the Chaos Communication Camp 2019 I was working on a project called Officepad. The aim was to build a web interface comparable to Etherpad. Etherpad is a well established tool for online text collaboration used by software developers, activists and so on. Etherpad is relatively stable and works well …

Software
2
Bye bye Play Store! Mirroring Play Store Apks to private F-Droid repo

This small tutorial will show you how to setup your own F-Droid repository containing automatically mirrored Play Store apps. Using this private repo, you don’t have to relay on Google Play Store or third party stores anymore to keep non-free apps up-to-date. All you need to have is a Linux …

Software
Ebook reader app for Nextcloud

Because of lack of altenatives I decided to write a small ebook reader plugin for Nextcloud. The task of creating such an app was quite easy: I just forked the files_pdfviewer extension and replaced PDF.js with the Epub.js library. In the app template file, I used the reference ebook reader …