Programming 3D Applications with HTML5 and WebGL

3D Animation and Visualization for Web Pages

By Tony Parisi
Publisher: O’Reilly Media
Final Release Date: July 2014
Run time: 6 hours 41 minutes
3D Animation and Visualization for Web Pages

Table of Contents

  1. Lesson 1 – Introduction
    1. Introduction 20m  50s 
  2. Lesson 2 – WebGL – Real-Time 3D Rendering
    1. Introduction 07m  40s 
    2. The Anatomy of a WebGL Application 02m  22s 
    3. A Sample WebGL Program 26m  53s 
    4. Labs 04m  46s 
    5. Lesson Summary 02m  09s 
  3. Lesson 3 – Three.js – A JavaScript 3D Engine
    1. Introduction 03m  36s 
    2. An Overview of Three.js 05m  17s 
    3. A Simple Three.js Program 06m  30s 
    4. Adding Lighting to the Scene 02m  25s 
    5. Labs 04m  37s 
  4. Lesson 4 – Graphics and Rendering in Three.js
    1. Introduction 00m  18s 
    2. Geometry and Meshes08m  09s 
    3. The Scene Graph and Transform Hierarchy 07m  58s 
    4. Materials 08m  21s 
    5. Adding Realism with Multiple Textures 08m  13s 
    6. Working with Lights 06m  54s 
    7. Real-Time Shadows 06m  48s 
    8. Shaders 05m  48s 
    9. Lesson Summary 01m  14s 
  5. Lesson 5 – 3D Animation
    1. Introduction 02m  26s 
    2. Driving Animation with requestAnimationFrame()02m  01s 
    3. Programmatic Animation 03m  49s 
    4. Animating Transitions Using Tweens 06m  54s 
    5. Using Key Frames for Complex Animations 08m  53s 
    6. Articulated Animation with Key Frames 02m  02s 
    7. Using Curves and Path Following to Create Smooth, Natural Motion 01m  31s 
    8. Using Morph Targets for Character and Facial Animation 03m  06s 
    9. Animating Characters with Skinning 03m  13s 
    10. Animating Using Shaders 07m  58s 
    11. Labs 05m  50s 
    12. Summary 03m  18s 
  6. Lesson 6 – CSS3 – Advanced Page Effects
    1. Introduction 02m  31s 
    2. CSS Transforms 11m  28s 
    3. CSS Transitions 03m  57s 
    4. CSS Animations 07m  38s 
    5. Pushing the Envelope of CSS 05m  44s 
    6. Lesson Summary 00m  40s 
  7. Lesson 7 – Canvas – Universal 2D Drawing
    1. Introduction 00m  57s 
    2. Canvas Basics 08m  39s 
    3. Rendering 3D with the Canvas API 07m  18s 
    4. Canvas-Based 3D Libraries 05m  09s 
    5. Using the Three.js Canvas Renderer 06m  26s 
    6. Lab 01m  07s 
    7. Lesson Summary 01m  34s 
  8. Lesson 8 – The 3D Content Pipeline
    1. Introduction 04m  33s 
    2. 3D Modeling and Animation Tools 02m  19s 
    3. 3D Repositories and Stock Art 02m  02s 
    4. Loading 3D File Formats 19m  52s 
    5. Lesson Summary 01m  48s 
  9. Lesson 9 – 3D Engines and Frameworks
    1. Introduction 03m  45s 
    2. A Survey of WebGL Frameworks 04m  41s 
    3. Vizi: A Component-Based Framework for Visual Web Applications 03m  51s 
    4. A Simple Vizi Application 09m  36s 
    5. Summary 00m  59s 
  10. Lesson 10 – Developing a Simple 3D Application
    1. Introduction 02m  28s 
    2. Designing the Application and Creating the 3D Content 01m  56s 
    3. Previewing and Testing the 3D Content 05m  54s 
    4. Integrating the 3D Into the Application 04m  53s 
    5. Developing 3D Behaviors and Interaction 07m  54s 
    6. Lesson Summary 02m  12s 
  11. Lesson 11 – Developing a 3D Environment
    1. Introduction 03m  02s 
    2. Creating the Environment Art 00m  56s 
    3. Previewing and Testing the Environment 09m  05s 
    4. Creating a 3D Background Using a Skybox 05m  20s 
    5. Integrating the 3D Content Into the Application 03m  09s 
    6. Implementing First-Person Navigation 02m  22s 
    7. Simple Collision Detection 02m  38s 
    8. Working with Multiple Cameras 01m  42s 
    9. Creating Timed and Animated Transitions 02m  22s 
    10. Scripting Object Behaviors 03m  38s 
    11. 11 – Rendering Dynamic Textures 04m  42s 
    12. 12 – Lesson Summary 01m  17s 
  12. Lesson 12 – Developing 3D for Mobile
    1. Introduction 02m  37s 
    2. Developing for Mobile Browsers 03m  23s 
    3. Debugging Mobile Functionality in Desktop Chrome 01m  59s 
    4. Creating Packaged Web Apps 03m  09s 
    5. Developing Native/HTML5 Hybrid Applications 09m  29s 
    6. Mobile 3D Performance 05m  28s 
    7. Lesson Summary 01m  47s

