This document updated: May, 2010

Toon Boom Animation Inc. Tutorial: Animate Pro - Producing a 3D Stereoscopic Project

Legal Notices
Published by Toon Boom Animation Inc.

Disclaimer
The content of this document is covered by a specific limited warranty and exclusions and limit of liability under the applicable License Agreement as supplemented by the special terms and conditions for Adobe Flash File Format (SWF). Please refer to the License Agreement and to those special terms and conditions for details. The content of this manual is the property of Toon Boom Animation Inc. and is copyrighted. Any reproduction in whole or in part is strictly prohibited. Copyright 2010 by Toon Boom Animation Inc. All rights reserved.

Trademarks
Toon Boom Animate Pro is a trademark owned by Toon Boom Animation Inc. All other trademarks are the property of their respective owners.

Publication Date
May, 2010

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

Before Starting
Note that this tutorial assumes that you already know the basics of Toon Boom Animate Pro. You should know about the following:

Camera Network Module Library Perspective View Basic Scene Setup 3D positioning Write module Transform Tool Maintain Size Tool Render Network

For more information about these topics, refer to the Toon Boom Animate Pro user guide. Since there is an infinite number of possibilities to create stereoscopic effects, this tutorial will take you through all of the basic principles so that you can understand how to create your own stereoscopic effect. You can also open the example provided, this will give you a better idea of how a stereoscopic scene is composed.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

Introduction

The basic concept for stereoscopic production is to provide the viewer with an image or movie that when viewed will show all the of elements in 3D. To produce 3D stereoscopic content, the project inside Toon Boom Animate Pro requires the use of two cameras, one representing the left eye and one representing the right eye. When the scene is rendered for the same frame two different images will be generated from the two different angles. When these images are viewed at the same time, using the correct viewing method, they will provide a 3D image.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

Methods of Viewing the Output

In order to correctly see the final 3D image the viewer needs to use a 3D method of visualization that is a combination of projection technology and a pair of viewing glasses. There are two categories of viewing glasses:

Passive Glasses 3D Active (or shutter) Glasses

Passive Glasses
In this category there are two types of passive glasses which can be used for viewing the output correctly:

Anaglyphic Glasses (Typically Red and Blue lenses): The visual quality of this method is low. However, it is the most versatile viewing method as any screen can be used for projection or reproduction. These glasses are also inexpensive.

Polarized Glasses The visual quality of this method is much higher than that of anaglyphic glasses because the integrity of the colours are preserved. However, because this method requires a special projection mechanism, normally reserved for movie theatres, this complex projection system is not suitable for home use. The glasses used are not expensive.

3D Active (or shutter) Glasses

The visual quality of this method is extremely high. 3D Active glasses are used in the latest generation of 3D television and require a 3DTV or a 3D Ready Monitor. These LCD glasses synchronize with a signal from the TV. This method is expensive, however it can be used at home or with a computer and several 3D games are being designed for use with this method.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

Points to Consider Before Starting a 3D Project

There are several key factors that need to be considered before commencing a 3D Stereoscopic project. Make sure to take into consideration all of the following points before starting your project.

Layout
It is a good procedure to identify the type of scene and the type of 3D effect that will be used on the scene. This will guide the decision of which and how the graphical elements will be created. We can group the scene in the following categories:

Basic 3D effect

In this effect there will be:

Few elements No elements touching the 3D environment, for example, avoid showing the character standing on the floor. No perspective for the 3D environment, for example, just foreground and background elements but not lateral elements such as walls or floor.

Medium 3D effect

In this effect there will be:

Some elements that are interacting with the 3D environment such as a character walking in which the floor and his steps on it are visible.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

Complex 3D effect

In this effect there will be:

BG or OL elements that require a 3D positioning such as walls, ceilings and floors

Generally, the scene needs to be designed in such a way that elements like OLs and BGs can be positioned in an environment where they are set at different depths. If possible these BGs and OLs should not have any depth drawn on them. The depth distortion will be automatically generated by their position in the 3D environment. For example, if a scene requires the character to walk into the room, the room itself should be created in this 3D environment by using different flat images for different parts of the room such as:

Floor Ceiling Left and right walls

These flat images are rotated in the 3D space to create the room. Once the room is created, the character can walk into the room. If there are objects in the scene that are touching the floor, it is necessary to have a real floor and the objects really need to touch the floor, if not the two cameras will make this object float.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

