From Research to Presentation

A guide to creating slideshows and scrollytellings from Vantage investigations.

At Krisenstab we make interfaces for data production, sense-making, and presentation. Vantage, our tool for spatial reconstruction, was so far only covering the first two of those aspects. Aligning and projecting imagery allows us to give texture to 3d models and to infer camera intrinsics. By combining footage from various perspectives we support the understanding of how an event unfolded.

This week, we published Vantage Storyboard to close the gap between performing spatial research and getting your findings across to your audience. In this guide I demonstrate how to use Storyboard to create interactive and engaging slideshows and scrollytellings from Vantage investigations.

Create your first storyboard

Open Storyboard open a Vantage project to get started. If you don’t have one yet, follow our getting started with Vantage guide or start by importing a 3D model (.glb or .gltf). This will create a very basic Vantage scene with a single model and no projections.

Once opened, an untitled storyboard will be automatically created. You can create additional storyboards to try out multiple storylines. All storyboards are saved to storyboards.json in your Vantage project directory, so you can still refine your spatial reconstruction in vantage while already prototyping stories.

Your first slides

Each storyboard consists of multiple slides. Slides essentially store a camera position and perspective, which models and projections are visible and can have a text. Once you have multiple slides, transitions between them will be automatically created.

Click on “Capture first slide”. This will open your Vantage scene. Move around and adjust the perspective to your liking. Select “Capture Position” to add the slide and you’ll return to the storyboard. Duplicate your first slide by clicking the plus sign. Then click the thumbnail to update its perspective.

When capturing a slide you’ll find some advanced options at the top right. Toggle models and projections on and off.

Attach to a projection to fully match its perspective and detach to move freely again. Or change the perspectives field of view.

Back in the storyboard add some text to each slide and rearrange them per drag and drop.

Previewing

With two slides you can already preview your story. As mentioned earlier, there are two different modes. Pick the red Preview for the slideshow or the blue one for the scrollytelling.

To adjust the speed of the transition, exit the preview and set the desired duration in seconds (s) and the desired scroll distance in viewport height (vh).

Waypoints

Transitions follow a smooth path from one slide to the next. In some cases they may clip through buildings, don’t have the desired dramatic effect or just feel a bit off.

To fix this, create one or more slides in between and click the transition arrow to mark them as waypoints. Waypoints don’t have text and transitions play through to the next slide proper.

Changes to the visibility of models and projections are applied once a slide is reached. Use waypoints to make them appear or disappear before or during a transition instead.

Export

Export a slideshow or scrollytelling to share your story on the web. This will generate and download a zip file containing all the necessary html, css, javascript, data and media files. Unzip it and put the directory on any web server. Or edit the files to make adjustments in appearance and functionality.

The camera animation can also be exported as a .glb file. We are open to implementing (or accepting contributions for) additional exports including video or customised storytelling templates, let us know what would be helpful for you.

Let us know if you make things using Vantage and Storyboard!

Best, Fidel