(electronic music)
- Today, we're going to start our series
on building a VR birthday card for my niece Lauren.
Now, everything we're gonna do is in the web browser.
It's called WebVR.
It's a standard API for creating VR content in the browser.
So, first thing we need to do is just create a webpage.
I'm using WebStorm, but you could any editor you want.
I'm gonna create a new directory called birthday card.
And inside this, as all webpages do, start with index.html.
To get started with WebVR, there's a bunch
of setup we need that's pretty much the same every time.
So, we have a boilerplate here.
And I'm just gonna copy the whole boilerplate
into my webpage.
And make sure that everything's in the right place.
I'm gonna switch over to Firefox.
And let's see if it loads, which it probably won't.
There's probably some dependencies there,
so I just opened up the Firefox debugger.
Here's the console, and we can see,
oh, there's a bunch of files not loading.
The paths are probably wrong.
So, I'll just fix the paths
to where I stored that boilerplate.
Okay, now I fixed the imports.
Everything has loaded.
And you can see it says my application name, click to start.
I don't have a VR headset attached, so it says VR not found.
And you can see this cube turning around.
Oh, but the image is missing.
So let's fix the image.
Okay, now we have our cube
with a picture of a cat on the side.
And you can see we have input events working.
So, whenever I mouse-in, it turns to green,
and if I click, it turns to red.
And we have a nice debug system here.
It'll tell me current frames per second
and how many calls and trials I have.
So, that is just using the boilerplate by default.
Let's walk through it really quick.
Mostly, this stuff you won't need to change.
It's loading all the requirements.
We're using ThreeJS.
ThreeJS is one of the most popular libraries
for doing 3D on the web.
The GLTFLoader will let us load up GLTF files,
just like JPEG for 3D, so all of our 3D models.
When we do text later,
we're gonna need the TrueType font loader as support.
Then boilerplate WebVR,
this is what actually lets us jump into WebVR.
Then VR stats is this little thing right here
that shows us the frames per second trials.
Then, there's some CSS.
You can change this however you want.
Standard CSS, this is the overlay.
It's in html.
We saw right there at the beginning.
Now we're getting into the code,
the imports, the pointer, and VR stats.
There's a few utility functions, and the important stuff.
Function called initContent,
and this is where I actually create.
So, it sets the background.
You can see the background is set to a medium gray.
If I was to go back and change this,
so let's say really blindingly red
that I wouldn't want in real life, hit reload,
and now we can see the entire background has changed to red.
This is what loads up the cat.
Then we create a box.
Now, in ThreeJS, and really pretty much any 3D graphics,
we have this concept of an object is composed of two things.
There is the geometry, the actual shape,
and then material, which is the color,
the texture, how light bounces off of it.
So, we call this a mesh.
It's gonna have a box geometry,
which is a one-by-one-by-one cube.
In 3D, we do everything in meters,
so this would be a one meter cube.
Then, the MeshLambertMaterial.
Lambert is a kind of diffuse lighting.
Later on, we'll look at other types of materials.
I set the color to white and gave its map
as this texture object, which is the JPEG (mumbles).
Then I need to set the cube position to negative five.
By default, the camera's at zero, zero, zero.
So, zero in the X direction, which goes this way.
Zero in the Y direction goes up and down.
Zero in the Z direction,
which goes in and out of the screen.
And it's a little counterintuitive,
but in 3D graphics, usually Z is negative into the screen.
So, if I want something to be in front of me,
I would give it a negative index.
In this case, I'm using a position of negative five.
By default, the camera is at 1.5
approximately meters unless I have a headset attached
in which case it'll show me the real position of the head.
So, I'm gonna position the cube
at roughly where the (mumbles), which is 1.5 meters.
Then I want it to perceive user input,
so I set its user data to be clickable.
Add it to my scene.
We also have one light here, which is added to my scene.
Then we added the VRStats.
Then, the pointer object.
The pointer object is not part of WebVR itself.
This came with the template.
It sort of unifies mouse touch
and VR controllers into one set of inputs.
You don't have to use this,
but it makes working with common inputs a lot easier.
So, in this case,
I said only things which have userData.clickable
are available to be clicked on.
Then I set up a couple of event handlers.
One is clicking, so on cube.
When it gets a click event,
I'm gonna print and click the cube
and set the color of the material to red.
The pointer enters the cube,
then we set the color to green.
And when the pointer exits the cube,
we set the color back to white, and that's it.
That's sets up everything you saw in my scene.
There's one other important function, which is render.
Now, initContent, it is called once
when the whole webpage starts up.
Render is called on every single frame,
so, ideally, 60 or more times every second.
And the render function,
if there's a pointer, will update the pointer.
If there's stats, it'll update the stats.
If the cube object exists,
it's gonna update the rotation
by a tiny fraction of an angle.
So, that is what makes the cube rotate around.
And then it calls renderer.render,
and that's what actually draws that into the screen.
So, this function will be called 60 times every second.
Below that is the actual setup for all
of the underlying ThreeJS and WebVR stuff.
Generally, I can leave this how I want.
It's there if I wanna modify it, but I almost never do.
So, that is what gives us our VR webpage.
And if I'm on a VR device, then I could hit this button
and actually go into immersive mode.
I always start with getting something on the screen
so that I know that everything is working.
Even though I'm gonna take the cube
and the cat out very quickly,
I wanna make sure that everything is in place first
and then start customizing.
So, I started with a boilerplate.
This handles the standard setup of 3D graphics
and jumping into WebVR.
It has two functions.
One is render, which is called every second
just to draw stuff, and then initContent.
That's called once at the beginning.
What that will do is set the background of my entire scene,
add some geometry and material to create the cube object,
turn on some debugging,
load up an image and add it to the cube,
and then a little bit of input handling
so I get the nice mouse-over effect.
So now that we have the webpage setup,
we need to get some real 3D objects,
something a little more interesting than the cube.
So, in the next section,
we're gonna go get some really cool objects
from a place called Sketchfab.
(soft drum music)