translation Sequence
Three.js is a great open source WebGL Library, WebGL allows JavaScript to manipulate the GPU, realizing the true meaning of 3D at the browser end. But at present this technology is still in the development stage, the material is extremely scarce, the amateur learns basically to through the demo source code and three.js own source code to study.
0. Introduction
I have already given an article "start using Three.js". If you haven't read it, you may need to read it, based on that tutorial.
I'd like to discuss the shader. The original WEBGL was excellent before three.js helped you save yourself a lot of trouble. Sometimes you may want to do something specific, or you might want to delve deeper into what appears on your screen, and the shader will definitely enter your field of vision. If you are like me, you also want to achieve something more interesting than the basics of the previous tutorial. In this tutorial, I'll explain the basics of three.js, which actually do a lot of boring work for us.
Before I begin, I would say that this tutorial will have a considerable amount of space to explain the shader code, and then there will be a tutorial on the basis of the shader code, and use the shader to do something. This is because the shader shaders at first glance does not seem easy to understand, and requires some explanation.
1. Two kinds of coloring device
WebGL does not have a fixed rendering pipeline, you cannot directly use a black-box shader: The graphics cards of the last century basically support only fixed rendering pipelines; WebGL provides programmable pipelines, which are more powerful but more difficult to understand and use. To make a long story short, a programmable rendering pipeline means that the person writing the program is responsible for capturing the vertex and drawing it on the screen. The shader is part of the render pipeline and has two shaders:
1. Vertex shader
2. Flake Coloring Device
What you should know is that both of these shaders are completely running on the GPU of the graphics card, and we will remove the data that needs to be processed from the CPU and load it onto the GPU to reduce the CPU's Fudan. The modern GPU has been greatly optimized for the types of operations required by the shader, which is worth it.
2. Vertex shader
A primitive shape, such as a sphere, is made up of vertices, isn't it? The vertex shader is passed into one of these vertices and then processed. How to handle each vertex is freely customizable, but the vertex shader has one thing to do, which is to assign a value to a variable named Gl_position, which is a 4-D array that represents 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 (an x, Y, z-worthy vertex) to, or to a two-dimensional, screen. Thankfully, if we use tools such as three.js, we can easily access gl_position.
3. Flake Coloring Device
Now we have three-dimensional objects that contain vertices, and now we're going to project the objects onto the two-dimensional screen, but where are the colors? What about textures and lighting? This is exactly what the chip shader has to deal with.
Like vertex shaders, the slice shader has a task that must be completed: Set or eliminate variable gl_fragcolor, another four-dimensional floating-point variable, the final color of the slice point. What is a piece of yuan? Imagine a triangle with three vertices, and the slice is the point that passes through the three vertices, all within the triangle. Therefore, the slice value is generated by inserting the value of the vertex. 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 the top of the red vertex to the purple from the red to the blue at the end of the blue vertex.
4. Shader variable
When it comes to shader variables, there are three kinds: uniforma,attributes and varyings. When I first heard these three words, I was confused because they didn't match the things I used before. But now, you can understand them this way:
A 1.Uniforms variable can either pass in the vertex shader or pass in the slice shader, which contains variables that remain unchanged throughout the rendering process, such as the position of a point light source.
2.Attributes variables correspond to each vertex, and they can only be passed in to the vertex shader, for example, each vertex has a color. The relationship between the attributes variable and the vertex is one by one corresponding.
A 3.Varyings variable is a variable that is defined in the vertex shader and is ready to be passed in to the slice shader. To ensure this, we need to make sure that the type and name of the variable are exactly the same in the two shader. A classic application is the normal vector, because the normal is needed to compute the illumination.
In a later tutorial, I'll use these three variables and you'll learn how these three variables actually apply.
Now, we've talked about vertex shaders, slice shaders, and three shader variables. It's time to look at one of the simplest shaders we can create.
5.Hello World (translator: Can not show French AH)
Here is one of the simplest vertex shaders:
Copy Code code as follows:
/**
* Each vertex coordinate times the model view matrix multiplied by the projection matrix
* Get the coordinates on the two-dimensional screen
*/
void Main () {
Gl_position = ProjectionMatrix *
Modelviewmatrix *
VEC4 (position,1.0);
}
One of the simplest piece-element shaders:
Copy Code code as follows:
/**
* Set any one of the pixels color to Pink
*/
void Main () {
Gl_fragcolor = VEC4 (1.0,//R
0.0,//G
1.0,//B
1.0); A
}
That's all. If you run it now, you can see a "no light" pink form on the screen. It's not very complicated, is it?
In the vertex shader, we passed some uniforms variables through the three.js. There are two 4x4 matrix uniforms variables: The Model view matrix and the projection matrix. You don't need to know too much about how these two matrices work. In short, these two matrices describe how the three-dimensional point coordinates are projected as coordinates on a two-dimensional screen.
In fact, I've only covered these two short snippets of code. Three.js have added them before your own shader code, so you don't have to worry. To be honest, Three.js also adds a lot of stuff to the front of your code, such as lighting data, node colors, and nodal vector vectors, and so on. If there is no three.js you have to create and set these objects yourself, really.
6. Use Coloring equipment Quality
Copy Code code as follows:
/**
* Suppose we can use jquery
* Extract the shader's code text from the DOM
*/
var Vshader = $ (' vertexshader ');
var Fshader = $ (' Fragmentshader ');
var shadermaterial =
New THREE. Shadermaterial ({
VertexShader:vShader.text (),
FragmentShader:fShader.text ()
});
From here, 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 doesn't get any easier than it really is. Maybe so, but we're thinking about 3D programming in browsers, and I think you should expect that the topic is a certain complexity.
We can also add two other attributes like coloring equipment: uniforms and attributes. They can be vectors, integers, or floating-point numbers, but as I said before, uniforms variables remain unchanged in the process of computing, so they are more likely to be a single value, and attributes variables are for each vertex, so they should be arrays. In a mesh, attribute variables and vertices should be one by one corresponding.
7. Summary
This tutorial is here, in fact I have said a lot, but in many ways I just swept through. In the next tutorial I'll provide a complex shader, through which I'll pass in some attributes variables and uniforms variables to do some simulated lighting.
I have packaged the source code for this tutorial, and you can download it as a reference
