[WebGL Primer] 24, complementary coloring

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.

The results of this demo run

Coloring method

The last time the reflection light is introduced, the reflection is the indispensable concept to achieve luster, so far, the basic lighting effect has been encapsulated. The effect of light is mainly diffuse light, environmental light and reflective light three methods, flexible use of these three kinds of light, it should be able to achieve very realistic lighting effect. the previous few have been talking about light, this time a little change of perspective, look at the coloring, coloring is a relatively large topic, this time about the high-color coloring and complementary color.

Gao Shi Coloring (gouraud shading)

Gao's coloring from the name, it is more difficult to understand exactly what kind of coloring, this Gao (Gouraud) is actually to study the coloring of the Henri Gouraud to name.

Lufy: Gao's coloring is also called gourard coloring or high rendering (Gouraud shading): This is a shadow rendering technology is also a popular coloring method, it can be 3D model each vertex color smoothing, fusion processing, each point on each polygon is assigned a set of tonal values, At the same time, the polygon on the more smooth gradient color, so that its appearance has a stronger real-time sense and stereo dynamic, but its coloring speed than the plane coloring much slower but the effect is much better.

High-level coloring can tween the color between the vertices of a polygon, and the computational load of the high-level coloring is not too high, but it can be very beautiful to render, so it is often used.

What does it mean to tween the colors between vertices?

In a nutshell, the final color information obtained from the high-coloring calculation is applied to all vertices, and the color between vertices and vertices is tweened, and the model is finally rendered.

Using high-level coloring, it is difficult to render beautiful light with a small number of vertices. For example, one of the simplest triangular polygons, with only one triangle in the three-dimensional space, is directly colliding with the light.

When the radioactive light source (for example, the bulb), it should be the center of the triangle is the brightest, and the vertices of the part to be slightly darker, but the high-level coloring is only between the vertices of the color tween, so can not highlight the middle of the triangle highlights.
Also, because color tweens are performed on a per-vertex basis, aliasing occurs when the color changes. This sawtooth gradually disappears as the number of vertices increases, but in doing so, the advantage of having a small computational load of high-coloring is lost, so this is a difficult place to deal with.

A careful friend may find that all of the demos on this site are painted with the high. The intensity and color of the vertex shader's light are computed, and then only the resulting color is passed to the fragment shader, and the method of calculating the color based on each vertex is the high coloring.
Here is the evidence that there are jagged colors in the demo so far, and there are some less natural specular reflections.

After the expansion of the words are more clear, the fewer top points, this phenomenon is more obvious.

Complementary coloring (Phong shading)
After understanding the high-level coloring, then look at the complementary color coloring.
As you just said, relative high shading is a tween of the color between vertices, and complementary coloring is the process of color-tween each pixel. That is, the computational amount increases much more than the higher than the coloring, but the details of the color can be rendered.
The name of the complementary color coloring is the same as the high coloring, which is named after the names (Bui Tuong Phong). Coloring with complementary colors will overcome the weakness of high-level coloring, even if the number of vertices can be a very natural effect.

Because complementary coloring is the color tween between pixels, unnatural aliasing does not occur. Here is a comparison with the rendering effect of the high coloring.

is exactly the same vertex number, the same light source renders the complementary color and the high-color coloring. The left side is the complementary color coloring, whether the shadow or the highlight part, are very beautiful and natural.

Package for complementary coloringNow that you know the difference between high and complementary coloring, let's look at the package of complementary coloring. Complementary color coloring is just said, in pixels between the colors of the tween processing, so far in the vertex shader in the light processing, all to the fragment shader.
Specifically, append a handle, the normals of the vertices in the vertex shader are passed to the fragment shader with the varying variable, and then all other light processing is moved to the fragment shader.
First look at the code of the vertex shader.

> code for vertex shaders

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 called vnormal is defined to pass the normal intelligence to the fragment shader. The vertex color information and coordinate transformation matrix are not changed anywhere.
Next 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;}

Inverse matrices, light vectors, line-of-sight vectors, and so on, all the data that has been used in the vertex shader have been moved to the fragment shader. In addition, the varying variable vnormal, which was defined in the vertex shader, is calculated. The method of calculation is the same as before, without any change. That is, only the processing in the vertex shader is placed in the fragment shader.
This change does not add a new uniform variable, that is, the JavaScript part is basically not changed.
In simple terms, the main difference between the high and complementary colors is that the processing is based on vertex processing or pixels, although it is somewhat odd to say so, but there is nothing wrong with this understanding.

Summarizethis time, respectively, the two colors of high-and complementary-color coloring, the advantage of high-level coloring is less computational, and compared with the complementary color, rendering is not natural.
Complementary color coloring is just the opposite, the computational amount is very high, but the rendering effect is perfect.
Choosing that method depends on the number of vertices in the model and the rendering required, as well as the computational load that the execution environment can withstand.
In practical application, it is very important to use different methods according to the use of the scene and the model of the painting.
This time also prepared the demo, anxious to see the effect of the operation of the person can click the end of the article link to test.

In addition, this time the demo has made a few changes to the ring body generation function, the return value is returned in the context of the object, you can specify the color of the torus. In fact, also did not do what other special treatment.

next time, introduce the electric light source.

A torus that is rendered with complementary color coloring.

http://wgld.org/s/sample_012/

reprint Please specify: transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend

[WebGL Primer] 24, complementary coloring