[MUSIC]
[SOUND] Hey everybody, I'm Nick Pettit. My Twitter handle is @nickrp.
And today we're gonna be talking about 3D in the browser.
We're going to get into you know, applications for 3D in the browser.
Why you might you use it.
What it's not and a whole bunch of cool stuff.
And of course, if I don't answer all of your questions by the end of this or if
there's something that you feel like you didn't quite
understand, you can go ahead and post in the forum.
And if you're a Treehouse member, you can post in the forum.
Ask your questions and Treehouse students are wonderful
moderators as and as well as Treehouse teachers
will be happy to answer your questions, so that is a really great way to get help.
All right, so,
let's talk about the state of 3D in a web browser.
Of course, web browsers are more traditionally known for 2D graphics.
Right, especially now with the flat design kind of taking over the world.
We have the box model in CSS.
Browsers are really good at displaying things in 2D.
So, that can be somewhat expensive though, because
all of that processing is happening on the CPU.
So in most computers, you have a CPU, the central
processing unit, as well as the GPU, the graphics processing unit.
Web browsers traditionally haven't really taken advantage of the GPU.
They've only really used the CPU and
that can be computationally expensive when you are rendering anything at all.
The CPU is not optimized for rendering really anything
other than very simple 2D graphics. So having the
ability to use the GPU is really amazing. And that's what
we're gonna talk about today using using
three.js and webGL and a couple of newer technologies.
So
we talked about how there's kind of this separation between the CPU
and the GPU. And on the the GPU, like I said, you
traditionally could not access that through the web browser, but now you can.
And that's enabled, with the technology called WebGL.
However, WebGL is kind of kind
of complex to use in its raw form. It's a port of
OpenGL into the web browser and it doesn't have quite
one-to-one feature parity with OpenGL but it's pretty good.
Of course, OpenGL is a graphics technology that's used to render
real-time 3D games. So, any kinda game you play on a
Mac or on iOS and even on some gaming consoles now,
OpenGL is used very heavily to do real-time 3D graphics.
All that tech is now in the browser in the form of webGL.
Browser support isn't great just yet.
You can go to 10IUs.com to check out the matrix of support for webGL
right now.
I think, actually, let's go ahead and take a look
at Can I use, to see what that looks like currently.
And look at that, in the search, they actually suggest typing in WebGL.
So, if you look here, support in Firefox is okay, support Chrome
is okay, Safari has partial support. Actually Firefox has partial
support but it's supported for a little bit longer.
Safari you have to actually go ahead and enable WebGL.
It's not enabled by default, and it's only been
recently supported in the latest version of Internet Explorer.
And it's not supported at all on mobile devices.
So, that's something right up front you gonna keep in mind.
When I am talking about 3D here, one thing I am not talking about is stereoscopic 3D.
So, we are not talking about the type of 3D that
you might see in a 3D movie or the cinema, where.
Or on like 3D televisions where there are two images and you have like a
red and a blue channel and wear 3D glasses and it is combined together to
create this image that appears to pop out of the screen.
Rather we're talking about real time 3D similar to
what you might find in a video game, where
frames are rendered at roughly 30 to 60 frames
per second and everything has to happen in real-time.
So, let's go ahead and take a look at what that actually looks like.
As I said previously, using WebGL
in its raw form is pretty tricky.
It's it's a very low level, form of
3D graphics programming, but using a framework on top
of that, of which there are a few can make it a little bit easier to work with.
So, this is a framework called three.js and
it's the framework we're going to be taking a
look at in a little bit more detail today.
We are going to create a very simple project.
If you go to threejs.org, you'll see all
sorts of sample projects that are built using three.js.
So we have this race card here, this project
was a music video and there's your nan cat,
you'll find a lot of games here.
In fact, that's one of the primary
applications of WebGL currently is in gaming
there is this pretty wonderful example of a car here.
We'll take a look at that and there's this example of
a logo and I'll want to take a look at that.
So,
this is being rendered in real time in the browser and that's pretty amazing.
This is, you know, something that was not available for a really long time.
I think this is kind of the evolution that people expected to happen maybe
ten or fifteen years ago, back when, well, maybe even longer.
I think people kind of expected the web to make this leap into more
of a virtual reality type space where you can
kind of you know, browse things in three dimensions.
Oop, somebody just took over my mouse, I think, Oop, and it's back.
Okay.
I think this is the direction that people expected 3D to take
some time back and it never really did. But now it's here and, I think
the lingering question is, what to do with it.
People don't quite know, you know, what 3D should really be used for.
One thing that like I said previously 3D can be used for is is for games.
Sorry looked like there's a magic mouse somewhere
that's taking over control of my, my computer here.
Okay, there we go,
but 3D has kind of struggled to find it's application in the, in the browser.
People have thought about using it for, for games and
in fact there's actually a company that is trying to build
a game engine using Web GL actually they've already done it.
They've built this really wonderful game engine.
And they're trying to kind of recreate games like StarCraft you know.
They are trying to build these real time
strategy games and they've done a pretty great job.
There they, I guess have generated
a lot of interest.
But so far, you know, we haven't seen a whole lot out of Artillery just yet.
Again this is still early days for, for 3D.
So, one of the other applications though I think is products.
So, imagine you could go ahead and take a look at, you know, a product like
a car, for example. Which is kind of a higher-priced
item and you might want to be able to
take a look at what you're getting in more detail.
And it could be good for consumer electronics as well.
Where you go ahead and look at, you know, an electronic device in 3D.
You can kind of imagine maybe doing like the next iPhone this way.
Where Apple might use this newer browser tech on their site to show off
you know, whatever new products they have on offer.
But once again 3D is so struggling to find its, its application browser.
So that's something that remains to be seen.
It's, you know, so still early days here. One other
cool application is to create some sort of
logo or 3D effect like this. This is
acko.net or a blog of Steven Wittens.
And if we scroll down here, you can see
that, this is actually being rendered in full 3D here.
And we can click on this little play
button and it'll sort of play a music video.
So, it's pretty cool. You know, in the day, in the days of flat
design here, it's, it may seem a little bit out of place to see all of this nice
shading and shadowing and you know, sort of fancy effects like this.
But, I think that that aesthetic will kind of come into
its own, come back around and we will be able to use
things like this a little bit more effectively.
So anyway, those are some of the things that you can do with
with three.js and all those projects that you just saw were built in three.js.
There's a ton more stuff to check out here so be
sure to go to threejs.org and look at all of the projects.
I, one thing that I have noticed is that movies are using this a little bit more.
the, let's see if I can hover over that, I
think that the new Wizard of Oz movie did some kind of 3D experience, there's that.
The Hobbit had a pretty good WebGL site.
The site for Gravity is pretty cool. I'm wondering if this is going
to load up here.
Let's see, app, special features, there's like a 3D
experience they had here,
anyway, it's there, I promise.
I'll let you check that out on your own time.
So go ahead threejs.org and go ahead and check that out.
So, how is this actually working? well,
it's, it's kind of a combination of things you might've
seen before and some newer things. So I
have the Treehouse logo in 3D
here and this the project we're gonna put together real quick here.
And this is done using a canvas context.
So, let me go ahead and open up Chrome dev
tools here and we're gonna hover over and select that item.
You will see that all that's on this page
is just some JavaScript and this canvas which is
taking up the entire, the entire view of the browser.
I also have a paragraph here but that's just kind of overlaid.
So, let's let's go back here three.js will
actually embed a canvas onto the page. So,
you do all the stuff in three.js, so just, in pure JavaScript
and that will go ahead and create a canvas context on the page.
It will give you your webGL rendering engine,
so that's one reason we don't wanna demonstrate webGL.
It's just going to be way to difficult to build
your own rending engine.
So let's go ahead and dig into this code.
One thing that again I do wanna point out is browser compatibility.
You'll likely wanna do this in Google Chrome if you
can but if you're using Firefox or Safari that's okay.
It should still work just fine except the only thing you'll have to do in Safari,
is going to Preferences here. So let me open up the Preferences and
then, let's see here. You'd go to the Advanced tab.
So I'm
going to pull that back up. Advanced.
And then there should be, let's see yes, Show Develop menu in the toolbar.
And then you have to open the Develop menu and click Enable
WebGL and then WebGL should work in Safari at that point, so there we go.
So,
I've included a couple of things here to get us started.
One thing is the actual mesh that, we're gonna be using for the actual
geometry and then the other thing is, the orbit controls.
So, that's were we can go ahead click around with
the mouse and kind of drag our model around here.
And we can zoom in and out,
to look at the model in more detail.
And that's, that's all the orbit controls do.
Let's go ahead and open those up.
This is all, kind of, complex code, you want
to avoid writing yourself. Unless you have very specific camera
controls in mind that you want to build out for a
more specific application. If you can go ahead and reuse any of the
controls that three.js provides for you, you want to go ahead and try to do that.
So let me go to three.js
here and see where this, these orbit controls,
are documented.
One of the things about three.js is that
the documentation for it is not that great yet.
Let's see, camera
controls, not finding it. Alright
that controls three.js and
my blog post on Treehouse blog
is one of
the top hits, wonderful. Living on the edge here, okay.
well, that's cool, not what we want, though.
So, well, I can't find where those orbit controls came from.
I'm pretty sure I got them on GitHub when I originally wrote this blog post.
But you can go ahead and download that code and the orbit
controls as well as the mesh will be included in the code download.
So, no worries there.
So that
should be all the JavaScript you need. The orbit controls
and the model. Now, this model, I exported from Blender.
Blender is a free 3D modeling application. You can use, I think, a couple of other
exporters that three.js has available, so let me see if
that's documented, pretty sure it is. Let's see exporters.
No. Models,
mesh, Blender.
Nope. Oops.
[BLANK_AUDIO]
I think it might be.
[BLANK_AUDIO]
One of the loaders or
[BLANK_AUDIO]
in the Objects here.
hm, I think the documentation changed because I'm pretty
sure that the exporters were detailed here at some point.
Anyway, we'll go to Blender, pull that up and Blender 3D
exporter. There we go.
[SOUND] So, Blender, like I said,
is this 3D, is a free 3D
modeling application. You can go ahead and get that at
blender.org and then there is an exporter for Blender that
you can install to export your 3D models.
So, once you install Blender, you can go ahead and create.
Here is 3D scene and then you can go to
File>Export>three.js and you can go ahead and save that out.
I have already done that for the Treehouse model.
So, tree, or treelogo.js
is the model that you, you will be able to download.
And that code download and the code will look something like this and the
way that it's formatted is well, there's a, there's a couple things here.
First, well, it's JavaScript object notation formatting, so
there's some metadata about the mesh and Then
there's all of the vertices, so right here is where all of the geometry is stored.
And, you'll find that this is pretty huge
here, because there's quite a lot of geometry, in that model.
There's what are called surface normals. There's all of the faces.
So those are all the triangles and
basically where they're located in 3D space.
And then we have a
material here which is a concept in Blender that you can go ahead
and use in three.js as well.
So, we have the ambient color and the diffuse color.
And I think that is just an rgb color here.
Yeah.
So you can see three values here for red, green and blue.
So
that's how you get models out of, out of Blender.
You can use other 3D apps as well and I believe there's
exporters for a couple of different popular ones, like Maya and 3DS Max.
And that will give you your geometry.
And then, there's three.js which is pretty epically long.
This is the entirety
of three.js. It's all compacted and minified like this
but, like I said previously, best way to navigate
three.js is to use their documentation here at three.js.org.
And you can go ahead and look at all of the various
concepts in three.js that will help you build up your scenes.
So,
let's go to the index.html file
for this particular project cause this is where really everything is built out.
So, we start out this project. Let me just pull this up here.
There we go.
We start this out with a couple of variables.
There's the scene, the camera and the renderer, and then we make two function
calls to the initialize function or init and the animate function.
Now it might not seem like there's
any animation happening here, but there actually
is a, a little bit because whenever we drag
around the orbit controls we need to update the scene.
We need to update the, the frame and what we're actually looking at.
So, this is animated.
I mean you know, we have to render every one of these frames.
So, let's go back, and
let's look at these two functions.
You'll see that we're doing all of this in a fairly small amount of code.
This is the entirety of index.html for this project
and really everything's happening just between these two script tags.
So it looks like we're looking at hm, just like 80
lines of code there or so, actually less than that, about 70.
So it's not too bad, and a lot of this is comments, too, remember.
So let's look at each one of those variables scene here, makes
a call to a new three.js
scene. And then it sets a width and a height
for that scene using the window inner width and
the window in our height.
Now this is just straight up JavaScript right here.
You're making a call to the window and getting its
width and height, and then we're storing that in a variable.
So that we don't have to call the width and the
height over and over again, because that can get pretty expensive.
So we're just calling it once, and we're reusing it.
But what is this scene here?
Well, let's go ahead and dig into the documentation and let's look at scene.
I think that might be under cameras actually.
There's a scene loader. Scenes.
Ooh, that looks like what I want. Okay.
So, scenes allow you to setup what and
where is to be rendered by three.js. This is where you place objects,
lights and camera. So, in our scene here,
we are basically setting up a couple of things.
It's the object that we are gonna be using to set a couple of other things.
All right?
And it basically defines the space in which our 3D world exists.
So, next we have to pick a renderer and
three.js comes with a couple different renderers.
We of course want to use the WebGL renders.
Let's see if I can pull this up.
Here we go.
We wanna use the WebGL renderer, because it's going to creates a WebGL context in
the browser that will go ahead and use the GPU.
Whereas we can use the canvas renderer here but it's gonna be a lot slower.
At one point I think the, I think three.js had an
SVG renderer but it doesn't look like that's part of three.js anymore.
All this stuff does change pretty quickly.
But the canvas renderer gonna be a lot slower.
And it's really not it's
just gonna be orders of magnitude slower it's, it's a software renderer.
So using WebGL will allow you to access the GPU.
So we're gonna say WebGL renderer and we're gonna set antialiasing
to true. So let's see what that means.
We'll go to the WebGL renderer and antialiasing it says
is a Boolean which means it can be true or false.
And let's go down to
antialiasing. Well that's the only place that it
is listed.
Antialiasing basically means that it is going to smooth out the jagged edges
along the 3D model. So, if I were to turn this off.
Lets go ahead and do that.
[NOISE] So, lets say, antialiasing is false.
Do you see that? It looks a lot more pixelated.
You got kinda these jaggies along the edges of the model and
that's not really aesthetically pleasing, so we wanna keep that set true.
Here's where we set the size of the render.
We want the renderer to be the same size as the width and height of the seam.
That might seem obvious, but there may be certain contexts where you don't want
to do that. And then, we take the renderer and we
append it to the body of document and if we look at
index.html here just to kinda get a broad overview of it's structure.
We are including three.js.
We include the orbit controls.
We have this JavaScript here and then we close out with the body tag.
So, like I said, everything happening in JavaScript.
We're actually appending the canvas
element to the body here. So there's a body.
There's our canvas.
It has a width and height and that's happening
right there, on line 31. So,
next we need to create a camera, We actually can't see
anything in the scene without a camera or I could just comment this out.
Actually not sure what's gonna happen,.
Yeah, it's not gonna render anything.
That can be the frustrating thing about 3D, is
if you get something wrong, there's not great error
outputs this might be the best it's gonna do for you.
So don't get frustrated if you you don't see anything in the browser.
It probably just means that you skipped one of these steps here.
So camera is a new three.js perspective camera, as opposed to
an orthographic camera, I think.
Let's see perspec, yeah, as opposed to an OrthographicCamera.
Now, I wonder if that has exact same arguments, let's just go ahead and stick
that in to see if it will still render. [SOUND] Not quite.
What is it expecting? Left, right, top, bottom, near, far.
Okay. Yeah, that's not going to match up
quite right with a perspective camera arguments.
That's okay.
Basically this will create more of kind of
a flat look won't be rendered in perspective.
Actually I wonder if I can show this in Blender real quick.
Let's see.
My Blender fu is off today. That's okay.
Anyway we want to render this in perspective.
And the perspective camera takes a couple arguments.
You need a field of view, so we set that to 45 degrees.
Let's go back to our code here, there we go.
The aspect ratio of the camera is simply the width divided by the height.
And so once again we're using the window inner width and inner height.
And we're just pulling that once, storing it in a
variable instead of having to call that over and over again.
So, width divided by the height; there's our aspect ratio.
And then, the near and the far plane, that is basically
how far out something has to be from the camera before it'll stop rendering.
Or how close something has to be to the camera before it'll start rendering.
So, I'll
get my example back here, if I were to say
let's say, this is six units away from the model.
If this were something like 15.
I think we should. Whoop, it doesn't even render.
Ten, nope. Let's see, five, there we go.
So, here's something weird.
We're five units away from
or rather if we, if we set the near parameter to five, the camera isn't
actually gonna start rendering anything until the object is five units away.
So if I zoom out a little bit, there we go, now it's five units
away, but if I zoom in too much It's actually going to click into the geometry.
Same thing with a far plain so let's see if we can get that to click.
I set that 220.
Nope still not enough. Five.
Oh, yeah. There we go.
There's some weirdness as well. the far clip here is, you might
have seen something like this in a video game, where
if you're trying to look far of into the distance.
You'll notice that it doesn't render like distant objects, very well
or they kinda pop into the world all of the sudden.
That's basically all that's happening is the
far renderer distance is just quite far enough.
Of course, the larger that range is the more processing power
you need to render the scene.
You know, there could be a lot more
geometry that having to be rendered onto the GPU.
It's that might be something to
cut, if you have various performance considerations.
So now we're setting the position of the camera so once again, we have the camera.
Which we created as a new three.js perspective
camera and then we can go ahead and set it's properties so if we go down
here, it should be positioned somewhere.
Oh boy, doesn't quite look like it.
[BLANK_AUDIO]
hm. Actually, you know what, I bet that's just
a property for all objects in three.js.
This might be [NOISE] yeah, position. Let's see
if I can search for that. [NOISE] let's do this,
[NOISE] cameras [NOISE], object 3D, there it is,
there it is, okay. So, position is what's called a Vector3.
It's three float values, which are just the
x, y, and z coordinates of a particular object.
so, you can set this for any 3D object in three.js.
So,
camera inherits from Object3D and that's basically how
we're getting that Vector3 there. So we set that to
X, Y and Z, 0, 6, 0 and then, we add the camera to the scene.
So let me get back to my example there. There we go.
Now, here is an interesting bit of code.
What happens if we resize the browser window?
Well, a couple things have to happen.
First, we need to add an event listener to the window to listen for resizes.
So, when I resize the browser, it's
actually fairly expensive, computationally, to do that.
Because now I have to re-set width and height, right?
I also have to have an event listener to watch for any time the browser is resized.
And then I need to set the size of the render again.
Remember we did that earlier.
We need to change the aspect ratio of the camera, so camera.aspect.
And then we need to update the projection matrix
by camera. What does that mean?
Let's look.
We'll go to camera, update projection matrix
so it says this updates the camera projection matrix, very descriptive.
Must be called after a change of parameters.
So basically any time you're going to adjust something like the aspect
ratio or the field of view or really any other camera parameters.
You need to call this function updateProjectionMatrix
so that's, things like this don't happen.
You can see how I'm adjusting the aspect ratio
and it's kind of warping and stretching my view here.
So let's turn that back on.
Boom, there we go.
Now, renderer.setClearColorHex
sets the background color of the scene and it accepts two arguments here: a hex
decimal color and I think that's alpha. Let's try that.
See.
Yeah I think that's the alpha channel.
So if I set that to like 0.5 or some other float value it'll be slightly transparent.
But that's just setting
the background color of the renderer. Pretty simple there.
If you're familiar with hex decimal colors in CSS this is the same thing.
You just have to add 0x to the front of it.
Next, we need to create lighting. So, lets go ahead and delete this light.
See what that looks like.
This is what this 3D world looks like when there is no light.
It's completely dark and it can't see any kind of color or
really anything about this model other than a shape and a background.
So,
first, we create a light and the type of light
we are gonna create, in this case, is a point light.
And then we set the color of that light so again, let's
look at the documentation go to lights there is point light.
And pretty much just as we're doing in this example is
what they're doing here. It's takes a hex decimal color, a numeric
value, the RGB component of the color, intensity, numeric value of the lights and
strength or intensity, and then distance.
So we're just setting the color here, these other arguments are optional.
And then we're setting the position to X, Y and
Z again this is Vector3 to negative 100, 200, and 100.
And then we add light to the scene, that's it.
It's, it's pretty simple,
and that's what gives us our lighting.
So, if we were to change this to something else.
Let's see, this is probably going to look really ugly.
Trying to get color here. There we go.
Something like bright red, no green, and kind of a
medium amount of blue which is this purplish color.
It will cast that color lighting onto the model.
But I'm just going to set that back to
white, and that will give us our, our color back.
So now, we need to load our mesh into the scene.
Here we're using the JSONLoader or JavaScript object notation loader.
There's a couple of different loaders in three.js.
Let's
go to, yep, there we go, the
JSONloader,
so you have to create the loader.
And then you have to tell the loader that you actually want to load the geometry.
So let's split out these arguments so that we can read them a little bit better.
See.
Right, there we go.
So,
I'm passing in two things here.
One, is the URL. So a mash in three.js
is just a URL just like you might include a CSS file or
a JavaScript file. You go ahead and say this mash is
in models its called treehouse_logo.js pretty straightforward stuff.
The next is a callback. And it
says this function will be called, with the loaded model, as an instance
of geometry, when the load is completed. And
then inside of this, I'm saying, I want to load
THREE.MeshLambertMaterial so, let's look at that.
And, basically all that's doing is just setting a color.
So, I load the material.
I say, I just wants, this basic diffuse color of 55B663.
So, that's just a hexadecimal color and that's green in this case.
I'm just saying I want this mesh to be green I don't have any other
you know, textures I want to apply.
So for example you could apply texture maps, environment
maps, reflectivity, all sorts of shaders, surface novas, etc.
We're not gonna do any of that. Then,
I say okay, that's the mesh that I wanna add.
We create the mesh and then we add it to the scene.
So, little bit complex there, but
if you look at the basic formatting there, there's actually not a whole lot going on
or just loading in the model and floating in the material.
So then we add the orbit controls and huh, I
really thought that orbit controls were part of three.js.
So I guess this is just, yeah, it's just extending
that particular name space and adding orbitControls.
So
it's, there we go. So the OrbitControls take
two arguments here, takes the camera then it takes the renderer.
And that will just allows us to tie basic mouse
you know, just the basic click and drag functionality.
Zooming in and out with the mouse wheel and allows to
kind of, move around our our mesh a little bit more easily.
So, all that stuff we went over is the initialization function.
It gets called right here.
Next is the animate function.
Which is here and there's three things happening.
First recalling requestAnimationFrame, animate, what is that?
Well,
Paul Irish wrote this wonderful blog
post About requestAnimationFrame and it says, in
your animation work you've used a timer
loop to make changes every few milliseconds.
Browser vendors decided hey, why don't we just give you an
API for that because we can probably optimize some things for you.
So the browsers always going to be faster then
any kind of JavaScript code that you're gonna write.
So all it is, is a basic API for you to use with animation.
So that could be changes you make to the DOM.
So styling changes could be something on a canvas.
It could be something that's happening in WebGL.
But if we just call that there anytime something changes it
will go ahead and be a little more efficient then what
we would otherwise code.
So that's just a straight up API coded browser.
Then we go ahead and render the scene.
So, we make a call to the renderer. So, remember
that is a variable that we created outside the scope of both those functions.
And then we say render the scene and a camera.
Let's go back to the documentation here and let me see
if we can pull that up. There
we go.
So, we have the WebGLRenderer here and we make a call
to the function renderer. Let's see, if
I can find it. There we go.
And the renderer, again, we're using here is the WebGLRenderer.
And we give it a scene and a camera. So,
it created that scene and we created our camera in the scene and that
will go ahead and build it out anytime you need to animate something.
And then, we also need
to call controls update. So, that's a function call here.
Lets see.
[SOUND] Oops,
controls. Deletes, I can't find it.
It's somewhere in there, I promise.
Anyway, we update the controls and that's pretty much it.
That's kind of a basic three.js scene, and you end up
with something that looks like this. Now, there's a slight problem
with just downloading this code and viewing it in your browser.
So, if I try to this,
so I just have the code I downloaded, right?
And I just opened this file in Google Chrome.
It doesn't look like anything is happening, you know, there is absolutely
nothing being rendered here. The problem is that
you have to kind of setup your local environment to be actually
running a server.
So, in this blog post, I, I said DOMScript has a security feature
called the same origin policy and you can read all about that in Wikipedia.
Basically, all it is, is just a security feature of JavaScript.
That means you can't load externally hosted files inside your JavaScript code
and the problem with that in three.js is right here.
Where is it? There we go.
Right here.
We're doing exactly that, we're trying to
call another piece of JavaScript inside of our,
our file, right? So you can't do that, you have to have the
same origin and we don't have the same origin on a local file server.
So you need to go ahead and actually
create this yourself or start running a simple server.
I like to use a Python server, when I'm doing local development work like that.
So if you have Python installed in your computer You can just go
ahead and type python with m argument
SimpleHTTPServer and then you specify port number.
And that will go ahead and start up, just a simple HTTP
server. So you go to localhost:800
and then you can navigate to whatever folder your project is stored in.
So, it will go ahead and list out the directory here.
I can click there and it will load up my project, because now
we've circumvented that same origin issue.
This isn't really a problem when you upload to
a real server, but it can be a bit puzzling
if you're just starting out and you try to
download the project and nothing is appearing in the browser.
I think there's one more thing, I wanna look at first here and then
we can take some questions. Lets see.
I have a Chrome extension
installed. See if I can find that.
Yes, the WebGL Inspector.
I go ahead. [SOUND] And load up the page for
that. [SOUND]
So, this is just a, a debugging tool that can help you kind
of dig into WebGL scenes, so
not a great screen shot of it. But they'll also kind
of give you a hint as to whether or not there's a WebGL context being loaded up
So I'm just going to click on these little controls it gives here.
And, I can see, if any kind of textures are being, being loaded up.
Not in this case.
And you can
look at other bits of information here. Let me look at a more complex scene here,
just to show This is a bit more detailed. And lets go to
three.js and lets go back to our car example.
There we go.
And
oh, doesn't always work perfectly.
Okay.
There we go.
And you can kind of start to see how
some of these things are broken out into various textures.
Looks like a lot of these textures are just to, to load up the, the room.
Let's see if I can refresh there.
Remove that. Well, I broke it.
Okay.
Well, it looks like a good place to stop and, take some questions here.
Jason asks, any thoughts on using 3D
like this as progressive, as a progressive enhancement?
So progressive enhancement is basically where you have
kind of more of a basic look to your
site or you know, you're using more basic technologies.
And maybe, you know, more advanced
technologies aren't necessarily supported in a browser.
I'm explaining that really badly.
[LAUGH] but yeah, you can definitely use this as a form of progressive enhancement.
So, for example, If you were looking at maybe a 2D picture
of like a product and you wanted a more enhanced
version of that for browser supported 3D. You could ahead and, and certainly
do that maybe swap it out or detect whether or not WebGL is
enabled in a, in that person's browser. And if it is, go ahead and
just swap out the image and load up your 3D context.
Nick asks have you seen Epic Games is
doing with the unreal engine in the browser?
Do you think we'll see that sort of
tech applied to non-gaming web content in the future?
possibly.
Let me go ahead and show you
in Firefox here. Let's see,
what am I looking for? Firefox
unreal engine. Here we go.
This is probably gonna take just a second to load up
here, cuz there's a lot of geometry and textures is to download.
Let's hear what that question was again.
Have you seen what Epic Games is doing with the unreal engine browser?
Do you think we'll see that sort of
tech applied to non-gaming content in the future?
Possibly. So, oh gosh this website is
dumped into use more than 50 megabytes of data on your computer for offline use.
Yes that's fine.
There we go. So let's, let's make this bigger.
So, this is a pretty impressive tech demo from Mozilla and
we are using the, the unreal engine.
It's, it, I think it only works in Firefox.
Actually, I tried in Google Chrome and it seemed to work okay.
But they're using all sorts of fancy effects here.
So for example if you look at, like,
this brick texture here, you see how they're applying lighting to the
the bricks and they kinda look sort of 3D-ish.
That's using an effect called normal mapping.
So they have
normal maps, bump maps, and a diffusion map to kind of
model a lot of the geometry that, you know, would
be fairly expensive to model with with triangles.
So, instead, they are just doing with with texture maps.
Whether or not, we'll see type of technology applied to non-gaming
contexts and I'm not sure, I mean that's something
that's kinda interesting about the 3D right
now is it's really Pretty open ended.
I think a lot of people wanted this technology for a long
time and now that, can I get a rid of this tutorial?
There you go.
And now what we have it's, it's kind of this alien in the browser,
I guess you could say.
It's hard to, really find a real application for this.
I mean it's certainly cool, ya know, and it will certainly, you
know look impressive on a resume. [COUGH]
But, there we go, there's a nice view of the castle.
I think this type of thing is going to be useful for products.
I, I think, you know, if you have a high priced product, like
you know a a car or a phone. Or some other consumer
electronic that may involve more of a purchasing
decision, where somebody really needs to think about that's actually
worth their money, then it totally makes
sense. Because it can be difficult to
try before you buy in some instances, so it'd be nice to kinda have, you know, a 3D
model that you can turn around in the browser and look at, and interact with.
That's important part of this is that it's, it's all interactive.
So you could you know have that model of a
car and have the car door open up, you could
go inside the car, you could look at all the
dials and gauges, kind of click on all of the buttons.
You could even take that car for a test drive in the
browser and kind of you know, drive it around this imaginary course.
There's all sorts of stuff you could do.
And I think that's really where 3D in the browser
will start to make a little bit more sense, or see more practical use.
But, like I said, people are building games with this.
So, I mean, the Unreal Engine, or at least Unreal Engine3
here has been ported over. And there's also Artillery games,
which are, let's see, so, they're a company, they're trying
to build, you know, this game engine in in the browser.
You know, they're building this real-time strategy game.
And
I guess they're planning to open source all these
tools or make this kind of stuff available to developers.
They are using WebGL they are not however,
using three.js, at least I don't think they are.
They're billing their own, rendering engine
which is ambitious, but kind of neat.
So last question, is there a parameter to control the camera's focus.
That's interesting.
So probably. I'm sure that you could
if you maybe wanted to do sort of a depth of field type effect.
C. Da-da-daa.
I can
find that. There we
go. yes, so setLens, you can
set the focal length and you can set
the frame size. Actually want to try that right now.
Let's see if we can [SOUND] make that hop up or make that work.
This is just a
tutorial for 35 millimeter lenses and not terribly
useful. So focal length.
This is focal length in millimeters, okay? To estimate and
set fieldOfView, 35mm.
Full frame camera is used if frame size is not specified.
This may or may not do what we want, but lets just try it out anyway.
See what happens. Oops.
So.
Right up here where we are setting up camera parameters.
Let's say camera.
hm, what was the? Lens okay, set.
Ooh, how is that working? Perspective camera yeah.
Hm.
I'm just gonna see if this, this does something.
Save that.
Oops.
[BLANK_AUDIO]
Wow, that's, that's definitely having some kind of effect, isn't it?
Whoa!
Well, I think the lesson here is that I don't really know
a whole lot about focal lines, and, I should've read that tutorial.
All right, well, that's,um, [LAUGH] that's pretty
much all we're gonna get into today.
I am Nick Pettit.
My Twitter handle is @nickrp We do these every Tuesday at 2 p.m.,
So hopefully I will see you next week.
For more infomation >> 《夾娃娃大挑戰》我猜中了前頭，可是我猜不著這結局!!! - Duration: 2:19. 
For more infomation >> The Last Enemy - Death
For more infomation >> EXPLOSÃO FORTE COM CANETINHA 🎨 SUSTO - Duration: 8:23. 
For more infomation >> Entrevista com M. Carrique, I. Viana e C. Puigrefagut - Eliminatórias Sul-Americanas - Duration: 2:46. 
For more infomation >> Citroën DS5 1.6 E-HDI SO CHIC AUTOMAAT | PANORAMADAK | CLIMATE - Duration: 1:31. 
For more infomation >> Pretty Link Tutorial - Gerenciando e Personalizando Links de Afiliados - Duration: 8:36. 
For more infomation >> Validar ideia de negocio - Duration: 1:17. 
For more infomation >> Opel Astra 1.0 T 77KW 5-DRS EDITION - Duration: 1:35. 
For more infomation >> İçinizdeki Zalimden Kurtulun (altyazılı) - Duration: 20:35. 
For more infomation >> Elderly Woman Lifted Out of Home in Bathtub During Tornado - Duration: 2:55. 
No comments:
Post a Comment