Interactive 3D Animation with WebGL for Storytelling
Content
Gunadarma University Journal, Vol. I, No. 1, 1-2, 2014 Computer Graphics 2
Interactive 3D Animation with WebGL for Storytelling
M. Haidar Hanif1 , Freddy Arviando2 , Alvin3
Abstract Creating 3D animation with computer has been easier nowadays. One of the most inspirational ways to use it is by storytelling. Moreover, with the latest technology, the animation can also be interactive. By combining available computer graphics technology on the web such as WebGL and interactive story, we can deliver more immersive story and animation. Therefore interactive 3D animation can be enjoyed anywhere online, directly without any plugin with modern web browser. There are many intuitive sofware to create it. This project is using Clara.io from Exocortex Technologies. The sofware used for 3D modeling, layout, animation, and rendering. It allows us to have an easy-to-use and collaborative 3D creation software on the web, without nothing more to download or install. This way the process to create 3D animation has become faster and more effective. After all the process is done, the built-in player can be shared or embedded anywhere. Then once the assets are loaded in the player, viewer can start play the animation and interact with it. Likely now anyone can create and play with 3D animation. Without complicated setup, a story or tale can be told through it, bringing online animation capable of making an interactive story. Keywords computer graphics, interactive 3D, WebGL, animation
1 ([email protected])
Informatics Engineering, Industrial Technology, Gunadarma University Informatics Engineering, Industrial Technology, Gunadarma University 3 ([email protected]) Informatics Engineering, Industrial Technology, Gunadarma University
2 ([email protected])
Contents
Introduction 1 1.1 1.2 1.3 2 2.1 2.2 2.3 2.4 Technology Browser and GPU . . . . . . . . . . . . . . . . . . . . . . . . WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Clara.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation Process Story . . . . . . . . . . Object List . . . . . . . Scenes . . . . . . . . . Animated Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 1 1 1 2 2 2 2 2 3 3
Cucumber Thief” with a little bit improvisation. Even more, the animation is partially interactive for viewing. Viewer can play the animation and when paused can freely rotate the environment without camera constraint. When continued, the camera is back to its respective position and played again. This made the world inside it more live than ever.
1. Technology
1.1 Browser and GPU Any modern web browser that is capable of handling heavy load WebGL content is recommended, such as Google Chrome or Mozilla Firefox. The minimum requirement is the browser should able to render HTML5 and WebGL content and user’s supported GPU is capable of it. In this case we are using Google Chrome version 32 for the best process and result as possible while using Intel HD Graphics 3000 GPU. 1.2 WebGL WebGL is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. [1] So the technology basically just requires modern web browser, HTML5, and JavaScript. 1.3 Clara.io Clara.io is based on graphics library called WebGL. This next-generation online 3D modeling and rendering software is built to resemble traditional desktop 3D editors on the surface, thus Clara.io is immediately familiar to most 3D artists. But because Clara.io is built for the web, it is always accessible,
Camera • Light • Narration
Acknowledgments References
Introduction
The project is created as a proof of concept that modern web technology has already could deliver 3D animation with equal quality or similar process and result as the desktop based software could. One of the most groundbreaking software for that matter is Clara.io from Exocortex Technologies, an all-inone web-based 3D modeling, layout, animation, and rendering software. It allows us to have an easy-to-use and collaborative 3D creation software on the web, without nothing more to download or install. For practical purpose, we create the interactive 3D animation based on a classic famous fable titled ”Kancil The
Interactive 3D Animation with WebGL for Storytelling — 2/4
there is no configuration, it is cross platform, all of your creation history is stored automatically, you can collaborate in real-time, and you have access to unlimited cloud computing on-demand. [2] The software graphical user interface can looked at figure 1. The reason of using Clara.io is because it has already the following features: • • • • • • • • • • • • • • • • Hierarchical scene graph Lights and cameras Robust support for Polymeshes Flexible operators Keyframe-based animation Powerful sub-object editing Renderer and pass management Sharing system Rudimentary bones and skinning Real-time multi-user collaborative editing Automatic versioning with history Various 3D file format support Scene Player Bones, Skinning and Keyframe Animation Scene Sharing and Collaboration and much more
Texts Title and various scene narration : White Lights Directional light, point light, spot light, hemisphere light : Mostly White Camera Perspective camera with 24◦ field of view, aspect ratio 16 : 9
Figure 2. All objects/models used in main scene
2. Animation Process
2.1 Story Title Kancil The Cucumber Thief Summary About the craftiness of Kancil to fool the careless farmer and the greedy dog 2.2 Object List These are the objects or models used for the animation; such as PolyMesh, Light, and Camera. Each model’s name followed by its purpose/character and color. PolyMesh can be created inside the 3D modeler or imported from various 3D file formats whereas the light and camera also provided. The whole assets used about more than 250, 000 polygons, 140, 000 vertices, 30, 000 normals, and 30 nodes. The graphics style is using low poly mode without smoothing, so it’s decreasing the amount number of polygons. All objects in one place can be looked at figure 2. Field Plane box for land : Green Cylinder Sky background : Blue Farm House Three grouped models of house component : Cream, Brown, Orange Grasses Two grass models : Dark Green Plants Cucumber plants : Dark Green Cucumber Single cucumber on the plants : Light Green Kancil The smart thief : Orange Dog The victim of Kancil : Gray Farmer Handling the farm : Orange Scarecrow Sticky figure with hat : Dark Brown Cage To capture Kancil : Dark Brown
2.3 Scenes The simplified story consists of 10 actual scenes in about 3000 frames with various actions and which models are affected (see table 1). Then with extra final scene only for displaying all the objects. All scenes are taking place on the only one main scene, which is the platform. The player goes with frame rate 15 frames per second. To minimize the clutter and keyframe calculation, each scene only using about 300 frames. Then each scene, camera, light, and text are affected particularly, changed upon the highlighted actions. The notable alteration of objects affected by its scene is defined each. Some scenes can be felt overlapping one to another to give unique experience. 2.4 Animated Attributes The animation occurs with changing attributes that is done for each keyframe. Between each keyframe to another, transformation is using linear interpolation to smooth and automate the movement. Below are the transformation and properties affected for creating keyframe. Translation Shifting x, y, and z axis Rotation Shifting x, y, and z axis Visibility Toggle set based on appropriate state in each scene
2.4.1 Camera
The transformation (translation and rotation) is set to particular position as the scene happened.
2.4.2 Light
All lights except spot light are stay in place. The spot light movement depends on upcoming narration position.
Interactive 3D Animation with WebGL for Storytelling — 3/4
Figure 1. An empty scene in Clara.io graphical user interface
2.4.3 Narration
References
[1]
The narration is floating, shifting through the scene and highlighted with the spot light. Since also, in Clara.io there’s no sound support yet. The soundtrack used is separated from the animation.
Gregg Tavares. Webgl fundamentals. https: //html5rocks.com/en/tutorials/webgl/ webgl_fundamentals/, February 2012. Exocortex. Clara.io: Next-generation online 3d modeling and rendering software. http://exocortex.com/ blog/introducing_claraio, July 2013. Curt Franklin. How 3-d graphics work. http://computer.howstuffworks.com/ 3dgraphics.htm, July 2000.
[2]
Acknowledgments
Thanks for all developers of the web. The given animation project is available at http://bit.ly/player-cg2 and licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported. Below are the credits given on particular objects/models (3D file format) for the respected authors/creators. Farm House Medieval Farm House by baychaser from TF3DM Grasses Grass by 3dregenerator from TF3DM Plant Corn by 3dregenerator from TF3DM Cucumber Pickle by quantumpetshop from TurboSquid Kancil and Dog Deer and Wolf by Chris Milk and Googlers in ROME 3 Dreams of Black Project Farmer Family Guy Chuck Norris by forrestpl from TF3D Scarecrow Rigged Stick Figure by Swpws from Sharecg Cage Old Wood Crate by renderpig from TurboSquid Special credit for BOPD with Farm Montage (Instrumental) from Free Music Archive, the soundtrack used along with the animation played.
[3]
Interactive 3D Animation with WebGL for Storytelling — 4/4
Table 1. Action Scenes Scene Actions 1 2 3 4 5 6 7 8 9 10 Final One day, Kancil is stealing a cucumber from a farmer’s field. At the first time, he steals a cucumber successfully. After the farmer found out, he decided to put a sticky scarecrow. The next day, Kancil encounters and mocks it because it’s not scary. He headbutts it but he gets stuck because the scarecrow has been filled with glue. Eventually, the farmer comes. Then he puts Kancil in a cage for the rest of the day. Later at night, the farmer’s dog comes to see Kancil and mock him. Kancil stays calm and relaxed. Kancil said that he will be a prince. The dog feels discriminated, and asks to switch place so he who will be the prince. The next morning, the farmer is confused, because he sees his own dog in the cage, tricked by Kancil (All objects are visible and displayed with like the first scene) Affected Kancil, Cucumber Kancil Farmer, Scarecrow Kancil Kancil Kancil, Scarecrow, Farmer, Cage Kancil, Dog Kancil Kancil, Dog, Cage Farmer Kancil, Farmer, Dog, Cucumber, Scarecrow, Cage
Interactive 3D Animation with WebGL for Storytelling
M. Haidar Hanif1 , Freddy Arviando2 , Alvin3
Abstract Creating 3D animation with computer has been easier nowadays. One of the most inspirational ways to use it is by storytelling. Moreover, with the latest technology, the animation can also be interactive. By combining available computer graphics technology on the web such as WebGL and interactive story, we can deliver more immersive story and animation. Therefore interactive 3D animation can be enjoyed anywhere online, directly without any plugin with modern web browser. There are many intuitive sofware to create it. This project is using Clara.io from Exocortex Technologies. The sofware used for 3D modeling, layout, animation, and rendering. It allows us to have an easy-to-use and collaborative 3D creation software on the web, without nothing more to download or install. This way the process to create 3D animation has become faster and more effective. After all the process is done, the built-in player can be shared or embedded anywhere. Then once the assets are loaded in the player, viewer can start play the animation and interact with it. Likely now anyone can create and play with 3D animation. Without complicated setup, a story or tale can be told through it, bringing online animation capable of making an interactive story. Keywords computer graphics, interactive 3D, WebGL, animation
1 ([email protected])
Informatics Engineering, Industrial Technology, Gunadarma University Informatics Engineering, Industrial Technology, Gunadarma University 3 ([email protected]) Informatics Engineering, Industrial Technology, Gunadarma University
2 ([email protected])
Contents
Introduction 1 1.1 1.2 1.3 2 2.1 2.2 2.3 2.4 Technology Browser and GPU . . . . . . . . . . . . . . . . . . . . . . . . WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Clara.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation Process Story . . . . . . . . . . Object List . . . . . . . Scenes . . . . . . . . . Animated Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 1 1 1 2 2 2 2 2 3 3
Cucumber Thief” with a little bit improvisation. Even more, the animation is partially interactive for viewing. Viewer can play the animation and when paused can freely rotate the environment without camera constraint. When continued, the camera is back to its respective position and played again. This made the world inside it more live than ever.
1. Technology
1.1 Browser and GPU Any modern web browser that is capable of handling heavy load WebGL content is recommended, such as Google Chrome or Mozilla Firefox. The minimum requirement is the browser should able to render HTML5 and WebGL content and user’s supported GPU is capable of it. In this case we are using Google Chrome version 32 for the best process and result as possible while using Intel HD Graphics 3000 GPU. 1.2 WebGL WebGL is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. [1] So the technology basically just requires modern web browser, HTML5, and JavaScript. 1.3 Clara.io Clara.io is based on graphics library called WebGL. This next-generation online 3D modeling and rendering software is built to resemble traditional desktop 3D editors on the surface, thus Clara.io is immediately familiar to most 3D artists. But because Clara.io is built for the web, it is always accessible,
Camera • Light • Narration
Acknowledgments References
Introduction
The project is created as a proof of concept that modern web technology has already could deliver 3D animation with equal quality or similar process and result as the desktop based software could. One of the most groundbreaking software for that matter is Clara.io from Exocortex Technologies, an all-inone web-based 3D modeling, layout, animation, and rendering software. It allows us to have an easy-to-use and collaborative 3D creation software on the web, without nothing more to download or install. For practical purpose, we create the interactive 3D animation based on a classic famous fable titled ”Kancil The
Interactive 3D Animation with WebGL for Storytelling — 2/4
there is no configuration, it is cross platform, all of your creation history is stored automatically, you can collaborate in real-time, and you have access to unlimited cloud computing on-demand. [2] The software graphical user interface can looked at figure 1. The reason of using Clara.io is because it has already the following features: • • • • • • • • • • • • • • • • Hierarchical scene graph Lights and cameras Robust support for Polymeshes Flexible operators Keyframe-based animation Powerful sub-object editing Renderer and pass management Sharing system Rudimentary bones and skinning Real-time multi-user collaborative editing Automatic versioning with history Various 3D file format support Scene Player Bones, Skinning and Keyframe Animation Scene Sharing and Collaboration and much more
Texts Title and various scene narration : White Lights Directional light, point light, spot light, hemisphere light : Mostly White Camera Perspective camera with 24◦ field of view, aspect ratio 16 : 9
Figure 2. All objects/models used in main scene
2. Animation Process
2.1 Story Title Kancil The Cucumber Thief Summary About the craftiness of Kancil to fool the careless farmer and the greedy dog 2.2 Object List These are the objects or models used for the animation; such as PolyMesh, Light, and Camera. Each model’s name followed by its purpose/character and color. PolyMesh can be created inside the 3D modeler or imported from various 3D file formats whereas the light and camera also provided. The whole assets used about more than 250, 000 polygons, 140, 000 vertices, 30, 000 normals, and 30 nodes. The graphics style is using low poly mode without smoothing, so it’s decreasing the amount number of polygons. All objects in one place can be looked at figure 2. Field Plane box for land : Green Cylinder Sky background : Blue Farm House Three grouped models of house component : Cream, Brown, Orange Grasses Two grass models : Dark Green Plants Cucumber plants : Dark Green Cucumber Single cucumber on the plants : Light Green Kancil The smart thief : Orange Dog The victim of Kancil : Gray Farmer Handling the farm : Orange Scarecrow Sticky figure with hat : Dark Brown Cage To capture Kancil : Dark Brown
2.3 Scenes The simplified story consists of 10 actual scenes in about 3000 frames with various actions and which models are affected (see table 1). Then with extra final scene only for displaying all the objects. All scenes are taking place on the only one main scene, which is the platform. The player goes with frame rate 15 frames per second. To minimize the clutter and keyframe calculation, each scene only using about 300 frames. Then each scene, camera, light, and text are affected particularly, changed upon the highlighted actions. The notable alteration of objects affected by its scene is defined each. Some scenes can be felt overlapping one to another to give unique experience. 2.4 Animated Attributes The animation occurs with changing attributes that is done for each keyframe. Between each keyframe to another, transformation is using linear interpolation to smooth and automate the movement. Below are the transformation and properties affected for creating keyframe. Translation Shifting x, y, and z axis Rotation Shifting x, y, and z axis Visibility Toggle set based on appropriate state in each scene
2.4.1 Camera
The transformation (translation and rotation) is set to particular position as the scene happened.
2.4.2 Light
All lights except spot light are stay in place. The spot light movement depends on upcoming narration position.
Interactive 3D Animation with WebGL for Storytelling — 3/4
Figure 1. An empty scene in Clara.io graphical user interface
2.4.3 Narration
References
[1]
The narration is floating, shifting through the scene and highlighted with the spot light. Since also, in Clara.io there’s no sound support yet. The soundtrack used is separated from the animation.
Gregg Tavares. Webgl fundamentals. https: //html5rocks.com/en/tutorials/webgl/ webgl_fundamentals/, February 2012. Exocortex. Clara.io: Next-generation online 3d modeling and rendering software. http://exocortex.com/ blog/introducing_claraio, July 2013. Curt Franklin. How 3-d graphics work. http://computer.howstuffworks.com/ 3dgraphics.htm, July 2000.
[2]
Acknowledgments
Thanks for all developers of the web. The given animation project is available at http://bit.ly/player-cg2 and licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported. Below are the credits given on particular objects/models (3D file format) for the respected authors/creators. Farm House Medieval Farm House by baychaser from TF3DM Grasses Grass by 3dregenerator from TF3DM Plant Corn by 3dregenerator from TF3DM Cucumber Pickle by quantumpetshop from TurboSquid Kancil and Dog Deer and Wolf by Chris Milk and Googlers in ROME 3 Dreams of Black Project Farmer Family Guy Chuck Norris by forrestpl from TF3D Scarecrow Rigged Stick Figure by Swpws from Sharecg Cage Old Wood Crate by renderpig from TurboSquid Special credit for BOPD with Farm Montage (Instrumental) from Free Music Archive, the soundtrack used along with the animation played.
[3]
Interactive 3D Animation with WebGL for Storytelling — 4/4
Table 1. Action Scenes Scene Actions 1 2 3 4 5 6 7 8 9 10 Final One day, Kancil is stealing a cucumber from a farmer’s field. At the first time, he steals a cucumber successfully. After the farmer found out, he decided to put a sticky scarecrow. The next day, Kancil encounters and mocks it because it’s not scary. He headbutts it but he gets stuck because the scarecrow has been filled with glue. Eventually, the farmer comes. Then he puts Kancil in a cage for the rest of the day. Later at night, the farmer’s dog comes to see Kancil and mock him. Kancil stays calm and relaxed. Kancil said that he will be a prince. The dog feels discriminated, and asks to switch place so he who will be the prince. The next morning, the farmer is confused, because he sees his own dog in the cage, tricked by Kancil (All objects are visible and displayed with like the first scene) Affected Kancil, Cucumber Kancil Farmer, Scarecrow Kancil Kancil Kancil, Scarecrow, Farmer, Cage Kancil, Dog Kancil Kancil, Dog, Cage Farmer Kancil, Farmer, Dog, Cucumber, Scarecrow, Cage
