diff --git a/source/GLRender/BasicGroup.ts b/source/GLRender/BasicGroup.ts index a03cfc5..01731a0 100644 --- a/source/GLRender/BasicGroup.ts +++ b/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); } diff --git a/source/GLRender/BasicRenderer.ts b/source/GLRender/BasicRenderer.ts index 749cdf0..1e07001 100644 --- a/source/GLRender/BasicRenderer.ts +++ b/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]; + /** * 清屏 */ diff --git a/source/GLRender/ClassicRenderer.ts b/source/GLRender/ClassicRenderer.ts index db04e5a..a91288c 100644 --- a/source/GLRender/ClassicRenderer.ts +++ b/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 + ]; }); // 运行 diff --git a/source/GLRender/GroupShader.ts b/source/GLRender/GroupShader.ts index 0ead727..e422863 100644 --- a/source/GLRender/GroupShader.ts +++ b/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{ 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{ 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{ 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 + ) + } } \ No newline at end of file