How to make original, interactive dome visuals with Vuo

Tutorials
, , , , ,
1

An introduction to creating fulldome content

Notes

For a more details, see the following example compositions and user manual sections.

  • Render a 3D scene
    • File > Open Example > Scene
      • Display Sphere
      • Move Spinning Sphere
      • Display Scene
    • Vuo Manual
  • Warp for dome
    • File > Open Example > Scene
      • Show Trees with Fisheye
      • Move Through Tube with Fisheye
    • File > Open Example > Image
      • Warp Image for Fisheye Projection
  • More possibilities for input
    • File > Open Example > Audio
      • Visualize Loudness
    • File > Open Example > Scene
      • Explode Sphere
Transcript

Introduction to Vuo

Hello. I’m Jaymie. This is Steve. We’re part of the team that develops Vuo, a software tool for doing creative work. We’ll be showing you how you can use Vuo to make your own graphics, display them on a dome, and interact with them.

I find it easier to explain what Vuo can do through examples, so let’s start with that.

  • These images are by a graphic artist named Luiz André Gama. He started with photographs and then used Vuo to repeat parts of the image on top of itself.
  • This was a performance by a group called IMPACT Theatre. They set up Vuo and a Kinect camera so that the performers could use gestures to paint colors on a screen.
  • This exhibit was a collaboration between a video person, an audio person, a dancer, and Paul Bourke, who managed the dome itself. Paul used a spherical mirror setup on the hardware side and Vuo on the software side to project from the inside of the dome.

And that brings us to the topic for today, which is how you can use Vuo to make cool stuff for planetariums and other domes. We’re going to cover a subset of that in the next 20 minutes — how to generate graphics, how to project them with a fisheye lens, how to make them react to audio and devices, and how to record a video.

A few quick notes —

  1. Vuo runs on macOS. We do plan to support Windows eventually, but we don’t yet.
  2. We’ll be demonstrating Vuo version 2.0, which is going to be released later this year. So if you download Vuo now and you’re wondering why it’s different, that’s why.
  3. We’re recording this workshop and will post it on the Vuo Youtube channel as soon as we can. So if you miss anything today, you can re-watch it. If you don’t want to be recorded, just let us know.

Render a 3D scene

OK, first up: how to make graphics with Vuo. Today we’re going to demonstrate 3D graphics, so a good starting point is File > New Composition from Template > Scene.

A composition is what we call a thing that you build in Vuo. A composition is a computer program. This stuff on the right is the instructions or blueprint for what it’s supposed to do. When you click Run, you see what it actually does.

This composition doesn’t do a whole lot yet. The one thing it does do is display a window, which comes from the node that says Render Scene to Window. Each of these rectangle things is called a node. Each node has a job, which is written across the top. And if you click on the node you can see its job explained in more detail.

Add torus

The area along the left side is called your node library. The node library is where you look for nodes to put in your composition. We’re gonna find a node whose job it is to make a 3D shape that we can add to our composition… OK, Steve picked a torus, which is a doughnut shape. He’s connecting it to other nodes so it will appear in the window.

Let’s look what he just did. Steve drew a line, which is called a cable, connecting the Make Torus node to the Render Scene to Window node. It’s sort of like this cable going from our computer to the projector. The computer makes the image that’s supposed to appear on the screen, then sends it through the cable to the projector to display it. It’s kind of the same idea in the composition. The Make Torus node is in charge of making the shape, then it sends the shape through the cable for Render Scene to Window to display it.

Steve also connected a cable on the other side of Make Torus, but I’m going to hold off on explaining that for a moment because we’re gonna change it.

The circles along the left side of the node are called ports. Ports control the settings for the node. Let’s say we want to change the thickness of the torus, we’d double-click on the port and edit it.

Move torus with mouse

Right now the torus is in the middle of the window. The torus’s position, rotation, and size are controlled by the Transform port. Instead of having the torus sit in one place, let’s move it around with the mouse. Steve will set that up for us and then I’ll explain it…

OK, so how does this work? Let me start with a little background on 3D space. In Vuo, space is divided along 3 axes. The x-axis goes left and right. The y-axis is up and down. The z-axis is front and back. If you want to say where an object is located, you say it in terms of the x, y, and z axes. It’s like plotting points in algebra class.

Steve’s gonna put the torus back where it was for a minute. The torus is now sitting at the intersection of the three axes, a point called (0,0,0). We can move it left or right by changing that first number, the x-coordinate. And up and down by changing the y-coordinate. Now if we connect the mouse again, you can see that the mouse is providing the x- and y-coordinates.

