HFBK Online Gallery - Johannes Deml

Online Gallery is an interactive 3D exhibition technology built for the web. It allows visitors to view scanned artworks by HFBK students in a digital space. The spaces can be intuitively explored with desktop computers and mobile devices. The built technology not only allows to present artworks, but also to create exhibitions and curate them interactively in the browser.

Technology

To achieve maximum performance with minimal load time for the experience, we decided to build our on engine on top of three.js. To keep everything maintainable and typesafe the project is programmed with typescript and has multiple continuous integration pipelines to make the deployment process as smooth as possible.

Engine

The Online Gallery is rendered with WebGL 1 with a custom three.js build. Throughout development I improved three.js by creating PRs for the project and also altering our version to meet the specific needs of the project. The Web view not only allows for 3D objects being placed in the exhibition, but also supports showing video divs inside the exhibition.

Assets

The project uses glTF as its default model format. For textures we decided to use the newly developed basis texture format. This allows for GPU compressed textures on all platforms. Since the requirements are very specific and tooling is still in its early stages, we built a converter tool that helps in the creation process of the final assets. The converter ensures correct texture sizes and converts the format to the correct basis type to keep file sizes low in memory, while maintaining high texture quality.

Interaction

To make the exhibition as accessible as possible, the interaction scheme is kept very simple by interacting with mouse and touch gestures. Visitors can tap anywhere on the floor to move to that position or on an artwork to focus it in the viewport. Advanced users can also use rotation and zoom gestures to inspect details of the artworks. In order to ensure a smooth onboarding process, we also included a simple, nonintrusive tutorial that shows a few interaction tips, while navigating through the exhibition.