molstar 4.2.0 → 4.3.0

package/lib/mol-canvas3d/passes/dof.js

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Ludovic Autin <autin@scripps.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+import { QuadSchema, QuadValues } from '../../mol-gl/compute/util';
+import { createComputeRenderable } from '../../mol-gl/renderable';
+import { TextureSpec, UniformSpec, DefineSpec } from '../../mol-gl/renderable/schema';
+import { ShaderCode } from '../../mol-gl/shader-code';
+import { createComputeRenderItem } from '../../mol-gl/webgl/render-item';
+import { createNullTexture } from '../../mol-gl/webgl/texture';
+import { Mat4, Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
+import { ValueCell } from '../../mol-util';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { quad_vert } from '../../mol-gl/shader/quad.vert';
+import { dof_frag } from '../../mol-gl/shader/dof.frag';
+import { isTimingMode } from '../../mol-util/debug';
+export const DofParams = {
+    blurSize: PD.Numeric(9, { min: 1, max: 32, step: 1 }),
+    blurSpread: PD.Numeric(1.0, { min: 0.0, max: 10.0, step: 0.1 }),
+    inFocus: PD.Numeric(0.0, { min: -5000.0, max: 5000.0, step: 1.0 }, { description: 'Distance from the scene center that will be in focus' }),
+    PPM: PD.Numeric(20.0, { min: 0.0, max: 5000.0, step: 0.1 }, { description: 'Size of the area that will be in focus' }),
+    center: PD.Select('camera-target', PD.arrayToOptions(['scene-center', 'camera-target'])),
+    mode: PD.Select('plane', PD.arrayToOptions(['plane', 'sphere'])),
+};
+export class DofPass {
+    static isEnabled(props) {
+        return props.dof.name !== 'off';
+    }
+    constructor(webgl, width, height) {
+        this.webgl = webgl;
+        this.target = webgl.createRenderTarget(width, height, false);
+        const nullTexture = createNullTexture();
+        this.renderable = getDofRenderable(webgl, nullTexture, nullTexture, nullTexture);
+    }
+    updateState(viewport) {
+        const { gl, state } = this.webgl;
+        state.enable(gl.SCISSOR_TEST);
+        state.disable(gl.BLEND);
+        state.disable(gl.DEPTH_TEST);
+        state.depthMask(false);
+        const { x, y, width, height } = viewport;
+        state.viewport(x, y, width, height);
+        state.scissor(x, y, width, height);
+        state.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+    setSize(width, height) {
+        const w = this.target.texture.getWidth();
+        const h = this.target.texture.getHeight();
+        if (width !== w || height !== h) {
+            this.target.setSize(width, height);
+            ValueCell.update(this.renderable.values.uTexSize, Vec2.set(this.renderable.values.uTexSize.ref.value, width, height));
+        }
+    }
+    update(camera, input, depthOpaque, depthTransparent, props, sphere) {
+        let needsUpdate = false;
+        if (this.renderable.values.tColor.ref.value !== input) {
+            ValueCell.update(this.renderable.values.tColor, input);
+            needsUpdate = true;
+        }
+        if (this.renderable.values.tDepthOpaque.ref.value !== depthOpaque) {
+            ValueCell.update(this.renderable.values.tDepthOpaque, depthOpaque);
+            needsUpdate = true;
+        }
+        if (this.renderable.values.tDepthTransparent.ref.value !== depthTransparent) {
+            ValueCell.update(this.renderable.values.tDepthTransparent, depthTransparent);
+            needsUpdate = true;
+        }
+        const orthographic = camera.state.mode === 'orthographic' ? 1 : 0;
+        const invProjection = this.renderable.values.uInvProjection.ref.value;
+        Mat4.invert(invProjection, camera.projection);
+        const [w, h] = this.renderable.values.uTexSize.ref.value;
+        const v = camera.viewport;
+        ValueCell.update(this.renderable.values.uProjection, camera.projection);
+        ValueCell.update(this.renderable.values.uInvProjection, invProjection);
+        ValueCell.update(this.renderable.values.uMode, props.mode === 'sphere' ? 1 : 0);
+        Vec4.set(this.renderable.values.uBounds.ref.value, v.x / w, v.y / h, (v.x + v.width) / w, (v.y + v.height) / h);
+        ValueCell.update(this.renderable.values.uBounds, this.renderable.values.uBounds.ref.value);
+        ValueCell.updateIfChanged(this.renderable.values.uNear, camera.near);
+        ValueCell.updateIfChanged(this.renderable.values.uFar, camera.far);
+        ValueCell.updateIfChanged(this.renderable.values.dOrthographic, orthographic);
+        if (this.renderable.values.dBlurSize.ref.value !== props.blurSize) {
+            ValueCell.update(this.renderable.values.dBlurSize, props.blurSize);
+            needsUpdate = true;
+        }
+        const wolrdCenter = (props.center === 'scene-center' ? sphere.center : camera.state.target);
+        const distance = Vec3.distance(camera.state.position, wolrdCenter);
+        const inFocus = distance + props.inFocus;
+        ValueCell.updateIfChanged(this.renderable.values.uInFocus, inFocus);
+        // transform center in view space
+        const center = this.renderable.values.uCenter.ref.value;
+        Vec3.transformMat4(center, wolrdCenter, camera.view);
+        ValueCell.update(this.renderable.values.uCenter, center);
+        ValueCell.updateIfChanged(this.renderable.values.uBlurSpread, props.blurSpread);
+        ValueCell.updateIfChanged(this.renderable.values.uPPM, props.PPM);
+        if (needsUpdate) {
+            this.renderable.update();
+        }
+    }
+    render(viewport, target) {
+        if (isTimingMode)
+            this.webgl.timer.mark('DofPass.render');
+        if (target) {
+            target.bind();
+        }
+        else {
+            this.webgl.unbindFramebuffer();
+        }
+        this.updateState(viewport);
+        this.renderable.render();
+        if (isTimingMode)
+            this.webgl.timer.markEnd('DofPass.render');
+    }
+}
+//
+const DofSchema = {
+    ...QuadSchema,
+    tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    uTexSize: UniformSpec('v2'),
+    uProjection: UniformSpec('m4'),
+    uInvProjection: UniformSpec('m4'),
+    uBounds: UniformSpec('v4'),
+    uCenter: UniformSpec('v3'),
+    uMode: UniformSpec('i'),
+    dOrthographic: DefineSpec('number'),
+    uNear: UniformSpec('f'),
+    uFar: UniformSpec('f'),
+    dBlurSize: DefineSpec('number'),
+    uBlurSpread: UniformSpec('f'),
+    uInFocus: UniformSpec('f'),
+    uPPM: UniformSpec('f'),
+};
+const DofShaderCode = ShaderCode('dof', quad_vert, dof_frag);
+function getDofRenderable(ctx, colorTexture, depthTextureOpaque, depthTextureTransparent) {
+    const width = colorTexture.getWidth();
+    const height = colorTexture.getHeight();
+    const values = {
+        ...QuadValues,
+        tDepthOpaque: ValueCell.create(depthTextureOpaque),
+        tDepthTransparent: ValueCell.create(depthTextureTransparent),
+        tColor: ValueCell.create(colorTexture),
+        uTexSize: ValueCell.create(Vec2.create(width, height)),
+        uProjection: ValueCell.create(Mat4.identity()),
+        uInvProjection: ValueCell.create(Mat4.identity()),
+        uBounds: ValueCell.create(Vec4()),
+        uCenter: ValueCell.create(Vec3()),
+        uMode: ValueCell.create(0),
+        dOrthographic: ValueCell.create(0),
+        uNear: ValueCell.create(1),
+        uFar: ValueCell.create(10000),
+        dBlurSize: ValueCell.create(5),
+        uBlurSpread: ValueCell.create(300.0),
+        uInFocus: ValueCell.create(20.0),
+        uPPM: ValueCell.create(20.0),
+    };
+    const schema = { ...DofSchema };
+    const renderItem = createComputeRenderItem(ctx, 'triangles', DofShaderCode, schema, values);
+    return createComputeRenderable(renderItem, values);
+}

package/lib/mol-canvas3d/passes/draw.d.ts

@@ -18,6 +18,7 @@ import { DpoitPass } from './dpoit';
 import { AntialiasingPass, PostprocessingPass, PostprocessingProps } from './postprocessing';
 import { MarkingPass, MarkingProps } from './marking';
 import { AssetManager } from '../../mol-util/assets';
+import { DofPass } from './dof';
 import { BloomPass } from './bloom';
 type Props = {
     postprocessing: PostprocessingProps;
@@ -49,6 +50,7 @@ export declare class DrawPass {
     readonly postprocessing: PostprocessingPass;
     readonly antialiasing: AntialiasingPass;
     readonly bloom: BloomPass;
+    readonly dof: DofPass;
     private transparencyMode;
     setTransparency(transparency: 'wboit' | 'dpoit' | 'blended'): void;
     get transparency(): TransparencyMode;

package/lib/mol-canvas3d/passes/draw.js

@@ -15,6 +15,7 @@ import { AntialiasingPass, PostprocessingPass } from './postprocessing';
 import { MarkingPass } from './marking';
 import { createCopyRenderable } from '../../mol-gl/compute/util';
 import { isDebugMode, isTimingMode } from '../../mol-util/debug';
+import { DofPass } from './dof';
 import { BloomPass } from './bloom';
 export class DrawPass {
     setTransparency(transparency) {
@@ -58,6 +59,7 @@ export class DrawPass {
         this.postprocessing = new PostprocessingPass(webgl, assetManager, this);
         this.antialiasing = new AntialiasingPass(webgl, width, height);
         this.bloom = new BloomPass(webgl, width, height);
+        this.dof = new DofPass(webgl, width, height);
         this.copyFboTarget = createCopyRenderable(webgl, this.colorTarget.texture);
         this.copyFboPostprocessing = createCopyRenderable(webgl, this.postprocessing.target.texture);
         this.setTransparency(transparency);
@@ -90,6 +92,7 @@ export class DrawPass {
         this.marking.setSize(width, height);
         this.postprocessing.setSize(width, height);
         this.antialiasing.setSize(width, height);
+        this.dof.setSize(width, height);
         this.bloom.setSize(width, height);
     }
     _renderDpoit(renderer, camera, scene, iterations, transparentBackground, postprocessingProps) {
@@ -102,7 +105,7 @@ export class DrawPass {
             renderer.renderDpoitOpaque(scene.primitives, camera, null);
         }
         if (PostprocessingPass.isEnabled(postprocessingProps)) {
-            if (PostprocessingPass.isTransparentOutlineEnabled(postprocessingProps)) {
+            if (PostprocessingPass.isTransparentOutlineEnabled(postprocessingProps) || DofPass.isEnabled(postprocessingProps)) {
                 this.depthTargetTransparent.bind();
                 renderer.clearDepth(true);
                 if (scene.opacityAverage < 1) {
@@ -147,7 +150,7 @@ export class DrawPass {
             renderer.renderWboitOpaque(scene.primitives, camera, null);
         }
         if (PostprocessingPass.isEnabled(postprocessingProps)) {
-            if (PostprocessingPass.isTransparentOutlineEnabled(postprocessingProps)) {
+            if (PostprocessingPass.isTransparentOutlineEnabled(postprocessingProps) || DofPass.isEnabled(postprocessingProps)) {
                 this.depthTargetTransparent.bind();
                 renderer.clearDepth(true);
                 if (scene.opacityAverage < 1) {
@@ -208,7 +211,7 @@ export class DrawPass {
                 else {
                     (_a = this.colorTarget.depthRenderbuffer) === null || _a === void 0 ? void 0 : _a.detachFramebuffer(this.postprocessing.target.framebuffer);
                 }
-                if (PostprocessingPass.isTransparentOutlineEnabled(postprocessingProps)) {
+                if (PostprocessingPass.isTransparentOutlineEnabled(postprocessingProps) || DofPass.isEnabled(postprocessingProps)) {
                     this.depthTargetTransparent.bind();
                     renderer.clearDepth(true);
                     if (scene.opacityAverage < 1) {
@@ -248,11 +251,12 @@ export class DrawPass {
         }
     }
     _render(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props) {
-        var _a;
+        var _a, _b;
         const volumeRendering = scene.volumes.renderables.length > 0;
         const postprocessingEnabled = PostprocessingPass.isEnabled(props.postprocessing);
         const antialiasingEnabled = AntialiasingPass.isEnabled(props.postprocessing);
         const markingEnabled = MarkingPass.isEnabled(props.marking);
+        const dofEnabled = DofPass.isEnabled(props.postprocessing);
         const { x, y, width, height } = camera.viewport;
         renderer.setViewport(x, y, width, height);
         renderer.update(camera, scene);
@@ -305,13 +309,29 @@ export class DrawPass {
             renderer.update(helper.camera.camera, helper.camera.scene);
             renderer.renderBlended(helper.camera.scene, helper.camera.camera);
         }
+        let needsTargetCopy = false;
         if (antialiasingEnabled) {
             const input = PostprocessingPass.isEnabled(props.postprocessing)
                 ? this.postprocessing.target.texture
                 : this.colorTarget.texture;
-            this.antialiasing.render(camera, input, toDrawingBuffer, props.postprocessing);
+            this.antialiasing.render(camera, input, toDrawingBuffer && !dofEnabled, props.postprocessing);
         }
-        else if (toDrawingBuffer) {
+        else if (toDrawingBuffer && !DofPass.isEnabled(props.postprocessing)) {
+            needsTargetCopy = true;
+        }
+        if (props.postprocessing.dof.name === 'on') {
+            const input = AntialiasingPass.isEnabled(props.postprocessing)
+                ? this.antialiasing.target.texture
+                : PostprocessingPass.isEnabled(props.postprocessing)
+                    ? this.postprocessing.target.texture
+                    : this.colorTarget.texture;
+            this.dof.update(camera, input, ((_a = this.depthTargetOpaque) === null || _a === void 0 ? void 0 : _a.texture) || this.depthTextureOpaque, this.depthTextureTransparent, props.postprocessing.dof.params, scene.boundingSphereVisible);
+            this.dof.render(camera.viewport, toDrawingBuffer ? undefined : this.getColorTarget(props.postprocessing));
+        }
+        else if (toDrawingBuffer && !AntialiasingPass.isEnabled(props.postprocessing)) {
+            needsTargetCopy = true;
+        }
+        if (needsTargetCopy) {
             this.drawTarget.bind();
             this.webgl.state.disable(this.webgl.gl.DEPTH_TEST);
             if (postprocessingEnabled) {
@@ -330,7 +350,7 @@ export class DrawPass {
                 renderer.renderEmissive(scene.primitives, camera, null);
             }
             if (!emissiveBloom || scene.emissiveAverage > 0) {
-                this.bloom.update(this.colorTarget.texture, this.bloom.emissiveTarget.texture, ((_a = this.depthTargetOpaque) === null || _a === void 0 ? void 0 : _a.texture) || this.depthTextureOpaque, props.postprocessing.bloom.params);
+                this.bloom.update(this.colorTarget.texture, this.bloom.emissiveTarget.texture, ((_b = this.depthTargetOpaque) === null || _b === void 0 ? void 0 : _b.texture) || this.depthTextureOpaque, props.postprocessing.bloom.params);
                 this.bloom.render(camera.viewport, toDrawingBuffer ? undefined : this.getColorTarget(props.postprocessing));
             }
         }
@@ -364,7 +384,10 @@ export class DrawPass {
             this.webgl.timer.markEnd('DrawPass.render');
     }
     getColorTarget(postprocessingProps) {
-        if (AntialiasingPass.isEnabled(postprocessingProps)) {
+        if (DofPass.isEnabled(postprocessingProps)) {
+            return this.dof.target;
+        }
+        else if (AntialiasingPass.isEnabled(postprocessingProps)) {
             return this.antialiasing.target;
         }
         else if (PostprocessingPass.isEnabled(postprocessingProps)) {

package/lib/mol-canvas3d/passes/image.d.ts

@@ -42,6 +42,14 @@ export declare const ImageParams: {
             color: any;
             includeTransparent: any;
         }>, "on">;
+        dof: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
+            blurSize: any;
+            blurSpread: any;
+            inFocus: any;
+            PPM: any;
+            center: any;
+            mode: any;
+        }>, "on">;
         antialiasing: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             edgeThreshold: any;
             maxSearchSteps: any;

package/lib/mol-canvas3d/passes/postprocessing.d.ts

@@ -60,6 +60,14 @@ export declare const PostprocessingParams: {
         color: Color;
         includeTransparent: boolean;
     }>, "on">>;
+    dof: PD.Mapped<PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
+        blurSize: number;
+        blurSpread: number;
+        inFocus: number;
+        PPM: number;
+        center: string;
+        mode: string;
+    }>, "on">>;
     antialiasing: PD.Mapped<PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
         edgeThreshold: number;
         maxSearchSteps: number;

package/lib/mol-canvas3d/passes/postprocessing.js

@@ -25,6 +25,7 @@ import { isTimingMode } from '../../mol-util/debug';
 import { BackgroundParams, BackgroundPass } from './background';
 import { shadows_frag } from '../../mol-gl/shader/shadows.frag';
 import { CasParams, CasPass } from './cas';
+import { DofParams } from './dof';
 import { BloomParams } from './bloom';
 export const OutlinesSchema = {
     ...QuadSchema,
@@ -314,6 +315,10 @@ export const PostprocessingParams = {
         }),
         off: PD.Group({})
     }, { cycle: true, description: 'Draw outline around 3D objects' }),
+    dof: PD.MappedStatic('off', {
+        on: PD.Group(DofParams),
+        off: PD.Group({})
+    }, { cycle: true, description: 'DOF' }),
     antialiasing: PD.MappedStatic('smaa', {
         fxaa: PD.Group(FxaaParams),
         smaa: PD.Group(SmaaParams),

package/lib/mol-geo/geometry/lines/lines.d.ts

@@ -42,7 +42,6 @@ export declare namespace Lines {
         alpha: PD.Numeric;
         quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
         material: PD.Group<PD.Normalize<{
-            /** Wide line */
             metalness: number;
             roughness: number;
             bumpiness: number;

package/lib/mol-gl/shader/background.frag.js

@@ -1,96 +1,96 @@
-export const background_frag = `
-precision mediump float;
-precision mediump samplerCube;
-precision mediump sampler2D;
-
-#if defined(dVariant_skybox)
-    uniform samplerCube tSkybox;
-    uniform mat4 uViewDirectionProjectionInverse;
-    uniform float uBlur;
-    uniform float uOpacity;
-    uniform float uSaturation;
-    uniform float uLightness;
-    uniform mat3 uRotation;
-#elif defined(dVariant_image)
-    uniform sampler2D tImage;
-    uniform vec2 uImageScale;
-    uniform vec2 uImageOffset;
-    uniform float uBlur;
-    uniform float uOpacity;
-    uniform float uSaturation;
-    uniform float uLightness;
-#elif defined(dVariant_horizontalGradient) || defined(dVariant_radialGradient)
-    uniform vec3 uGradientColorA;
-    uniform vec3 uGradientColorB;
-    uniform float uGradientRatio;
-#endif
-
-uniform vec2 uTexSize;
-uniform vec4 uViewport;
-uniform bool uViewportAdjusted;
-varying vec4 vPosition;
-
-// TODO: add as general pp option to remove banding?
-// Iestyn's RGB dither from http://alex.vlachos.com/graphics/Alex_Vlachos_Advanced_VR_Rendering_GDC2015.pdf
-vec3 ScreenSpaceDither(vec2 vScreenPos) {
-    vec3 vDither = vec3(dot(vec2(171.0, 231.0), vScreenPos.xy));
-    vDither.rgb = fract(vDither.rgb / vec3(103.0, 71.0, 97.0));
-    return vDither.rgb / 255.0;
-}
-
-vec3 saturateColor(vec3 c, float amount) {
-    // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
-    const vec3 W = vec3(0.2125, 0.7154, 0.0721);
-    vec3 intensity = vec3(dot(c, W));
-    return mix(intensity, c, 1.0 + amount);
-}
-
-vec3 lightenColor(vec3 c, float amount) {
-    return c + amount;
-}
-
-void main() {
-    #if defined(dVariant_skybox)
-        vec4 t = uViewDirectionProjectionInverse * vPosition;
-        #ifdef enabledShaderTextureLod
-            gl_FragColor = textureCubeLodEXT(tSkybox, uRotation * normalize(t.xyz / t.w), uBlur * 8.0);
-        #else
-            gl_FragColor = textureCube(tSkybox, uRotation * normalize(t.xyz / t.w));
-        #endif
-        gl_FragColor.a = uOpacity;
-        gl_FragColor.rgb = lightenColor(saturateColor(gl_FragColor.rgb, uSaturation), uLightness);
-    #elif defined(dVariant_image)
-        vec2 coords;
-        if (uViewportAdjusted) {
-            coords = ((gl_FragCoord.xy - uViewport.xy) * (uTexSize / uViewport.zw) / uImageScale) + uImageOffset;
-        } else {
-            coords = (gl_FragCoord.xy / uImageScale) + uImageOffset;
-        }
-        #ifdef enabledShaderTextureLod
-            gl_FragColor = texture2DLodEXT(tImage, vec2(coords.x, 1.0 - coords.y), uBlur * 8.0);
-        #else
-            gl_FragColor = texture2D(tImage, vec2(coords.x, 1.0 - coords.y));
-        #endif
-        gl_FragColor.a = uOpacity;
-        gl_FragColor.rgb = lightenColor(saturateColor(gl_FragColor.rgb, uSaturation), uLightness);
-    #elif defined(dVariant_horizontalGradient)
-        float d;
-        if (uViewportAdjusted) {
-            d = ((gl_FragCoord.y - uViewport.y) * (uTexSize.y / uViewport.w) / uTexSize.y) + 1.0 - (uGradientRatio * 2.0);
-        } else {
-            d = (gl_FragCoord.y / uTexSize.y) + 1.0 - (uGradientRatio * 2.0);
-        }
-        gl_FragColor = vec4(mix(uGradientColorB, uGradientColorA, clamp(d, 0.0, 1.0)), 1.0);
-        gl_FragColor.rgb += ScreenSpaceDither(gl_FragCoord.xy);
-    #elif defined(dVariant_radialGradient)
-        float d;
-        if (uViewportAdjusted) {
-            d = distance(vec2(0.5), (gl_FragCoord.xy - uViewport.xy) * (uTexSize / uViewport.zw) / uTexSize) + uGradientRatio - 0.5;
-        } else {
-            d = distance(vec2(0.5), gl_FragCoord.xy / uTexSize) + uGradientRatio - 0.5;
-        }
-        gl_FragColor = vec4(mix(uGradientColorB, uGradientColorA, 1.0 - clamp(d, 0.0, 1.0)), 1.0);
-        gl_FragColor.rgb += ScreenSpaceDither(gl_FragCoord.xy);
-    #endif
-}
+export const background_frag = `
+precision mediump float;
+precision mediump samplerCube;
+precision mediump sampler2D;
+
+#if defined(dVariant_skybox)
+    uniform samplerCube tSkybox;
+    uniform mat4 uViewDirectionProjectionInverse;
+    uniform float uBlur;
+    uniform float uOpacity;
+    uniform float uSaturation;
+    uniform float uLightness;
+    uniform mat3 uRotation;
+#elif defined(dVariant_image)
+    uniform sampler2D tImage;
+    uniform vec2 uImageScale;
+    uniform vec2 uImageOffset;
+    uniform float uBlur;
+    uniform float uOpacity;
+    uniform float uSaturation;
+    uniform float uLightness;
+#elif defined(dVariant_horizontalGradient) || defined(dVariant_radialGradient)
+    uniform vec3 uGradientColorA;
+    uniform vec3 uGradientColorB;
+    uniform float uGradientRatio;
+#endif
+
+uniform vec2 uTexSize;
+uniform vec4 uViewport;
+uniform bool uViewportAdjusted;
+varying vec4 vPosition;
+
+// TODO: add as general pp option to remove banding?
+// Iestyn's RGB dither from http://alex.vlachos.com/graphics/Alex_Vlachos_Advanced_VR_Rendering_GDC2015.pdf
+vec3 ScreenSpaceDither(vec2 vScreenPos) {
+    vec3 vDither = vec3(dot(vec2(171.0, 231.0), vScreenPos.xy));
+    vDither.rgb = fract(vDither.rgb / vec3(103.0, 71.0, 97.0));
+    return vDither.rgb / 255.0;
+}
+
+vec3 saturateColor(vec3 c, float amount) {
+    // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+    const vec3 W = vec3(0.2125, 0.7154, 0.0721);
+    vec3 intensity = vec3(dot(c, W));
+    return mix(intensity, c, 1.0 + amount);
+}
+
+vec3 lightenColor(vec3 c, float amount) {
+    return c + amount;
+}
+
+void main() {
+    #if defined(dVariant_skybox)
+        vec4 t = uViewDirectionProjectionInverse * vPosition;
+        #ifdef enabledShaderTextureLod
+            gl_FragColor = textureCubeLodEXT(tSkybox, uRotation * normalize(t.xyz / t.w), uBlur * 8.0);
+        #else
+            gl_FragColor = textureCube(tSkybox, uRotation * normalize(t.xyz / t.w));
+        #endif
+        gl_FragColor.a = uOpacity;
+        gl_FragColor.rgb = lightenColor(saturateColor(gl_FragColor.rgb, uSaturation), uLightness);
+    #elif defined(dVariant_image)
+        vec2 coords;
+        if (uViewportAdjusted) {
+            coords = ((gl_FragCoord.xy - uViewport.xy) * (uTexSize / uViewport.zw) / uImageScale) + uImageOffset;
+        } else {
+            coords = (gl_FragCoord.xy / uImageScale) + uImageOffset;
+        }
+        #ifdef enabledShaderTextureLod
+            gl_FragColor = texture2DLodEXT(tImage, vec2(coords.x, 1.0 - coords.y), uBlur * 8.0);
+        #else
+            gl_FragColor = texture2D(tImage, vec2(coords.x, 1.0 - coords.y));
+        #endif
+        gl_FragColor.a = uOpacity;
+        gl_FragColor.rgb = lightenColor(saturateColor(gl_FragColor.rgb, uSaturation), uLightness);
+    #elif defined(dVariant_horizontalGradient)
+        float d;
+        if (uViewportAdjusted) {
+            d = ((gl_FragCoord.y - uViewport.y) * (uTexSize.y / uViewport.w) / uTexSize.y) + 1.0 - (uGradientRatio * 2.0);
+        } else {
+            d = (gl_FragCoord.y / uTexSize.y) + 1.0 - (uGradientRatio * 2.0);
+        }
+        gl_FragColor = vec4(mix(uGradientColorB, uGradientColorA, clamp(d, 0.0, 1.0)), 1.0);
+        gl_FragColor.rgb += ScreenSpaceDither(gl_FragCoord.xy);
+    #elif defined(dVariant_radialGradient)
+        float d;
+        if (uViewportAdjusted) {
+            d = distance(vec2(0.5), (gl_FragCoord.xy - uViewport.xy) * (uTexSize / uViewport.zw) / uTexSize) + uGradientRatio - 0.5;
+        } else {
+            d = distance(vec2(0.5), gl_FragCoord.xy / uTexSize) + uGradientRatio - 0.5;
+        }
+        gl_FragColor = vec4(mix(uGradientColorB, uGradientColorA, 1.0 - clamp(d, 0.0, 1.0)), 1.0);
+        gl_FragColor.rgb += ScreenSpaceDither(gl_FragCoord.xy);
+    #endif
+}
 `;

package/lib/mol-gl/shader/background.vert.js

@@ -1,12 +1,12 @@
-export const background_vert = `
-precision mediump float;
-
-attribute vec2 aPosition;
-
-varying vec4 vPosition;
-
-void main() {
-    vPosition = vec4(aPosition, 1.0, 1.0);
-    gl_Position = vec4(aPosition, 1.0, 1.0);
-}
+export const background_vert = `
+precision mediump float;
+
+attribute vec2 aPosition;
+
+varying vec4 vPosition;
+
+void main() {
+    vPosition = vec4(aPosition, 1.0, 1.0);
+    gl_Position = vec4(aPosition, 1.0, 1.0);
+}
 `;

package/lib/mol-gl/shader/blend-back-dpoit.frag.js

@@ -3,17 +3,17 @@
  *
  * @author Gianluca Tomasello <giagitom@gmail.com>
  */
-export const blendBackDpoit_frag = `
-    precision highp float;
-
-    uniform sampler2D tDpoitBackColor;
-    uniform vec2 uTexSize;
-
-    void main() {
-        vec2 coords = gl_FragCoord.xy / uTexSize;
-        gl_FragColor = texture2D(tDpoitBackColor, coords);
-        if (gl_FragColor.a == 0.0) {
-            discard;
-        }
-    }
+export const blendBackDpoit_frag = `
+    precision highp float;
+
+    uniform sampler2D tDpoitBackColor;
+    uniform vec2 uTexSize;
+
+    void main() {
+        vec2 coords = gl_FragCoord.xy / uTexSize;
+        gl_FragColor = texture2D(tDpoitBackColor, coords);
+        if (gl_FragColor.a == 0.0) {
+            discard;
+        }
+    }
 `;

package/lib/mol-gl/shader/bloom/blur.frag.js

@@ -1,29 +1,29 @@
-export const blur_frag = `
-precision highp float;
-precision highp int;
-precision highp sampler2D;
-
-uniform sampler2D tInput;
-uniform vec2 uTexSizeInv;
-
-uniform vec2 uDirection;
-uniform float uGaussianCoefficients[dKernelRadius];
-
-void main(void) {
-    vec2 coords = gl_FragCoord.xy * uTexSizeInv;
-    float weightSum = uGaussianCoefficients[0];
-    vec4 diffuseSum = texture2D(tInput, coords) * weightSum;
-
-    for(int i = 1; i < dKernelRadius; ++i) {
-        float x = float(i);
-        float w = uGaussianCoefficients[i];
-        vec2 offset = uDirection * uTexSizeInv * x;
-        vec4 sample1 = texture2D(tInput, coords + offset);
-        vec4 sample2 = texture2D(tInput, coords - offset);
-        diffuseSum += (sample1 + sample2) * w;
-        weightSum += 2.0 * w;
-    }
-
-    gl_FragColor = diffuseSum / weightSum;
-}
+export const blur_frag = `
+precision highp float;
+precision highp int;
+precision highp sampler2D;
+
+uniform sampler2D tInput;
+uniform vec2 uTexSizeInv;
+
+uniform vec2 uDirection;
+uniform float uGaussianCoefficients[dKernelRadius];
+
+void main(void) {
+    vec2 coords = gl_FragCoord.xy * uTexSizeInv;
+    float weightSum = uGaussianCoefficients[0];
+    vec4 diffuseSum = texture2D(tInput, coords) * weightSum;
+
+    for(int i = 1; i < dKernelRadius; ++i) {
+        float x = float(i);
+        float w = uGaussianCoefficients[i];
+        vec2 offset = uDirection * uTexSizeInv * x;
+        vec4 sample1 = texture2D(tInput, coords + offset);
+        vec4 sample2 = texture2D(tInput, coords - offset);
+        diffuseSum += (sample1 + sample2) * w;
+        weightSum += 2.0 * w;
+    }
+
+    gl_FragColor = diffuseSum / weightSum;
+}
 `;