[Getting started with WebGL] 22nd, the light from the environmental light source, and the webgl Light Source

[Getting started with WebGL] 22nd, the light from the environmental light source, and the webgl Light Source

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

Weakness of Parallel Light Source

The last time I challenged the light emitted from a parallel light source. The direction of the parallel light source is fixed. Furthermore, in order to simulate this, we need to use the inverse matrix of the model transformation matrix and add normal intelligence to the model data.
The computing burden of parallel light sources is relatively small, which simulates the illumination effect to a certain extent and is often used in the 3D simulation world. However, parallel light sources also have weaknesses. The overcast part, that is, the part not illuminated, cannot be perfectly simulated.
For example, in the last demo, the fixed-point shader, if you observe carefully, obtains the Inner Product of the Light vector and the normal, which is actually a coincidence.
> Some code in the last demo

float diffuse  = clamp(dot(normal, invLight), 0.1, 1.0);

The GLSL built-in function clamp is used here. This function limits the value of the parameter to a specified range. The above Code limits the result to 0.1 ~ In the range of 1.0.

However, to obtain the Inner Product of the Light vector and the normal, a negative number may occur according to the actual use cases. The clamp function is used, even if there is a negative number, it will be replaced by the specified minimum value of 0.1, set the clamp range to 0.0 ~ What is the effect between 1.0 and? If you try to run it, the effect will appear.

In this way, the place where there is no collision with light will become completely black. This will lead to the inability to clearly identify the model's outlines, which is the disadvantage of the parallel light source.

As in the previous demo, the above problem can be solved to a certain extent by setting a larger illumination coefficient range. However, using the environment light source can completely solve this problem.

What is environmental light source?

Ambient Light simulates the diffuse reflection of natural light in the real world. In the real world, the light emitted from the sun or lighting devices is reflected when an object or dust in the atmosphere is blocked, illuminating the world. For example, in a dark room, you only need a light bulb with its back facing the light bulb, and then you will see your shadow mapped to the bed or wall, although your body is not directly illuminated, you should be able to see it.

Because the walls and roofs, as well as the dust in the bed and atmosphere, reflect the light emitted by the light bulb, even the part not directly illuminated will be affected by the light. In this way, the environment light source is the diffuse reflection of the light.

The ambient light source is used to illuminate all parts of a 3D space. That is to say, not processing attribute variables based on different vertices, but passing the uniform variable to the shader. Furthermore, ambient light affects the color output in the context to process color intelligence containing four elements.

> Example of defining ambient light

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

When using the ambient light source, pay attention to the brightness of the color. The environment lighting is all. For example, if all the 0.1 values specified in the above Code are changed to 1.0, the model will be completely white. The light source is different from the light source, so pay attention to it.

The color of ambient light is preferably limited to around 0.2. This demo uses 0.1.

Modification of vertex shader and javascript

Next, let's take a look at the modifications to each part of the code. Start with the vertex coloring tool.

> Vertex coloring 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);}

Append an uniform variable, which is the variable ambientColor of vec4 type. After a series of computing operations, such as parallel light sources, the environment light is added to the final output color stage.

Here, if multiplication is not used without addition, the entire screen is dimmed, so pay special attention to it.

Next, modify the main program.

To put it bluntly, we just pass the ambient light as a parameter to the vertex shadow. There are still few appends.

First, define the environment light parameters in the program.

> Added the ambient light parameter.

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

Next, in order to pass the part correctly to the vertex coloring machine, append the part of the coloring machine's uniformLocation.

// 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, 'ambientcolor ');

Then, as the uniform variable, it will be passed to the coloring tool during the continuous loop.

> Parameters for transmitting ambient light to the shadow

gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);gl.uniform3fv(uniLocation[2], lightDirection);gl.uniform4fv(uniLocation[3], ambientColor);

In this way, modifications are made to the vertex shader and javascript program.

In fact, because the environmental light source is introduced this time, the illumination coefficient of the parallel light source is set to 0.0 ~ 1.0. The pure ambient light will be used for the part not illuminated by a parallel light source.

Summary

Ambient Light simulates the diffuse reflection of natural light and makes up for the shortcomings of parallel light sources. Generally, these two types of light are used at the same time. If only ambient light is used, the model profile cannot be displayed. If only parallel light sources are used, the Shadows are too severe to distinguish the model profile.

The representative of diffuse light in 3D simulation is ambient light and parallel light. This step is also implemented in this demo. Next time, we will introduce the reflected light.

Click the connection below to confirm the content of today.

Ring Body exposed by parallel optical source and ambient light source

Http://wgld.org/s/sample_010/

Reprinted Please note: