In rendering the natural terrain around each Twelve Earths site, we used two types of geospatial data: a digital elevation model (or DEM) and a satellite base map. The elevation model encodes the elevation of a given point on the Earth’s surface as a high-bit-depth grayscale value. Using pydelatin, we turned the elevation data into triangulated mesh. Then we textured the mesh with a 0.25m ortho-rectified satellite map from the Portuguese National Register for Geographic Information (SNIG) data portal.

In order to add more detail to the surface of the terrain mesh, we built a procedural building generator in Blender that extruded single and double-story vernacular housing based on building footprints from the Bing Maps Global ML Building Footprints repository. We combined the terrain mesh and building geometry into a set of GLTF tiles covering 300 sq. km of terrain around the site. Although the final output was a video, we used three.js to compose the scene to allow for future rendering on the web.

In three.js, we added colored directional lighting to match the direction and temperature of the sunlight in the underlying satellite imagery, atmospheric fog, and an abstract glowing ring to represent the “great circle” that connects all Twelve Earths sites. We added curvature to the scene and built a camera rig to keep the camera equidistant from the surface of the terrain model as it followed the path of the ring. The final video was exported with ccapture.js at 4K 60fps with motion blur.

The Rudolph Hall renders are fully dynamic: when a new publication is uploaded to the Kirby CMS backend, a new render is generated instantly, on the server. To achieve this dynamic behavior, we extended the CMS thumbnail system to orchestrate a multi-layer composit­ing operation with Image­Magick, an open-source CLI tool for converting, resizing, and editing raster images (conveniently installed by default on most web servers).

The script requires as input: a background rendering, a special UV map showing the perspectival projection of the newspaper in the rendering, a mask for foreground objects (all created previously, offline), and the front and back images of the publication (editable dynamically in the CMS). Using ImageMagick’s Composite and Distort operations these layers are merged one-by-one into a single output image at runtime.

The final image is cached on disk so that subsequent requests can serve the image immediately. When any of the underlying input assets change, or a new image for the publication is uploaded, the cache entry is evicted and a new one is generated at the time for the next request. Compared to realtime rendering with WebGL, this system allows for greater graphic realism with no runtime performance cost while maintaining dynamic editability.

Each of the projected digital signs covered a gallery wall edge-to-edge and displayed the contents of a live page from the exhibition website. The walls varied drastically in size and aspect ratio, including the long wall depicted above (23 ft wide and 5.5 ft tall). In order to align projected image and wall, we created a CSS checker­board pattern on the exhibition website.

Using the checkerboard pattern for reference, we adjusted the position, focus, and keystone correction of each projector. In order to “crop” the projected image to the correct aspect ratio, we displayed a black background outside of the target area on the corresponding web page. This area of the projected image was invisible in the ambient lighting conditions of the gallery.

The final version of the website retained the unique aspect ratios of the gallery walls. In this manner, online visitors to the web page were exposed to the compositional logic of the architecture in the gallery. Over the course of the exhibition, we used the ease of updating the website CMS to ensure the signage in the gallery continually adapted to the programming.