Programming 3D Applications in HTML5 and WebGL

Programming 3D Applications in HTML5 and WebGL

Released July 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491907467

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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 WebGL from O’Reilly. Once you’ve completed this video course, you can dig even deeper into the subject with the book.

Table of contents

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

Product information

  • Title: Programming 3D Applications in HTML5 and WebGL
  • Author(s):
  • Release date: July 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491907467