Creating guided tours is one of the most powerful things that Play offers in comparison to other WebGL environments. The front and back arrows in the top left corner is what makes it a ‘tour’. You can animate and control almost any parameter in Play with these buttons.

Tour Example

Import this project with the project ID: 15054180 How to import a project from ID

In the example above, on click of the arrows, we have changed the camera’s Z-distance, the camera’s orientation, and the red cloud’s color.

Setting up the Nodes and Connections

These are the nodes you will be implementing:

nodes nodes nodes nodes nodes nodes nodes
Overlay Graph Tour Navigator Toolbar Toolbutton Sender(x2) Reciever(x2) Tour

1) In the root of your hierarchy graph, you will need to add an overlay graph node underneath the WebGL graph node (that all Play scenes start inside of). Navigate up one level to add the overlay graph node at the same level as the WebGL graph node:


2) Inside the Overlay graph node, add the Tour Navigator node and the Toolbar node on the same hierarchy. Then add a Toolbutton node as a child of the Toolbar.


3) In the control graph, add two sender nodes. Name them and attach the Tour’s outputs to the sender node’s Message.send parameter.


4) In the WebGL graph node, add a brown Tour node and attach 2 Reciever nodes to it:

tour1 5) Double check that connection by right clicking on the connecting line. It should look like this:


6) Now everything is connected! Let’s test it to see if it’s firing in the node inspector.


7) Sweeeeeet! Do a little dance at your desk before moving on. Next we will create the snapshots that make up each step of the tour.

Adding stops to your Tour

1) With the Tour node selected, click into the Tour Editor panel (in the bottom right).


2) Decide which parameters of your scene will be updating with each step along the tour. The most common one is the camera’s orbit controller, so let’s start with that one. To control each parameter (no matter if you use orbit controller or not) you will need a Store node.


3) Depending on what node you’re about to control, create output pins for the Store node that will link to the controlled node. In this case, we’ll make a vector-3 and a float because they will be controlling the orbit controller’s orientation and distance.


4) Then we’re going to connect the Store node and the Orbit Controller node in a double loop, so they’re feeding into each other. First connect the Store node’s output orientation to the Orbit’s Init.Orientation, then connect the Store’s output distance to the Orbit’s Init.distance. Then, do the reverse and add the Orbit’s output orientation to the Store’s Value.orientation, then the Orbit’s output distance to the Store’s Value.distance.


Now, whenver we create a snapshot, these values will be stored.

5) Select the Tour node again to bring up the Tour Editor. Position the camera to a position you like for your first snapshot. Now hit the plus button in the Tour Editor.


6) Now position the camera for your 2nd stop along your tour. When you like it, hit the plus sign again.


7) Test your two stops!