interactive 3d animation with webgl for storytelling

Gunadarma University Journal, Vol. I, No. 1, 1-2, 2014Computer Graphics 2

Interactive 3D Animation with WebGL for StorytellingM. Haidar Hanif1, Freddy Arviando2, Alvin3

AbstractCreating 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 graphicstechnology on the web such as WebGL and interactive story, we can deliver more immersive story and animation. Thereforeinteractive 3D animation can be enjoyed anywhere online, directly without any plugin with modern web browser. There aremany intuitive sofware to create it. This project is using Clara.io from Exocortex Technologies. The sofware used for 3Dmodeling, layout, animation, and rendering. It allows us to have an easy-to-use and collaborative 3D creation software on theweb, without nothing more to download or install. This way the process to create 3D animation has become faster and moreeffective. After all the process is done, the built-in player can be shared or embedded anywhere. Then once the assets areloaded in the player, viewer can start play the animation and interact with it. Likely now anyone can create and play with 3Danimation. Without complicated setup, a story or tale can be told through it, bringing online animation capable of making aninteractive story.

Keywordscomputer graphics, interactive 3D, WebGL, animation

1([email protected]) Informatics Engineering, Industrial Technology, Gunadarma University2([email protected]) Informatics Engineering, Industrial Technology, Gunadarma University3([email protected]) Informatics Engineering, Industrial Technology, Gunadarma University

Contents

Introduction 1

1 Technology 11.1 Browser and GPU . . . . . . . . . . . . . . . . . . . . . . . . 11.2 WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.3 Clara.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2 Animation Process 22.1 Story . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22.2 Object List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22.3 Scenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22.4 Animated Attributes . . . . . . . . . . . . . . . . . . . . . . . 2

Camera Light NarrationAcknowledgments 3

References 3

IntroductionThe project is created as a proof of concept that modern

web technology has already could deliver 3D animation withequal quality or similar process and result as the desktop basedsoftware could. One of the most groundbreaking software forthat matter is Clara.io from Exocortex Technologies, an all-in-one web-based 3D modeling, layout, animation, and renderingsoftware. It allows us to have an easy-to-use and collaborative3D creation software on the web, without nothing more todownload or install.

For practical purpose, we create the interactive 3D ani-mation based on a classic famous fable titled Kancil The

Cucumber Thief with a little bit improvisation. Even more,the animation is partially interactive for viewing. Viewer canplay the animation and when paused can freely rotate the en-vironment without camera constraint. When continued, thecamera 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 GPUAny modern web browser that is capable of handling

heavy load WebGL content is recommended, such as GoogleChrome or Mozilla Firefox. The minimum requirement is thebrowser should able to render HTML5 and WebGL contentand users supported GPU is capable of it. In this case weare using Google Chrome version 32 for the best process andresult as possible while using Intelr HD Graphics 3000 GPU.

1.2 WebGLWebGL is a JavaScript API for rendering interactive 3D

graphics and 2D graphics within any compatible web browserwithout the use of plug-ins. [1] So the technology basicallyjust requires modern web browser, HTML5, and JavaScript.

1.3 Clara.ioClara.io is based on graphics library called WebGL. This

next-generation online 3D modeling and rendering software isbuilt to resemble traditional desktop 3D editors on the surface,thus Clara.io is immediately familiar to most 3D artists. Butbecause Clara.io is built for the web, it is always accessible,

Interactive 3D Animation with WebGL for Storytelling 2/4

there is no configuration, it is cross platform, all of yourcreation history is stored automatically, you can collaborate inreal-time, and you have access to unlimited cloud computingon-demand. [2] The software graphical user interface canlooked at figure 1.

The reason of using Clara.io is because it has already thefollowing 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

2. Animation Process2.1 StoryTitle Kancil The Cucumber ThiefSummary About the craftiness of Kancil to fool the careless

farmer and the greedy dog

2.2 Object ListThese are the objects or models used for the animation;

such as PolyMesh, Light, and Camera. Each models namefollowed by its purpose/character and color. PolyMesh canbe created inside the 3D modeler or imported from various3D 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 graph-ics style is using low poly mode without smoothing, so itsdecreasing the amount number of polygons. All objects inone place can be looked at figure 2.

Field Plane box for land : GreenCylinder Sky background : BlueFarm House Three grouped models of house component :

