vpro.nl/studentenprotesten
When I entered my internship Jakob and Asha were already in the middle of this project. We had a large database of crowdsourced videos of the student protests in May, and of the confrontations between protesters and police. Which would be placed in 3d space, where you could walk around it similar to a first person video game.
Optimising textures
The first weeks of the project were spend on trying to optimise the 3d models of Amsterdam so that they would load faster. I learned to use blender to slice textures and optimise 3d models.
We also tried using BVH, which is a way of detecting object collision by splitting the world into chunks. So instead of calculating if the player is hitting a wall or the ground at any position in the world, it only calculates it in smaller parts of the world, saving on computation resources, and making the website run a lot faster. I didn’t get this quite figured out, as the camera kept falling through the floor, and Jakob figured out another way to reduce to loading time of the website.
Interface
While I was working on the BVH, we also started thinking about the interface surrounding the . I drew up some sketches.
insert illutrator sketches
We had 3 modes to switch between, a top-down map, a mode where you could view a single video, and an interactive mode where you could walk around the world.
timeline
Colors
I was also tasked with picking out the colors of the different objects and chapters. I initially had the idea of making every chapter on the website another color and reflecting this in the colors in the menus. the 3d objects in the world, and the color of the sky.
Introduction video
For some chapters we started adding videos at the start as an introduction into the major event that took place. Since we had timed text that would pop up, I suggested it might be a good idea to have certain pieces of media show first, before showing the text, so you have more context of what’s going on, before you get shown quotes from the people in the videos.
Renaming media
Everything in the CMS and in the blender files and the actual video files on the server were named differently. So I spend about a day renaming everything. Using and slightly modifying some scripts that Jakob wrote to find all the filenames and rename them across the various places.
New modes and autopilot
While making coffee in the kitchen and preparing for lunch, we came up with the idea for Autopilot mode, since we needed a navigation for people who weren’t that familiar with playing first-person video games. First we wanted to make something like a more traditional grid of videos. But later we realised it would be a lot nicer to have something that still shows the places in the 3d environment.
Bug fixing
We spend the last two days hunting down bugs, and unexpected behaviour. I found some pretty odd things, like this play button that causes you to jump instead of playing the video.
- Programming languages
- JS
- PHP
- YAML
- Software / Libraries
- Blender
- ThreeJS
- Kirby CMS
- vis-js-timeline
- Netherlands 3d
- Concepts
- Normalization
- Quaternions
- bvh to speed up raycasting
- one sentence description