[Getting started with WebGL] Twenty-four, complementary coloring, webgl getting started with complementary coloring

[Getting started with WebGL] Twenty-four, complementary coloring, webgl getting started with complementary coloring

Note: The article is translated from http://wgld.org/, the original author shanbenya (doxas). If I have additional instructions in the article, I will add [lufy:]. In addition, the research on webgl is not in-depth enough, and some professional words are required, if the translation is incorrect, please correct me.

Running result of this demo

Coloring Method

The last time we introduced the reflected light, the reflected light is an indispensable concept for achieving luster. By now, the basic illumination effects have been encapsulated. The main effect of illumination is diffuse light, ambient light, and reflected light. The three illumination methods can be used flexibly to achieve very realistic lighting effects. I have been talking about lighting for the first few articles. This time, I will change my point of view and look at coloring. Coloring is a big topic. This time I will talk about Gao's coloring and complementary coloring.

Gouraud shading)

From the perspective of the name, it is difficult to understand what kind of coloring is. This gouraud is actually named by Henri Gouraud who studies the coloring.

Lufy: Gouraud Shading: this is also a popular color rendering technology, it can smooth and combine the colors of vertices in the 3D model, assign each vertex on each polygon to a set of color values, and place the Polygon on a smoother gradient color, make its appearance more real-time and three-dimensional dynamic, but its coloring speed is much slower than that of plane coloring, but the effect is much better.

Gao's coloring can complement the colors between the vertices of a polygon. The computing load of Gao's coloring is not too high. However, it can achieve very beautiful rendering, so it is often used.

What does it mean to supplement the color between vertices?

To put it simply, the final color intelligence obtained by using the colorant algorithm is suitable for all vertices, And the colors between the top vertex and the vertex are supplemented to render the model.

It is difficult to use a small number of vertices to render beautiful light. For example, a simple triangle polygon only has this triangle in a three-dimensional space, and the plane directly collides with light.

When a radioactive light source (such as a light bulb) is used, the center of the triangle should be the brightest, And the vertex part should be slightly darker, but Gao's coloring is only used to fill the color between the vertices, therefore, the highlights in the middle of the triangle cannot be highlighted.
In addition, because the color is supplemented based on each vertex, the color will appear in the case of color changes. This sawtooth gradually disappears with the increase in the number of vertices, but in this case, the advantage of low computing load of Gao's coloring is gone, so this is a difficult place to deal.

Careful friends may find that all the demos on this website are colored by Gao's. The light intensity and color of the vertex coloring machine are calculated, and then the final color is transmitted to the segment coloring machine. The color calculation method based on each vertex is Gao's coloring.
The following is the evidence that the colors in the demo so far are jagged and there will be some unnatural mirror reflection.

After expansion, we can see it clearly. The smaller the number of vertices, the more obvious this phenomenon.

Phong shading)
After understanding Gao's coloring, Let's see complementary coloring.
As I mentioned earlier, compared with Gao's coloring, the color between vertices is supplemented, and the color of each pixel is supplemented. That is to say, the calculation amount will be much larger than that of Gao's coloring, but the color details can be rendered.
The name of complementary coloring is the same as that of Gao's coloring. They are all named by the user name (Bui Tuong Phong. If you use complementary colors, it will overcome the weakness of Gao's coloring, even if the number of vertices is small, it will be very natural.

Because the complementary color is used to fill the color between pixels, there will be no unnatural sawtooth. The following is a comparison with the rendering Effect of Gao's coloring.

It is completely the same number of vertices, and the complementary coloring and gaoshi coloring rendered by the same light source. The left side is complementary coloring. Both the shadow and highlighted parts are very beautiful and natural.

The encapsulation of complementary coloring knows the difference between Gao's coloring and complementary coloring. Let's take a look at the encapsulation of complementary coloring. Color population coloring is what we just said. The color population processing is performed between pixels. So far, all the illumination processing in the vertex coloring tool has to be handed over to the fragment coloring tool.
Specifically, append a processing method. The normal information of the vertex in the vertex coloring tool is transmitted to the fragment coloring tool using the varying variable, and all other illumination processing is moved to the fragment coloring tool.
First, let's look at the code of the vertex shader.

> Vertex coloring code

attribute vec3 position;attribute vec3 normal;attribute vec4 color;uniform   mat4 mvpMatrix;varying   vec3 vNormal;varying   vec4 vColor;void main(void){    vNormal     = normal;    vColor      = color;    gl_Position = mvpMatrix * vec4(position, 1.0);}

Unlike the code so far, a new varying variable named vNormal is defined to pass the normal intelligence to the fragment shader. Color intelligence and coordinate transformation matrix of vertices do not need to be changed.
The next step is the fragment shader.

> Fragment shader code

precision mediump float;uniform mat4 invMatrix;uniform vec3 lightDirection;uniform vec3 eyeDirection;uniform vec4 ambientColor;varying vec3 vNormal;varying vec4 vColor;void main(void){    vec3  invLight  = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz;    vec3  invEye    = normalize(invMatrix * vec4(eyeDirection, 0.0)).xyz;    vec3  halfLE    = normalize(invLight + invEye);    float diffuse   = clamp(dot(vNormal, invLight), 0.0, 1.0);    float specular  = pow(clamp(dot(vNormal, halfLE), 0.0, 1.0), 50.0);    vec4  destColor = vColor * vec4(vec3(diffuse), 1.0) + vec4(vec3(specular), 1.0) + ambientColor;    gl_FragColor    = destColor;}

All the data that has been used in vertex pasters, such as the inverse matrix, light vector, and line of sight vector, has been moved to the fragment Paster. In addition, the varying variable vNormal defined in the vertex shader is used for calculation. The calculation method is the same as before and has not changed. That is to say, we just put the processing in the vertex coloring tool into the fragment coloring tool.
In this change, no new uniform variable is added. That is to say, javascript basically does not need to be changed.
Simply put, the main difference between Gao's coloring and complementary coloring is that Processing Based on vertices is based on pixels. Although this is a bit strange than definition, there is nothing wrong with understanding this.

In conclusion, the two coloring schemes are described respectively. The advantage of the coloring scheme is that the calculation workload is relatively low. Compared with the coloring scheme, the rendering effect is not natural.
Complementary coloring is the opposite. The calculation workload is high, but the rendering effect is perfect.
The method depends on the number of vertices of the model, the rendering effect required, and the computing load that the execution environment can bear.
In practical application, it is very important to use different methods based on the scenario used and the model of plotting.
A demo is also prepared this time. Anyone who is eager to see the running effect can click the final link of the article to test it.

In addition, this demo made several changes to the Ring Body generation function. The returned value is returned based on the situation of the object and the color of the ring body can be specified. In fact, there is nothing special to deal.

Next time, we will introduce the electric light source.

Ring Body rendered with complementary colors

Http://wgld.org/s/sample_012/

Reprinted Please note: