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

The "Shadertoy" Lesson is part of the full, Advanced Creative Coding with WebGL & Shaders course featured in this preview video. Here's what you'd learn in this lesson:

Matt introduces Shadertoy, a platform to build, share, and learn about shaders. Shadertoy is an example of taking shaders to the limit of their capabilities by creating entire scenes out of fragment shaders.

Preview
Close

Transcript from the "Shadertoy" Lesson

[00:00:00]
>> We're gonna switch gears a little bit and we're gonna dive into shaders and diving into GLSL and working with some more complex effects and taking a geometry like a sphere but actually manipulating the surface of it using shader. And trying to understand how does this all come together?

[00:00:19]
So it'll be a little bit more technical, there's probably gonna be some more questions. We'll work through it, though. A shader is basically a tiny little program that we run on the GPU. And the program is really tiny sometimes, it might just be this. This is a program for a fragment shader, a pixel shader.

[00:00:36]
And this would be compiled,It would be run on the GPU. And then it would run really fast on the GPU and parallel using all the cores and all the stuff within our computer to run it very efficiently. One way that you might have already seen shaders, this is a pretty well-known site, shadertoy.com and it collects a lot of different fragment shaders.

[00:00:59]
In this way that you can browse the different shaders, it's gonna totally crunch your computer because a lot of them are really, really heavy, and they're really, really expensive. But it's all fragment shaders and it's all crazy math that's going on. We're not gonna be writing this kind of stuff, and I wouldn't be able to look at this and understand what it's going on.

[00:01:22]
It's really mostly lots of messy code, lots of like little one single letter variable names. And it's usually pretty hard to understand what the authors are trying to do with this. But it's because the way that these demos are done is that they're creating 3D geometries and 3D sort of visualizations using entirely a fragment shader, using this concept we'll be talking about.

[00:01:46]
Which isn't designed for 3D geometries, it's designed more for surface qualities like the color or the gradiation of color across the surface. So this website is a big hack, in a way, people are taking shaders and really pushing them to the limits and pushing them into ways that you wouldn't really expect them to use.

[00:02:08]
But as a result, it runs pretty slowly sometimes on your computer. But yeah, sometimes you'll find some much simpler shaders that are maybe 2D and you can go in and edit the code. You can also create a new one and just start working with the basic shader here yourself.

[00:02:24]
And again, this is a fragment shader, which we're gonna be explaining the difference between fragment and vertex and what those things are. So this is a very good site to reference occasionally.

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