3/7 Using a WebVR editor (Spoke) to create a fun 3D birthday card

(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)

Be the first to comment

Leave a Reply

Your email address will not be published.