More Extending WebGL

[00:00:00]
>> One thing you can do to make this a little more visually interesting is, in the fragment shader, instead of running the whole gamut of hue from across the rainbow, you can maybe limit that a little bit. So we can take the snoise, which is gonna vary between a -1 to 1, and maybe compress that.

[00:00:17]
So multiplied by 0.1, and then that's gonna give us some more subtle color scheme. And we're all also already passing in a uniform called stage that's set separately for each sphere. So we can use that to provide an offset into the color space. So maybe stage*0.3, which is gonna be 0, 1 and 2, or maybe 1, 2 and 3, I forget exactly.

[00:00:44]
And we can add that in. So there's gonna be a color shift applied to each sphere. There we go. One of them's kind of the same color as the background, but you get the idea. Another thing that we might wanna do is swap out icosphere for another package like bunny, or there's one that's a teapot, all kinds of fun things.

[00:01:05]
So you can get those by doing npm i bunny teapot, etc. And instead of icosphere what we can do is, require bunny. Now our mesh, instead of a sphere, will be a bunny. npm install has to finish, actually I have this cached locally so I'm gonna speed that up.

[00:01:36]
One moment, it has to download a bunny and a teapot from the Internet. Let's see how long this is gonna take. Okay, I see a question on the chat. How, where do we run glslify to run budo main.js? So you do budo main.js, and then you do --, and then -t glslify.

[00:01:55]
>> What's the --?
>> So these are options that are forwarded off to browserify, so everything past the -- is what browserify is gonna deal with. And then everything before that is budo-specific options. So if you do --help, it tells you about more of the options if you need to know that.

[00:02:15]
Right, so here's the basic form, browserify opts right after that.
>> And what's the -t in the browserify?
>> -t loads a transform, called glslify in this case. Okay, still waiting on that bunny and teapot, but it'll be pretty cool once it downloads. Okay, [LAUGH] all right, now we can swap out that icosphere for a bunny.

[00:02:38]
So there we go, we have our new budo. And if I reload it, the bunny is there, it just happens to be really big. So there's a bunny. There's three of them, it's kind of a cool effect actually, three stacked bunnies.
>> Can you space them out?
>> I can, yeah.

[00:02:59]
So there's two ways of doing that, I can either space them out more and move the camera back, or in the vertex shader what I can do is provide a little bit of scaling. So if I take that position, multiply it by 0.2, and that should do the same thing.

[00:03:13]
If i reload, there we go. That's cool, the bunnies are pretty cool. I can also change the background.
>> [INAUDIBLE] they stand a little further back from the reactor.
>> Yeah, or another fun thing I can do is, why don't I put in a feedback effect? These are really fun.

[00:03:35]
So with yet another glsl module. No sorry, it's just a regl module, but it's a module from npm just the same. We can set up feedback, so this one's called regl-feedback, and I can load it. I always have to copy the little snippet from the readme, though. That's gonna be really slow.

[00:04:04]
Anyways, I think it's something like, so in our createBlob function, we can create a new feedback object. I think it takes regl and it takes a bit of glsl source, and it's a function. It needs to be called sample, I think something like that. And then sample takes, I don't exactly remember the order but it's like a sampler2D which is a texture and U-V coordinates which is a vec2.

[00:04:38]
And then you've got to return the texture lookup, which you do with texture2D. Anyways, what this does is, it it's gonna load the screen output into a texture and then we can decide how we want to render the screen based on the previous outputs. We can do things like blur or smear things off into the distance.

[00:05:07]
It's a cheap effect that will make your demo look really cyberpunk and amazing, so I highly recommend it. It's still loading though. Maybe I have it in my project directory. Nope, maybe I have it in my npm directory. Yes, I do. See, why is it so slow if I already have it?

[00:05:32]
Maybe I'm just gonna, Extract it. Okay, cool. I can read the docs now without having the whole package. [LAUGH] Pro tip for offline npm use. Okay, the uv is the first argument, I get that wrong all the time. And I'm just gonna take this default sampler code. It finished finally.

[00:06:10]
Okay so, Okay, so we just lifted some code that's gonna smear things out in a cool way from the readme. And then there's some other pieces I can almost remember what they are off the top of my head, I think, although we actually have to do this as a separate call.

[00:06:29]
So here's a good reason why you would want to put things in a draft object instead of just having a bunch of variables kicking around, it's cuz we're gonna need a feedback there. And so we're also gonna need a feedback texture. So then, let's see. After we've done everything, after we've drawn everything that we want to draw, we need to do fbtext({ copy: true, mag: 'linear', min: 'linear' )}, I think.

[00:07:00]
And that's gonna copy everything on the screen into that texture. And then the first thing that we do after we clear the screen is we need to draw the texture. Let me see how that works. All right, and then you need to provide the texture as an object, that's what I forgot.

[00:07:33]
So if I do all of those things, cuz we're gonna make a cyberpunk demo now, I'm gonna make the background black, of course, and I'll reload it. Background is black, but I don't see any of the updates yet. Copy: true, min, mag, yes. Right, I need to draw that fb.

[00:08:10]
Okay, now when I reload, there we go. That's pretty cool, they're on fire now. You can sorta navigate around. Whoa.
>> [LAUGH]
>> The scroll wheel is really sensitive, so-
>> [LAUGH]
>> Hi bunnies.
>> Yeah, so now there's, it's pretty cool.