Add fog group with renderer

source/GLRender/BasicGroup.ts

@@ -33,7 +33,7 @@ class BasicGroup extends GLContextObject{
 	/**
 	 * 大小
 	 */
-	public size = 100;
+	public size = 50;
 
     /**
      * 颜色
@@ -65,6 +65,9 @@ class BasicGroup extends GLContextObject{
         // 指定颜色
         shader.color(this.color);
 
+        shader.fogColor(this.renderer.fogColor);
+        shader.fogDensity(this.renderer.fogDensity);
+
         // 开始绘制
         this.gl.drawArrays(this.gl.POINTS, 0, this.pointVecCount);
     }

source/GLRender/BasicRenderer.ts

@@ -112,6 +112,25 @@ abstract class BasicRenderer<
      */
     public cleanColor: [number, number, number, number] = [.1, .1, .1, 1.];
 
+    /**
+     * 雾颜色
+     */
+    public get fogColor() {
+        return [
+            this.cleanColor[0],
+            this.cleanColor[1],
+            this.cleanColor[2]
+        ]
+    }
+
+    /**
+     * 雾强度
+     * 参数一：浓度系数
+     * 参数二：起始位置
+     * 参数三：结束位置
+     */
+    public fogDensity: [number, number, number] = [1, 5, 20];
+
     /**
      * 清屏
      */

source/GLRender/ClassicRenderer.ts

@@ -46,8 +46,19 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
             this.canvas.can.style.cursor = "grab"
         });
 
+        const cubeRadius = 2**.5;
+        this.fogDensity = [
+            this.fogDensity[0], this.camera.eye[2] - cubeRadius, 
+            this.camera.eye[2] + cubeRadius + 4
+        ];
+
         this.canvas.on("mousewheel", () => {
             this.camera.eyeScale(this.canvas.wheelDelta / 100);
+            let dist = this.camera.eyeDist;
+            this.fogDensity = [
+                this.fogDensity[0], dist - cubeRadius, 
+                dist + cubeRadius + 4
+            ];
         });
         
         // 运行

source/GLRender/GroupShader.ts

@@ -11,7 +11,9 @@ interface IGroupShaderAttribute {
 interface IGroupShaderUniform {
     uRadius: number,
     uMvp: ObjectData,
-    uColor: ObjectData
+    uColor: ObjectData,
+    uFogColor: ObjectData,
+    uFogDensity: ObjectData
 }
 
 /**
@@ -28,10 +30,17 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
             
             uniform float uRadius;
             uniform mat4 uMvp;
+            uniform vec3 uFogDensity;
+
+            varying float vFogPower; 
 
             void main(){
                 gl_Position = uMvp * vec4(aPosition, 1.);
 				gl_PointSize = uRadius / gl_Position.z;
+
+                float disClamp = clamp(gl_Position.z, uFogDensity.y, uFogDensity.z);
+                float disNormal = (disClamp - uFogDensity.y) / (uFogDensity.z - uFogDensity.y);
+                vFogPower = clamp(disNormal * uFogDensity.x, 0., 1.);
             }
         `;
 
@@ -40,9 +49,12 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
             precision lowp float;
             
             uniform vec3 uColor;
+            uniform vec3 uFogColor;
+
+            varying float vFogPower;
         
             void main(){
-                gl_FragColor = vec4(uColor, 1.);
+                gl_FragColor = vec4(mix(uColor, uFogColor, vFogPower), 1.);
             }
         `;
 
@@ -81,4 +93,22 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
             this.uniformLocate("uColor"), rgb
         );
     }
+
+    /**
+     * 雾颜色
+     */
+    public fogColor(rgb: ObjectData) {
+        this.gl.uniform3fv(
+            this.uniformLocate("uFogColor"), rgb
+        )
+    }
+
+    /**
+     * 雾强度
+     */
+    public fogDensity(rgb: ObjectData) {
+        this.gl.uniform3fv(
+            this.uniformLocate("uFogDensity"), rgb
+        )
+    }
 }