A small demo of the Development Diary (a)

Ah ~re:0 how so praise Ah ~

Ah ~

=====================================================

Well, I know I haven't updated it in a long time.

It doesn't matter! Emt!

=====================================================

Well, go to the chase, uh, ww.

?

I. Composition of 3D geometry

Before you get to the point, let me say something about ... Well... How to say it, the foundation of something.

?

In the final analysis, these scenes are used in the game.

What are they?

How do they make up?

How did they get painted on the screen?

Why do I put a few lights in the scene, they can be reflective, there are shadows, a variety of effects?

?

We all know that a computer program is executed by a line of instructions. So how did the above process be done? If the process is not clear, there is no way to " deeply transform " it-

?

Personally, there is no way to do this if you do not know the contents of this demo.

In this demo--

• In order for the tree to have a smooth growth process, but also beautiful, I need to fully use the program to generate the model of this tree.

  And I can't make a decent tree in the final analysis. Probably... Can make a slime that is growing up.

• In order to make the leaves look a little better, I hope I can control the calculation of the light myself.

  and Unity's pbr/gi I don't have the confidence to be stuck on surface. Still ugly.

• In order to have a good sky and day and night alternating, I hope I can figure out what the whole sky is like.

  And the stuff in the asset store is too expensive. If you can afford it, write it by yourself (by mistake.

• ......

(PBR: A rendering technique based on physical model; GI: Global illumination)

?

... So, I need to do it myself. So, I need to understand how this process (as mentioned above) is going on.

Of course, many details are overlooked.

?

So first, we need to show the whole scene. It's probably a point of entry.

But in this demo we don't have to think about scenarios. Unity has done for us; we just need to consider the "shape" and "map" and so on for an object in the scene.

?

We know that in today's rendering system, objects are made up of a bunch of facets. Just like the teapot below:

?

The quadrilateral faces make up the teapot. But in fact we are not concerned with the face, but the vertex of the face. If we adjust the position of the vertex , it will affect some of the changes in the face, and ultimately the change in the shape of the teapot.

?

In addition to the location, vertices have many other properties. For example, to set a " color " property on the vertex , then we can color the teapot. And as the color of the vertex changes, the color of the teapot's surface changes accordingly.

(A simplified example, there are three vertices that are red , Green , and Blue , respectively.) ）

?

Now we have the vertices. To represent them, each attribute of all vertices is represented as an array:

[A's position, B's position, ...]

[A's color, B's color, ...]

...

?

All right. But now we have just a bunch of vertices, and we need to make them a face. To do this, we need to tell the computer: which points should make up a face?

Suppose here, the faces are triangular faces. We also represent it as an array:

[0, 1, 2, 0, 2, 3, 0, 3, 4, 0, 4, 5, ...]

This means: 0-1-2 is a face, 0-2-3 is a face, 0-3-4 is a face, ...

Here the number is the ordinal of the vertex, in this case A is vertex 0,b is vertex 1.

?

OK, now we have the whole model. How do you draw it?

This part is the work of the graphics card (graphics processor, GPU). First, we throw these arrays to the graphics card, and then--

?

The video card converts the data in these arrays into points in space that have their properties.

This process can be used to artificially set the process of conversion, and finally what kind of properties they should have. This is also done by writing a small program that must contain a function that receives a column in a pile of arrays, the location of the point in the output space, and its various property values. This procedure is called a vertex shader (Vertex Shader).

?

Then, after a few programmable and non-programmable processes, these points eventually form a polygon.

It then passes through a process called rasterization, which is mapped to some pixels. It's a bit like a drawing program pulling a circle, and then it "falls into" the pixel and becomes a picture of the process.

?

Note that until now, these pixels have no color.

These pixels, however, each have attribute values, which are computed from the property values set in the previous step: like the gradient of a color, each property value undergoes a "gradient" process and is then referred to as the property value of a pixel .

The process of "gradient" is called interpolation. This is a linear interpolation.

?

Then we get the attribute value of a pixel, and we need to figure out the color of that pixel.

This step can also be programmed. The purpose of this function is to enter the attribute value and output a color value (RGBA), which is called the fragment/Pixel shader (Fragment Shader or Pixel Shader).

?

Finally, after a few messy processes (such as throwing away the blocked vertices, etc.), the image is finally presented to us.

?

In the example of the gradient triangle above, the color value is passed in as the vertex position, the color value is left intact in the vertex shader, as the input value of the pixel shader (which already has a gradient), and the pixel shader then outputs it as it is, which is the image.

The above is a simplified rendering process.

(Do you want to see the real stuff, www?) ）

But in fact most of us do not care about the middle lump. So also do not square W

?

So, what is each object made of?

As previously mentioned, objects are made up of vertices, and each vertex has many kinds of attributes. In fact, the "color" used as an example above is not a commonly used attribute, so there are several commonly used properties:

location . This is a must.

normal . This represents the direction of the vertex, which can be used to determine whether it is facing the light source. The normal is a unit vector (length 1).

texture coordinates . This represents how a picture of a map should be "pasted" onto the model.

tangent . Used to establish tangent space. More advanced technology will be used, you can not care about first.

A mess of some of the custom parameters . Of course--you want to pass some of your own stuff into the shader, and no one's going to stop you.

?

The normal words are probably this way:

?

The texture coordinates (which are distinguished from the coordinates and are commonly used (U, v) are represented):

It can be understood that there are several points on the map that are marked with vertices, and the points marked on the map are nailed to the corresponding vertices. That's probably the feeling.

?

Tangent :

In fact, this thing can not first, but it is quite important.

Sometimes in calculations we need to use tangent space: the orthogonal base (XYZ axis) of this space is made up of vertex normals (N) and two unit vectors perpendicular to the normals (B & T) . In fact, there are infinitely many vectors perpendicular to the normals (a plane), so we need to artificially specify a unit vector that is perpendicular to it for easy calculation. This man-made vector is tangent (t), then we can simply multiply N and T fork to get B, which establishes tangent space.

n:normal (normal vector),

t:tangent (tangent vector),

B:bi-normal (the number of pairs of normal vectors)

?

One word is not so many words ... Okay, I'll see you next, W.

?

?

?

?

E M T!

K M T!

?

(Pixivid = 56926503)

A small demo of the Development Diary (a)