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

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

Matt introduces the three.js documentation, and shows a current events story about an AI artwork that sold at auction as a way to demonstrate where the field is going.

Preview
Close

Transcript from the "The Third Dimension" Lesson

[00:00:02]
>> Speaker 1: The first part was all about 2D, and now I wanna dive into more 3D stuff. And in one sense this is kind of maybe more technical, but also because we're going to be using libraries like three.js it might help hold our hand through it a bit more.

[00:00:20]
Whereas in the first part we were doing a lot of vanilla canvas API, which is a bit tricky. three.js has a lot of utilities built into it to help us with things like math, or things like 3D, things like rendering and that kind of stuff. So, I'll just show three.js and just get you guys familiar with it.

[00:00:43]
>> Speaker 1: So if you go to threejs.org, you can also find it on the workshop repo, in the links here, it's just linked here, and then there's a link to the docs. And the docs is gonna be pretty handy when we're doing this kind of stuff, but you'll see three.js is a framework, it's a library or an engine.

[00:01:02]
It's all JavaScript, and it allows us to create all sorts of different interesting 3D projects. Not all of them are 3D, sometimes you can use three.js to create 2D art works as well. It basically just allows us to use more technically advanced features of our computers, rather than just drawing circles and squares and shapes, we can draw all sorts of stuff.

[00:01:24]
We can create very complex scenes using 3D models or using shaders, and if you actually have some time, it's definitely worth looking through some of these projects. Like this one here, Oat the Goat is this beautiful animated storybook by I think it's New Zealand. I think it was either the government or the school board or something like that.

[00:01:50]
They helped fund this project, and it's all created with three.js and webGL. And it's kinda like this interactive storybook, mostly aimed at kids. And it's part of a campaign to avoid against bullying. But it's just really beautiful animated story book, all using the web, all using webGL, and using the same concepts we're going to be chatting about.

[00:02:13]
So definitely worth looking through some of these projects in your own time and getting a sense of the kind of different projects and things you can do on the web. And then you'll see in the documentation there's all sorts of different classes here. It's a bit more familiar if you've come from an object-oriented programming background.

[00:02:34]
This API might be more familiar. It's got classes that you construct with a new keyword. And then you set their properties and you use them like that. When it actually comes to looking into geometries and stuff like that, a lot of their documentation has these interactive examples. So, sometimes you'll see geometry, and you can compare the different geometry types and see what they look like.

[00:03:00]
So this is really handy to go through these geometries and just compare them, and you can pop this thing open here. And you can get a sense of what these different parameters do, cause these are just the parameters into the constructor, so you can set things on a shape like the segments, and you can see how that is gonna change.

[00:03:22]
So, this is really handy just to get a sense of what's in the library. So that's under geometries. And then also, if you scroll down you'll see materials. They do something like that as well with some of the materials, not all of them, but some of them. This is depth, this is normal, and we're gonna chat about what all of these mean, and what they sort of look like, and why you would use one or the other.

[00:03:45]
Before I get too far, I just wanted to point out a cool thing that happened today before I get into the rest of the three.js stuff. So this is the first time in AI artwork, and AI being artificial intelligence. I forgot to mention this earlier, but it just happened a couple hours ago.

[00:04:04]
It sold for $432,000 at Christie's. So in terms of generative art, in terms of computer art, in terms of any art that has to do with computation and code, and in this case, AI or machine learning, or deep learning, this is a huge sort of pivotal step forward for, I would say like, computer artists that are interested in computer art.

[00:04:26]
Because all the sudden, it's being taken a bit more seriously by the art world. The whole story around this is really interesting too, so if you want to read about AI, it's actually an unfortunate story because the people that created this particular portrait, they basically just cloned a GitHub repo, and they ended up re running the code and producing this image, and then printing it.

[00:04:48]
And they ended up selling it at Christie's Auction House for 400K. So, I just wanted to bring that in before we start getting too far into the stuff, because it's a really pivotal moment, and it just happened like an hour or two ago or something like that. And it's just, it's gonna be important for creative computing in the future.

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