O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Programming 3D Applications in HTML5 and WebGL

Video Description

Learn how to create high-performance, visually stunning 3D applications for the Web hands-on, using HTML5 and WebGL. With this interactive video course, you’ll learn by using 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.Led by Tony Parisi, a pioneer of 3D standards for the Web, this course provides a thorough grounding in theory and practice for designing everything from a simple 3D product viewer to immersive games and interactive training systems. This course is divided into two parts: Part 1—Foundations

  • Learn what’s possible with HTML5 and WebGL in the web browser
  • Delve into the anatomy of a WebGL application
  • Work with Three.js and Tween.js, the open source JavaScript 3D rendering and animation libraries
  • Explore 3D transforms, transitions, and animations with CSS
  • Use the 2D Canvas API to render 3D
Part 2—Application Development Techniques
  • Learn about the 3D content pipeline, including modeling and animation tools, converters, and file formats
  • Understand game engines and frameworks for building 3D applications, including Tony Parisi’s Vizi framework
  • Design and develop a simple 3D application by creating 3D content, behaviors, and interaction
  • Create 3D environments with multiple objects and complex interaction
  • Learn how to develop WebGL-based 3D applications for mobile browsers
Ideal for developers with Javascript and HTML experience, this video is based on Parisi’s book, Programming 3D Applications with HTML5 and WebGLfrom O’Reilly. Once you’ve completed this video course, you can dig even deeper into the subject with the book.

Table of Contents

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