WebGL Advanced Technology

1. How to achieve atomization

The method of atomization is implemented by a variety of methods, the simplest one is used: linear atomization (Linear fog). In linear atomization, the degree of atomization of a point depends on the distance between it and the viewpoint, and the farther the distance is, the higher the atomization degree. The linear atomization has a starting point and an end point, and the beginning indicates the beginning of the atomization, and the end point indicates that the atomization degree of a point between two points of the complete atomization is linearly related to the distance between the point and the viewpoint. A point farther than the end is completely atomized, which is completely invisible.

The degree of atomization at a certain point can be defined as the atomization factor (fog factor) and is calculated in the linear atomization formula:

< atomization factor > = (< Endpoint >-< The distance between the current point and the Viewpoint >)/(< end >-< Start >)

Over here:

< Start > <= < The distance between the current point and the viewpoint > <= < endpoint >

The atomization factor is 1.0, indicating that the point is not atomized at all and can clearly see the object here. If it is 0.0, it means that the pity dorado is completely atomized. The line graph of the start factor is as follows:

2. Slice color calculation with atomization factor in the element shader

The calculation formula is as follows:

< element Color > = < object surface Color > * < atomization factor > + < atomization color > * (1-< atomization factor >)

3. Use the W component of the vertex as the distance between the current point and the viewpoint

Previously, we did not show the W component that used gl_position, in fact, the value of this w component is the z component of the vertex's view coordinate multiplied by-1. In the view coordinate system, the viewpoint is at the origin, the line of sight is in the negative direction of the z axis, the object that the observer sees has a negative Z component of the view coordinate system value, and the W component of the gl_position is exactly the z component value multiplied by-1, so it can be used to approximate the distance between the vertex and the viewpoint.

4. Draw a circular point

In order to cut a rectangle into a circle, you need to know the coordinates of each slice in the rasterization process. In a sample program in the 5th chapter, the coordinates of the slices are accessed through the built-in variable Gl_fragcoord in the slice shader. In fact, the element shader also provides another built-in variable, Gl_pointcoord. This variable can help us draw a circular point. Elements shader built-in variables:

Variable type and name/description

VEC4 gl_fragcoord/elements in window coordinates
VEC4 the coordinates of the gl_pointcoord/element in the plotted point (from 0.0 to 1.0)

The range of Gl_pointcoord coordinate values is from 0.0 to 1.0, as shown in. In order to cut the rectangle into a circle, the distance from the center point (0.5, 0.5) will be more than 0.5, that is, the slice outside the circle is removed. In the slice shader, you can use the Discard statement to discard the current slice.

The code in the slice shader is implemented as follows:

var Fshader_source = ' #ifdef gl_es\n ' + ' precision mediump float;\n ' + ' #endif \ n ' + ' void main () {\ n ' + ' float distance = distance ( Gl_pointcoord, VEC2 (0.5, 0.5)); \ n ' + ' if (distance <= 0.5) {\ n ' + ' Gl_fragcolor = VEC4 (1.0, 0.0, 0.0, 1.0); \ n ' + '}else{ \ n ' + ' discard; ' + '}\n ' + '}\n ';

5.α Mixing

We want to make the object translucent, and this effect requires a component of the color. This feature is called A-mix (alpha blending) or hybrid (blending), which is already built into WebGL, and the value needs to be turned on.

How to achieve a hybrid?

1. Turn on the blending function: Gl.enable (GL. BLEND).

2. Specify the Blending function: Gl.blendfunc (GL. Src_alpha, GL. One_minus_src_alpha).

If we only set the fourth component of the color, and the transparency effect is not visible, you must perform the above two steps.

6.gl.blendfunc (Src_factor, Dst_factor)

The functions of blending are specified by the parameters Src_factor and Dst_factor, and the blended color is calculated as follows:

< blend Color > = < source color > * Src_factor + < target color > * dst_factor

Parameters:

Src_factor: Specifies the weight factor of the source color in the blend color weight, as shown in the following table

Dst_factor: Specifies the weight factor for the color weight of the target color after blending, as shown in the following table

Coefficient of the coefficients of the/g component of the constant/R component coefficients of the/b component

Gl. zero/0.0/0.0/0.0

Gl. one/1.0/1.0/1.0

Gl. Src_color/rs/gs/bs

gl.one_minus_src_color/(1-RS)/(1-GS)/(1-BS)

Gl. Dst_color/rd/gd/bd

gl.one_minus_dst_color/(1-RD)/(1-GD)/(1-BD)

Gl. Src_alpha/as/as/as

Gl. one_minus_src_alpha/(1-as)/(1-as)/(1-as)

Gl. Dst_alpha/ad/ad/ad

Gl. one_minus_dst_alpha/(1-AD)/(1-AD)/(1-AD)

Gl. Src_alpha_satureate/min (As,ad)/min (As,ad)/min (AS,AD)

In the table above, (Rs,gs,bs, as) and (RD,GD,BD,AD) represent the individual components of the source color and the target color.

If the source color is translucent green (0.0, 1.0, 0.0, 0.4), the target color is normal yellow (1.0, 1.0, 0.0, 1.0), calling the function:

Gl.blendfunc (GL. Src_alpha, GL. One_minus_src_alpha)

The calculation process is as follows:

7. Coexistence of transparent and opaque objects

When using the A blending feature, we masked the hidden surface cancellation function (the Code gl.enable (GL) was removed. Depth_test). Turning off the Hide face removal feature is only a rough solution and does not meet the actual needs. In fact, some mechanisms allow for both hidden and translucent effects. We only need:

1. Turn on the Hide Face removal feature: Gl.enable (GL. Depth_test).

2. Draw all opaque objects (A is 1.0).

3. Lock the write operation for the depth buffer used for the hidden face elimination to make it read-only. Call:

Gl.depthmask (FALSE);

4. Draw all translucent objects (a less than 1.0), and note that they should be sorted in depth and then drawn from behind.

5. Release the depth buffer to make it readable and writable. Call:

Gl.depthmask (True)

8.gl.depthmask (Mask)

Locks or frees the write operation of the depth buffer. Parameters:

Mask: Specifies whether the write operation (false) of the lock depth buffer is or is released (true)

WebGL Advanced Technology