«Toon Boom Animation Inc. Tutorial: Animate Pro - Producing a 3D Stereoscopic Project Legal Notices Published by Toon Boom Animation Inc. Disclaimer ...»
This document updated: May, 2010
Toon Boom Animation Inc.
Animate Pro - Producing a 3D Stereoscopic
Published by Toon Boom Animation Inc.
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 1 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:
• 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.
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.
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.
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:
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 OL’s and BG’s can be positioned in an environment where they are set at different depths.
If possible these BG’s and OL’s 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:
• 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.
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.
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 Peg’s 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.
Distance Between the Cameras The distance between the left and right camera is extremely important as it represents the distance between the two eyes.
To set the distance between the cameras:
1. In the Network view, click on the PegL module’s Layer Properties button.
2. In the Layer Properties dialog box, go to the Transformation tab.
3. In the Position section, in the (X) Axis field, type 1W.
4. Press [Return]/[Enter] to validate the value.
5. Close the Layer Properties dialog box.
6. In the Network view, click on the PegR module’s Layer Properties button.
7. In the Layer Properties dialog box, go to the Transformation tab.
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:
• CameraLRot: (Y) Axis -2.327 degrees
• CameraRRot: (Y) Axis +2.327 degrees.
To rotate the cameras:
1. In the Network view, click on the CameraLRot module’s Layer Properties button.
2. In the Layer Properties dialog box, go to the Transformation tab.
3. Activate the Enable 3D option to access the 3D rotation parameters.
4. In the Rotation section, enable the Euler Angles option.
6. Press [Return]/[Enter] to validate the value.
7. Close the Layer Properties dialog box.
8. In the Network view, click on the CameraRRot module’s Layer Properties button.
9. 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.
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
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.
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. In the Module Library view, go to the All Modules tab.
2. Select a Field Chart module and drag it to your Network view.
3. Connect the Field Chart module into the scene’s final Composite module.
4. From the Module Library, drag a Peg module and drop it in the Network view.
5. Connect the Peg to your Field Chart module.
8. Connect the CameraLRot peg to the FieldCharL module so that when you move the left camera, the left field chart moves along.
9. 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 scene’s Composite module.
11. Click on the left Field Chart module’s 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.
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.
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.
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.