Original subtitles

A 3D primer, 3D Graphics is all about representing shapes in a 3D space used in a coordinate system.

The renderer in 3D that we will be using is the Web G.L. Renderer.

And so we will focus in the course on the coordinate system used by WGL, which looks like this other

coordinate systems are common, such as Z pointing up.

But in our course, Y will always point up.

Notice that assuming the viewer is looking down the negatives that access, then the X axis extends

to the right, the y axis extends outwards and the Z access points towards the viewer.

This arrangement is sometimes referred to as a u.

S e up s.

If the camera is positioned high in the Y axis and looks directly down, then the east and south directions

are more obvious.

Objects are defined using vertices, a single one is called a vertex, is a vector value.

If you're not sure what a vector is, don't worry, it's simple.

A vector is simply a group of numbers.

A single number is a scalar.

But if we use two numbers together, then this is a vector for a vertex.

It needs an X, Y and Z value.

And so in 3D terminology is a vector three a vector with three numeric values.

An object is made out of vertices and faces.

Suppose we have a cube.

This has eight vertices and six faces.

Each face has four edges.

Imagine the top face of this cube has the vertices.

We want to be three and the four a.m. is a vector three property.

The stores, the direction in which a face is pointing the length of the X Factor is usually a unit

length.

That is, it's one unit long.

And finally the face will need to describe how it's coloured, possibly as a simple color.

Or it could be by mapping an image onto the face.

When an image is mapped, a 3D engine needs to know how to place the image on each face that uses it.

To facilitate this, a vertex not only has to know the X, Y and Z values, it also needs to know the

X and Y value of the image map.

This is usually called the UV value.

This is a vector to a vector with two values.

You represents how far left to right and very up and down the UV value zero zero would select the bottom

left corner of the image while the UV value one one would select the top right.

By carefully selecting the movie values, a 3D artist can map an image onto a complex mesh in the 3D

application we load in our 3D objects in the materials.

Then we can move, rotate and scale them using the 3D library.

You might be relieved to know that we very rarely have to be concerned about the underlying details

of the mathematics.

The converse this into an image on screen.

But in principle, Webjet uses shade as a shade.

It consists of a vertex shader and a fragment shader.

The vertex shader moves the vertex into the normalized Kleppe coordinates.

That is, X, Y and Z are all converted into values between minus one and one three.

Yes, as all the shaders you'll need for most things in general, 3D will do the mathematical heavy

lifting, but it's useful to know that the library uses a matrix for the model.

The moon rotates and scales it another for the view, which takes the camera's position into consideration.

And finally, a matrix that projects this onto the 2D screen as well as the Vertex shader.

We also have a fragment shader.

This works at the pixel level.

The fragment shader follows the vertex shader and so already has the vertices converted into eclipse

based coordinates.

The purpose of the fragment shader is to determine the color for the individual pixel.

The process of taking the 3D data and turning this into a 2D picture is often called the rendering pipeline

and takes this form.

So that's what's happening under the hood.

But when you creating web apps using 3D, unless you want to start writing your own shaders, you'll

be working principally the 3D object level.

So you won't need to worry about vertices and pixels.

I hold this brief overview gives you an insight into what happens for all 3D apps from visualizations

to games.

But it's time for us to look at some examples and in the next video will do just that.

Hope to see you in a minute.