3D Animation and Visualization for Web Pages

Publisher: O’Reilly Media
Final Release Date: February 2014
Pages: 404
3D Animation and Visualization for Web Pages

Table of Contents and Free Sample


Create high-performance, visually stunning 3D applications for the Web, using HTML5 and related technologies such as CSS3 and WebGL—the emerging web graphics standard. With this book, you’ll learn how to use the tools, frameworks, and libraries for building 3D models and animations, mind-blowing visual effects, and advanced user interaction in both desktop and mobile browsers.

In two parts—Foundations and Application Development Techniques—author Tony Parisi provides a thorough grounding in theory and practice for designing everything from a simple 3D product viewer to immersive games and interactive training systems. Ideal for developers with Javascript and HTML experience.

  • Explore HTML5 APIs and related technologies for creating 3D web graphics, including WebGL, Canvas, and CSS
  • Work with the popular JavaScript 3D rendering and animation libraries Three.js and Tween.js
  • Delve into the 3D content creation pipeline, and the modeling and animation tools for creating killer 3D content
  • Look into several game engines and frameworks for building 3D applications, including the author’s Vizi framework
  • Create 3D environments with multiple objects and complex interaction, using examples and supporting code
  • Examine the issues involved in building WebGL-based 3D applications for mobile browsers

About the Author

Tony Parisi

Tony Parisi is an entrepreneur and career CTO/architect. He has developed international standards and protocols, created noteworthy software products, and started and sold technology companies. Tony’s passion for innovating is exceeded only by his desire to bring coolness and fun to the broadest possible audience.

Tony is perhaps best known for his work as a pioneer of 3D standards for the web. He is the co-creator of VRML and X3D, ISO standards for networked 3D graphics. He also co-developed SWMP, a real-time messaging protocol for multi-user virtual worlds. Tony continues to build community around innovations in 3D as the co-chair of the WebGL Meetup and a founder of the Rest3D working group.

Tony is currently a partner in a stealth online gaming startup and has a consulting practice developing social games, virtual worlds and location-based services for San Francisco Bay Area clients.
View Tony Parisi’s full profile page.


The animal on the cover of Programming 3D Applications with HTML5 and WebGL is a MacQueen’s bustard (Chlamydotis macqueenii), a large bird that ranges through the Middle East and south western Asia. It is named after General Thomas MacQueen, a 19th century British soldier who was stationed in India. MacQueen was a collector of natural history specimens and donated a bustard he had shot to the British Museum; the bird was named after him in 1832. MacQueen’s bustards live and breed in arid sandy areas, with a diet made up of seeds, plant shoots, and insects. While females are slightly smaller, the birds are generally about 2 feet in length, with an average wingspan of 55 inches. They have light brown plumage, black stripes on their necks, and white underbellies. The fluffy feathers on their head and neck are fanned out in mating displays—this species does not often vocalize. They nest in holes scraped in the ground, laying 2–4 eggs at a time. This species (and a close relative, the Houbara bustard) are becoming rare, as they are a popular target for falconers and have been overhunted. Some Middle Eastern leaders, including the royal families of Saudi Arabia and the United Arab Emirates, have made conservation efforts in recent years, but the birds’ status is still vulnerable. The cover image is from Johnson’s Natural History.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s