[WebGL Primer] 22, light emitted from an ambient light source

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

Weaknesses of parallel light sources

The last time I challenged the light emitted from a parallel light source. The direction of light in the parallel light source is fixed. Moreover, in order to simulate these, we need to use the inverse matrix of the model transformation matrix, as well as the need to add normal information to the model data and so on.
The computational burden of the parallel light source is relatively small, simulating the illumination effect to some extent, which is often used in the 3D simulation world. However, parallel light sources also have weaknesses, shaded parts, which are not illuminated to the part is not perfect simulation.
For example, in the last demo of the fixed-point shader, carefully observed, to obtain the light vector and the inner product part of the normal, is actually trickery.
> part of the code in the last demo

float Diffuse  = clamp (dot (normal, invlight), 0.1, 1.0);

This uses GLSL's built-in function clamp, which limits the value of the parameter to the specified range, and the above code, the result is limited to between 0.1 and 1.0.

However, to obtain the inner product of the light vector and normal, depending on the use of the situation may appear negative numbers, and the use of the clamp function, even if there is a negative number, will be specified by the minimum value of 0.1 instead, assuming the clamp range is set to 0.0 ~ 1.0 What will be the effect, try to run it, the effect.

In this way, there is absolutely no space to collide with the light will become completely black. This leads to a lack of clarity on the contour of the model, which is a disadvantage of the parallel light source.

As in the last demo, the range of illumination coefficients is set to a certain extent to solve the above problems. However, the use of environmental light sources, can completely solve the problem.

What is ambient light

The ambient light simulates the diffuse reflection of natural daylight in the real world. In the real world, light emitted from the sun or the lighting apparatus, such as sunlight, encounters objects or dust in the atmosphere and so on, reflecting the world. For example, in a dark room, only need a light bulb, back to the light bulb, you will see your shadow mapped to the bed or wall, and your body is not directly illuminated, but should be able to see it.

The reflection of light emitted by the bulb, such as walls and roofs, as well as dust in the bed and atmosphere, can be affected by light even if the part is not directly illuminated. In this way, the diffuse reflection of the light is the ambient light.

Ambient light is used to illuminate all parts of a three-dimensional space. That is, instead of handling the attribute variable according to the different vertices, pass the uniform variable to the shader. Further, the ambient light ultimately affects the color output in the context, processing the color information containing four elements.

> Example of defining ambient light

var ambientcolor = [0.1,0.1,0.1,1.0];

When using ambient light, be aware of the brightness of the color. The ambient light is all, such as the 0.1 specified in the above code, and if all are replaced by 1.0, the model becomes all white. Peaceful light source is different, so pay attention.

The color of ambient light, preferably limited to 0.2 or less, this time the demo uses 0.1.

Modification of vertex shaders and JavaScript

Next, look at the changes in the individual code sections. Start with the vertex shader first.

> Vertex Shader Code

Attribute vec3 position;attribute vec3 normal;attribute vec4 color;uniform   mat4 mvpmatrix;uniform   mat4 Invmatrix;uniform   vec3 lightdirection;uniform   vec4 ambientcolor;varying   vec4 vcolor;void Main (void) {    vec3  invlight = Normalize (Invmatrix * VEC4 (lightdirection, 0.0)). xyz;    float Diffuse  = clamp (dot (normal, invlight), 0.0, 1.0);    Vcolor         = color * VEC4 (VEC3 (diffuse), 1.0) + Ambientcolor;    Gl_position    = Mvpmatrix * VEC4 (Position, 1.0);}

A uniform variable was appended last time, which is the variable ambientcolor of the VEC4 type. Ambient light after a series of calculations such as parallel lights, the final output color phase begins to be added.

Here, if you use multiplication without adding, the whole picture will be dimmed, so pay special attention.

Next, modify the main program.

In other words, only the ambient light is passed as a parameter to the vertex shader, and the addition of the object is quite small.

First, the parameters of the ambient light are defined in the program.

> Increase Ambient light parameters

var ambientcolor = [0.1,0.1,0.1,1.0];

Next, in order to correctly pass to the vertex shader, append gets the uniformlocation of the shader.

Save Uniformlocation to 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, ' ambientcolor ');

Then, as the uniform variable is passed to the shader at the time of the continuous loop.

> Parameters for transmitting ambient light to shaders

GL.UNIFORMMATRIX4FV (Unilocation[0], false, Mvpmatrix); GL.UNIFORMMATRIX4FV (Unilocation[1], false, Invmatrix); GL.UNIFORM3FV (unilocation[2], lightdirection); GL.UNIFORM4FV (unilocation[3], ambientcolor);

This completes the modification of the vertex shader and JavaScript program.

In fact, because this time the introduction of environmental light source, so the light factor of the parallel light source is set to 0.0 ~ 1.0, not by the parallel light source of the part, will use pure ambient light to illuminate.

Summarize

Ambient light simulates the diffuse reflection of light in nature and compensates for the disadvantage of parallel light sources. In general, these two types of light will be used simultaneously. Only using ambient light, can not show the model of the bump, only the use of parallel light source, the shadow is too serious to distinguish the contour of the model.

The representative of diffused light in 3D simulation is ambient light and parallel light. This time the demo also achieved this step. The reflection light will be introduced next time.

Click on the link below to confirm today's content.

Torus with parallel light sources and ambient light sources

http://wgld.org/s/sample_010/

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

[WebGL Primer] 22, light emitted from an ambient light source