Thread by @martgnz

I have written about how we made a 3D graphic of the Great Zimbabwe for @ECONdailycharts. The process involved baking textures with Blender, rigging a lowpoly model and rendering a scrollytelling scene with #threejs view.e.economist.com/?qs=6fe3793805…

At the beginning we were wondering if we could use an embedding service like Sketchfab. However after seeing @NYTimesRD's series of photogrammetry blog posts we realised we could do something bigger rd.nytimes.com/projects/an-en…

The main hurdle was lowering the model's resolution so it could fit well onto the web browser. The original textures and model were far too detailed for us to work with

After some research I found that a typical workflow in photogrammetry was to lower the vertices of the model while maintaining texture quality, basically "transferring" the textures from a highpoly to a lowpoly model

I discovered Instant meshes, an app that runs a fairly advanced algorithm to minify the number of vertices in a model. It is very simple to use and the results are great! github.com/wjakob/instant…

I struggled to find a good way to "bake" the highres to lowpoly textures with Blender. To be honest the baking UI is a bit confusing and I'm not really an expert. However, after searching a bit more I found this great tutorial that goes step by step

Now we had the model running on Three.js. We used NYT's three-story-controls library (and even contributed a bit!) to create our camera path and control the scroll position. It worked like a charm, there's even an interface to create each shot github.com/nytimes/three-…

However, we were missing the human scale. I realised that we could add a little person to the scene to let readers see the scale of the site. I wanted to do something lowpoly as well, not too detailed (the model is 1.71m tall)

This tutorial was very helpful. Even without knowing lots of Blender I was able to follow through and rig a little person in various positions. Then, each pose was exported to GLTF. With Three.js you can use AnimationMixer even for static positions

For the final touches I created three different textures that load depending on screen size (2k, 4k and 8k) and extracted some parts from the model to highlight while scrolling (this was easy with the three-story-controls library)

Working with 3D is exhausting but fun. It is a nice change of pace compared to 2D graphics but you really need more time. I'm looking forward to do more of it in 2022

Just in case: 3D graphics weren't the only thing we did for this piece. There is more stuff that you need to keep in mind when working on articles like this: editing text so visuals and copy work together, art direction, backend develoment, deploy processes...

It is involved and it takes time (weeks, sometimes months). This is one of the reasons why you should subscribe to your favourite newspaper and support their graphics team

You can see the final 3D graphic here and read @johnpmcdermott's fascinating story economist.com/interactives/c…