Check out a free preview of the full Testing and Modular Front-End course

The "Introducing WebGL" Lesson is part of the full, Testing and Modular Front-End course featured in this preview video. Here's what you'd learn in this lesson:

James introduces WebGL, a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

Preview
Close

Transcript from the "Introducing WebGL" Lesson

[00:00:00]
>> So we can switch gears completely now, talk about other things you can do on the web. Like, for example, WebGL. WebGL is very interesting because actually a lot of this architecture that we were just doing. This kind of Redux architecture was discovered a long, long time ago when people were building computer graphics and OpenGL and predecessors to it even.

[00:00:25]
So the really interesting thing though is now we have, we've come full circle and we have support for doing graphics programming in web page. Just like in building front end applications now, you have to do things that are very similar like managing state and bring about how your graphics pipeline is going to be built on screen.

[00:00:56]
What you do have to worry even more about than you do in most kinds of front end dev. Is that if you want your simulation to run smoothly, you only have about 16 or 17 milliseconds to do everything that you want to do in a single frame. So anything that you want to draw has to happen in this very short period of time, because it's going to be happen every single time you need to draw a new frame.

[00:01:24]
So you really want to avoid things in WebGL, that we kind of take for granted in a lot of other places in programming, like doing allocations. So for example, in your draw function, you don't want to be like allocating a new array every single time, because that's gonna end up in the garbage collector.

[00:01:49]
What you can do instead, is you defined things at the top scope. And which sounds really messy and wrong, but it's actually fine. It's a very pragmatic trade off you have to make, if you want things to run really fast. You define things at the top scope that, and you sort of just work with those objects, like manipulate those objects.

[00:02:10]
It's a lot. It's even more stateful, and even less immutable. But performance is messy like that sometimes, so.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now