Add fog with basic shader

source/GLRender/Axis.ts

@@ -54,6 +54,9 @@ class Axis extends GLContextObject{
         shader.radius([this.r, this.r, this.r]);
         shader.position(this.pos);
 
+        shader.fogColor(this.renderer.fogColor);
+        shader.fogDensity(this.renderer.fogDensity);
+
         // 绘制 X 轴
         shader.color([1, 0, 0]);
         this.gl.drawArrays(this.gl.LINES, 0, 2);

source/GLRender/BasicCube.ts

@@ -50,7 +50,7 @@ class BaseCube extends GLContextObject{
     /**
      * 颜色
      */
-    public color = [.5, .5, .5];
+    public color = [1, 1, 1];
 
     /**
      * 绘制立方体
@@ -79,6 +79,9 @@ class BaseCube extends GLContextObject{
         // 指定颜色
         shader.color(this.color);
 
+        shader.fogColor(this.renderer.fogColor);
+        shader.fogDensity(this.renderer.fogDensity);
+
         // 开始绘制
         this.gl.drawElements(this.gl.LINES, 24, this.gl.UNSIGNED_SHORT, 0);
     }

source/GLRender/BasicShader.ts

@@ -12,7 +12,9 @@ interface IBasicsShaderUniform {
     uRadius: ObjectData,
     uMvp: ObjectData,
     uPosition: ObjectData,
-    uColor: ObjectData
+    uColor: ObjectData,
+    uFogColor: ObjectData,
+    uFogDensity: ObjectData
 }
 
 /**
@@ -31,8 +33,11 @@ class BasicsShader extends GLShader<IBasicsShaderAttribute, IBasicsShaderUniform
             uniform mat4 uMvp;
             uniform vec3 uPosition;
 
+            varying vec3 vPosition;
+
             void main(){
                 gl_Position = uMvp * vec4(aPosition * uRadius + uPosition, 1.);
+                vPosition = gl_Position.xyz;
             }
         `;
 
@@ -40,10 +45,18 @@ class BasicsShader extends GLShader<IBasicsShaderAttribute, IBasicsShaderUniform
         const fragment = `
             precision lowp float;
             
+            uniform vec3 uFogColor;
             uniform vec3 uColor;
+            uniform vec3 uFogDensity;
+
+            varying vec3 vPosition;
         
             void main(){
-                gl_FragColor = vec4(uColor, 1.);
+                float disClamp = clamp(vPosition.z, uFogDensity.y, uFogDensity.z);
+                float disNormal = (disClamp - uFogDensity.y) / (uFogDensity.z - uFogDensity.y);
+                float vFogPower = clamp(disNormal * uFogDensity.x, 0., 1.);
+                
+                gl_FragColor = vec4(mix(uColor, uFogColor, vFogPower), 1.);
             }
         `;
 
@@ -92,4 +105,22 @@ class BasicsShader extends GLShader<IBasicsShaderAttribute, IBasicsShaderUniform
             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
+        )
+    }
 }

source/GLRender/ClassicRenderer.ts

@@ -47,9 +47,10 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
         });
 
         const cubeRadius = 2**.5;
+        const farFogLine = 2.5;
         this.fogDensity = [
             this.fogDensity[0], this.camera.eye[2] - cubeRadius, 
-            this.camera.eye[2] + cubeRadius + 4
+            this.camera.eye[2] + cubeRadius + farFogLine
         ];
 
         this.canvas.on("mousewheel", () => {
@@ -57,12 +58,17 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
             let dist = this.camera.eyeDist;
             this.fogDensity = [
                 this.fogDensity[0], dist - cubeRadius, 
-                dist + cubeRadius + 4
+                dist + cubeRadius + farFogLine
             ];
         });
         
         // 运行
         this.run();
+
+        // 测试数据传递
+        // setInterval(() => {
+        //     this.basicGroup.upLoadData(new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2));
+        // }, 500);
     }
 
     loop(t: number): void {