Cream, Brown, OrangeGrasses Two grass models : Dark GreenPlants Cucumber plants : Dark GreenCucumber Single cucumber on the plants : Light GreenKancil The smart thief : OrangeDog The victim of Kancil : GrayFarmer Handling the farm : OrangeScarecrow Sticky figure with hat : Dark BrownCage To capture Kancil : Dark Brown

Texts Title and various scene narration : WhiteLights Directional light, point light, spot light, hemisphere

light : Mostly WhiteCamera Perspective camera with 24 field of view, aspect

ratio 16 : 9

Figure 2. All objects/models used in main scene

2.3 ScenesThe simplified story consists of 10 actual scenes in about

3000 frames with various actions and which models are af-fected (see table 1). Then with extra final scene only fordisplaying all the objects. All scenes are taking place on theonly one main scene, which is the platform. The player goeswith frame rate 15 frames per second. To minimize the clutterand keyframe calculation, each scene only using about 300frames. Then each scene, camera, light, and text are affectedparticularly, changed upon the highlighted actions. The no-table alteration of objects affected by its scene is defined each.Some scenes can be felt overlapping one to another to giveunique experience.

2.4 Animated AttributesThe animation occurs with changing attributes that is done

for each keyframe. Between each keyframe to another, trans-formation is using linear interpolation to smooth and automatethe movement. Below are the transformation and propertiesaffected for creating keyframe.

Translation Shifting x, y, and z axisRotation Shifting x, y, and z axisVisibility Toggle set based on appropriate state in each scene

2.4.1 CameraThe transformation (translation and rotation) is set to par-

ticular position as the scene happened.

2.4.2 LightAll lights except spot light are stay in place. The spot light

movement depends on upcoming narration position.


Figure 1. An empty scene in Clara.io graphical user interface

2.4.3 NarrationThe narration is floating, shifting through the scene and

highlighted with the spot light. Since also, in Clara.io theresno sound support yet. The soundtrack used is separated fromthe animation.

Acknowledgments

Thanks for all developers of the web. The given animationproject is available at http://bit.ly/player-cg2 and licensed un-der Creative Commons Attribution-NonCommercial-ShareAlike3.0 Unported. Below are the credits given on particular ob-jects/models (3D file format) for the respected authors/creators.

Farm House Medieval Farm House by baychaser from TF3DMGrasses Grass by 3dregenerator from TF3DMPlant Corn by 3dregenerator from TF3DMCucumber Pickle by quantumpetshop from TurboSquidKancil and Dog Deer and Wolf by Chris Milk and Googlers

in ROME 3 Dreams of Black ProjectFarmer Family Guy Chuck Norris by forrestpl from TF3DScarecrow Rigged Stick Figure by Swpws from SharecgCage Old Wood Crate by renderpig from TurboSquid

Special credit for BOPD with Farm Montage (Instrumen-tal) from Free Music Archive, the soundtrack used along withthe animation played.

References[1] Gregg Tavares. Webgl fundamentals. https:

//html5rocks.com/en/tutorials/webgl/webgl_fundamentals/, February 2012.

[2] Exocortex. Clara.io: Next-generation online 3d modelingand rendering software. http://exocortex.com/blog/introducing_claraio, July 2013.

[3] Curt Franklin. How 3-d graphics work.http://computer.howstuffworks.com/3dgraphics.htm, July 2000.


Table 1. Action Scenes

Scene Actions Affected

1 One day, Kancil is stealing a cucumber from a farmers field. Kancil, Cucumber2 At the first time, he steals a cucumber successfully. Kancil3 After the farmer found out, he decided to put a sticky scarecrow. Farmer, Scarecrow4 The next day, Kancil encounters and mocks it because its not scary. Kancil5 He headbutts it but he gets stuck because the scarecrow has been filled with

glue.Kancil

6 Eventually, the farmer comes. Then he puts Kancil in a cage for the rest ofthe day.

Kancil, Scarecrow, Farmer, Cage

7 Later at night, the farmers dog comes to see Kancil and mock him. Kancil, Dog8 Kancil stays calm and relaxed. Kancil said that he will be a prince. Kancil9 The dog feels discriminated, and asks to switch place so he who will be the

prince.Kancil, Dog, Cage

10 The next morning, the farmer is confused, because he sees his own dog inthe cage, tricked by Kancil

Farmer

Fi-nal

(All objects are visible and displayed with like the first scene) Kancil, Farmer, Dog, Cucumber,Scarecrow, Cage

interactive 3d animation with webgl for storytelling

Documents