The same effect happens if the character is walking, make sure there is a floor that it touches. One simple alternative is to re-frame the camera and move it up to hide when the feet touch the floor.

Adding some shadows improves the 3D effect and reduces the floating effect. If there are walls with frames and pictures in them, try to draw the wall without any distortion and add a really thin frame around the picture. Using a thin frame will avoid the giving the impression of bad distortion. Reduce the use of objects with a excessive depth. If you need an object to have a lot of depth then the best way is to create it inside the scene using flat images and rotate them so they show the volume as if it was a box.

For example a scene with a chest can be difficult to achieve with a single flat image for the chest. In this case try to rebuild the chest with 3 or 4 flat pictures like a box and then the perspective will be created from the camera viewpoint.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

Creating the 3D Project

The following is based on a setup considering that the scene is a 12 field scene where the focal point is located 12 fields in front of the camera. Make sure to setup your camera before positioning the elements in your scene on the Z-axis. This section is divided as follows:

Adding the Cameras on page 8 Connecting the Cameras on page 8 Distance Between the Cameras on page 10 Positioning the Scenes Elements on page 13 Focal Point on page 13 Write Modules on page 17 Creating the 3D Movie on page 19

Adding the Cameras

You will need to use three cameras:

CameraL Left camera: This camera will capture what the left eye will see. CameraC Centre camera: This camera will capture the original image that people would see in a regular 2D movie. CameraR Right camera: This camera will capture what the right eye will see.

To add a camera: 1. 2. 3. 4. 5. 6. Open the Module Library view. Select Windows > Module Library. In the Module Library view, go to the All Modules tab. Select the Camera module and drag it to your Network view. Repeat the previous step two more times so that you have 3 cameras in your Network view. In the Network view, click on each of the Camera modules yellow button to open the Layer Properties dialog box. In the Layer Properties dialog box, rename the camera modules as follow:
CameraL CameraR CameraC

Connecting the Cameras

The three cameras should be connected to a series of peg modules so you can animate their positions. Since the angle and distance of the focal point may change depending on the position of your original camera and scenes elements, you will have to be able to modify the position of the cameras independently. It is good to divide the animation motion on two separated pegs:

Translation The translation motion should be done all on one peg, so that you can adjust the distance between the left and right cameras without interfering with the rotation of the camera. Rotation The rotation motion should be done all on one peg, so that you can control the rotation of the camera without interfering with the translation.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

You will use the Rotation peg much more than the Translation peg, as the main translation of the cameras will be done on a single master peg controlling the three cameras at once. The Translation pegs will only be used to set the distance between the left and right cameras. To add and connect the pegs: 1. 2. 3. 4. 5. 6. Open the Module Library view. Select Windows > Module Library. In the Module Library view, go to the All Modules tab. Select the Peg module and drag it to your Network view. Repeat the previous step five more times so that you have 6 Pegs in your Network view. In the Network view, click on each Peg modules yellow button to open the Layer Properties dialog box. In the Layer Properties dialog box, rename the Peg modules as follows:
CameraLRot CameraRRot CameraCRot PegL PegC PegR

7. 8.

Connect the Rotation Peg directly into the corresponding Camera module (Left, Right, Centre). Connect the remaining Peg into the corresponding Rotation Peg (Left, Right, Centre).

9.

From the Module library, drag a new Peg Module and drop it in the Network view.

10. In the Network view, click on the new Pegs Layer Properties button and rename it MasterPeg. 11. Connect the Master Peg to the three camera pegs so that you can control all cameras together.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

This document updated: May, 2010

Distance Between the Cameras

The distance between the left and right camera is extremely important as it represents the distance between the two eyes.

Translation
In each Translation peg, there should be a translation of one field East for the CameraL and one field West for the CameraR.

Centre Camera Right Camera Left Camera

To set the distance between the cameras: 1. 2. 3. In the Network view, click on the PegL modules Layer Properties button. In the Layer Properties dialog box, go to the Transformation tab. In the Position section, in the (X) Axis field, type 1W.

4. 5. 6. 7.

Press [Return]/[Enter] to validate the value. Close the Layer Properties dialog box. In the Network view, click on the PegR modules Layer Properties button. In the Layer Properties dialog box, go to the Transformation tab.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

10

This document updated: May, 2010

8.

In the Position section, in the (X) Axis field, type 1E.

9.

Press [Return]/[Enter] to validate the value.

10. Close the Layer Properties dialog box.

