Introduction

[00:00:00]
>> We're gonna be talking about WebGL and GLSL. This is sort of a advanced course compared to my other Frontend course, which is more of an introduction to creative coding with Canvas with 2D, and a little bit of WebGL and Shaders. But today we're just gonna be focusing on WebGL and shaders and Three.js trying to get a bit more in depth with that.

[00:00:21]
And trying to actually break down how the pipeline works and trying to understand some of that the lower level details. And so just the tools we're gonna be using, we're gonna break this down into a few different parts, so I'm gonna start with the, we're gonna be using Node.js just like in the last course.

[00:00:39]
We're gonna be using Node.js to run applications on the command line, it's all JavaScript applications. And we're gonna be using npm, which is gonna allow us to bring in modules of code. This is gonna allow us to download and install modules, but most importantly for this course, we're gonna be using npm as well to bring in modules of shader code.

[00:00:58]
So npm isn't just JavaScript, some of the modules that exist on npm are also written in GLSL, which is gonna be really useful. I'm also gonna be showing glitch demos, so glitches, a really nice, helpful platform for sharing some code. It's a glitch.com, you can check it out and it allows us to basically just share some code and you guys can open it up and remix the code.

[00:01:23]
And it's just a really good platform for like sharing some demos. And then when we actually go to code our work, I'm gonna be using Canvas-Sketch. This is gonna give us a sort of consistent framework for all of our sketches, all of our demos to sort of live within.

[00:01:38]
It's gonna be really useful for exporting mp4, mp4 files, Gifs, high resolution prints, like a high resolution PNG, bringing in modules of code, requiring things. And then actually just having this like running locally so that we can really quickly code and see the results. And then lastly, we're gonna be using Three.js, which is gonna sort of wrap everything together.

[00:02:02]
This is a very high level engine that sits atop WebGL and GLSL. And that's gonna be sort of the, the engine that we use for all the 3D stuff. It's not the only engine in JavaScript. We'll talk a little bit about some other options. But for today, it's it's gonna be a good starting point.

[00:02:20]
And the nice thing about Three.js is that it's really good for doing basic stuff, but it also gives you all the features that you need if you wanna dive in and do really complex stuff as well.