simplified fog shader handling

src/mol-canvas3d/passes/postprocessing.ts

@@ -30,7 +30,6 @@ const PostprocessingSchema = {
     dOrthographic: DefineSpec('number'),
     uNear: UniformSpec('f'),
     uFar: UniformSpec('f'),
-    dFogEnable: DefineSpec('boolean'),
     uFogNear: UniformSpec('f'),
     uFogFar: UniformSpec('f'),
     uFogColor: UniformSpec('v3'),
@@ -56,8 +55,6 @@ export const PostprocessingParams = {
     outlineEnable: PD.Boolean(false),
     outlineScale: PD.Numeric(1, { min: 0, max: 10, step: 1 }),
     outlineThreshold: PD.Numeric(0.8, { min: 0, max: 1, step: 0.01 }),
-
-    fogEnable: PD.Boolean(true),
 }
 export type PostprocessingProps = PD.Values<typeof PostprocessingParams>
 
@@ -74,7 +71,6 @@ function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, d
         dOrthographic: ValueCell.create(0),
         uNear: ValueCell.create(1),
         uFar: ValueCell.create(10000),
-        dFogEnable: ValueCell.create(p.fogEnable),
         uFogNear: ValueCell.create(10000),
         uFogFar: ValueCell.create(10000),
         uFogColor: ValueCell.create(Vec3.create(1, 1, 1)),
@@ -103,7 +99,7 @@ export class PostprocessingPass {
     props: PostprocessingProps
     renderable: PostprocessingRenderable
 
-    constructor(private webgl: WebGLContext, private camera: Camera, drawPass: DrawPass, props: Partial<PostprocessingProps>) {
+    constructor(private webgl: WebGLContext, private camera: Camera, private drawPass: DrawPass, props: Partial<PostprocessingProps>) {
         const { gl } = webgl
         this.target = createRenderTarget(webgl, gl.drawingBufferWidth, gl.drawingBufferHeight)
         this.props = { ...PD.getDefaultValues(PostprocessingParams), ...props }
@@ -151,11 +147,6 @@ export class PostprocessingPass {
             ValueCell.update(this.renderable.values.uOutlineThreshold, props.outlineThreshold)
         }
 
-        if (props.fogEnable !== undefined) {
-            this.props.fogEnable = props.fogEnable
-            ValueCell.update(this.renderable.values.dFogEnable, props.fogEnable)
-        }
-
         this.renderable.update()
     }
 

src/mol-gl/renderable/schema.ts

@@ -181,8 +181,6 @@ export const GlobalUniformSchema = {
 
     uHighlightColor: UniformSpec('v3'),
     uSelectColor: UniformSpec('v3'),
-
-    uFogFlag: UniformSpec('i'),
 }
 export type GlobalUniformSchema = typeof GlobalUniformSchema
 export type GlobalUniformValues = Values<GlobalUniformSchema> // { [k in keyof GlobalUniformSchema]: ValueCell<any> }

src/mol-gl/renderer.ts

@@ -63,8 +63,6 @@ export const RendererParams = {
 
     highlightColor: PD.Color(Color.fromNormalizedRgb(1.0, 0.4, 0.6)),
     selectColor: PD.Color(Color.fromNormalizedRgb(0.2, 1.0, 0.1)),
-
-    fogFlag: PD.Boolean(true, { label: 'Use Fog' }),
 }
 export type RendererProps = PD.Values<typeof RendererParams>
 
@@ -128,8 +126,6 @@ namespace Renderer {
 
             uHighlightColor: ValueCell.create(Color.toVec3Normalized(Vec3(), p.highlightColor)),
             uSelectColor: ValueCell.create(Color.toVec3Normalized(Vec3(), p.selectColor)),
-
-            uFogFlag: ValueCell.create(p.fogFlag ? 1 : 0),
         }
         const globalUniformList = Object.entries(globalUniforms)
 
@@ -309,11 +305,6 @@ namespace Renderer {
                     p.selectColor = props.selectColor
                     ValueCell.update(globalUniforms.uSelectColor, Color.toVec3Normalized(globalUniforms.uSelectColor.ref.value, p.selectColor))
                 }
-
-                if (props.fogFlag !== undefined && props.fogFlag !== p.fogFlag) {
-                    p.fogFlag = props.fogFlag
-                    ValueCell.update(globalUniforms.uFogFlag, p.fogFlag ? 1 : 0)
-                }
             },
             setViewport: (x: number, y: number, width: number, height: number) => {
                 gl.viewport(x, y, width, height)

src/mol-gl/shader/chunks/apply-fog.glsl.ts

@@ -1,12 +1,10 @@
 export default `
-if (uFogFlag == 1) {
-	float depth = length(vViewPosition);
-    float fogFactor = smoothstep(uFogNear, uFogFar, depth);
-    if (uTransparentBackground == 0) {
-	    gl_FragColor.rgb = mix(gl_FragColor.rgb, uFogColor, fogFactor);
-    } else {
-        float fogAlpha = (1.0 - fogFactor) * gl_FragColor.a;
-        gl_FragColor.a = fogAlpha;
-    }
+float depth = length(vViewPosition);
+float fogFactor = smoothstep(uFogNear, uFogFar, depth);
+if (uTransparentBackground == 0) {
+    gl_FragColor.rgb = mix(gl_FragColor.rgb, uFogColor, fogFactor);
+} else {
+    float fogAlpha = (1.0 - fogFactor) * gl_FragColor.a;
+    gl_FragColor.a = fogAlpha;
 }
 `

src/mol-gl/shader/chunks/common-frag-params.glsl.ts

@@ -15,7 +15,6 @@ varying vec3 vViewPosition;
 
 uniform vec2 uViewOffset;
 
-uniform int uFogFlag;
 uniform float uFogNear;
 uniform float uFogFar;
 uniform vec3 uFogColor;

src/mol-gl/shader/postprocessing.frag.ts

@@ -105,11 +105,10 @@ void main(void) {
 		vec2 edgeDepth = calcEdgeDepth(coords);
 		float edgeFlag = step(edgeDepth.x, uOutlineThreshold);
     	color.rgb *= edgeFlag;
-		#ifdef dFogEnable
-			float viewDist = abs(getViewZ(edgeDepth.y));
-			float fogFactor = smoothstep(uFogNear, uFogFar, viewDist) * (1.0 - edgeFlag);
-			color.rgb = mix(color.rgb, uFogColor, fogFactor);
-		#endif
+
+		float viewDist = abs(getViewZ(edgeDepth.y));
+		float fogFactor = smoothstep(uFogNear, uFogFar, viewDist) * (1.0 - edgeFlag);
+		color.rgb = mix(color.rgb, uFogColor, fogFactor);
 	#endif
 
 	// occlusion needs to be handled after outline to darken them properly

src/mol-plugin-ui/viewport/simple-settings.tsx

@@ -77,11 +77,9 @@ export class SimpleSettingsControl extends PluginUIComponent {
             PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: {
                 postprocessing: { ...postprocessing, outlineEnable: p.value },
             } });
-        } else if (p.name === 'fog') {
-            if (!this.plugin.canvas3d) return;
-            const renderer = this.plugin.canvas3d.props.renderer;
+        } else if (p.name === 'fog') {;
             PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: {
-                renderer: { ...renderer, fogFlag: p.value },
+                cameraFog: p.value ? 50 : 1,
             } });
         }
     }
@@ -119,7 +117,7 @@ export class SimpleSettingsControl extends PluginUIComponent {
             renderStyle,
             occlusion: this.plugin.canvas3d?.props.postprocessing.occlusionEnable,
             outline: this.plugin.canvas3d?.props.postprocessing.outlineEnable,
-            fog: this.plugin.canvas3d?.props.renderer.fogFlag
+            fog: this.plugin.canvas3d ? this.plugin.canvas3d.props.cameraFog > 1 : false
         }
     }