Web Presentation Framework

During the 2020 pandemic our company IndieBurg decided to create a web based presentation framework to fill the need for interactive product presentations. The technology is based on THREE.js.
The Framework consists of many reusable components making it easy to create customized experiences for our various clients.

I was the Technical Lead on the Project.

The Demo

Tooling

The Presentation Framework consists of four parts:

• A Blender Plugin to Author content without the need of a custom editor
• A set of typescript components to quickly code up responsive interactivity
• A dynamic mobile friendly rendering engine based on three.js
• A set of Webpack Plugins, optimizing the assets and codebase for loading speed and streaming

Blender Plugin

As every team in the creative industry, our team consists of a wide variety of people from different disciplines. My goal as the Technical lead was to integrate the plugin as seamlessly into the different pipelines and workflows as possible.

For the designers and artists this meant that ideally they wouldn’t have to leave their familiar tools. So I decided to write a plugin for Blender, the 3D Modeling Tool of choice of our art team.

The Plugin allows the team to create interaction hotspots, bake lighting for different target devices and export to the framework through the export window. The interaction hotspots could then be queried by our Coders to add click areas, 3d navigation and highlight icons.

The plugin also takes care of authoring animated content. While the interface is already provided by Blender through the Non Linear Animation Strips, the plugin made sure to optimize and tag the animated objects behind the scenes.

Typescript Components

To enable fast iterations and quick tests we decided to create a set of Typescript Modules, that would serve as interactive components in 3D Space. These components can be attached to 3D Objects that have been tagged with an ID.

The framework driving these components is tightly integrated with three.js to query for objects and trigger animations or camera transitions.

Rendering Engine

Our main focus with the Framework was to target mobile devices. A target platform that most WebGl Engines struggle with. This is why I spent a lot of time optimizing load times and customizing three.js to provide a smooth experience.

The Rendering Engine stacks two different renderers of three.js on top of each other. A WebGl2 canvas renderer to render the 3D Scene and a css3d overlay renderer to render icons and prompts on top of the existing 3D Geometry. This allowed our design team to work with the familiar tools, like svg, css animations and transitions and responsive layouting in the 3D space.

The engine dynamically streams in multiple levels of detail to ensure swift loading times and pick the best LOD for the target hardware. The engine gradually increases resolution and fidelity until it hits a fps threshold to always deliver a smooth experience.

If the camera is standing still, the engine renders a high resolution, anti aliased version of the scene over time to provide high visual quality on lower end hardware. Animated objects are cut out and rerendered only within their bounding box to save performance and keep the high quality of the still image.

Webpack Plugin

To streamline deployments and builds, I’ve written a compression plugin for webpack that makes use of the ‘gltf-pipeline‘ library and compresses the 3d files into multiple LODs.

All content other content is already compressed on export from the Blender Plugin.

Feel free to check out our Demo