THREE. JS getting started tutorial (2) Coloring er-on

Translation
Three. js is a great open-source WebGL library. WebGL allows JavaScript to operate on GPUs and implement 3D in the browser. However, this technology is still in its development stage, and there is a shortage of materials. Fans should learn it through the Demo source code and the source code of Three. js.

0. Introduction
Previously, I have provided an article titled getting started with Three. js. If you have not read it, you may need to read it. The Basics of this article are based on that tutorial.

I 'd like to discuss about the coloring tool. Before Three. js helps you save a lot of trouble, native WebGL is excellent. Sometimes, you may want to complete some specific effects, or want to study more deeply about the things displayed on your screen, then the shader will surely enter your field of view. If you are like me, you also want to implement something more interesting than the basics in the previous tutorial. In this tutorial, I will explain the basics of Three. js, which have actually done a lot of boring work for us.
Before I start, I would like to mention that this tutorial will have a considerable amount of space to explain the code of the colorant. Later, there will be a tutorial that will move forward on the basis of the colorant code, what to do with the coloring tool. This is because the shaders does not seem easy to understand at first glance and requires some explanation.
1. Two coloring ers
WebGL does not have a fixed rendering pipeline, so you cannot directly use a black box-type coloring machine (note: the graphics cards of the last century basically only support a Fixed rendering pipeline ); webGL provides a programmable pipeline, which is more powerful but harder to understand and use. In short, the programmable rendering pipeline means that the programmer gets the vertex and draws it on the screen. The shader is a part of the rendering pipeline and has two types:
1. vertex shader
2. Cell Coloring Tool
What you should know is that these two paintors are completely running on the GPU of the video card. We unload the data that needs to be processed from the CPU and load it to the GPU, reduces the CPU usage. Modern GPUs have greatly optimized the computing types of calls required by the shader, so it is worth doing so.
2. vertex shader
A primitive shape, such as a sphere, is composed of vertices, right? The vertex shader is passed in one of these vertices in sequence and then processed. How to deal with each vertex can be customized, but the vertex shader has a required thing, that is, to assign a value to a variable named gl_Position, which is a 4-dimensional array, the final position of the vertex on the screen. This is an interesting process in itself, because we are actually talking about how to convert a three-dimensional coordinate (a vertex with x, y, and z worth it) to, or project it to a two-dimensional screen. Thank God, if we were using Three. js and other tools, we could easily access gl_Position.
3. Cell Coloring Tool
Now we have a 3D object that contains vertices. Now we need to project the object to a two-dimensional screen, but where is the color? What about texture and illumination? This is exactly what the Cell Coloring tool needs to process.
Similar to the vertex coloring tool, the bitwise coloring tool has a task that must be completed: set or remove the variable gl_FragColor, And the other four-dimensional floating point variable, that is, the final color of the vertex. What is a piece of RMB? Imagine a triangle with three vertices. Slice elements are all points within the triangle after these three vertices are calculated. Therefore, the segment element value is generated by interpolation of the vertex value. If the color of a vertex is red and the color of the adjacent vertex is blue, we can observe that the color changes from red to purple, and eventually changes to Blue near the Blue vertex.
4. shader Variables
There are three types of color filter variables: Uniforma, Attributes, and Varyings. When I heard these three words for the first time, I was confused because they were completely different from what I used before. But now you can understand them as follows:
1. The Uniforms variables can be passed in either the vertex coloring tool or the chip coloring tool, which contains the variables that remain unchanged throughout the rendering process, such as the position of a point light source.
2. Attributes variables correspond to each vertex. They can only be passed into the vertex shader. For example, each vertex has a color. The Attributes variables and vertices correspond one to one.
3. The Varyings variable is defined in the vertex shader and is to be passed into the metachinder. To ensure this, we need to ensure that the types and names of variables in the two pasters are exactly the same. A typical application is the normal vector, because the normal is used for illumination calculation.
In the next tutorial, I will use these three variables. You will also learn how to apply these three variables.
Now we have talked about vertex pasters, fragment pasters, and three types of paintors. It's time to look at a simple shader we can create.
5. Hello World)
Here is a simple Vertex coloring tool:
Copy codeThe Code is as follows:
/**
* Multiply the coordinates of each vertex by the model view matrix by the projection matrix.
* Obtain the coordinates on the two-dimensional screen
*/
Void main (){
Gl_Position = projectionMatrix *
ModelViewMatrix *
Vec4 (position, 1.0 );
}

One of the simplest bitwise coloring devices:
Copy codeThe Code is as follows:
/**
* Set any pixel color to pink
*/
Void main (){
Gl_FragColor = vec4 (1.0, // R
0.0, // G
1.0, // B
(1.0); //
}

This is all. If you run it directly now, you can see a "no light" pink shape on the screen. Not very complex, right?

In the vertex shader, we pass in some uniforms variables through Three. js. There are two 4 × 4 matrix uniforms variables: Model View matrix and projection matrix. You don't need to know how these two matrices work. Simply put, these two matrices describe how the three-dimensional coordinate is projected into the coordinates on a two-dimensional screen.

In fact, I only introduced these two short segments. Three. js has added them before your own shader code, so you don't have to worry. To be honest, Three. js also adds many things in front of your code, such as illumination data, node color, and Node Method vectors. If Three. js does not exist, you need to create and set these objects in person.
6. Use the shadow Material
Copy codeThe Code is as follows:
/**
* Suppose we can use JQuery
* Extract the code text of the shader from the DOM.
*/
Var vShader = $ ('vertexshader ');
Var fShader = $ ('fragmentshader ');
Var shaderMaterial =
New THREE. ShaderMaterial ({
VertexShader: vShader. text (),
FragmentShader: fShader. text ()
});

From here on, Three. js will compile and run your shader, connect it to the material you created, and attach the material to the mesh you created. It has not become easier than true. Maybe so, but we are considering browser 3D programming. I think you should have expected that this topic is complex.

We can also add two other attributes, uniforms and attributes, like the coloring material. They can be vectors, integers, or floating-point numbers, but as I said before, the uniforms variables remain unchanged during calculation, so they are more likely to be single values, the attributes variables are for each vertex, so they should be arrays. In a mesh, attribute variables and vertices correspond one to one.
7. Summary
This tutorial is here. In fact, I have already mentioned a lot, but in many aspects, I have only swept away. In the next tutorial, I will provide a complex shader through which I will pass in some attributes variables and uniforms variables to simulate some illumination effects.
I have packaged the source code of this tutorial. You can download it as a reference.