Rotation
When you look at an object, your eyes are rotated so that they look at the same point. If you place your finger in front of your nose, you will see how both eyes rotate towards the centre to focus on the finger. In the software, you will have to do the same with your cameras so they focus on the same point. This will enhance the stereoscopic effect by a huge amount. The key to making the stereoscopic effect fully functional is to rotate the left and right cameras on their Y-axes so they are looking at the same focal point. If the vertical centre of each camera is not aligned with the vertical centre of the main focal point, the stereoscopic effect will not be convincing. To do this, the Enable 3D option should be activated in both cameras so they can rotate on all 3 axes. For the default camera position, the angular corrections to be done in the 3D Rotation Euler angles are:

1. 2. 3. 4.

CameraLRot: (Y) Axis -2.327 degrees CameraRRot: (Y) Axis +2.327 degrees.

To rotate the cameras: In the Network view, click on the CameraLRot modules Layer Properties button. In the Layer Properties dialog box, go to the Transformation tab. Activate the Enable 3D option to access the 3D rotation parameters. In the Rotation section, enable the Euler Angles option.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

11

This document updated: May, 2010

5.

In the Rotation section, in the (Y) Axis field, type -2.327.

6. 7. 8. 9.

Press [Return]/[Enter] to validate the value. Close the Layer Properties dialog box. In the Network view, click on the CameraRRot modules Layer Properties button. In the Layer Properties dialog box, go to the Transformation tab.

10. Activate the Enable 3D option to access the 3D rotation parameters. 11. In the Rotation section, enable the Euler Angles option. 12. In the Rotation section, in the (Y) Axis field, type -2.327.

13. Press [Return]/[Enter] to validate the value. 14. Close the Layer Properties dialog box.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

12

This document updated: May, 2010

Positioning the Scenes Elements

Once your cameras and pegs are set, you can position your elements in the 3D space. To position the scenes elements: 1. At the beginning, all the primary positions of elements should be done using the Central Camera CameraC. In the top menu, select Scene > Camera > CameraC. Once all the elements for the scene are completed, and imported in the scene, it is recommended that they are positioned as if it was a regular 2D scene, this simplifies the process of alignment of the key graphical elements of the scene. Once this first positioning is completed, keep the elements that are going to be in the focal point at zero depth. For all the elements that will be in front, move them closer to the CameraC using the Maintain Size Tool. For all the elements that will be behind, move them further from the CameraC using the Maintain Size Tool. Now that all the elements are at different depths, in the top menu, select Scene > Camera > CameraL the system will show the same image but now created from the Left camera where there is an angular correction, the same will happen if the CameraR is selected.

2. 3. 4. 5.

Focal Point

The control of the focal point is a very important element in the success of a stereoscopic project. The focal point is the point where the eyes are looking and focusing. The angle of the eyes will change depending where they are looking. A good way to understand the principal of the focal point is to put a finger in front of your eyes and look at it. When you move your finger closer to your nose, your eyes will rotate more toward the inside to still be able to focus on it. If your move it further away from your nose, your eyes will rotate less. Note that your eyes will never rotate outwards as they would not be looking at the same thing anymore. The rotation of your left and right camera will behave the same way as your eyes. The further away the focal point is from the camera the closer to zero degrees the angle value will be. The closer the focal point will be from the camera, the greater the value will be. For a central focal point, meaning a focal point that would be aligned with your nose, the angle values for both cameras will always be the same except that the left camera will be the negative value from the right one (Left: -2.327 and Right: 2.327). Make sure to follow this rule. With 2D animation (flat drawings), it is better to keep a central focal point and avoid rotating the cameras upward or downward too much as some of the elements in your scene may look distorted. It is less of a problem

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

13

This document updated: May, 2010

if you built a room with a floor, walls and a ceiling positioned in the 3D space, but all the other elements that are flat drawings could look distorted.

How to Determine Where Your Focal Point is?

A way to establish your focal point is to use the Field Chart module available in the Module Library. This will help your find the distance and centre of your focal point. You can also add a Field chart to your Left and Right cameras so you can align their centre with the main focal point one. To set your focal point: 1. 2. 3. 4. 5. In the Module Library view, go to the All Modules tab. Select a Field Chart module and drag it to your Network view. Connect the Field Chart module into the scenes final Composite module. From the Module Library, drag a Peg module and drop it in the Network view. Connect the Peg to your Field Chart module.

6. 7.

