by Tony Parisi | Publisher: O'Reilly Media, Inc. | Release Date: July 2014 | ISBN: 9781491907474

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—FoundationsLearn what's possible with HTML5 and WebGL in the web browserDelve into the anatomy of a WebGL applicationWork with Three.js and Tween.js, the open source JavaScript 3D rendering and animation librariesExplore 3D transforms, transitions, and animations with CSSUse the 2D Canvas API to render 3DPart 2—Application Development TechniquesLearn about the 3D content pipeline, including modeling and animation tools, converters, and file formatsUnderstand game engines and frameworks for building 3D applications, including Tony Parisi's Vizi frameworkDesign and develop a simple 3D application by creating 3D content, behaviors, and interactionCreate 3D environments with multiple objects and complex interactionLearn how to develop WebGL-based 3D applications for mobile browsersIdeal for developers with Javascript and HTML experience, this video is based on Parisi's book, Programming 3D Applications with HTML5 and WebGL from O'Reilly. Once you've completed this video course, you can dig even deeper into the subject with the book.

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