Merge pull request #693 from molstar/dim-unmarked

support dim unmarked groups & marker edge strength

CHANGELOG.md

@@ -25,6 +25,8 @@ Note that since we don't clearly distinguish between a public and private interf
 - Add RepresentationRegistry.clear and ThemeRegistry.clear
 - Add generic Loci support for overpaint, substance, clipping themes
 - Add `.getCenter` and `.center` to `Camera`
+- Add support to dim unmarked groups
+- Add support for marker edge strength
 
 ## [v3.28.0] - 2022-12-20
 

src/mol-canvas3d/passes/draw.ts

 /**
- * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
@@ -312,7 +312,7 @@ export class DrawPass {
 
         const { x, y, width, height } = camera.viewport;
         renderer.setViewport(x, y, width, height);
-        renderer.update(camera);
+        renderer.update(camera, scene);
 
         if (transparentBackground && !antialiasingEnabled && toDrawingBuffer) {
             this.drawTarget.bind();
@@ -360,7 +360,7 @@ export class DrawPass {
         }
         if (helper.camera.isEnabled) {
             helper.camera.update(camera);
-            renderer.update(helper.camera.camera);
+            renderer.update(helper.camera.camera, helper.camera.scene);
             renderer.renderBlended(helper.camera.scene, helper.camera.camera);
         }
 

src/mol-canvas3d/passes/marking.ts

 /**
- * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2021-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -27,6 +27,8 @@ export const MarkingParams = {
     highlightEdgeColor: PD.Color(Color.darken(Color.fromNormalizedRgb(1.0, 0.4, 0.6), 1.0)),
     selectEdgeColor: PD.Color(Color.darken(Color.fromNormalizedRgb(0.2, 1.0, 0.1), 1.0)),
     edgeScale: PD.Numeric(1, { min: 1, max: 3, step: 1 }, { description: 'Thickness of the edge.' }),
+    highlightEdgeStrength: PD.Numeric(1.0, { min: 0, max: 1, step: 0.1 }),
+    selectEdgeStrength: PD.Numeric(1.0, { min: 0, max: 1, step: 0.1 }),
     ghostEdgeStrength: PD.Numeric(0.3, { min: 0, max: 1, step: 0.1 }, { description: 'Opacity of the hidden edges that are covered by other geometry. When set to 1, one less geometry render pass is done.' }),
     innerEdgeFactor: PD.Numeric(1.5, { min: 0, max: 3, step: 0.1 }, { description: 'Factor to multiply the inner edge color with - for added contrast.' }),
 };
@@ -101,7 +103,7 @@ export class MarkingPass {
     }
 
     update(props: MarkingProps) {
-        const { highlightEdgeColor, selectEdgeColor, edgeScale, innerEdgeFactor, ghostEdgeStrength } = props;
+        const { highlightEdgeColor, selectEdgeColor, edgeScale, innerEdgeFactor, ghostEdgeStrength, highlightEdgeStrength, selectEdgeStrength } = props;
 
         const { values: edgeValues } = this.edge;
         const _edgeScale = Math.round(edgeScale * this.webgl.pixelRatio);
@@ -113,8 +115,10 @@ export class MarkingPass {
         const { values: overlayValues } = this.overlay;
         ValueCell.update(overlayValues.uHighlightEdgeColor, Color.toVec3Normalized(overlayValues.uHighlightEdgeColor.ref.value, highlightEdgeColor));
         ValueCell.update(overlayValues.uSelectEdgeColor, Color.toVec3Normalized(overlayValues.uSelectEdgeColor.ref.value, selectEdgeColor));
-        ValueCell.update(overlayValues.uInnerEdgeFactor, innerEdgeFactor);
-        ValueCell.update(overlayValues.uGhostEdgeStrength, ghostEdgeStrength);
+        ValueCell.updateIfChanged(overlayValues.uInnerEdgeFactor, innerEdgeFactor);
+        ValueCell.updateIfChanged(overlayValues.uGhostEdgeStrength, ghostEdgeStrength);
+        ValueCell.updateIfChanged(overlayValues.uHighlightEdgeStrength, highlightEdgeStrength);
+        ValueCell.updateIfChanged(overlayValues.uSelectEdgeStrength, selectEdgeStrength);
     }
 
     render(viewport: Viewport, target: RenderTarget | undefined) {
@@ -170,6 +174,8 @@ const OverlaySchema = {
     uTexSizeInv: UniformSpec('v2'),
     uHighlightEdgeColor: UniformSpec('v3'),
     uSelectEdgeColor: UniformSpec('v3'),
+    uHighlightEdgeStrength: UniformSpec('f'),
+    uSelectEdgeStrength: UniformSpec('f'),
     uGhostEdgeStrength: UniformSpec('f'),
     uInnerEdgeFactor: UniformSpec('f'),
 };
@@ -186,6 +192,8 @@ function getOverlayRenderable(ctx: WebGLContext, edgeTexture: Texture): OverlayR
         uTexSizeInv: ValueCell.create(Vec2.create(1 / width, 1 / height)),
         uHighlightEdgeColor: ValueCell.create(Vec3()),
         uSelectEdgeColor: ValueCell.create(Vec3()),
+        uHighlightEdgeStrength: ValueCell.create(1),
+        uSelectEdgeStrength: ValueCell.create(1),
         uGhostEdgeStrength: ValueCell.create(0),
         uInnerEdgeFactor: ValueCell.create(0),
     };

src/mol-canvas3d/passes/pick.ts

 /**
- * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -172,7 +172,7 @@ export class PickPass {
 
     private renderVariant(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, variant: 'pick' | 'depth', pickType: number) {
         renderer.clear(false);
-        renderer.update(camera);
+        renderer.update(camera, scene);
         renderer.renderPick(scene.primitives, camera, variant, null, pickType);
 
         if (helper.handle.isEnabled) {
@@ -181,7 +181,7 @@ export class PickPass {
 
         if (helper.camera.isEnabled) {
             helper.camera.update(camera);
-            renderer.update(helper.camera.camera);
+            renderer.update(helper.camera.camera, helper.camera.scene);
             renderer.renderPick(helper.camera.scene, helper.camera.camera, variant, null, pickType);
         }
     }

src/mol-gl/renderable/schema.ts

 /**
- * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Gianluca Tomasello <giagitom@gmail.com>
@@ -152,9 +152,12 @@ export const GlobalUniformSchema = {
 
     uHighlightColor: UniformSpec('v3'),
     uSelectColor: UniformSpec('v3'),
+    uDimColor: UniformSpec('v3'),
     uHighlightStrength: UniformSpec('f'),
     uSelectStrength: UniformSpec('f'),
+    uDimStrength: UniformSpec('f'),
     uMarkerPriority: UniformSpec('i'),
+    uMarkerAverage: UniformSpec('f'),
 
     uXrayEdgeFalloff: UniformSpec('f'),
 

src/mol-gl/renderer.ts

 /**
- * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Gianluca Tomasello <giagitom@gmail.com>
@@ -58,7 +58,7 @@ interface Renderer {
 
     clear: (toBackgroundColor: boolean, ignoreTransparentBackground?: boolean) => void
     clearDepth: (packed?: boolean) => void
-    update: (camera: ICamera) => void
+    update: (camera: ICamera, scene: Scene) => void
 
     renderPick: (group: Scene.Group, camera: ICamera, variant: 'pick' | 'depth', depthTexture: Texture | null, pickType: PickType) => void
     renderDepth: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
@@ -97,8 +97,10 @@ export const RendererParams = {
     colorMarker: PD.Boolean(true, { description: 'Enable color marker' }),
     highlightColor: PD.Color(Color.fromNormalizedRgb(1.0, 0.4, 0.6)),
     selectColor: PD.Color(Color.fromNormalizedRgb(0.2, 1.0, 0.1)),
+    dimColor: PD.Color(Color.fromNormalizedRgb(1.0, 1.0, 1.0)),
     highlightStrength: PD.Numeric(0.3, { min: 0.0, max: 1.0, step: 0.1 }),
     selectStrength: PD.Numeric(0.3, { min: 0.0, max: 1.0, step: 0.1 }),
+    dimStrength: PD.Numeric(0.0, { min: 0.0, max: 1.0, step: 0.1 }),
     markerPriority: PD.Select(1, [[1, 'Highlight'], [2, 'Select']]),
 
     xrayEdgeFalloff: PD.Numeric(1, { min: 0.0, max: 3.0, step: 0.1 }),
@@ -232,9 +234,12 @@ namespace Renderer {
 
             uHighlightColor: ValueCell.create(Color.toVec3Normalized(Vec3(), p.highlightColor)),
             uSelectColor: ValueCell.create(Color.toVec3Normalized(Vec3(), p.selectColor)),
+            uDimColor: ValueCell.create(Color.toVec3Normalized(Vec3(), p.dimColor)),
             uHighlightStrength: ValueCell.create(p.highlightStrength),
             uSelectStrength: ValueCell.create(p.selectStrength),
+            uDimStrength: ValueCell.create(p.dimStrength),
             uMarkerPriority: ValueCell.create(p.markerPriority),
+            uMarkerAverage: ValueCell.create(0),
 
             uXrayEdgeFalloff: ValueCell.create(p.xrayEdgeFalloff),
         };
@@ -329,7 +334,7 @@ namespace Renderer {
             r.render(variant, sharedTexturesList.length);
         };
 
-        const update = (camera: ICamera) => {
+        const update = (camera: ICamera, scene: Scene) => {
             ValueCell.update(globalUniforms.uView, camera.view);
             ValueCell.update(globalUniforms.uInvView, Mat4.invert(invView, camera.view));
             ValueCell.update(globalUniforms.uProjection, camera.projection);
@@ -346,6 +351,8 @@ namespace Renderer {
             ValueCell.updateIfChanged(globalUniforms.uFogFar, camera.fogFar);
             ValueCell.updateIfChanged(globalUniforms.uFogNear, camera.fogNear);
             ValueCell.updateIfChanged(globalUniforms.uTransparentBackground, transparentBackground);
+
+            ValueCell.updateIfChanged(globalUniforms.uMarkerAverage, scene.markerAverage);
         };
 
         const updateInternal = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null, renderMask: Mask, markingDepthTest: boolean) => {
@@ -755,6 +762,10 @@ namespace Renderer {
                     p.selectColor = props.selectColor;
                     ValueCell.update(globalUniforms.uSelectColor, Color.toVec3Normalized(globalUniforms.uSelectColor.ref.value, p.selectColor));
                 }
+                if (props.dimColor !== undefined && props.dimColor !== p.dimColor) {
+                    p.dimColor = props.dimColor;
+                    ValueCell.update(globalUniforms.uDimColor, Color.toVec3Normalized(globalUniforms.uDimColor.ref.value, p.dimColor));
+                }
                 if (props.highlightStrength !== undefined && props.highlightStrength !== p.highlightStrength) {
                     p.highlightStrength = props.highlightStrength;
                     ValueCell.update(globalUniforms.uHighlightStrength, p.highlightStrength);
@@ -763,6 +774,10 @@ namespace Renderer {
                     p.selectStrength = props.selectStrength;
                     ValueCell.update(globalUniforms.uSelectStrength, p.selectStrength);
                 }
+                if (props.dimStrength !== undefined && props.dimStrength !== p.dimStrength) {
+                    p.dimStrength = props.dimStrength;
+                    ValueCell.update(globalUniforms.uDimStrength, p.dimStrength);
+                }
                 if (props.markerPriority !== undefined && props.markerPriority !== p.markerPriority) {
                     p.markerPriority = props.markerPriority;
                     ValueCell.update(globalUniforms.uMarkerPriority, p.markerPriority);

src/mol-gl/shader/chunks/apply-marker-color.glsl.ts

 export const apply_marker_color = `
+
 #if defined(dColorMarker)
     if (marker > 0.0) {
         if ((uMarkerPriority == 1 && marker != 2.0) || (uMarkerPriority != 1 && marker == 1.0)) {
@@ -8,6 +9,9 @@ export const apply_marker_color = `
             gl_FragColor.rgb = mix(gl_FragColor.rgb, uSelectColor, uSelectStrength);
             gl_FragColor.a = max(gl_FragColor.a, uSelectStrength * 0.002); // for direct-volume rendering
         }
+    } else if (uMarkerAverage > 0.0) {
+        gl_FragColor.rgb = mix(gl_FragColor.rgb, uDimColor, uDimStrength);
+        gl_FragColor.a = max(gl_FragColor.a, uDimStrength * 0.002); // for direct-volume rendering
     }
 #endif
 `;
\ No newline at end of file

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

@@ -25,9 +25,12 @@ uniform int uMarkingType;
 #if defined(dColorMarker)
     uniform vec3 uHighlightColor;
     uniform vec3 uSelectColor;
+    uniform vec3 uDimColor;
     uniform float uHighlightStrength;
     uniform float uSelectStrength;
+    uniform float uDimStrength;
     uniform int uMarkerPriority;
+    uniform float uMarkerAverage;
 #endif
 
 #if defined(dNeedsMarker)

src/mol-gl/shader/direct-volume.frag.ts

@@ -53,9 +53,12 @@ uniform int uGroupCount;
 #if defined(dColorMarker)
     uniform vec3 uHighlightColor;
     uniform vec3 uSelectColor;
+    uniform vec3 uDimColor;
     uniform float uHighlightStrength;
     uniform float uSelectStrength;
+    uniform float uDimStrength;
     uniform int uMarkerPriority;
+    uniform float uMarkerAverage;
 
     uniform float uMarker;
     uniform vec2 uMarkerTexDim;

src/mol-gl/shader/marking/overlay.frag.ts

@@ -6,6 +6,8 @@ uniform vec2 uTexSizeInv;
 uniform sampler2D tEdgeTexture;
 uniform vec3 uHighlightEdgeColor;
 uniform vec3 uSelectEdgeColor;
+uniform float uHighlightEdgeStrength;
+uniform float uSelectEdgeStrength;
 uniform float uGhostEdgeStrength;
 uniform float uInnerEdgeFactor;
 
@@ -16,6 +18,8 @@ void main() {
         vec3 edgeColor = edgeValue.b == 1.0 ? uHighlightEdgeColor : uSelectEdgeColor;
         gl_FragColor.rgb = edgeValue.g > 0.0 ? edgeColor : edgeColor * uInnerEdgeFactor;
         gl_FragColor.a = (edgeValue.r == 1.0 ? uGhostEdgeStrength : 1.0) * edgeValue.a;
+        float edgeStrength = edgeValue.b == 1.0 ? uHighlightEdgeStrength : uSelectEdgeStrength;
+        gl_FragColor.a *= edgeStrength;
     } else {
         gl_FragColor = vec4(0.0);
     }