Blender

[00:00:00]
>> Mathew DesLauriers: Something else I have done in the past is creating a large print series from JavaScript, but then, taking the 3D model, and taking a 3D model and putting it into Blender, and then, using Blender to render the 3D model at a much higher resolution. So this is just a three.js seen that is exported as a mesh and imported into Blender, and so, to export it as a mesh from 3GS and from JavaScript, I'm using the same concept here.

[00:00:39]
I'm just returning a glTF or an OBJ file that can be fed into a Blender file. And then, just rendered in a high quality. And then, printed on nice ink paper. Yeah.
>> Mathew DesLauriers: So I just, I'll show you. I don't have the code itself right now. But you basically, if you write your code in a certain way.

[00:01:13]
Let's say you're using three.js. Three.js has a OBJ Exporter, or something like that. It's called something like that, here.
>> Mathew DesLauriers: Basically, you give it a mesh. And when you export the mesh, or the scene, or whatever it is you're giving it, the geometry, it gives you back this, so we J file, which in this case, in this example, for three,js, they just have it showing up here.

[00:01:42]
But if you're using Canvas Sketch, you can actually return the actual OBJ data here, and so, when you hit Cmd + S in Canvas Sketch, whatever the data is here, is gonna get exported as a file. To your downloads, just like a canvas stuff we've done so far, except, instead of being a PNG, it'll be J file.

[00:02:05]
And then, with that OBJ file, you can import it into Blender, and you can get into the scene, so for example.
>> Mathew DesLauriers: This is the file that would get exported from three.js. And this is actually exactly how I created this is by taking this three.js scene, which is created from some parametric geometries, and kind of like what we've been talking about with shaders, same kind of concept, and then, exporting it as a OBJ file, importing that Shader, or importing that OBJ file into Blender, and actually, going to town with more lighting and stuff like that.

[00:02:51]
And the reason I'm using Blender instead of three.js is just cuz, the lighting and quality is much more realistic, and you can get some materials like glass, you can get some materials like mirrors and stuff like that, that are really hard to reproduce in WebGL, but in Blender, you just set the material to the glass material, and all the sudden, it looks beautiful, or something like that.

[00:03:18]
>> Speaker 3: Some sort of data that was feeding the different cities that you had.
>> Mathew DesLauriers: Yeah. Yeah, actually, I didn't really mention that, but that project is, let's see. The project was kind of just a bit of a data wiz of different cities and their skyscraper heights, and how their skyscrapers are distributed amongst the data set.

[00:03:44]
And so, I had scrapes like thousands of different towers and the different heights of the different towers and different skyscrapers for each city. And then, using that, I was able to sort of change the distribution of these crystals, and that kind of thing. So you'll see Rotterdam is quite short, whereas something like Shanghai has a lot of really tall and really ominous skyscrapers.

[00:04:09]
So it produced that crystal that looks a bit like that. And yeah, and the actual, the fracture pattern that's happening here is another type of noise. So, so far, we've talked about perlin noise, or we talked about simplex noise, I guess, you can say. It's very similar. It's like this imagery we've been seeing over and over again.

[00:04:30]
And if you just use a different noise function, it's basically the same concept we're talking about. But instead of using the noise that we've been doing, it's a different noise function called, Voronoi. And it looks a bit like that. And this is not exactly how I created it, but I did use some aspects of Voronoi to produce this sort of fracture pattern in the mesh.