Chinese Translation of course 7 of webgl

Lesson 7th: Light

Parallel Light: directional lights

Environment light: ambient lights

Webgl does not have built-in support for light. Unlike OpenGL, webgl can help you process at least eight light sources. However, OpenGL can only deal with simple illumination. Even non-flat objects cannot be processed, and shadows cannot be processed.

The goal is to virtualize the light source in a scenario. First, we need to be able to set a series of light sources, and then determine the impact of these light sources on the specified object. In this lesson, we need to write the vertex Renderer for processing light. For each vertex, calculate the influence of light on him and change his color accordingly. To deal with a single light source, multiple light sources only need to overlay the effect.

Per-vertex lighting: Processing flat surfaces. If complex surfaces are processed, you can use the perfrgment lighting technology, which will be discussed later. Now let's take a look at the effect of a light source on vertex color. Feng's Light & shade processing model.

In the real world, there is only one kind of light, and for images, it is assumed that there are two kinds of light that will be more useful.

1. light from a specific direction only affects one side of the object, called parallel light

2. Light from all directions. It is called ambient light (light discrete by air in the real world)

Light reflection: diffusely diffuse reflection

Specularly: mirror reflection

Feng's model assumes that each type of light has two properties: RGB value of diffuse reflection and RGB value of mirror reflection. Each material has four attributes: RGB value of ambient light and RGB value of diffuse reflection, the RGB value of the mirror reflection, and the brightness of the material is shininess.

For a point light source, we need to calculate the direction of light on each point. For a parallel light source, we only need to calculate a data value of the light source. Therefore, this lesson only describes parallel light sources.

1 because the data of the parallel light does not change between different vertices, you can put the data in a unified variable so that the Renderer can get it.

2 For a 3D object, each vertex requires a normal vector to indicate its direction relative to light.

3. Calculate the light reflected by each vertex (calculated based on the angle between the light and the normal vector plane). These angles conform to the cosine (0 ~ 90)

We can see that the vec3 model is used to encapsulate the direction of light before passing the direction vector of light to the Renderer, just like the model view matrix and the projection matrix with mat4, they are all part of glmatrix.

1vec3. normalize indicates that the number of rows in the matrix is equal.

2. Change the direction

3. Use Gl. uniform3fv to pass the ternary array float32array Z to the unified variable.

The following code is relatively simple. It just copies the color part of the parallel light to the appropriate property of the Renderer:

Gl. uniform3f (

Shaderprogram. directionalcoloruniform,

Parsefloat (document. getelementbyid ("directional"). value ),

Parsefloat (document. getelementbyid ("directionalg"). value ),

Parsefloat (document. getelementbyid ("directional"). Value ));

The above is all the changes to drawscene.

Setmatrixuniforms function changes: here we add four rows to copy a new matrix, which is based on the model view matrix.

VaR normalmatrix = mat3.create ();

Mat4.toinversemate3 (mvmatrix, normalmatrix );

Mat3.transpose (normalmatrix );

Gl. uniformmatrix3fv (shaderprogram. nmatrixuniform, false, normalmatrix );

This matrix is used to convert the vector matrix. We cannot convert normal vectors like converting a vertex coordinate (using a regular model view matrix), because normal vectors will change as they move and rotate.

For example, if we ignore the rotation and assume that an mvtranslate (,-5) is made, that is, the model view rotation, then the normal vector (, 1) becomes, -4), which completely points to the wrong direction. In the vertex Renderer, when we multiply the 3*3 vertex matrix by the 4*4 matrix, we extend the columns (set to 1) of the Matrix to make multiplication possible ), of course, these 1 values are not only valid for multiplication, but also for transformation and rotation after matrix multiplication. If 0 is set at the end, we can multiply the Matrix to ignore translations. Unfortunately, the model view Matrix cannot contain different translations, especially for scaling down and cropping. For example, if we have a model view matrix that doubles our current object, their normal vectors will be doubled. A good method is to use the upper triangle array for conversion. ------------------------------ % >_< % What is this?

Vlighting is a ternary array used to store the adjustment coefficients calculated by vertex lighting in RGB. This array is returned from the Renderer as a variable and used in the judgment Renderer. If the light source is off, the default array value (, 1) indicates that the color does not change. If the light is turned on, we calculate the direction of the normal vector through the normal vector matrix, and then obtain the amount of light impact through the dot product of the normal vector and light direction. In this way, we can calculate the final light weighting used in the fragment Renderer based on the product of this value and the color intensity of the parallel light.

Attribute vec3 avertexposition;

Attribute vec3 avertexnormal;

Attribute vec2 atexturecoord;

 

Uniform mat4 umvmatrix;

Uniform mat4 upmatrix;

Uniform mat3 unmatrix;

 

Uniform vec3 uambientcolor;

 

Uniform vec3 ulightingdirection;

Uniform vec3 udirectionalcolor;

 

Uniform bool uuselighting;

 

Varying vec2 vtexturecoord;

Varying vec3 vlightweighting;

 

Void main (void ){

Gl_position = upmatrix * umvmatrix * vec4 (avertexposition, 1.0 );

Vtexturecoord = atexturecoord;

 

If (! Uuselighting ){

Vlightweighting = vec3 (1.0, 1.0, 1.0 );

} Else {

Vec3 transformednormal = unmatrix * avertexnormal;

Float directionallightweighting = max (dot (transformednormal, ulightingdirection), 0.0 );

Vlightweighting = uambientcolor + udirectionalcolor * directionallightweighting;

}

}

OpenGL Transformation Matrix

CTM: indicates the coordinates of the current system. CTM must be applied to all vertices defined after CTM is set. If CTM is changed, the status of the system also changes. In OpenGL, the transformation matrix applied to all elements is the product of the model view matrix and the projection matrix. So their product is the CTM of the OpenGL system.

The following function sets the selected matrix to any matrix: glloadmatrixf (pointer_to_matrix );

The following function sets the selected matrix as a unit array: glloadidentity ();

The following function call sets the current matrix to a 4x4 homogeneous coordinate matrix.

Glloadmatrixf ();

The following function returns a user-defined matrix to the right of the current matrix:

Glmultmatrixf ();

Sometimes we want to execute a transformation before putting the matrix (CTM matrix ?) It is restored to the status before the transformation is executed. This situation occurs when an instance transformation is only applicable to a specific object and cannot be used for other objects. We can use the glpushmatrix function to push the current transformation matrix into the stack before the application instance transformation, and then use glpopmatrix to restore it.