[WebGL Primer] 23, light effect of reflected light

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

All kinds of light

last time, and last time, the lighting effect was introduced through the vertex shader. At the beginning, the light emitted from the parallel light source was introduced, the disadvantage of the parallel light source was introduced last time, and the method of the corresponding disadvantage is the environmental light source. This is the third part of light processing, which further introduces reflected illumination. The reflected light, like its name, simulates the reflection of light. By reflecting the light , you can make the 3D scene more realistic. Specifically, reflective light can make the model shine, like metal, with a smooth textured surface. So the effect of reflection light is very large. By the Way, specular direct translation, is specular reflection, that is, like a mirror reflection of the meaning.

The concept of reflected light

The diffuse light emitted from the parallel light source, through the direction of light (light vector) and the direction of the polygon (surface normal vector), to calculate the degree of diffusion of the surface, so as to achieve light. The strongest light is the color of the model, and conversely, where it is not illuminated, it becomes dark.

But, like the metal texture, is the performance of gloss, only with the diffusion of light is not enough. Why, the strongest part of the light, is only to show the original color of the model, to show the luster, you need to show a highlight such a strong light effect.

Modify the vertex shader, although it can also be highlighted by diffused light, but most of the situations will feel unnatural. This is because the diffusion light does not take into account the sight. Diffuse light, just consider the direction of the light and the direction of the polygon. The reflected light will take into account the view of the model and the direction of light, showing the highlight of the part will be very natural.

The intensity of the reflected light can be calculated by the vector representing the line of sight and the vector of the light, plus the surface normal vector. If you think about it, it is the light emitted from the light, hitting the model of the reflection, the direction of the reflected light if it coincides with the line of sight, this is the strongest light. As shown in the following:

Simulating the reflected light like this would have to be done with high load calculations. Here, there is a way to use a relatively simple processing to obtain similar results, that is, by the light vector and the line of sight vector intermediate vector to find a similar effect of the reflected light.

Using the approximate processing of the reflected light from the intermediate vectors, the intermediate vectors of the light vector and the line of sight vectors are obtained, and then the inner product of the intermediate vector and the normal vector is obtained, thus determining the intensity of the reflected light.

The inner product of the polygon normal vector has been done before. In the calculation of the parallel light source, the inner product of the light vector and the normal vector is computed. And this process is the same, this time to find the intermediate vector and the inner product of the normal vector. In this way, you can simply simulate the effect of the reflected light.

Modification of vertex Shaders

this time, as in the previous one, all are computed in the vertex shader, passing the final computed color intelligence to the fragment shader. > code for vertex shaders

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 in    Vlight = 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 (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);} 

this time, instead of adding the attribute variable, the uniform variable that represents theline of sight vector is added eyedirect ion, and the line of sight is not different from each vertex intelligence. All vertices are handled consistently, so the uniform modifier is used. like the principle of diffused light emitted by a parallel source, the inverse matrix of the model coordinate transformation matrix is used to transform the line of sight vectors, and the vector of the line of sight and the intermediate vectors of the light vectors are saved into the halfle. Then the surface normal vector is calculated by the inner product and the light reflection. here is a new built-in function, that is, to assign value to the variable specular when the function of the POW, this function is used to exponentiation, such as 2 square, 2 of the three-square calculation. because the reflection light is for the sake of strong illumination, the result obtained by the inner product is exponentiation, and then the result range is limited. The results obtained by the inner product use the CLAMP function to limit the range to 0.0 ~ 1.0, after exponentiation, the small number will become smaller, and the strongest light state is 1, no matter how many times the power, also remains 1.

The reflected light is based on exponentiation, which makes the effect of weak light weaker, while the effect of strong light is not changed. in this way, the reflective effect of strong light can be reflected more. In addition, the number of times to reduce the power, it will be the part of the bright spot coverage will become larger, to achieve local flicker and other effects, appropriate to the power of the number of control can be achieved. The intensity coefficient of the reflected light is used in the same way as the ambient light, so the color part also uses the addition operation, the final color calculation formula is as follows. color = vertex color * Diffuse light + reflected light + ambient lightNote that only vertex colors and diffuse light calculations are multiplicative.
modifying JavaScript codethen modify the main code section. The vertex shader makes several complicated modifications, but the modification is not much , mainly using the uniform variable to pass through the line of sight vector processing. > Access to uniformlocation processing

The uniformlocation is stored in the array var unilocation = new Array (); unilocation[0] = Gl.getuniformlocation (PRG, ' Mvpmatrix '); UNILOCATION[1] = gl.getuniformlocation (PRG, ' Invmatrix '); unilocation[2] = Gl.getuniformlocation (PRG, ' lightDirection '); unilocation[3] = Gl.getuniformlocation (PRG, ' eyedirection '); unilocation[4] = Gl.getuniformlocation (PRG, ' Ambientcolor ');

after the correct uniformlocation is obtained , the line of sight vector is defined and passed to the shader. Basically, the coordinates of the lens specified when generating the view coordinate transformation matrix are considered as line of sight vectors. (The focus point of the lens is the origin)> Definition and writing of line of sight vectors

View x projection coordinate transformation matrix M.lookat ([0.0, 0.0, 20.0], [0, 0, 0], [0, 1, 0], Vmatrix); m.perspective (GB, C.width/c.height, 0.1, N, PM Atrix); 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];//ambient light color var ambientcolor = [0.1, 0.1, 0.1, 1.0];//(middle part code slightly)//uniform variable write GL.UNIFORMMATRIX4FV (unilocati On[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 a vec3 with three elements in the shader, so it is passed to the shader with a UNIFORM3FV function. This time the demo and the light vector is the same, so the line of sight vector is also in the continuous cycle of time processing.
SummaryWell, the knowledge of reflective light is basically understood. compared with the algorithms involved so far, today's algorithm is not difficult, that is, the calculation from the light source of light vector and line of sight vector between the semi-vector, and then the surface normal vector to find the inner product, so the relative load is not small. However, this only simulates the effect of reflected light to some extent, not the very strict calculation of reflected light. from the results of the rendering, the torus has become very beautiful, the actual effect, Please refer to the link at the end of the article. Next, introduce the high and complementary coloring. Demo with diffused light, ambient light and reflected light renderinghttp://wgld.org/s/sample_011/

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

[WebGL Primer] 23, light effect of reflected light