Repurposing Your Animation Content for the Web with Pulse 3D

By Dan Meblin

 

 

 

 

Gone are the days when you, as animators and developers, had to completely reinvent your original 3D assets for online use. Also gone is the need for a gaggle of engineers and programmers to guide you through the programming pitfalls of the web.

With Pulse Technology, it’s now virtually painless to import animated characters to the web, where they’ll enjoy new life and create new revenue streams. This is good news for both one-person-do-it-yourself animators and larger animation houses. Pulse 3D technology enables fast and easy importing of 3D creative to the web, allowing animators to focus on creativity rather than the dreary dictates of .HTML and JavaScript.

Other Pulse benefits include:

  • Small file size/fast download (370k)
  • Ability to create non-linear interactive activity
  • 32 bit rendering/excellent image quality
  • Automatic lip synching
  • Adaptive Subdivision Surfaces (winged-edge smoothing)
  • Deformation bones

In this step-by-step tutorial you can see how Electronic Arts used Pulse to take the original Alice 3D game character model from 3D Studio Max and directly re-purpose it for use on the Alice website (http://www.alice.ea.com/main.html.) When users log onto the site, they are interacting with the same 3D models, animations and texture maps created for the game, but in a completely web-based environment.

This tutorial will cover:

  • Model building
  • Texture Mapping
  • Exporting Files
  • Adding Bones
  • Scene Creation/Geometry
  • Creating Animation
  • Property Setting
  • Streaming Behaviors and Audio
  • Linking 3D Content to Web Pages

Pulse Producer and Pulse Creator can both be downloaded and used for free on the Pulse website (http://www.pulse3d.com). 3D content can also be posted on the Internet free of charge with the Pulse logo watermark.

Building the Model

The Alice model was built and textured in 3D Studio Max, and then exported via Pulse Producer, Pulse’s 3D Studio Max exporter plug-in. Virtually any geometry type can be exported from 3D Studio Max. Parametric geometry such as Patch and Nurbs models must first be converted to an Editable Mesh before exporting using Pulse Producer.

Texture Mapping the Model

Multi-Sub-Object mapping was used in 3D Stuido Max to allow multiple texture maps to be applied to various parts of the Alice Model. Upon export, Pulse Producer automatically combines the maps into a single file for optimization. In addition, all UV mapping coordinates will be exported allowing models to be custom un-wrapped using 3D Studio Max’s “UVW Unwrap” modifier.

Exporting the File Using Pulse Producer

The model and its texture were then exported from 3D Studio Max using Pulse Producer. Pulse Producer is a Utility Plug-in found in the Utilities tab in 3D Studio Max. Various controls for exporting can be found in this panel. Pulse Producer will export the file in two formats; a .PWC (Pulse Web Content) file which can be run directly in a web browser, and a .bld file which can be opened and edited in Pulse Creator, Pulse’s 3D Authoring software. In addition, Pulse Producer’s “Run” button will allow the content to be previewed in a web browser without leaving 3D Studio Max.

Adding Bones in Pulse Creator

Deformation bones can either be added and attached directly in 3D Studio Max using the Physique plug-in, or in Pulse Creator. In the case of Alice, bones were created and attached in Pulse Creator. First the Alice .bld file was opened in Pulse Creator, then the “Bone Tool” was used to create the bones. These bones were then assembled into a hierarchy and attached to the Alice model. Adjustments were made to each bone’s influence by dragging on the “Influence Area” handles directly on each bone. Numeric adjustments to individual vertex weights were entered in Creator’s “Vertex Contribution Editor”.

Adding Additional Geometry to the Scene

A textured floor, mushroom, and spider character were then added to the scene. A small dummy cube was then created in Creator and the floor, mushroom, spider, and Alice were all linked to it. This dummy object serves as the parent for all the objects in the scene. Later, animation will be streamed to the dummy object and the animation will pass down the hierarchy to all the children (Alice, spider etc.). With this technique, multiple characters can be simultaneously animated in sync from a single animation stream at runtime.

Creating Animation

Animation can be exported from 3D Studio Max using Pulse Producer, or imported into Pulse Creator as a BioVision motion capture file (.bvh), or keyframe animated directly in Pulse Creator. Alice’s animations were created in Pulse Creator.

Pulse Creator allows for an unlimited number of animations or “Behaviors” to be created for each object in the scene. On the website, Alice will act as the guide, explaining the various sections of the website as you roll your mouse over buttons. A separate behavior needed to be created for each button in the website.

Animation is created by selecting the object on which the animation will be executed, (in this case the dummy parent object) and then bringing up Pulse Creator’s Behavior Editor. Next, a new behavior is created by clicking on the “New Behavior” button.  Each new behavior’s name will appear in the right column of the behavior editor. Finally, Alice’s joints were re-positioned and new keyframes were created by clicking on the “Create Keyframe” button. Audio was added to the animation by clicking on the “Add Sound Track” button and then choosing an AIFF or WAV file. A visual representation of the waveform appears in the behavior editor so the animation can be easily synchronized to the audio. 

Idle behaviors were also created that will play at runtime when Alice isn’t playing any other behavior. These idle behaviors make Alice look as if she has a mind of her own, making her  randomly breathe and fidget while no other actions are taking place. Several different idle behaviors were created for Alice and will play randomly while no other behaviors are being triggered. This is set up by using the “Random Task” script created in Pulse’s powerful scripting language “Joe Script”.

Setting Alice’s Properties

The next step is to define Alice’s level of interactivity. Alice needed to be able to do two things; play behaviors, and have the ability to be rotated on the Y axis at runtime when clicked and dragged. This is done by setting the “Class” pull-down menu in the Properties window. There is a library of generic classes available in Pulse Creator’s Properties window. In addition, new classes can be written in JoeScript allowing a limitless possibility of interaction and behaviors.

Here’s a list of a few of the generic classes available in Pulse Creator:

  • “Poly” class allows objects to be visible but not interactive.
  • “Character” class allows an object to play behaviors and to be rotated in all directions at runtime.
  • “MouseYChar” class allows an object to play behaviors but only be rotated on its Y axis at runtime.

By selecting the dummy parent object and choosing the Properties window, Alice’s class was set to “MouseYChar”. 

Setting up Streaming Behaviors and Audio

When the project was finished, Alice had several long behaviors, each including very large audio files. In order to keep the file at a manageable size for quick download, the behaviors and audio were set up to be “Streaming Behaviors”. This way, when Alice’s webpage first loads, only Alice’s geometry and texture maps need to be downloaded. All additional animation and audio data will stream into the file when triggered. If the audio files are sampled down to mono 16bit 8k resolution, the behaviors can stream over a 28.8 connection.

Pulse Creator uses a visual “Package” interface to manage what data will be pre-loaded and what data will stream. New packages can be created by clicking on the “New Package” button, and assets such as behaviors and audio can be easily dragged and dropped into these packages. Each time the file is saved, runtime files know as .PWC (Pulse Web Content) and .PWS (Pulse Web Stream) files are compiled.  One PWS or PWC file is compiled for each package created in Pulse Creator.

Running the File in a Web Browser

Each time the file is saved in Pulse Creator, a special “Web” folder is created. In the Web folder, the compiled .PWC and .PWS are saved. In addition, a “Default.html” file is also generated. This html file contains links to the content as well as automatically generated buttons that trigger each behavior to play when clicked. If a new behavior is created, the next time the file is saved, a new button will be created in the default.html file that will trigger the new behavior. This default.html file is crucial for testing the content’s performance in a web browser. Because this fully functional html file is automatically generated, 3D artists need not learn .html and JavaScript to use Pulse Creator and Pulse Producer. All the code required to run their content in a web browser is automatically generated for them each time they save the file.

Each of the links in the default.html file will play a specific behavior when clicked. Since “MouseYChar” class was used, dragging the mouse on the geometry at runtime will cause all the geometry to spin on its Y (up and down) axis.

Linking the Content to the Finished Web Page

After the final artwork for the web page is designed, each element in the web page can be used to trigger any event in the Pulse content. All the commands necessary have been automatically generated in the default.html file. These commands can be easily copied and pasted out of the default.html file and into the final html file. Pulse’s simple command language is used to direct java and mouse events to specific objects in the Pulse content. The example below shows the command used to play the “Intro” behavior on Alice.

More hands-on and in-depth tutorials can be viewed and downloaded from the Pulse 3D web site (www.pulse3d.com/developers/prosup.html).


Dan Meblin is the Senior Technology Evangelist at Pulse Entertainment and has been with the company since its founding in 1994. Dan teaches weekly Pulse-sponsored Pulse technology workshops in and around San Francisco. He is also a 3D modeling instructor at The Center For Electronic Art, and the San Francisco State Multimedia Studies Program.

 



Trees-It's a Breeze Inbetweening
Create Gold Creating Drapes
Advanced Bones Using Layer Masks
Repurposing Your Animation Content

Return to Animation Artist Magazine Home Page