(clean synthetic music)
- So last time, we created a very simple scene
that just had a default cube and a cat jpeg.
For this VR birthday card, we're gonna want something
a little more interesting than a cube, right?
The first thing we're probably
gonna want is a birthday cake,
and then we're gonna want trees and some mountains,
so this is inherently a visual task.
We have a bunch of different objects
that we wanna position around each other.
Because this is something people commonly want to do,
Mozilla created the free tool called Spoke.
Spoke looks like a complex 3-D editor,
but it's actually very simple.
It lets you drop objects in, move them around,
and then we can save it to a single file.
This file's called glTF, which is like jpeg for 3Ds.
It's a standard, everybody can import and export it now.
We've got a menu right here.
Everything in my scene is listed here in the hierarchy view.
I can select something, choose the light,
choose a spawn point, choose the ground,
and I can see the properties down here.
So let's add something, let's start with birthday cake.
Let's add a model.
Now, I don't actually have a birthday cake model,
and in fact, I'm not a 3D designer,
so if I tried to draw a birthday cake in 3D,
it would not look very good.
So what we're gonna do is we're gonna search.
There's this amazing website called Sketchfab,
and Sketchfab is a place where 3D artists
can upload and share and sell their models.
So let's search for cake.
We found this really beautiful model here
called Tarta de Chocolate,
and it looks like lots of people have viewed it
and voted it as being very popular.
It's loading, it's loading, we can see that
it has 155 thousand triangles, which is a lot.
That's gonna take a long time to download,
it's gonna be very difficult to render on a phone.
It may render very slowly.
This is the sort of thing I would use in an ad or a movie,
when we don't care about the download time,
but for something on the web,
it's gonna be a little too big.
We can see it finally loaded, looks gorgeous,
but a little too much for our birthday card.
Let's search instead for low poly cake.
So we want a small number of polygons,
and again, I'm gonna check downloadable.
Now here is a cute one, this says happy birthday above it,
it's happy birthday cake, it looks nice.
Still been very well-reviewed,
and we can see this one is only 17,000 polygons.
I try to use about 10,000 or less for most of my objects
but since this is the primary object
that we're gonna look at, it's okay to have a few more.
You can think of polygons as pixel count.
You wanna use your pixels budget
on whatever's the most important thing.
This looks super cute, I think my niece is going to love it.
Now, I can download it here
and Sketchfab will let me choose in the original format
or auto-convert it to glTF.
However, because I'm using Spoke,
I can just give it the URL of Spoke directly,
paste it in here, and it will now fetch it from Sketchfab
and add it directly to my scene.
And now I can select the model,
move it back and forth in my scene,
rotate it around, scale it.
The scale looks pretty good,
we're gonna make it just a tad smaller.
Make it a tad smaller, it looks good.
Okay.
Now let's give it a backdrop.
Let's search for low poly mountain.
Now here's some mountain scenes
and we can see some of them are very detailed
and some are low poly but they're more than I want.
I really just wanted the mountain itself.
Here I found this thing called a glass mountain
that looks really cool, think my niece will like this.
It's got a glowing crystal above the top of it,
that'll be fun.
We can see the triangle count is great,
it's only 696 triangles, 481 vertices,
and it is Creative Commons licensed,
so I'm free to use it in my project.
So on that we'll copy and paste this in.
And here is my mountain.
We can see the size looks good,
but of course it's not where I want it to be.
So let's slide this back.
One thing you'll notice in Spoke
is that everything moves along the one meter grid by default
which turned out to be very useful.
But you can turn snapping on and off if you choose.
Lemme do this and make this mountain
actually a little bit bigger.
So here's my scene.
I've got my cake, I've got some mountains behind it.
So if you're a designer and want to create 3D objects,
I suggest starting with a tool like Blender.
Blender is an open-source 3D modeling tool,
has pretty good support and Mozilla
and several other companies are contributing to improve
the VR and glTF support in Blender.
When you export from Blender,
make sure you don't use any of the extensions,
you use the standard physically-based rendering system.
Now I think we need a few trees.
There's all sorts of cute trees to choose from.
Let's start, this one looks good,
and it only has 64 vertices, so that'll be great.
Also CC licensed, so let's add that.
We can see that tree is much bigger than I want,
so let's shrink that down, and I'd like a couple of 'em.
Instead of adding multiple trees,
adding the file multiple times,
I can just hit command+D or right click
and choose duplicate and now I have two trees.
So now I can start positioning these things around.
Let's maybe put some over on this side
and one more over here,
and I would like a second kind of tree to add some variety.
So here's a completely different type of tree
that I think looks really cute.
I like the way they designed the branches.
So let's add that in.
So now we've got this tree.
I think that's almost as tall as the mountains.
That's probably a little big.
So I'll scale that down, zoom in,
put one of these guys right here,
and let's duplicate it and add another one.
Okay, I think that is a very nice-looking scene.
So the next step is first, I can save it.
Save birthday card, always save.
Now what we wanna do is export.
There are two forms of glTF, they are identical
except one takes the textures
and the geometry and everything
and squishes it into a single, binary file
that's optimized for download
called a binary glTF file, or .glb,
and that's what I wanna use for this.
So it's gonna export my birthday card.
Now I can open the folder where that is.
There is birthdaycard.glb.
Now I'll go to my project directory, just copy in.
Now back in the code, in the initscene screen,
We're going to load up this glTF file,
so we need a glTF loader.
And we're going to load birthdaycard.gltf.
And I give it a callback function
which will call me back when it's been loaded
and I can just add it to the scene.
I misspelled that, it is actually birthdaycard.glb.
Now let's reload.
And we can see that the entire scene has loaded,
except right here, all we can see is the mountains.
We can't see anything else.
That's because by default,
it's gonna load it at position (0, 0, 0).
So we just want to translate it
model.scene.position.set
leave the x and the y the same
but we will set the scene to negative...
Let's try -10 and see how that looks.
And there's our scene.
Oh, but the cat is still floating in the middle.
So let's get rid of the cat.
And any of the event code that talks to the cat cube.
There we go.
Here is our scene, we have the birthday cake,
and really cute trees,
very nice background, mountains here, except the sky is red,
so we'll want to change that in the future.
But we have a nice scene, we were able to
grab models from several different
locations on Sketchfab, different artists,
combine it all, position it all, into a single scene,
export it as a single file, which we can then
put in our card, and there we go.
So the next thing we're gonna wanna do
is change the lighting.
Certain things are reflected but shouldn't be.
I don't want a shiny tree.
And of course, the sky looks completely wrong.
We want something much better.
So we'll focus on lighting the sky next time.
(upbeat drumming)