WebGL Examples

[00:00:00]
>> I'll start by just showing some of the examples of what you can do with WebGL. First, I'll start with my own work, just some of the things I've done. And then I'm gonna explore more some of the work in the wild and sort of what we could do with WebGL.

[00:00:13]
And this is kind of just to start with my own stuff. This is where I sort of got into it is this project. It's called Audiograph. It's like a music visualizer project that I did in 2016 around a single album, a album by Pilot Priest. And it's a fairly straightforward visualizer is just a looping graphic that's constantly evolving, constantly changing.

[00:00:45]
And it's constantly changing colors in response to the beat of the song. You can hit space, and you can see the next track, and you can cycle through the whole album. But this is all using WebGL to draw these shapes, these polygons, and these triangles. And because it's using WebGL, it actually runs pretty quickly, even on a browser, even on a mobile phone.

[00:01:04]
That's kind of the goal for today is to create these real time applications. They could respond to audio or they could respond to user input, or whatever, really. And then when I was working at Jam3, which is a agency in Toronto, I started to build these more complex systems with WebGL.

[00:01:25]
So this is one little tech demo that we did for Mozilla for their GDC in 2016. This was shown as a tech demo for the browser showing WebGL 2 actually, which is a more recent version of WebGL, which is still being included in many browsers. And still doesn't have the full support that we'd really like to use it everywhere, but it's getting pretty close.

[00:01:50]
But, yeah, this is just another tech demo that I worked on, and it's much more rich. It had to involve a team of developers, a team of 3D artists and us working closely together to sort of produce this full thing. It's all real time interactive, etc. Riffing on that, here's another demo that I worked on.

[00:02:09]
This was a simple sort of minimal web toy that would appear when you visited tendril.com or tendril.ca. They're a studio for design and illustration animation in Toronto. And they wanted this little toy that you could interact with it. And this could have been done maybe with some SVG but it wouldn't render in this efficient way.

[00:02:34]
You wouldn't be able to get this kind of fluid motion. You wouldn't be able to get these sort of interactive gradients and some of the texture that appears leaf. And some of these little details would be really hard to achieve with technology like HTML, or CSS or even plain Canvas 2D.

[00:02:50]
So this is where WebGL would be really useful is just to bring in this extra detail. And then another thing is bringing this out of just the scope of the web browser but also into more physical installations. Because we're just accessing the GPU, we could create an AR experience using WebGL.

[00:03:12]
And this was in KIKK festival in Belgium. There was several different artists and we all got a chance to build a Three.js and WebGL augmented reality sort of piece that would then be placed in a specific spot in the city. And visitors that are at this conference, this KIKK Festival they can go around, download an app and see the actual ARPs.

[00:03:35]
So mine is in this video here, somewhere. But there were several different artists and we all had a chance to do a different output, and it's all using Three.js, WebGL under the hood.

[00:03:46]
[MUSIC]

[00:03:50]
And the nice thing is once you start to learn these concepts of WebGL and 3D, you can actually apply them with different software. So sometimes you might find a situation where a different program, like Unity, is gonna be better than working straight on the web. But you can quite often just transfer the knowledge that you've learned with WebGL right into that other software because it all sort of works the same way.

[00:04:13]
Ultimately, it's all just using the GPU in the same way. And then continue to move away from browsers and more into this physical space. This was an installation that I put on in Toronto just for one night at the AGO. It was this connect based installation which means that there was like a skeletal motion tracking device.

[00:04:37]
And you'd be able to wave your arms and stuff inside of this installation. It would sort of project your virtual form within this fourth dimension or within this nth dimension. And so that's just showing how you can use WebGL in more of a interactive physical installation setting. It's totally doable there as well.

[00:04:56]
And then moving completely away from these digital outputs, but into prints. So you can use WebGL to create high resolution print artwork that you might just want to get framed. This is a data artwork which is visualizing ten different cities and the skyscraper heights. Those different cities mapped to these sort of generative crystal structures.

[00:05:15]
The work was done in JavaScript with WebGL. And that would allow me to really quickly visualize these generative geometries. And then I would export from WebGL, I would export these geometries as OBJ files, and then bring those into blender. And that allowed me to actually render this high resolution print with some materials and some qualities that are really hard to achieve with just real time.

[00:05:37]
But this is sort of showing how WebGL isn't always just making something that's real time. It's just more using the GPU for various tasks, maybe creating complex geometries and then exporting those as OBJ. And there's just an example to print. Okay, so that's kind of my stuff and then just a couple examples of cool projects in the wild.

[00:06:01]
So this one is really fun. It's OUIGO, Let's Play. You can test all these in the browser. It's just a pinball game as part of a campaign for a train company, I think in France, and it's like super performant. It runs on a mobile phone. It's just like super detailed.