Add stegosaurus

Let’s add another object into our scene. The obvious thing to pair with a doughnut is, of course, a stegosaurus… This is a 3D model that somebody created in Blender or some such app. We’re going to bring it into our Vuo composition… Steve dropped the 3D model onto the canvas to create a Fetch Scene node. He’s using the Allow First Event node so that Fetch Scene does its job just one time instead of repeatedly. And he’s added a cable to Render Scene to Window. And there’s our stegosaurus.

Rotate stegosaurus

One more thing, just for fun, let’s make this stegosaurus rotate over time. Fire on Display Refresh is a good node to use for animating things. Remember how Receive Mouse Moves would send out a new position every time you moved the mouse. Well, Fire on Display Refresh instead sends out new data at a steady rate of 60 times a second, which is good for animation. The number coming out of it is the number of seconds that the composition has been running. We can use that as the number of degrees to rotate the stegosaurus… That’s actually kind of slow, so we can put in a Change Speed node that will multiply the number to speed up the rotation.

OK, so that was a crash course on making 3D graphics in Vuo. Now how do you display them on a dome?

Warp for dome

In real life, if you wanted to film something for a dome, you’d take a video. For example, if you had a hemispherical dome with a fisheye lens projector in the center, you could film using a circular fisheye lens.

In Vuo, it’s the same idea, except you’re filming a virtual scene instead of a real one.

Right now what you’re seeing in this composition is like the virtual scene is being filmed by a camera — a regular, non-fisheye camera — positioned right here, a little in front of the point (0,0,0). In fact, we can move that camera around with the mouse, since the composition has a Make Draggable Camera node.

The regular camera is good for displaying on a flat screen, but of course our scene would look warped if we put it up on a dome. So we need to replace the regular camera with a fisheye camera.

Vuo has two nodes that make a fisheye camera. The only difference between them is how you specify the orientation of the camera. Let’s go with the targeted fisheye camera. Steve’s gonna hook that up so we can see what it looks like.

OK, now our scene looks weird on a flat screen, but it would look right if you projected it onto a dome…

Let’s go through the input ports of Make Targeted Fisheye Camera.

  • Name doesn’t matter here. You’d use it if you had multiple cameras looking at the scene and you wanted to switch between them.
  • Position is where the camera is located, in terms of the x,y,z-axes. This camera is a little bit in front of the scene.
  • Target is the direction the camera is pointed. You can think of the camera having a straight line coming out the front of it. Target is a point along that line. So this camera is looking back along the z-axis.
  • Up Direction is how the camera is rotated. Right now it’s right-side-up and not tilted.
  • Field of View you probably want to keep at 180 degrees for a hemispherical dome.
  • Vignette Width and Sharpness control the fadeout along the base of the dome.

Steve and I have used Vuo’s fisheye camera before in a dome with a single fisheye lens projector. We’ve also used it in a dome with a 6-projector system that had its own software that would take a single fisheye image and split it appropriately.

If you have a setup where a fisheye image is not the right thing — for example you’re using one or more spherical mirrors — you can instead use the Warp Image with Projection Mesh node. I won’t get into that right now, but if you click on the node in the node library there’s documentation and an example to help you get started.

More possibilities for input

I want to cover two other things briefly. One is how to save a video, the other is the different kinds of interactivity that a composition can have besides a mouse.

If you type “receive” into the node library, that shows the devices and protocols that Vuo can receive input from…

If you ever have live musicians performing in your dome and want to display some kind of visuals, Receive Live Audio is a good one for that. You can make your visuals react in real time to the music.

There are different aspects of the music that you could react to, but a simple one is the loudness at any given moment. That works especially well for music with a heavy beat. The Calculate Loudness node gives you the loudness as a number between 0 and 1. You can then use a cable to feed that number into some port to affect the graphics. So for example, we can make the stegosaurus explode a little bit based on the loudness of the sound.

Record movie

The last thing I want to mention is how to save a composition to video. You might want to do this to share your visuals with people who don’t have Vuo, or maybe to advertise a dome show on social media.

The easiest way is to go to File > Start Recording. That will record the contents of the window until you go to Stop Recording.

I won’t go into this now, but just to let you know, there are other methods you can use if you want to record a movie with audio or if you have graphics that are too heavy to render in real time.

Conclusion

OK, so just a quick review, today we covered how to make graphics with Vuo, project them on a dome, make them interactive, and save them to video.

So, what questions do you have?

1 Like