From the Module Library, drag two other Field Chart modules and drop them in the Network view. Rename the two new field chart modules:
FieldChartL FieldChartR

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

14

This document updated: May, 2010

8. 9.

Connect the CameraLRot peg to the FieldCharL module so that when you move the left camera, the left field chart moves along. Connect the CameraRRot peg to the FieldCharR module so that when you move the right camera, the right field chart moves along.

10. Connect the two field charts in the final scenes Composite module.

11. Click on the left Field Chart modules Properties button to adjust the depth. 12. In the Layer Properties dialog box, go to the Position tab. 13. In the Position section, in the (Z) axis field, type 11.5. 14. Click on the Close button. 15. Repeat the same steps for the right Field Chart module. 16. In the Camera, Top, Side or Perspective view, position your main field chart where you want your focal point. The centre of the field chart should be placed at the centre of the framing you want to have for your scene. The position on the Z-axis of your field chart should be where you want the eyes to focus.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

15

This document updated: May, 2010

17. In the top menu, select Scene > Camera > CameraL to activate the left camera.

18. Using the left camera rotation peg, rotate the left camera so its vertical centre is aligned with the vertical centre of the main field chart.

19. Repeat the previous step for the right camera.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

16

This document updated: May, 2010

Animating the Focal Point

Focal Point Path

Camera Path If you want to pan or truck-in with your camera over time, you will need to animate it using a peg. It is important to animate your cameras using the MasterPeg you added earlier so that all the cameras and field charts are moving at the same time. Since the distance between the left and right cameras was set on individual pegs as well as the rotation for the camera, they will remain untouched. If you want to animate your main focal point, use the field chart peg you added earlier. Once you are satisfied with the focal point motion, animate your cameras so that it follows it. As you truck-in or truck-out, adjust the rotation of the camera using the camera rotation pegs so that the vertical centre is always aligned.

Write Modules
To do the final scene render, you will need to add three Write modules to your Network so you can do the three different camera renders simultaneously:

WriteL Left Camera Write module: This will output what the left eye will see. WriteC Centre Camera Write module: This will output the original image that people would see in a regular 2D movie. WriteR Right Camera Write module: This will output what the right eye will see.

Connecting the Write Modules

To add and connect the Write modules: 1. 2. 3. 4. 5. Open the Module Library view. Select Windows > Module Library. In the Module Library view, go to the All Modules tab. Select the Write module and drag it to your Network view. Repeat the previous step twice so that you have 3 Write modules in your Network view. In the Network view, click on the yellow button in each of the Write modules to open the Layer Properties dialog box.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

17

This document updated: May, 2010

6.

In the Layer Properties dialog box, rename the camera modules as follow:
WriteL WriteR WriteC

7.

In the Output tab, in the Filename field, change the filename of the rendered images to represent the camera that is rendering, for example: WriteL will have as filename final_LWriteC will have as filename finalWriteL will have as filename final_RClose all the Layer Properties dialog boxes. In the Network view, connect the final Composite module to the three Write modules.

8. 9.

Rendering the Scene

To create the final movie and test the results, we need to render the two sequences of images. To render the scene: 1. In the Network view, disable all the Write modules with the exception of the WriteL.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

18

This document updated: May, 2010

2. 3. 4. 5. 6.

In the top menu, select Scene > Camera > CameraL. In the top menu, select File > Export > Render Network. In the Render Network dialog box, choose the desired options. Click on the OK button to render the left image sequence. Repeat the same operations but now disable all the WriteL module and enable the WriteR. Select the CameraR instead of the left camera.

Creating the 3D Movie

Once the two sets of rendered images are created from Toon Boom Animate Pro the next step depends on the final output that you require. In some cases you may want to create a 3D movie. To do this, you will need to use a third party software. You can easily find some freeware on the web. To create a 3D movie: 1. Create an AVI movie for each set of rendered images such as:
Final_L.avi Final_R.avi

NOTE: To create these AVI, you can use a software such as Picture2avi. 2. For 3D Active Method Combine these movies into a single Left and Right 3D Stereoscopic AVI to be used with Active glasses. For Anaglyphic Method Combine these movies into a single final AVI or QuickTime movie using the Anaglyphic method. For this process you can use a software like StereoMovie Maker and then recompress the movie to a QuickTime or FLV.

Toon Boom Animation Inc. - Toon Boom Animate Pro - Producing a 3D Stereoscopic Project

19