[00:06:20]
The animations are really crisp. And then this one, you guys should try this on your computers, it's really fun. So this is Bruno Simon, he just put out this portfolio pretty recently. You can just search bruno-simon.com. And it basically just gives you this little car, that you can hit, explore his portfolio here.

[00:06:52]
And you can actually go down and see some of his projects. And open those up, and see some of the work he's done just by driving around this little town, this little city. So yeah, this is another great example of WebGL, just super interactive, super real time. And when he put this out there's a sort of splash that happened on Twitter.

[00:07:19]
It's pretty addicting and it's it's fun to just drive around this little portfolio. Yeah. This artist, Richard Vijgenn, I don't know how to say his last name, unfortunately. But he's doing a lot of work as well with WebGL and with Three.js. And so this is a data artwork that's showing the spectrum of radio waves that are in the air, I guess.

[00:07:48]
And he's got a radio sensor of some kind, some sort of hardware sensor. And it's using WebSockets to communicate with a Three.js app and sending the data from the hardware sensor into this visual. So you can actually go in and explore this in real time and see how it's sort of visualizing and mapping this data into this large installation piece.

[00:08:11]
>> When you're projecting on a wall like that, is it just like a browser full of screen or?
>> So this, I would probably do it as a browser full screen. You'd have to set up your output resolution to a pretty wide resolution. And depending on the setup, it could just be like a big LED screen, it could be just a projector, just like the projector we're seeing here.

[00:08:37]
Or it could be sometimes multiple projectors. And you're still ultimately just using a computer with an HDMI but then sort of there's a more of an AV setup that would be used. And it often isn't even part of the role of the developer, you would probably work with an AV specialist.

[00:08:56]
And they would do some of the mapping with multiple projectors so that it all stitches up into a large peace. And then Active Theory, if you aren't familiar with active theory you should definitely start following them. They're doing tons of work with WebGL and they're really pushing the limits.

[00:09:10]
Definitely check out their work. This one is using hardware sensors like heartbeat monitors and things like that that react to the user as they're interacting with this installation. But they also have this web component, this web version which, obviously, doesn't have hardware sensors, but it's still pretty cool to look at.

[00:09:29]
Okay, and then lastly, I just wanted to show a couple of examples of not WebGL. But the important thing is to sort of show that these could've been made with WebGL as well. A lot of times, I'll show somebody a project and they'll be blown away that it was made with WebGL.

[00:09:46]
They won't realise that some of the stuff that they're seeing could actually be done as well with WebGL. So this is one that was shown at Barbican fairly recently. It's called Future You and it was by Universal Everything. And it's another Connect based Microsoft Connect based installation where you step in front of the installation and it tracks your motion.

[00:10:05]
And it creates this sort of 3D sculpture that reacts and responds to your movements. And so something like this could have definitely been done with WebGL as well. And yeah, this one in particular down with Unity, but that's quite often a decision that's made based on the team or based on their skills.

[00:10:26]
So just because you see something that's done with Unity doesn't mean you can't also do the same thing in WebGL. And then this is Joanie Lemercier. So Joanie Lemercier is an artist that's quite often working with light and projection. Sometimes working with pen plotters and more prints as well.

[00:10:45]
But one of the nice things here is that this is ultimately a screen based work. So at the end of it all, it's just some software that's running on his computer. And it's just a screen based visual. It could've been done with WebGL or maybe it was done with something else.

[00:11:01]
But the, the point is this rendering is simply just running as a screen based work. And then he's projecting the rendering onto a curtain of water particles, like a mist of water droplets. And that's what creates this sort of holographic look when you stand in front of it.

[00:11:21]
And so this is like this beautiful project that really shows that even though something is screen based, it doesn't need to be projected just as a flat screen. You can get really interesting with projection and projection mapping from screen based work. And just sort of riffing on that, this is NONOTAK.

[00:11:38]
They are a music and sort of visual duo. They do these really crazy audio visual performances. And so a lot of their work is them making music live but then a lot of their work is also presenting it in this really unique way. So it's not just a screen behind them that's showing some cool VJ visuals, but they actually set up the projectors.

[00:12:05]
They set up the screens in such a way that it creates this really unique output, this really unique look. So here they'd have multiple screens next to each other. Each of these is a semi-transparent surface that can be projected through. And because of the placement, because of the way they're using this projection mapping techniques, it creates this really nice repeating sort of pattern.

[00:12:31]
[MUSIC]

[00:12:34]
I'm just skipping forward to this light speculation performance that they did. They created a sort of triangular prism or it could also be maybe a cube. But in this case, it looks like a triangular prism of screens around them. And so then they would project onto those screens, and they'd be sort of contained within this box of light and visuals.

[00:12:54]
But ultimately, this is again, a screen based work. So they're taking a software that's outputting triangles or outputting lines, or shapes, or some sort of rendering. It could be WebGL, but this is more likely some other software, but it could just as I've been WebGL to output this.