1. Introduction

So far, the objects in the cases have not been transparent, which in many cases will suffice. But there are many translucent objects in the real world, and the most common technique used to realistically reproduce such objects in a scene is blending.

2. Hybrid technology

As the name implies, the mixing technology is to reconcile the two faces, and the final color value of the slices prepared to enter the frame buffer is calculated by weighting the original slices in the frame buffer in accordance with the set proportion through various tests. This means that with hybrid technology enabled, the new source will no longer directly overwrite the source in the buffer.

        gl.enable(gl.BLEND);// Start blending
        gl.blendFunc(gl.SRC_COLOR,gl.ONE_MINUS_SRC_COLOR);// Set the blending factor
        ms.pushMatrix();// Secure the scene
        ms.translate(rex, rey, 25);// Move the filter
        ms.scale(3.0.3.0.3.0);// Zoom
        tex.drawSelf(ms,earthTex);// Draw the filter
Copy the code

        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);// Set the blending factor
        cloud.drawSelfcloud(ms,cloudTex);// Draw clouds
        gl.disable(gl.BLEND);// Close the blend
Copy the code

As we know from the previous introduction, we need to set the weighting ratio before mixing. In WebGL, the weighting ratio of two slices is specified by setting the mixing factor, and two mixing factors need to be given each time, as shown below. The first is the source factor, which determines the ratio of the source in the most slice to the final slice in the frame buffer. The second is the target factor, which determines the proportion of the slice in the original frame buffer to the final slice.

3. Earth-moon cloud effect

This section will add clouds to the Earth in the Earth-moon system scenario. Let’s take a look at the stickers:

Achieve a relatively realistic earth scene through these three pictures.

The image below shows the effect without fusion

This is the effect of turning on the fusion

4. The fog

There are many examples of real world situations in which objects look equally clear from far and near. While that’s nice, it doesn’t exactly match the real world. In the real world, due to the influence of atmosphere, dust, fog, etc., objects will become less and less clear as the distance increases, and eventually blend into the background.

The principle of fog

There are many mathematical models for achieving fog effects. Firstly, the simplest linear model is introduced. The calculation formula of this model is as follows:

F = Max (min((end-dist)/(end-start),1.0),0.0)Copy the code
  • F is the atomization factor, and its value ranges from 0.0 to 1.0. When the value of the atomization factor is 0, it means that the fog is very thick, and the object cannot be seen until the fog is seen. On the contrary, when the value of the atomization factor is 1, it means that the fog is light and the object can be clearly seen.
  • Dist is the distance between the current pixel to be drawn and the camera.
  • End represents a specific distance value. When the distance between the film element and the camera exceeds end, the atomization factor is 0.
  • Start also represents a specific distance value. When the distance between the film element and the camera is less than start, the atomization factor is 1.

The change of the above formula from start to end is linear, but fog in the real world is not completely linear. In order to simulate a more realistic fog, the following nonlinear calculation formula can be used.

F = 1.0 - SmoothStep (Start,end,dist) // Smoothstep returns a smooth curveCopy the code

Vertex shader

// Method of calculating fog factor
float computeFogFactor(){
   float tmpFactor;
   float fogDistance = length(uCamera-(uMMatrix*vec4(aPosition,1)).xyz);// Distance from vertex to camera
   const float end = 490.0;// Fog end position
   const float start = 350.0;// Fog start position
   tmpFactor = 1.0-smoothstep(start,end,fogDistance);// Calculate the fog factor
   return tmpFactor;
}
void main()
{
   gl_Position = uMVPMatrix * vec4(aPosition,1); // Calculate the vertex position according to the total transformation matrix
   finalLight = pointLight(normalize(aNormal),uLightLocation,
   vec4(0.4.0.4.0.4.1.0),vec4(0.7.0.7.0.7.1.0),vec4(0.3.0.3.0.3.1.0));
   // Calculate the fog factor
   vFogFactor = computeFogFactor();
}
Copy the code

Face shader

#version 300 es
precision mediump float;
in vec4 finalLight;// Accept the final light intensity from the vertex shader
in float vFogFactor;							// The atomization factor passed from the vertex shader
out vec4 fragColor;// The color of the output slice
void main()
{
	vec4 objectColor=vec4(0.95.0.0.0.0.1.0);// Object color
	vec4 fogColor = vec4(0.95.0.95.0.95.1.0);// The color of fog
 	if(vFogFactor ! =0.0) {// If the fog factor is 0, lighting need not be calculated
		objectColor = objectColor*finalLight;// Calculate the color of the object after illumination
		fragColor = objectColor*vFogFactor + fogColor*(1.0-vFogFactor);// Interpolate the object color and fog color to calculate the final color
	}else{ fragColor=fogColor; }}Copy the code

5. Summary of this chapter

This chapter mainly introduces the knowledge of mixing and dance in WebGL. Through this chapter, the reader will be able to develop a variety of translucent effects on demand and use atomization effects to add realism to the scene.