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
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
With HTML5, the browser is now a platform capable of delivering rich 3D applications, with mind-blowing real-time graphics in WebGL, 3D page effects using CSS3, and 3D software rendering with the Canvas API. This lesson provides an introduction the new visual technologies in HTML5, and a primer on 3D graphics for those new to the topic.
WebGL is extremely powerful, but the API is low-level and can be hard to understand and deal with. Thankfully, there are several open source libraries available that make programming easier and quite comprehensible. The most popular library, Three.js, is used by thousands of WebGL developers worldwide. This lesson walks through creating a simple Three.js application by rewriting the example from Lesson 2, accomplishing the same task with 40 lines of code instead of 300.
Here we explore how core 3D concepts are implemented in Three.js, including the scene graph, the transformation hierarchy, materials, textures, lights, shadows, and rendering custom effects using programmable shaders written in the WebGL shader language, GLSL. Along the way we develop several examples and labs.
Graphics and Rendering in Three.js 01 - Introduction 00m 18s
Graphics and Rendering in Three.js 02 - Geometry and Meshes 08m 09s
Graphics and Rendering in Three.js 03 - The Scene Graph and Transform Hierarchy 07m 58s
Graphics and Rendering in Three.js 04 - Materials 08m 21s
Graphics and Rendering in Three.js 05 - Adding Realism with Multiple Textures 08m 13s
Graphics and Rendering in Three.js 06 - Working with Lights 06m 54s
Graphics and Rendering in Three.js 07 - Real-Time Shadows 06m 48s
Graphics and Rendering in Three.js 08 - Shaders 05m 48s
Graphics and Rendering in Three.js 09 - Lesson Summary 01m 14s
That's a beautiful 3D image; it would be a shame if the pixels didn't move. This lesson covers a range of 3D animations topics, including programmatically animating scenes, creating transitions using tweens, developing data-driven animations with key frames, animating characters with morphs and skinning, and using GLSL programmable shaders to animate geometry and textures.
3D Animation 00 - Introduction 02m 26s
3D Animation 01 - Driving Animation with requestAnimationFrame() 02m 01s
3D Animation 02 - Programmatic Animation 03m 49s
3D Animation 03 - Animating Transitions Using Tweens 06m 54s
3D Animation 04 - Using Key Frames for Complex Animations 08m 53s
3D Animation 05 - Articulated Animation with Key Frames 02m 02s
3D Animation 06 - Using Curves and Path Following to Create Smooth, Natural Motion 01m 31s
3D Animation 07 - Using Morph Targets for Character and Facial Animation 03m 06s
3D Animation 08 - Animating Characters with Skinning 03m 13s
WebGL isn't the only hardware-accelerated 3D technology in HTML5. Version 3 of CSS allows us to transform and animate page elements in 3D, including CSS Transforms to move, rotate, scale and warp page elements; CSS Transitions for one-shot animation effects; and CSS Animations for complex key frame sequences. Let's take a look at how to put these together to make simple, cool page effects without the need to dive into a complex API like WebGL.
Part II shifts gears to cover several hands-on practical topics, including the 3D content creation pipeline, 3D application frameworks, developing simple and complex 3D applications, and developing browser-based 3D applications for mobile. Once you are comfortable with the core technologies presented in Part I, use the lessons in Part II to dive deep into specific techniques and deployment topics.
A big part of building a real-world 3D application is the creation of 3D art assets. In this lesson, we survey various 3D creation tools, ranging from professional to hobbyist, that can be used to develop 3D content for web applications. We also look at several 3D file formats suitable for deploying on the web, including: COLLADA, an XML-based 3D format; the Three.js JSON file format (specific to that library); and glTF, a new standard that combines JSON and binary data for fast, efficient 3D file transfer. Finally we'll build examples of loading each of these formats into a Three.js-based application.
The 3D Content Pipeline 01 - Introduction 04m 33s
The 3D Content Pipeline 02 - 3D Modeling and Animation Tools 02m 19s
The 3D Content Pipeline 03 - 3D Repositories and Stock Art 02m 02s
The 3D Content Pipeline 04 - Loading 3D File Formats 19m 52s
The 3D Content Pipeline 05 - Lesson Summary 01m 48s
Three.js is awesome, but it has its limitations. When you start developing real-world applications you will quickly find yourself repeating the same programming tasks, or copy-and-pasting a lot of the same code repeatedly for each new app. This sounds like a job for a framework! We'll take a look at some WebGL frameworks out there today, both free and licensed, open- and close-sourced. We will also get an introduction to Vizi, a framework I wrote on top of Three.js to take the tedium out of everyday development. Vizi will be used as the foundation for developing the examples in the final 3 lessons of the video.
3D Engines and Frameworks 01 - Introduction 03m 45s
3D Engines and Frameworks 02 - A Survey of WebGL Frameworks 04m 41s
3D Engines and Frameworks 03 - Vizi: A Component-Based Framework for Visual Web Applications 03m 51s
3D Engines and Frameworks 04 - A Simple Vizi Application 09m 36s
Whew... we're finally ready to build something for real. Let's start with a very simple but real-world example: a 3D product visualization. The site presents an interactive, customizable 3D model that might be used to sell a product online. In building this we will touch on several key issues, including the pipeline for exporting the 3D model from Autodesk Maya for use in the web application; simple web-based tools for previewing and testing the content; integrating the 2D and 3D elements of the page into a seamless presentation; and adding behaviors and interaction using the Vizi framework.
Developing a Simple 3D Application 01 - Introduction 02m 28s
Developing a Simple 3D Application 02 - Designing the Application and Creating the 3D Content 01m 56s
Developing a Simple 3D Application 03 - Previewing and Testing the 3D Content 05m 54s
Developing a Simple 3D Application 04 - Integrating the 3D Into the Application 04m 53s
Developing a Simple 3D Application 05 - Developing 3D Behaviors and Interaction 07m 54s
Developing a Simple 3D Application 06 - Lesson Summary 02m 12s
A lot of 3D applications require creating a complex 3D environment, such as a city or landscape. This lesson presents a realistic 3D city scene that allows the user to navigate with the keyboard and mouse and interact with objects in the scene. The example is built up in several stages, starting with concept art; converting the 3D content for web delivery; previewing and testing the content by exploring the 3D scene graph in a web-based tool; creating background "skybox" art to add realism; implementing first-person navigation that controls the camera; developing scripted behaviors as custom Vizi components; and drawing dynamic textures using the 2D Canvas API mapped onto 3D objects.
Developing a 3D Environment 01 - Introduction 03m 02s
Developing a 3D Environment 02 - Creating the Environment Art 00m 56s
Developing a 3D Environment 03 - Previewing and Testing the Environment 09m 05s
Developing a 3D Environment 04 - Creating a 3D Background Using a Skybox 05m 20s
Developing a 3D Environment 05 - Integrating the 3D Content Into the Application 03m 09s
Developing a 3D Environment 06 - Implementing First-Person Navigation 02m 22s
Developing a 3D Environment 07 - Simple Collision Detection 02m 38s
Developing a 3D Environment 08 - Working with Multiple Cameras 01m 42s
Developing a 3D Environment 09 - Creating Timed and Animated Transitions 02m 22s
Developing a 3D Environment 10 - Scripting Object Behaviors 03m 38s
Developing a 3D Environment 11 - Rendering Dynamic Textures 04m 42s
Developing a 3D Environment 12 - Lesson Summary 01m 17s
Developing Mobile 3D 01 - Introduction 02m 37s
Developing Mobile 3D 02 - Developing for Mobile Browsers 03m 23s
Developing Mobile 3D 03 - Debugging Mobile Functionality in Desktop Chrome 01m 59s
Developing Mobile 3D 04 - Creating Packaged Web Apps 03m 09s
Developing Mobile 3D 05 - Developing Native/HTML5 Hybrid Applications 09m 29s
Developing Mobile 3D 06 - Mobile 3D Performance 05m 28s
Comments about oreilly Programming 3D Applications in HTML5 and WebGL:
I reviewed this set of videos for O'Reilly and I really enjoyed them. I feel like they are meant more to accompany the author's book "Programming 3D Applications with HTML5 and WebGL". In fact, he mentions early on that it's meant to supplement that book and the code for the book.
Much of the time is spent discussing examples from the book and explaining how or why certain parts of that code match up. WebGL technology is pretty complicated and I feel like anything related to graphics is better taught "in person" than in text.
Don't be thrown off by the title; this book isn't about writing applications using low-level WebGL code. Parisi flies through an example of straight WebGL programming before jumping into Three.js. He explains the merits of using Three.js pretty well and provides many examples of 3D graphics fundamentals such as working with a camera object, shadows, shaders, skyboxing and understanding the 3D environment.
I felt like Lesson6 on advanced page effects was a little hurried and will make sense as presented to people with CSS3 experience. I don't think it'll be too helpful if you have very little HTML/CSS/JS experience and you're trying to dive into 3D programming on the web.
One thing I really loved is that Parisi is obviously a pro at this topic. I felt like his enthusiasm for the topic was contagious and showed many of the samples and explanations he pointed to in the video to my coworkers, demonstrating the power of the browser. He also provides many recommendations for tools for 3D modeling and pointers for loading of models, meshes, and textures.
For the first half-ish of the video suite, I thought it was weird there was so much focus on Three.js. Granted, Three.js is a popular WebGL framework but it's not necessarily the best framework for writing games or something like a 3D earthquake visualizer. It'd work but it may not be the best. He spends a couple of minutes discussing other frameworks before going over Vizi (which he wrote). Vizi is a component library that sits on top of Three.js and I felt like it made some Three.js concepts a little easier to implement. In fact, he demonstrates how to create a full 3D environment with motion and behaviors using Vizi that would be significantly more code if it were written solely in Three.js.
I will say, though, that this video won't stand 100% on its own. You either need to have the book and its supplemental code (I think the code is available online) or you need to have at least some understanding of graphics programming. I say this because there are numerous times where geometry concepts are discussed but not explained in depth. You definitely need to work through the sample code on your own and become familiar with using the tools and technologies.
I gave this video 4 stars because the material and content of the video are excellent. I would have given 5 stars if a few of the sections were expanded and if there were some resources shared for the math side of 3D and graphics programming. I haven't read the book, so it's possible these things are covered there. I would highly recommend this video to anyone who is serious about learning WebGL programming. The subject matter can be fairly complex, so be sure to download the sample code and check out the many sample sites mentioned. The way to pick up this material is to do the labs, try some samples and write small applications using these techniques.
Bottom Line Yes, I would recommend this to a friend