Join Lee Brimelow for an in-depth discussion in this video Overview of WebGL, part of HTML5 for Flash Developers.
So earlier in this course, we did a whole section on working with the HTML5 Canvas element, and if you remember back then we used a 2D context which allows us to interact with the Canvas, obviously in a 2D fashion. But there's also with 3D context, and that's using a technology called WebGL, and this allows us to do amazingly rich 3D graphics directly in the browser. Now if you coming from a Flash background, this is very similar to what you can do with the new Stage 3D technology that we created for Flash.
This is more of a direct port of OpenGL ES 2.0. Now currently no support is planned for WebGL in Internet Explorer, which makes it somewhat difficult in trying to create any type of application with WebGL, because most people don't have the luxury of saying, well, forget about anybody that's using IE. So that is definitely a limitation you need to be aware of. So let's go ahead and look at some examples of what's possible with WebGL. So this first one I wanted to show you is this WebGL Globe and this is actually showing population data across the world.
This is actually created by a team at Google, but you can see this nice 3D Globe and all of these lines indicate the population of these areas. So you can see Tokyo here with this huge population and it's a really nice interactive way to browse around and look at this population data and by hovering over different times, you can see it's actually changing that population data. Now the thing with WebGL is this is all hardware accelerated, so this is all running on the GPU. My computer is not overheating and none of this is being rendered on the CPU.
One place to go if you want to look at kind of the latest and greatest experiments is chromeexperiments.com, and I want to show you a couple of examples here of WebGL. This Traveling Wavefronts example is a really nice experiment, so I'm going to launch that up and essentially you have this cellular effect that's happening, and when I move my mouse I have this nice lighting effect and you can see kind of the technical explanation for what's happening here, but it's just a really impressive demo of some of the amazing lighting effects and shaders that you can create when you want to work with WebGL.
Another example is the Cell Cycle example, and this is actually a site where you can create your own 3D jewelry, so I can actually go, and let me change the color here, I am going to change it to red. I'm going to increase the diameter here, maybe I want to add a twist to this a little bit, and one of the nice things about it is I actually have this little graph over here and I can pull in different areas of the mesh and warp it, to achieve any type of effect that I want.
Now I can actually, let's say, I'm really happy with that I can actually go ahead and have some 3D printed jewelry made of this, and I can keep going through and adding different things here and rebuild it. And you can see the performance of this is amazingly good. Now you going to see obviously varying performance depending on the current the browser that you're in, and of course, in Internet Explorer you're not going to see anything, but this just shows you some of the power that you have available to you when you do 3D development using WebGL.
- Understanding HTML5 browser support
- Creating class files and animation loops
- Comparing Canvas and BitmapData
- Drawing dynamic graphics
- Exploring DOM animation
- Understanding CSS3 design properties
- Using CSS animations and transforms
- Understanding WebGL
- Using Adobe Edge and the CreateJS library