aboutme.be

Building a laptop-driven 8-screen installation


hero image

To present work of this year’s Devine graduates, we wanted to do something more. After a brainstorming session, we ended up with presenting their work on an 8-screen setup. We want to use these 8 screens in a dynamic way: sometimes they’ll form one big viewport on an image or video, in other scenarios each screen will contain an image or text on it’s own. We want to be able to animate content between the screens.

Update: read up on the final project in my other post.

Resolution on each of the screens should be as high as possible, and we wanted a “random”, flexible screen layout. Next up, it should have an interactive element: using a big button or other interactions, visitors should be able to browse through content.

After doing some technical research, I ended up with a couple of possible approaches:

In the end I went with 2 cheaper Startech ST124HDVW 4K splitters, which are available in Europe. The benefit of this approach, is that it’s more flexible than using a dedicated desktop pc with beafy GPUs: it can split one 4K HDMI input to 4 screens - this input could be coming from anywhere: a Mac, PC, Raspberry PI, laptop, desktop, … all of our existing laptops are able to output at least 2 4K HDMI streams, and could work as an input for the installation.

The software

We need software to match the expected output as well. Each of the 4K splitters identifies as a 4K screen, and splits the signal into 4 Full HD signals. Here’s an example of connecting one splitter to my Macbook Pro, you’ll see the 4 screens together display as a big second screen:

4 screens as one big screen

The first step I wanted to cover, was creating an output that spans 2 displays, and being able to put content on each of the separte displays. When the displays are lined up nicely, this is a pretty easy task: just make each output “pane” full hd, and put on either at the start or halfway on the screen.

The tricky part here is getting a good framerate driving this 2x4K output. We want to be able to output animated content on each screen, and transition content between screens. Regular pixel-manipulation on a 2D canvas was a no-go (ended around 16fps here), WebGL allowed for smooth 60fps content:

The installation itself needs a more flexible setup: it won’t have 8 identical screens next to eachother, but will have a setup with screens of different sizes and orientations. So: the physical setup of the screens doesnt’ match the output right now. I needed to create a virtual representation of the physical setup, and put the output for each screen on a fixed spot, in order for the splitter to put that signal to the correct screen.

I ended up with a solution using 8 ThreeJS OrthographicCameras, which render their view to the fixed output positions.

The virtual setup looks something like this:

view of the threejs scene

And this single threejs scene is rendered with 8 orthographic cameras to the following 2x4K output, which is propertly aligned for the 4K splitters.

view of the output

And here’s how this looks in real life:

The project is still a work in progress, but already happy with some of the technical hurdles that were taken :-)