Designer Tutorial 2
Section 1. Panoramas in Cult3D

Tutorial #00008
Copyright 2001 Cycore,
www.cycore.com

For this tutorial we will be using a series of panoramic images generated using Lightscape.

Sections in this tutorial series are as follows:

• Panoramas in Cult3D
• Javascript Triggers in HTML
• Triggering events in HTML from Cult3D
• Extras

Panoramas in Cult3D

This is an example project that demonstrates how to use Cult3D to create a multi-node panoramic presentation. Using this kind of panoramic representation is a very quick way to simulate the experience of walking through environments.

Panoramic images come in a number of different types depending on the type of projection being used. These types are Spherical, Cylindrical and Cubic. For this tutorial we wil be using Spherically projected panoramic images.

The images we are using were rendered from Lightscape using Lightscape's built-in panoramic exporter; although these exampels are CG, the method described here can also be used on photographic or stitched panoramas.

Conceptually the process is quite simple. We will be taking our images and projecting them onto inside-out spheres. We will then place a camera in the center of the sphere.

This tutorial assumes a familiarity with the basic functionality of both 3dsMax and the Cult3D Designer.

Image Setup

The final image quality of our Cult3D models wil be dependant on the quality of our panoramic image. As a result we will start with images that are as high res as possible.

With this in mind, when rendering the panoramas I chose an image size of 2048x1024, which is as high a resolution as Cult3D can handle, while still remaining proportionally correct (Fig-01).

Fig 01
(To download this panorama, right click and select 'Save Target As')

Model Setup

The model setup is extremely simple.

In 3dsMax do the following:

1. Create a sphere at the origin. Set the Segments to 48.

2. Create a Free Camera at the origin.

3. Apply a Normal modifier to the sphere and select the 'Flip Normals' checkbox.

4. Create a material and set the panoramic image as the diffuse texture. Apply the material to the sphere. (your scene should ressemble Figure 02)

The sphere segments need to be set relatively high (ie 48) to ensure that the Spherical mapping appears visually correct. Anything lower and vertical edges of the image will appear wobbly.

Fig 02

Export Options

When exporting the scene from 3dsMax make sure you do the following:

1. Set the shader for the Panorama material to be 'constant' make sure that 'Bilinear Filtering' is also checked.

2. Set the image compression for the panorama to be 'Wavelet' with a value of around 80%. This is higher than the default value, but it is important that this image is crisp.

3. Apply the mesh pre-optimization to the Sphere01 object, this will minimize the impact of the extra sphere segments on the final file size.

Programming the Navigation

Programming the navigation of our panoramic scene is fairly simple, we will apply a slightly modified arcball to our camera.

Before continuing, download the example files here.

Start the Designer and do the following:

1. From the 'File' menu select 'Add Cult3D Designer File'. Locate the file 'nloft-01.c3d' and select 'Open'. A dialogue box will appear asking you wether to load the file's background or not, select 'Yes'.

2. From the Event Type list next to the Event map, select a 'World start' event and drag it into the Event Map (Fig 03).

3. From the Object motion section of the Actions window , select 'arcball' and drag it into the Event Map and onto the WorldStart_1 event. Select another 'arcball' action and drag it onto the WorldStart_1 event as well.

4. From the Scene Graph, select 'Camera01' and drag it into the Event Map and onto the first arcball action. Select 'Camera01' again and drag it onto the second arcball action. Your Event map shoud look like Figure 4.

5. Open the Arcball action detail window for the first arcball action. Apply the following settings.

Co-ordinate system : Local Frame
Left button : Rotate Z
Right button : None
Middle button : None
Friction Duration : 1000ms

All other settings should be at their default values. (Figure 05)

6. Open the detail window for the second arcball action. Apply the following settings:

Co-ordinate system : Camera Frame
Left button : Rotate X
Right button : None
Middle button : None
Keep Rotating : off

All other settings should be at their default values (Figure 06)

If you press play in the preview window, you should be able to look around the scene.

Save you project as pano-01.c3p

Fig 03

Fig 04

Fig 05

Fig 06

Setting up Multinode Presentations

Panoramic presentations become much more interesting when many panoramas are linked together, creating a virtual space. For this presentation I rendered 6 panoramic images from the original model at various important points throughout the space, and numbered them in order (Fig 07).

The next step is setting up connections between our panoramas. To do this we will use two Cult3D features, Hotspots and the Load Co action.

1: From the Textures section of the Scene Graph select the panoramic texture. Right click and select details. This should open the Texture Details window (Fig 08).

2. In the texture details window select 'Fit to Window' and 'Show HotSpots', the entire texture should now be visible.

3. From the HotSpots menu click 'Add'. A small square will appear in the corner of the texture.

4. Resize the new Hotspot to fill the space at the end of the Hall in the middle of the texture.

5. Close the texture Details window. A new Hotspot should be visible under the Panorama texture in the Scene Graph.

6. Create a new Right Mouse click event in the Event Map.

7. From the Connection section of the Actions window, select Load Co and drag it into the Event Map and onto the new Right mouse click.

8. From the Texture section of the Scene Graph, drag the new hotspot into the event map and onto the new Right Mouse click event. Your event should look like Figure 12.

9. Open the Load CO action's details window and enter pano-02.co in the text box.

Now when the user right-clicks on that area of the panoramic texture, the next Cult3D panorama will load. Before we can test this however, we will need to publish this project file as a .co object as well as create the pano-02.co object.

10. From the File menu select 'Save Internet File', name the object pano-01.co

11. In the Save Settings dialogue box, click the geometries tab. Press the 'Select all' button and select 'Mesh Level 2' from the Compression type combo box. Press Assign.

12. Set the compression to 'Low'. The Mesh Level 2 compression reduces file size by reducing the accuracy of co-ordinate data in the scene. using anything higher than Low for this application may result in 'wobbly' looking textures.

13. Press Save. Save your Project as well.

Now we need to create the pano-02.co object. To do so do the following:

1. Start a new project.

2. Load the nloft-02.c3d file.

3. Create the same double arcball navigation as described above.

4. Save the internet file as pano-02.co.

Now if you open the pano-01.co object in your browser window, you should be able to look around 360 degrees. Try right clicking on the space at the end of the hall, it should load the pano-02.co file.

You can now create the remaining pano-02 through pano-06 files. Use HotSpots to connect the various panos. The set of connections I created is as below:

Fig 13

Fig 07

Fig 08

Fig 09

Fig 10

Fig 11

Fig 12

Tooltips

The last thing to do is to attach a Tooltip to each HotSpot to let the user know that the area is clickable.

To add a tooltip d othe following:

In the Cult3D Designer:

1. Open the project pano-01.c3p.

2. Right Click on the Tooltips section of the Scene Graph. Select 'New - Tooltip' A new tooltip should be created.

3. Double click the new tooltip to open the Tooltip Details window.

4. In the text box, enter the text ' Right click to Jump to Kitchen'. Edit the remaining options to suit your taste.

5. From the Textures section of the Scene Graph, drag the hotspot icon to the 'Associated Objects' section of the Tooltip Details window (Fig 14)

6. Close the Tooltip Details window. Save your file.

Your panorama is now ready to be published. Repeat the above steps to create Tooltips for the remainder of your panoramas. The result should look something like Figure 15.

Fig 14

Fig 15