Creative Coding with Canvas & WebGL

Troubleshooting and webGL Q&A

Creative Coding with Canvas & WebGL

Check out a free preview of the full Creative Coding with Canvas & WebGL course

The "Troubleshooting and webGL Q&A" Lesson is part of the full, Creative Coding with Canvas & WebGL course featured in this preview video. Here's what you'd learn in this lesson:

Matt addresses several questions that were introduced, including clarifying what the difference between WebGL and ThreeJS is, and bugs in the previous example.


Transcript from the "Troubleshooting and webGL Q&A" Lesson

>> Mathew DesLauriers: Okay, so during our break I had a couple quick questions. One of them is that if you are finding yourself in a situation where you can't affect your scene by lights, some things to try would be to see what the material is of your mesh. So in this example here, we have mesh basic material, which means that the cubes are not going to be picked up by lighting information.

So actually just by changing that to mesh standard material, all of a sudden now we're going to get lighting information like shadows and shading. And then just to make sure that everything is added to the scene as well, and that kind of stuff. And then one of the questions that came up is what's difference between WebGL and Three.js.

And what's the relationship? And that's a good question. So basically WebGL is the technology underneath the hood of Three.js that allows us to create these kind of 3D in interesting graphical scenes. And if you were just to use WebGL directly. Then you're gonna have to use a lot of boiler plate, because it doesn't really give you something like a cube or a sphere, it just gives you information about vertex attributes and all these complicated things, and you have to actually do all the math, and you have to do all the sort of set up in the boiler plate to say okay, a cube is made up of this many vertices or spheres made up this many vertices.

And you have to do everything manually. So most of the time when we work with WebGL because it's too kind of tedious to write all that from scratch every single time, we end up creating libraries and frameworks that help us out. And so there's some libraries that are based on WebGL, like Three.js.

That are really good for 3D stuff, and then there's some libraries like PixiJS which is more for 2D. You can still use it for 3D as well, or like 2.5D. And then there's others like 2JS which is another two-dimensional library, but designed on top of WebGL. P5JS also has a WebGL sort of support in it.

So there's always different frameworks. Quite often they end up using WebGL because the performance of WebGL is much better than canvas 2D. And so it's really just a way of interacting with our GPUs on our machines and allowing us to get like the most graphical power out of the computer as possible.

And so, sometimes you can actually use WebGL for like, totally non-graphical things as well. Like, I think some Bitcoin mining stuff is using WebGL sometimes. And same with like, audioshares, and stuff like that. So yeah, it's a really big ecosystem and Three.js is really just one little part of it.

But it is probably one of the more standard or one of the more popular 3D frameworks in WebGL frameworks.

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