wip fog and shader cleanup

src/mol-geo/representation/structure/bond.ts

@@ -134,6 +134,7 @@ export default function BondUnitsRepresentation(): UnitsRepresentation<BondProps
                     dDoubleSided: ValueCell.create(defaults(props.doubleSided, true)),
                     dFlatShaded: ValueCell.create(defaults(props.flatShaded, false)),
                     dFlipSided: ValueCell.create(defaults(props.flipSided, false)),
+                    dUseFog: ValueCell.create(defaults(props.useFog, true)),
                 }
                 const state: RenderableState = {
                     depthMask: defaults(props.depthMask, true),

src/mol-geo/representation/structure/index.ts

@@ -34,7 +34,8 @@ export const DefaultStructureProps = {
     alpha: 1,
     visible: true,
     doubleSided: false,
-    depthMask: true
+    depthMask: true,
+    useFog: true,
 }
 export type StructureProps = Partial<typeof DefaultStructureProps>
 

src/mol-geo/representation/structure/point.ts

@@ -110,7 +110,8 @@ export default function PointUnitsRepresentation(): UnitsRepresentation<PointPro
                     drawCount: ValueCell.create(vertices.length / 3),
                     instanceCount: ValueCell.create(instanceCount),
 
-                    dPointSizeAttenuation: ValueCell.create(true)
+                    dPointSizeAttenuation: ValueCell.create(true),
+                    dUseFog: ValueCell.create(defaults(props.useFog, true)),
                 }
                 const state: RenderableState = {
                     depthMask: defaults(props.depthMask, true),

src/mol-geo/representation/structure/spacefill.ts

@@ -97,6 +97,7 @@ export default function SpacefillUnitsRepresentation(): UnitsRepresentation<Spac
                     dDoubleSided: ValueCell.create(defaults(props.doubleSided, true)),
                     dFlatShaded: ValueCell.create(defaults(props.flatShaded, false)),
                     dFlipSided: ValueCell.create(defaults(props.flipSided, false)),
+                    dUseFog: ValueCell.create(defaults(props.useFog, true)),
                 }
                 const state: RenderableState = {
                     depthMask: defaults(props.depthMask, true),

src/mol-geo/representation/volume/surface.ts

@@ -45,7 +45,8 @@ export const DefaultSurfaceProps = {
     flatShaded: true,
     flipSided: true,
     doubleSided: true,
-    depthMask: true
+    depthMask: true,
+    useFog: true
 }
 export type SurfaceProps = Partial<typeof DefaultSurfaceProps>
 
@@ -89,6 +90,7 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
                     dDoubleSided: ValueCell.create(defaults(props.doubleSided, true)),
                     dFlatShaded: ValueCell.create(defaults(props.flatShaded, true)),
                     dFlipSided: ValueCell.create(false),
+                    dUseFog: ValueCell.create(defaults(props.useFog, true)),
                 }
                 const state: RenderableState = {
                     depthMask: defaults(props.depthMask, true),

src/mol-gl/_spec/renderer.spec.ts

@@ -71,7 +71,8 @@ function createPoints() {
         drawCount: ValueCell.create(3),
         instanceCount: ValueCell.create(1),
 
-        dPointSizeAttenuation: ValueCell.create(true)
+        dPointSizeAttenuation: ValueCell.create(true),
+        dUseFog: ValueCell.create(true),
     }
     const state: RenderableState = {
         visible: true,

src/mol-gl/renderable/schema.ts

@@ -129,6 +129,10 @@ export const GlobalUniformSchema = {
 
     uHighlightColor: UniformSpec('v3'),
     uSelectColor: UniformSpec('v3'),
+
+    uFogNear: UniformSpec('f'),
+    uFogFar: UniformSpec('f'),
+    uFogColor: UniformSpec('v3'),
 }
 export type GlobalUniformSchema = typeof GlobalUniformSchema
 export type GlobalUniformValues = { [k in keyof GlobalUniformSchema]: ValueCell<any> }
@@ -158,6 +162,7 @@ export const BaseSchema = {
     instanceCount: ValueSpec('number'),
 
     dColorType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'element', 'element_instance']),
+    dUseFog: DefineSpec('boolean'),
 }
 export type BaseSchema = typeof BaseSchema
 export type BaseValues = Values<BaseSchema>

src/mol-gl/renderer.ts

@@ -58,6 +58,7 @@ namespace Renderer {
         const lightAmbient = Vec3.create(0.5, 0.5, 0.5)
         const highlightColor = Vec3.create(1.0, 0.4, 0.6)
         const selectColor = Vec3.create(0.2, 1.0, 0.1)
+        const fogColor = Vec3.create(0.0, 0.0, 0.0)
 
         function setClearColor(color: Color) {
             const [ r, g, b ] = Color.toRgbNormalized(color)
@@ -77,7 +78,11 @@ namespace Renderer {
             uLightAmbient: ValueCell.create(Vec3.clone(lightAmbient)),
 
             uHighlightColor: ValueCell.create(Vec3.clone(highlightColor)),
-            uSelectColor: ValueCell.create(Vec3.clone(selectColor))
+            uSelectColor: ValueCell.create(Vec3.clone(selectColor)),
+
+            uFogNear: ValueCell.create(camera.near),
+            uFogFar: ValueCell.create(camera.far / 50),
+            uFogColor: ValueCell.create(Vec3.clone(fogColor)),
         }
 
         let currentProgramId = -1

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

@@ -0,0 +1,6 @@
+// #ifdef dUseFog
+	// float depth = length(vViewPosition);
+    float depth = gl_FragCoord.z / gl_FragCoord.w;
+    float fogFactor = smoothstep(uFogNear, uFogFar, depth);
+	gl_FragColor.rgb = mix(gl_FragColor.rgb, uFogColor, fogFactor);
+// #endif

src/mol-gl/shader/chunks/assign-position.glsl

@@ -0,0 +1,4 @@
+mat4 modelView = uView * uModel * aTransform;
+vec4 mvPosition = modelView * vec4(aPosition, 1.0);
+vViewPosition = mvPosition.xyz;
+gl_Position = uProjection * mvPosition;

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

@@ -1,7 +1,11 @@
 uniform int uObjectId;
 uniform int uInstanceCount;
 uniform int uElementCount;
+
 uniform vec3 uHighlightColor;
 uniform vec3 uSelectColor;
+varying float vMarker;
 
-varying float vMarker;
+uniform float uFogNear;
+uniform float uFogFar;
+uniform vec3 uFogColor;

src/mol-gl/shader/mesh.frag

@@ -77,5 +77,6 @@ void main() {
         gl_FragColor.a = uAlpha;
 
         #pragma glslify: import('./chunks/apply-marker-color.glsl')
+        #pragma glslify: import('./chunks/apply-fog.glsl')
     #endif
 }

src/mol-gl/shader/mesh.vert

@@ -28,11 +28,7 @@ varying vec3 vViewPosition;
 void main(){
     #pragma glslify: import('./chunks/assign-color-varying.glsl')
     #pragma glslify: import('./chunks/assign-marker-varying.glsl')
-
-    mat4 modelView = uView * uModel * aTransform;
-    vec4 mvPosition = modelView * vec4(aPosition, 1.0);
-    vViewPosition = mvPosition.xyz;
-    gl_Position = uProjection * mvPosition;
+    #pragma glslify: import('./chunks/assign-position.glsl')
 
     #ifndef dFlatShaded
         mat3 normalMatrix = transpose(inverse(mat3(modelView)));

src/mol-gl/shader/point.frag

@@ -14,5 +14,9 @@ uniform float uAlpha;
 
 void main(){
     #pragma glslify: import('./chunks/assign-material-color.glsl')
+    
     gl_FragColor = vec4(material, uAlpha);
+
+    #pragma glslify: import('./chunks/apply-marker-color.glsl')
+    #pragma glslify: import('./chunks/apply-fog.glsl')
 }

src/mol-gl/shader/point.vert

@@ -26,9 +26,7 @@ attribute float aElementId;
 
 void main(){
     #pragma glslify: import('./chunks/assign-color-varying.glsl')
-
-    mat4 modelView = uView * uModel * aTransform;
-    vec4 mvPosition = modelView * vec4(aPosition, 1.0);
+    #pragma glslify: import('./chunks/assign-position.glsl')
 
     #if defined(dSizeType_uniform)
         float size = uSize;

src/mol-view/camera/base.ts

@@ -18,6 +18,9 @@ export interface Camera {
     direction: Vec3,
     up: Vec3,
 
+    near: number,
+    far: number,
+
     translate: (v: Vec3) => void,
     reset: () => void,
     lookAt: (target: Vec3) => void,
@@ -30,7 +33,9 @@ export const DefaultCameraProps = {
     position: Vec3.zero(),
     direction: Vec3.create(0, 0, -1),
     up: Vec3.create(0, 1, 0),
-    viewport: Viewport.create(-1, -1, 1, 1)
+    viewport: Viewport.create(-1, -1, 1, 1),
+    near: 0.1,
+    far: 10000,
 }
 export type CameraProps = Partial<typeof DefaultCameraProps>
 
@@ -89,6 +94,12 @@ export namespace Camera {
             direction,
             up,
 
+            get far() { return p.far },
+            set far(value: number) { p.far = value },
+
+            get near() { return p.near },
+            set near(value: number) { p.near = value },
+
             translate,
             reset,
             lookAt,

src/mol-view/camera/orthographic.ts

@@ -1,5 +1 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
+// TODO

src/mol-view/camera/perspective.ts

@@ -15,8 +15,6 @@ export interface PerspectiveCamera extends Camera {
 
 export const DefaultPerspectiveCameraProps = {
     fov: Math.PI / 4,
-    near: 0.1,
-    far: 10000,
     ...DefaultCameraProps
 }
 export type PerspectiveCameraProps = Partial<typeof DefaultPerspectiveCameraProps>
@@ -48,12 +46,6 @@ export namespace PerspectiveCamera {
             ...camera,
             update,
 
-            get far() { return far },
-            set far(value: number) { far = value },
-
-            get near() { return near },
-            set near(value: number) { near = value },
-
             get fov() { return fov },
             set fov(value: number) { fov = value },
         }