[Getting started with WebGL] Twenty-three, the illumination effect of reflected light, And webgl illumination

[Getting started with WebGL] Twenty-three, the illumination effect of reflected light, And webgl illumination

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

Various types of illumination

Last time and last time, we introduced how to achieve illumination through Vertex coloring devices. First, we introduced the light emitted from a parallel light source. The last time we introduced the shortcomings of a parallel light source, The method corresponding to this disadvantage is the environmental light source.This is the third part of illumination processing, which further introduces the reflection illumination. The reflection light, like its name, is the reflection of analog light. Reflected light, It makes 3D scenes more realistic.Specifically, reflected light can make the model shine, just like metal, Smooth and textured surface. Therefore, reflected light is very useful.By the way, if specular is translated directly, it is a mirror reflection, It means reflection like a mirror.

Concept of reflected light

The light from the diffuse light emitted from a parallel light source is calculated by the light direction (light vector) and the plane direction (Plane Normal Vector), so as to realize the illumination. The most intense light is the color of the model. On the contrary, the dark color of a place not illuminated.

However, a texture like a metal is a manifestation of luster, and it is not enough to use only diffuse light. Why? The most intense part of the light only shows the original color of the model. To show the luster, You need to highlight the strong light.

You can modify the vertex coloring tool to highlight the color only by spreading the light. However, it is not natural in most cases. This is because the proliferation of light will not consider the line of sight. Diffuse Light only considers the direction of light and the direction of the plane. When reflecting light, you will consider the line of sight and light of the viewing model, and the highlighted part will be very natural.

The line of sight vector and the light vector, plus the above normal vector, can calculate the intensity of reflected light. If you think about it, the light emitted from the light source is reflected on the model. If the direction of the reflected light is exactly the same as that of the line of sight, this is the most intense light. As shown in:

Simulating the reflected light like this requires high-load computing. Here, there is a way to get similar results through simple processing, that is, to obtain similar results of reflected light through the light vector and the center vector of the line of sight vector.

Using the approximate processing of reflected light obtained by the Intermediate Vector, first obtain the center vector of the Light vector and the line of sight vector, and then obtain the Inner Product of the center vector and the area normal vector to determine the intensity of reflected light.

We have done the Inner Product of the Surface Normal Vector before. When calculating a parallel light source, the inner product of the Light vector and the surface normal vector is calculated. This is the same as the processing process. This time, we calculate the Inner Product of the intermediate vector and the surface normal vector. In this way, we can simply simulate the effect of reflected light.

Modification of vertex coloring er

This time, like the previous one, all are calculated in the vertex coloring tool, Pass the final calculated color information to the segment coloring tool.> Vertex coloring code

attribute vec3 position;attribute vec3 normal;attribute vec4 color;uniform   mat4 mvpMatrix;uniform   mat4 invMatrix;uniform   vec3 lightDirection;uniform   vec3 eyeDirection;uniform   vec4 ambientColor;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(normal, invLight), 0.0, 1.0);    float specular = pow(clamp(dot(normal, halfLE), 0.0, 1.0), 50.0);    vec4  light    = color * vec4(vec3(diffuse), 1.0) + vec4(vec3(specular), 1.0);    vColor         = light + ambientColor;    gl_Position    = mvpMatrix * vec4(position, 1.0);}

No attribute variable is added this time, Instead, the uniform variable eyeDirect that represents the line of sight vector is added. Ion, the line of sight vector is not different from each vertex intelligence, All vertices are processed in the same way, so the uniform modifier is used.The principle is the same as that of the diffuse light emitted by the same light source, Use the inverse matrix of the model coordinate transformation matrix to transform the line of sight vector, The transformed line of sight vector and the center vector of the Light vector are stored in halfLE, Then, calculate the Inner Product of the face vector and perform optical reflection calculation.Here, a new built-in function is a function pow used to assign values to the specular variable. This function is used to evaluate the power, such as the square of 2, the 3rd power of 2. Because the reflected light is used to reflect the strong light radiation, the power calculation is performed based on the result obtained by the inner product, and then the result range is limited. Use the clamp function to limit the result obtained from inner product to 0.0 ~ 1.0, after the power is obtained, a small number will become smaller and smaller, and the biggest glare state is 1, no matter how many times the power is obtained, it is still 1.

The reflected light is calculated based on the power operation to make the effect of low light weaker, while the effect of strong light remains unchanged. In this way, the reflection effect of strong light will be better reflected. In addition, reduce the number of idempotence, The range of highlights of this part will be larger, To achieve partial flickering and other effects, You can control the number of times of power.The intensity coefficient of reflected light is the same as that of ambient light, Therefore, the color part also uses addition. The formula for calculating the final color is as follows.Color = vertex color * diffuse light + reflected light + ambient light note that only the vertex color and diffuse light are calculated as multiplication.
Modify the javascript code and then modify the main code. Vertex coloring ers have made several complex modifications, but there are not many modifications, It mainly uses the uniform variable to pass in the line of sight vector processing.> UniformLocation Processing

// Save the uniformLocation to the Array var uniLocation = new Array (); uniLocation [0] = gl. getUniformLocation (prg, 'mvpmatrix '); uniLocation [1] = gl. getUniformLocation (prg, 'invalmatrix '); uniLocation [2] = gl. getUniformLocation (prg, 'lightdirection'); uniLocation [3] = gl. getUniformLocation (prg, 'eyection ction '); uniLocation [4] = gl. getUniformLocation (prg, 'ambientcolor ');

After obtaining the correct uniformLocation, Define the line of sight vector and pass it to the shadow. Basically, Set the coordinates of the specified lens when generating the view coordinate transformation matrix, As a line of sight vector. (The starting point of the lens)> Line of sight vector definition and writing

// View X projection coordinate transformation matrix m. lookAt ([0.0, 0.0, 20.0], [0, 0, 0], [0, 1, 0], vMatrix); m. perspective (45, c. width/c. height, 0.1, 100, pMatrix); m. multiply (pMatrix, vMatrix, tmpMatrix); // direction of the parallel light source var lightDirection = [-0.5, 0.5, 0.5]; // viewpoint vector var eyeDirection = [0.0, 0.0, 20.0]; // the color of the ambient light var ambientColor = [0.1, 0.1, 0.1, 1.0]; // (the code in the middle is omitted) // write the gl to the uniform variable. uniformMatrix4fv (uniLocation [0], false, mvpMatrix); gl. uniformMatrix4fv (uniLocation [1], false, invMatrix); gl. uniform3fv (uniLocation [2], lightDirection); gl. uniform3fv (uniLocation [3], eyeDirection); gl. uniform4fv (uniLocation [4], ambientColor );

The line of sight vector is vec3 with three elements in the shadow, Therefore, use the uniform3fv function to pass the filter to the shadow. This demo is the same as the light vector, Therefore, the line of sight vector is also processed in a continuous loop.
To sum up, the knowledge about reflected light has been basically understood. Compared with the algorithms involved so far, today's algorithms are not difficult, that is, Calculates the half vector between the light vector and the line of sight vector from the light source, Then, obtain the inner product from the surface normal vector, so the relative load is not large. However, This only simulates the effect of reflected light to a certain extent, It is not a very strict calculation of reflected light.From the rendering results, the Ring has become very beautiful, and the actual effect is as follows, See the link at the end of the article.Next, we will introduce Gao's coloring and complementary coloring. Demohttp: // wgld.org/s/sample_011/

Reprinted Please note: