WebGL, GLSL & Three.js Overview

[00:00:00]
>> What is WebGL? I keep saying WebGL, so Web GL stands for Web Graphics Library sort of, it's a browser implementation of OpenGL, which is Open Graphics Library. And OpenGL is this decade's old software that's been around since the early 90s. And it's just been iterating and incrementing its versions ever since.

[00:00:24]
It's this really old school tech, and so WebGL is basically just a port of this, and so WebGL itself is also kind of feels old-school. If you actually use the raw WebGL commands, it's just the commands that exists from OpenGL. And OpenGL is what drives games and graphics engines, and any type of rendering that you'd see in like a software, especially if it's on a Mac or Linux, there's a very good chance that it's using OpenGL.

[00:00:51]
On Windows, you might more often be seeing something that's using DirectX. And this example, Doom (2016), this was using OpenGL to render a lot of these effects, explosions triangles, lighting, such and such. And so when we think of WebGL, we often think of 3D, we think of these kind of like virtual worlds.

[00:01:14]
But really, WebGL just allows us to take advantage of our GPU. That's really all WebGL is allowing us to do. And so we can render things that are 2D. We can also use WebGL to produce very complex computation. So it might just be like a really complex algorithm that runs on the GPU and doesn't even have anything visual.

[00:01:32]
It's not like a game or a data visualization, or anything like that. It's just using the GPU for its parallel nature, that's all WebGL really is. And so GLSL, GLSL is a language, it's a programming language or a shader language, specifically designed for OpenGL. And so because GLSL works with OpenGL, it also works with WebGL.

[00:01:59]
And it looks like this, so this is GLSL. And it's just a programming language like I'm saying, and it's these little tiny programs that we write that then get compiled onto the GPU. And they run really, really fast on the GPU, they run in parallel, and so you can have this sort of program and it might run 10,000 times or 1 million times in a single frame.

[00:02:24]
It's really, really, really fast and it's mind blowing how fast it is when you actually compile these onto the GPU. And so it's not JavaScript, it doesn't really look like JavaScript. It has some, there's functions, there's variables, but it's all different syntax. And so you actually have to type like include types for the variables.

[00:02:46]
So whether it's float, or whether it's an integer, or whether it's one of these things called a vec2 or a vec3. So GLSL, because it's designed around triangles and around graphics, it includes some data types that are really useful for 3D programming like vector types. In JavaScript, it actually looks like this, so when we include GLSL in our JavaScript programs, we end up just using a string.

[00:03:12]
In this case, I'm using a multi-line template string, that just makes it really easy to write out a full shader. But when we're gonna be going today, we're gonna either do it but this way with template strings, or alternatively, you can include your entire shader in a different file.

[00:03:28]
And I'm going to show you how we can require that file into a program, rather than having to write it all just as a string. And then Three.js, that sits atop both of these things, so Three.js sits atop the WebGL and GLSL. And it sort of combines these two things into a very simple and easy to use interface.

[00:03:48]
And so you can do things like load 3D models and select different materials, different built-in geometries. It's a very user friendly framework, and it's really allowing you to do all sorts of 3D things. It can also be used for 2D but typically we use it for 3D. But it certainly has the capabilities because it is ultimately just allowing us to do things with the GPU, we could use it for 2D games or even like a 2.5D game that might not be fully 3D, it might not be fully 2D.