wip, per geometry configurable marker colors

src/mol-geo/geometry/geometry.ts

@@ -17,6 +17,8 @@ import { ParamDefinition as PD } from 'mol-util/param-definition'
 import { DirectVolume } from './direct-volume/direct-volume';
 import { BuiltInSizeThemeOptions, BuiltInSizeThemeName } from 'mol-theme/size';
 import { BuiltInColorThemeName, BuiltInColorThemeOptions } from 'mol-theme/color';
+import { Color } from 'mol-util/color';
+import { Vec3 } from 'mol-math/linear-algebra';
 
 //
 
@@ -63,6 +65,8 @@ export namespace Geometry {
         visible: PD.Boolean('Visible', '', true),
         depthMask: PD.Boolean('Depth Mask', '', true),
         useFog: PD.Boolean('Use Fog', '', false),
+        highlightColor: PD.Color('Highlight Color', '', Color.fromNormalizedRgb(1.0, 0.4, 0.6)),
+        selectColor: PD.Color('Select Color', '', Color.fromNormalizedRgb(0.2, 1.0, 0.1)),
 
         quality: PD.Select<VisualQuality>('Quality', '', 'auto', VisualQualityOptions),
 
@@ -77,6 +81,8 @@ export namespace Geometry {
     export function createValues(props: Props, counts: Counts) {
         return {
             uAlpha: ValueCell.create(props.alpha),
+            uHighlightColor: ValueCell.create(Color.toArrayNormalized(props.highlightColor, Vec3.zero(), 0)),
+            uSelectColor: ValueCell.create(Color.toArrayNormalized(props.selectColor, Vec3.zero(), 0)),
             uGroupCount: ValueCell.create(counts.groupCount),
             drawCount: ValueCell.create(counts.drawCount),
             dUseFog: ValueCell.create(props.useFog),
@@ -84,6 +90,12 @@ export namespace Geometry {
     }
 
     export function updateValues(values: BaseValues, props: Props) {
+        if (Color.fromNormalizedArray(values.uHighlightColor.ref.value, 0) !== props.highlightColor) {
+            ValueCell.update(values.uHighlightColor, Color.toArrayNormalized(props.highlightColor, values.uHighlightColor.ref.value, 0))
+        }
+        if (Color.fromNormalizedArray(values.uSelectColor.ref.value, 0) !== props.selectColor) {
+            ValueCell.update(values.uSelectColor, Color.toArrayNormalized(props.selectColor, values.uSelectColor.ref.value, 0))
+        }
         ValueCell.updateIfChanged(values.uAlpha, props.alpha)
         ValueCell.updateIfChanged(values.dUseFog, props.useFog)
     }

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

@@ -69,6 +69,8 @@ function createPoints() {
         ...size,
 
         uAlpha: ValueCell.create(1.0),
+        uHighlightColor: ValueCell.create(Vec3.create(1.0, 0.4, 0.6)),
+        uSelectColor: ValueCell.create(Vec3.create(0.2, 1.0, 0.1)),
         uInstanceCount: ValueCell.create(1),
         uGroupCount: ValueCell.create(3),
 

src/mol-gl/renderable/schema.ts

@@ -146,9 +146,6 @@ export const GlobalUniformSchema = {
     uViewportHeight: UniformSpec('f'),
     uViewport: UniformSpec('v4'),
 
-    uHighlightColor: UniformSpec('v3'),
-    uSelectColor: UniformSpec('v3'),
-
     uFogNear: UniformSpec('f'),
     uFogFar: UniformSpec('f'),
     uFogColor: UniformSpec('v3'),
@@ -193,6 +190,8 @@ export const BaseSchema = {
     uInstanceCount: UniformSpec('i'),
     uGroupCount: UniformSpec('i'),
     uMarkerTexDim: UniformSpec('v2'),
+    uHighlightColor: UniformSpec('v3'),
+    uSelectColor: UniformSpec('v3'),
 
     tMarker: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
 

src/mol-gl/renderer.ts

@@ -60,8 +60,6 @@ namespace Renderer {
         // const lightPosition = Vec3.create(0, 0, -100)
         const lightColor = Vec3.create(1.0, 1.0, 1.0)
         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) {
@@ -97,9 +95,6 @@ namespace Renderer {
             uLightColor: ValueCell.create(Vec3.clone(lightColor)),
             uLightAmbient: ValueCell.create(Vec3.clone(lightAmbient)),
 
-            uHighlightColor: ValueCell.create(Vec3.clone(highlightColor)),
-            uSelectColor: ValueCell.create(Vec3.clone(selectColor)),
-
             uFogNear: ValueCell.create(camera.state.near),
             uFogFar: ValueCell.create(camera.state.far / 50),
             uFogColor: ValueCell.create(Vec3.clone(fogColor)),

src/mol-util/color/color.ts

@@ -26,26 +26,36 @@ export namespace Color {
         return [ (hexColor >> 16 & 255) / 255, (hexColor >> 8 & 255) / 255, (hexColor & 255) / 255 ]
     }
 
-    export function fromRgb(r: number, g: number, b: number ): Color {
+    export function fromRgb(r: number, g: number, b: number): Color {
         return ((r << 16) | (g << 8) | b) as Color
     }
 
-    export function fromNormalizedRgb(r: number, g: number, b: number ): Color {
+    export function fromNormalizedRgb(r: number, g: number, b: number): Color {
         return (((r * 255) << 16) | ((g * 255) << 8) | (b * 255)) as Color
     }
 
+    export function fromArray(array: Helpers.NumberArray, offset: number): Color {
+        return fromRgb(array[offset], array[offset + 1], array[offset + 2])
+    }
+
+    export function fromNormalizedArray(array: Helpers.NumberArray, offset: number): Color {
+        return fromNormalizedRgb(array[offset], array[offset + 1], array[offset + 2])
+    }
+
     /** Copies hex color to rgb array */
     export function toArray(hexColor: Color, array: Helpers.NumberArray, offset: number) {
         array[ offset ] = (hexColor >> 16 & 255)
         array[ offset + 1 ] = (hexColor >> 8 & 255)
         array[ offset + 2 ] = (hexColor & 255)
+        return array
     }
 
     /** Copies normalized (0 to 1) hex color to rgb array */
-    export function toArrayNormalized(hexColor: Color, array: Helpers.NumberArray, offset: number) {
+    export function toArrayNormalized<T extends Helpers.NumberArray>(hexColor: Color, array: T, offset: number) {
         array[ offset ] = (hexColor >> 16 & 255) / 255
         array[ offset + 1 ] = (hexColor >> 8 & 255) / 255
         array[ offset + 2 ] = (hexColor & 255) / 255
+        return array
     }
 
     /** Linear interpolation between two colors */