Extending WebGL

[00:00:00]
>> Another fun thing to try is if we refactor this a little bit, and I'll call this function createBlob now and instead of declaring that draw function, we will return it. And then in the regl.frame function, we're actually gonna save a bunch of draw functions. This is kind of a nice A nice way to factor things out if we wanted that to live in a separate file.

[00:00:33]
So then you can stack on more draft functions and it's gonna keep a lot more separated. Another thing that you can do as well, instead of having one blob, we can have a lot of them with properties. So if I set a property in this blob function, which I can do as a uniform, so I'll call this one location.

[00:00:58]
Can do regl.prop('location'). And now, when I go to draw those, I can set some locations. And maybe the locations are even based on time or based on some other parameter, so they could go up and down, or could be based on keyboard input. You could base it on other things that you have access to in JavaScript land.

[00:01:18]
For now, I'll just set those locations up like so. Be like -1, no, -2. So I guess like we'll have one that's negative one x, one that's -yx. I think it actually might be z that we have to vary, not x. So all right, so anyways, there should be three blobs on the screen as soon as we use the prop in our vertex shader.

[00:01:47]
So we have another vec3 called location in our vertex shader, and we need to take the position and add in the location offset. I think that ought to work. That's pretty much it. So I'm gonna refresh. Syntax error. Line 48, looks like I probably forgot a comma or something somewhere.

[00:02:13]
>> [INAUDIBLE]
>> What's that?
>> Never mind, I thought I saw a spot there.
>> Okay. 48 is right here. That's a function now so it doesn't need a closing parent. And there we go, we have blobs. If we want the blobs to not be identical, we could offset them based on the location.

[00:02:34]
Or we could pass in another property, that's stage: 0, stage: 1, stage: 2. And then that would be another prop stage. And in the vertex shader then we can offset time. Right in the vertex shader, we can perturb the time by the stage. It would be out of sync now with each other.

[00:03:11]
That's the blobbing, but the fragment is still- so I'll just quickly add that to the fragment shader as well, and I think it'll look cool. There we go, now they're a little bit different. So anyways, it's web geo crash course. Gave everyone a bit of time to play around with this demo, which I hope you'll all enjoy.

[00:03:41]
Gotta get commit first. Don't forget to run budo. Actually, that instruction is wrong there should be a dash dash before -t glslify why don't I just edit that because it's wrong. Yeah, it should look like this. Okay, now it should be better instructions. Question.
>> Do you have any recommendations for writing tests for this kind of drawing?

[00:04:29]
>> For web GEO, I have no idea how you would do that. I guess you could write tests for the individual things themselves. I actually have written tests for web GEO code in terms of GP/GPU, which is a way to use the graphics card and shaders to do general purpose computing.

[00:04:47]
And in that case, I would take screen pixels and I would read them and make sure that they're the correct colors like I would expect. So you have to kind of really narrow things down if you want to test web GEO code, but yeah, you can definitely do that.

[00:05:02]
And you can set that up with all of the tools that we've already covered with tape and such. So, yeah.