renamed flag to marker

src/mol-geo/representation/index.ts

@@ -8,7 +8,7 @@ import { Task } from 'mol-task'
 import { RenderObject } from 'mol-gl/render-object'
 import { PickingId } from '../util/picking';
 import { Loci } from 'mol-model/loci';
-import { FlagAction } from '../util/flag-data';
+import { MarkerAction } from '../util/marker-data';
 
 export interface RepresentationProps {}
 
@@ -17,5 +17,5 @@ export interface Representation<D, P extends RepresentationProps = {}> {
     create: (data: D, props?: P) => Task<void>
     update: (props: P) => Task<void>
     getLoci: (pickingId: PickingId) => Loci | null
-    applyFlags: (loci: Loci, action: FlagAction) => void
+    mark: (loci: Loci, action: MarkerAction) => void
 }

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

@@ -5,6 +5,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+// TODO multiple cylinders for higher bond orders
+
 import { ValueCell } from 'mol-util/value-cell'
 
 import { RenderObject, createMeshRenderObject, MeshRenderObject } from 'mol-gl/render-object'
@@ -22,7 +24,7 @@ import { Vec3, Mat4 } from 'mol-math/linear-algebra';
 import { createUniformColor } from '../../util/color-data';
 import { defaults } from 'mol-util';
 import { Loci, isEveryLoci } from 'mol-model/loci';
-import { FlagAction, applyFlagAction, createFlags } from '../../util/flag-data';
+import { MarkerAction, applyMarkerAction, createMarkers } from '../../util/marker-data';
 
 function createBondMesh(unit: Unit, mesh?: Mesh) {
     return Task.create('Cylinder mesh', async ctx => {
@@ -110,15 +112,15 @@ export default function BondUnitsRepresentation(): UnitsRepresentation<BondProps
                 await ctx.update('Computing bond colors');
                 const color = createUniformColor({ value: 0xFF0000 })
 
-                await ctx.update('Computing bond flags');
-                const flag = createFlags(instanceCount * elementCount)
+                await ctx.update('Computing bond marks');
+                const marker = createMarkers(instanceCount * elementCount)
 
                 const values: MeshValues = {
                     ...getMeshData(mesh),
                     aTransform: transforms,
                     aInstanceId: ValueCell.create(fillSerial(new Float32Array(instanceCount))),
                     ...color,
-                    ...flag,
+                    ...marker,
 
                     uAlpha: ValueCell.create(defaults(props.alpha, 1.0)),
                     uInstanceCount: ValueCell.create(instanceCount),
@@ -173,9 +175,9 @@ export default function BondUnitsRepresentation(): UnitsRepresentation<BondProps
             }
             return null
         },
-        applyFlags(loci: Loci, action: FlagAction) {
+        mark(loci: Loci, action: MarkerAction) {
             const group = currentGroup
-            const tFlag = cylinders.values.tFlag
+            const tMarker = cylinders.values.tMarker
             const unit = group.units[0]
             if (!Unit.isAtomic(unit)) return
 
@@ -183,9 +185,9 @@ export default function BondUnitsRepresentation(): UnitsRepresentation<BondProps
             const instanceCount = group.units.length
 
             let changed = false
-            const array = tFlag.ref.value.array
+            const array = tMarker.ref.value.array
             if (isEveryLoci(loci)) {
-                applyFlagAction(array, 0, elementCount * instanceCount, action)
+                applyMarkerAction(array, 0, elementCount * instanceCount, action)
                 changed = true
             } else if (Bond.isLoci(loci)) {
                 for (const b of loci.bonds) {
@@ -194,7 +196,7 @@ export default function BondUnitsRepresentation(): UnitsRepresentation<BondProps
                         const _idx = unit.bonds.getEdgeIndex(b.aIndex, b.bIndex)
                         if (_idx !== -1) {
                             const idx = _idx
-                            if (applyFlagAction(array, idx, idx + 1, action) && !changed) {
+                            if (applyMarkerAction(array, idx, idx + 1, action) && !changed) {
                                 changed = true
                             }
                         }
@@ -204,7 +206,7 @@ export default function BondUnitsRepresentation(): UnitsRepresentation<BondProps
                 return
             }
             if (changed) {
-                ValueCell.update(tFlag, tFlag.ref.value)
+                ValueCell.update(tMarker, tMarker.ref.value)
             }
         }
     }

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

@@ -12,14 +12,14 @@ import { Representation, RepresentationProps } from '..';
 import { ColorTheme } from '../../theme';
 import { PickingId } from '../../util/picking';
 import { Loci } from 'mol-model/loci';
-import { FlagAction } from '../../util/flag-data';
+import { MarkerAction } from '../../util/marker-data';
 
 export interface UnitsRepresentation<P> {
     renderObjects: ReadonlyArray<RenderObject>
     create: (group: Unit.SymmetryGroup, props: P) => Task<void>
     update: (props: P) => Task<boolean>
     getLoci: (pickingId: PickingId) => Loci | null
-    applyFlags: (loci: Loci, action: FlagAction) => void
+    mark: (loci: Loci, action: MarkerAction) => void
 }
 
 export interface StructureRepresentation<P extends RepresentationProps = {}> extends Representation<Structure, P> { }
@@ -88,9 +88,9 @@ export function StructureRepresentation<P extends StructureProps>(reprCtor: () =
             })
         },
         getLoci,
-        applyFlags(loci: Loci, action: FlagAction) {
+        mark(loci: Loci, action: MarkerAction) {
             for (let i = 0, il = groupReprs.length; i < il; ++i) {
-                groupReprs[i].repr.applyFlags(loci, action)
+                groupReprs[i].repr.mark(loci, action)
             }
         }
     }

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

@@ -14,13 +14,13 @@ import { fillSerial } from 'mol-gl/renderable/util';
 import { UnitsRepresentation, DefaultStructureProps } from './index';
 import VertexMap from '../../shape/vertex-map';
 import { SizeTheme } from '../../theme';
-import { createTransforms, createColors, createSizes, applyElementFlags } from './utils';
+import { createTransforms, createColors, createSizes, markElement } from './utils';
 import { deepEqual, defaults } from 'mol-util';
 import { SortedArray } from 'mol-data/int';
 import { RenderableState, PointValues } from 'mol-gl/renderable';
 import { PickingId } from '../../util/picking';
 import { Loci } from 'mol-model/loci';
-import { FlagAction, createFlags } from '../../util/flag-data';
+import { MarkerAction, createMarkers } from '../../util/marker-data';
 
 export const DefaultPointProps = {
     ...DefaultStructureProps,
@@ -91,8 +91,8 @@ export default function PointUnitsRepresentation(): UnitsRepresentation<PointPro
                 await ctx.update('Computing point sizes');
                 const size = createSizes(group, vertexMap, sizeTheme)
 
-                await ctx.update('Computing spacefill flags');
-                const flag = createFlags(instanceCount * elementCount)
+                await ctx.update('Computing spacefill marks');
+                const marker = createMarkers(instanceCount * elementCount)
 
                 const values: PointValues = {
                     aPosition: ValueCell.create(vertices),
@@ -100,7 +100,7 @@ export default function PointUnitsRepresentation(): UnitsRepresentation<PointPro
                     aTransform: transforms,
                     aInstanceId: ValueCell.create(fillSerial(new Float32Array(instanceCount))),
                     ...color,
-                    ...flag,
+                    ...marker,
                     ...size,
 
                     uAlpha: ValueCell.create(defaults(props.alpha, 1.0)),
@@ -165,8 +165,8 @@ export default function PointUnitsRepresentation(): UnitsRepresentation<PointPro
             }
             return null
         },
-        applyFlags(loci: Loci, action: FlagAction) {
-            applyElementFlags(points.values.tFlag, currentGroup, loci, action)
+        mark(loci: Loci, action: MarkerAction) {
+            markElement(points.values.tMarker, currentGroup, loci, action)
         }
     }
 }

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

@@ -11,7 +11,7 @@ import { RenderObject, createMeshRenderObject, MeshRenderObject } from 'mol-gl/r
 import { Unit, Element, Queries } from 'mol-model/structure';
 import { UnitsRepresentation, DefaultStructureProps } from './index';
 import { Task } from 'mol-task'
-import { createTransforms, createColors, createSphereMesh, applyElementFlags } from './utils';
+import { createTransforms, createColors, createSphereMesh, markElement } from './utils';
 import VertexMap from '../../shape/vertex-map';
 import { deepEqual, defaults } from 'mol-util';
 import { fillSerial } from 'mol-gl/renderable/util';
@@ -20,7 +20,7 @@ import { getMeshData } from '../../util/mesh-data';
 import { Mesh } from '../../shape/mesh';
 import { PickingId } from '../../util/picking';
 import { SortedArray } from 'mol-data/int';
-import { createFlags, FlagAction } from '../../util/flag-data';
+import { createMarkers, MarkerAction } from '../../util/marker-data';
 import { Loci } from 'mol-model/loci';
 
 function createSpacefillMesh(unit: Unit, detail: number, mesh?: Mesh) {
@@ -75,15 +75,15 @@ export default function SpacefillUnitsRepresentation(): UnitsRepresentation<Spac
                 await ctx.update('Computing spacefill colors');
                 const color = createColors(group, vertexMap, colorTheme)
 
-                await ctx.update('Computing spacefill flags');
-                const flag = createFlags(instanceCount * elementCount)
+                await ctx.update('Computing spacefill marks');
+                const marker = createMarkers(instanceCount * elementCount)
 
                 const values: MeshValues = {
                     ...getMeshData(mesh),
                     aTransform: transforms,
                     aInstanceId: ValueCell.create(fillSerial(new Float32Array(instanceCount))),
                     ...color,
-                    ...flag,
+                    ...marker,
 
                     uAlpha: ValueCell.create(defaults(props.alpha, 1.0)),
                     uInstanceCount: ValueCell.create(instanceCount),
@@ -153,8 +153,8 @@ export default function SpacefillUnitsRepresentation(): UnitsRepresentation<Spac
             }
             return null
         },
-        applyFlags(loci: Loci, action: FlagAction) {
-            applyElementFlags(spheres.values.tFlag, currentGroup, loci, action)
+        mark(loci: Loci, action: MarkerAction) {
+            markElement(spheres.values.tMarker, currentGroup, loci, action)
         }
     }
 }

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

@@ -20,7 +20,7 @@ import { Task } from 'mol-task';
 import { icosahedronVertexCount } from '../../primitive/icosahedron';
 import { MeshBuilder } from '../../shape/mesh-builder';
 import { TextureImage } from 'mol-gl/renderable/util';
-import { applyFlagAction, FlagAction } from '../../util/flag-data';
+import { applyMarkerAction, MarkerAction } from '../../util/marker-data';
 import { Loci, isEveryLoci } from 'mol-model/loci';
 
 export function createTransforms({ units }: Unit.SymmetryGroup, transforms?: ValueCell<Float32Array>) {
@@ -89,13 +89,13 @@ export function createSphereMesh(unit: Unit, radius: Element.Property<number>, d
 }
 
 
-export function applyElementFlags(tFlag: ValueCell<TextureImage>, group: Unit.SymmetryGroup, loci: Loci, action: FlagAction) {
+export function markElement(tMarker: ValueCell<TextureImage>, group: Unit.SymmetryGroup, loci: Loci, action: MarkerAction) {
     let changed = false
     const elementCount = group.elements.length
     const instanceCount = group.units.length
-    const array = tFlag.ref.value.array
+    const array = tMarker.ref.value.array
     if (isEveryLoci(loci)) {
-        applyFlagAction(array, 0, elementCount * instanceCount, action)
+        applyMarkerAction(array, 0, elementCount * instanceCount, action)
         changed = true
     } else if (Element.isLoci(loci)) {
         for (const e of loci.elements) {
@@ -103,7 +103,7 @@ export function applyElementFlags(tFlag: ValueCell<TextureImage>, group: Unit.Sy
             if (unitIdx !== -1) {
                 for (let i = 0, il = e.indices.length; i < il; ++i) {
                     const idx = unitIdx * elementCount + e.indices[i]
-                    if (applyFlagAction(array, idx, idx + 1, action) && !changed) {
+                    if (applyMarkerAction(array, idx, idx + 1, action) && !changed) {
                         changed = true
                     }
                 }
@@ -113,6 +113,6 @@ export function applyElementFlags(tFlag: ValueCell<TextureImage>, group: Unit.Sy
         return
     }
     if (changed) {
-        ValueCell.update(tFlag, tFlag.ref.value)
+        ValueCell.update(tMarker, tMarker.ref.value)
     }
 }

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

@@ -10,14 +10,14 @@ import { RepresentationProps, Representation } from '..';
 import { VolumeData } from 'mol-model/volume';
 import { PickingId } from '../../util/picking';
 import { Loci } from 'mol-model/loci';
-import { FlagAction } from '../../util/flag-data';
+import { MarkerAction } from '../../util/marker-data';
 
 export interface VolumeElementRepresentation<P> {
     renderObjects: ReadonlyArray<RenderObject>
     create: (volumeData: VolumeData, props: P) => Task<void>
     update: (props: P) => Task<boolean>
     getLoci: (pickingId: PickingId) => Loci | null
-    applyFlags: (loci: Loci, action: FlagAction) => void
+    mark: (loci: Loci, action: MarkerAction) => void
 }
 
 export interface VolumeRepresentation<P extends RepresentationProps = {}> extends Representation<VolumeData, P> { }
@@ -41,7 +41,7 @@ export function VolumeRepresentation<P>(reprCtor: () => VolumeElementRepresentat
             // TODO
             return null
         },
-        applyFlags(loci: Loci, action: FlagAction) {
+        mark(loci: Loci, action: MarkerAction) {
             // TODO
         }
     }

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

@@ -18,7 +18,7 @@ import { createUniformColor } from '../../util/color-data';
 import { getMeshData } from '../../util/mesh-data';
 import { RenderableState, MeshValues } from 'mol-gl/renderable';
 import { PickingId } from '../../util/picking';
-import { createEmptyFlags, FlagAction } from '../../util/flag-data';
+import { createEmptyMarkers, MarkerAction } from '../../util/marker-data';
 import { Loci } from 'mol-model/loci';
 
 export function computeVolumeSurface(volume: VolumeData, isoValue: VolumeIsoValue) {
@@ -68,14 +68,14 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
 
                 const instanceCount = 1
                 const color = createUniformColor({ value: 0x7ec0ee })
-                const flag = createEmptyFlags()
+                const marker = createEmptyMarkers()
 
                 const values: MeshValues = {
                     ...getMeshData(mesh),
                     aTransform: ValueCell.create(new Float32Array(Mat4.identity())),
                     aInstanceId: ValueCell.create(fillSerial(new Float32Array(instanceCount))),
                     ...color,
-                    ...flag,
+                    ...marker,
 
                     uAlpha: ValueCell.create(defaults(props.alpha, 1.0)),
                     uInstanceCount: ValueCell.create(instanceCount),
@@ -109,7 +109,7 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
             // TODO
             return null
         },
-        applyFlags(loci: Loci, action: FlagAction) {
+        mark(loci: Loci, action: MarkerAction) {
             // TODO
         }
     }

src/mol-geo/util/flag-data.ts → src/mol-geo/util/marker-data.ts

@@ -8,12 +8,12 @@ import { ValueCell } from 'mol-util/value-cell'
 import { Vec2 } from 'mol-math/linear-algebra'
 import { TextureImage, createTextureImage } from 'mol-gl/renderable/util';
 
-export type FlagData = {
-    tFlag: ValueCell<TextureImage>
-    uFlagTexSize: ValueCell<Vec2>
+export type MarkerData = {
+    tMarker: ValueCell<TextureImage>
+    uMarkerTexSize: ValueCell<Vec2>
 }
 
-export enum FlagAction {
+export enum MarkerAction {
     Highlight,
     RemoveHighlight,
     Select,
@@ -22,34 +22,34 @@ export enum FlagAction {
     Clear
 }
 
-export function applyFlagAction(array: Uint8Array, start: number, end: number, action: FlagAction) {
+export function applyMarkerAction(array: Uint8Array, start: number, end: number, action: MarkerAction) {
     let changed = false
     for (let i = start; i < end; ++i) {
         let v = array[i]
         switch (action) {
-            case FlagAction.Highlight:
+            case MarkerAction.Highlight:
                 if (v % 2 === 0) {
                     v += 1
                     changed = true
                 }
                 break
-            case FlagAction.RemoveHighlight:
+            case MarkerAction.RemoveHighlight:
                 if (v % 2 !== 0) {
                     v -= 1
                     changed = true
                 } 
                 break
-            case FlagAction.Select:
+            case MarkerAction.Select:
                 v += 2
                 changed = true
                 break
-            case FlagAction.Deselect:
+            case MarkerAction.Deselect:
                 if (v >= 2) {
                     v -= 2
                     changed = true
                 }
                 break
-            case FlagAction.ToggleSelect:
+            case MarkerAction.ToggleSelect:
                 if (v === 0) {
                     v = 2
                 } else if (v === 1) {
@@ -61,7 +61,7 @@ export function applyFlagAction(array: Uint8Array, start: number, end: number, a
                 }
                 changed = true
                 break
-            case FlagAction.Clear:
+            case MarkerAction.Clear:
                 v = 0
                 changed = true
                 break
@@ -71,32 +71,32 @@ export function applyFlagAction(array: Uint8Array, start: number, end: number, a
     return changed
 }
 
-export function createFlags(count: number, flagData?: FlagData): FlagData {
-    const flags = flagData && flagData.tFlag.ref.value.array.length >= count
-        ? flagData.tFlag.ref.value
+export function createMarkers(count: number, markerData?: MarkerData): MarkerData {
+    const markers = markerData && markerData.tMarker.ref.value.array.length >= count
+        ? markerData.tMarker.ref.value
         : createTextureImage(count, 1)
-    if (flagData) {
-        ValueCell.update(flagData.tFlag, flags)
-        ValueCell.update(flagData.uFlagTexSize, Vec2.create(flags.width, flags.height))
-        return flagData
+    if (markerData) {
+        ValueCell.update(markerData.tMarker, markers)
+        ValueCell.update(markerData.uMarkerTexSize, Vec2.create(markers.width, markers.height))
+        return markerData
     } else {
         return {
-            tFlag: ValueCell.create(flags),
-            uFlagTexSize: ValueCell.create(Vec2.create(flags.width, flags.height)),
+            tMarker: ValueCell.create(markers),
+            uMarkerTexSize: ValueCell.create(Vec2.create(markers.width, markers.height)),
         }
     }
 }
 
-const emptyFlagTexture = { array: new Uint8Array(1), width: 1, height: 1 }
-export function createEmptyFlags(flagData?: FlagData) {
-    if (flagData) {
-        ValueCell.update(flagData.tFlag, emptyFlagTexture)
-        ValueCell.update(flagData.uFlagTexSize, Vec2.create(1, 1))
-        return flagData
+const emptyMarkerTexture = { array: new Uint8Array(1), width: 1, height: 1 }
+export function createEmptyMarkers(markerData?: MarkerData) {
+    if (markerData) {
+        ValueCell.update(markerData.tMarker, emptyMarkerTexture)
+        ValueCell.update(markerData.uMarkerTexSize, Vec2.create(1, 1))
+        return markerData
     } else {
         return {
-            tFlag: ValueCell.create(emptyFlagTexture),
-            uFlagTexSize: ValueCell.create(Vec2.create(1, 1)),
+            tMarker: ValueCell.create(emptyMarkerTexture),
+            uMarkerTexSize: ValueCell.create(Vec2.create(1, 1)),
         }
     }
 }

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

@@ -19,7 +19,7 @@ import { RenderableState } from '../renderable';
 import { createPointRenderObject } from '../render-object';
 import { PointValues } from '../renderable/point';
 import Scene from '../scene';
-import { createEmptyFlags } from 'mol-geo/util/flag-data';
+import { createEmptyMarkers } from 'mol-geo/util/marker-data';
 
 // function writeImage(gl: WebGLRenderingContext, width: number, height: number) {
 //     const pixels = new Uint8Array(width * height * 4)
@@ -49,7 +49,7 @@ function createPoints() {
     const aInstanceId = ValueCell.create(fillSerial(new Float32Array(1)))
     const color = createUniformColor({ value: 0xFF0000 })
     const size = createUniformSize({ value: 1 })
-    const flag = createEmptyFlags()
+    const marker = createEmptyMarkers()
 
     const aTransform = ValueCell.create(new Float32Array(16))
     const m4 = Mat4.identity()
@@ -61,7 +61,7 @@ function createPoints() {
         aTransform,
         aInstanceId,
         ...color,
-        ...flag,
+        ...marker,
         ...size,
 
         uAlpha: ValueCell.create(1.0),

src/mol-gl/renderable/schema.ts

@@ -126,6 +126,9 @@ export const GlobalUniformSchema = {
 
     uPixelRatio: UniformSpec('f'),
     uViewportHeight: UniformSpec('f'),
+
+    uHighlightColor: UniformSpec('v3'),
+    uSelectColor: UniformSpec('v3'),
 }
 export type GlobalUniformSchema = typeof GlobalUniformSchema
 export type GlobalUniformValues = { [k in keyof GlobalUniformSchema]: ValueCell<any> }
@@ -146,10 +149,10 @@ export const BaseSchema = {
     uElementCount: UniformSpec('i'),
     uColor: UniformSpec('v3'),
     uColorTexSize: UniformSpec('v2'),
-    uFlagTexSize: UniformSpec('v2'),
+    uMarkerTexSize: UniformSpec('v2'),
 
     tColor: TextureSpec('rgb', 'ubyte'),
-    tFlag: TextureSpec('alpha', 'ubyte'),
+    tMarker: TextureSpec('alpha', 'ubyte'),
 
     drawCount: ValueSpec('number'),
     instanceCount: ValueSpec('number'),

src/mol-gl/renderer.ts

@@ -56,6 +56,8 @@ 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)
 
         function setClearColor(color: Color) {
             const [ r, g, b ] = Color.toRgbNormalized(color)
@@ -72,7 +74,10 @@ namespace Renderer {
             uViewportHeight: ValueCell.create(viewport.height),
 
             uLightColor: ValueCell.create(Vec3.clone(lightColor)),
-            uLightAmbient: ValueCell.create(Vec3.clone(lightAmbient))
+            uLightAmbient: ValueCell.create(Vec3.clone(lightAmbient)),
+
+            uHighlightColor: ValueCell.create(Vec3.clone(highlightColor)),
+            uSelectColor: ValueCell.create(Vec3.clone(selectColor))
         }
 
         let currentProgramId = -1

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

@@ -0,0 +1,8 @@
+float marker = floor(vMarker * 255.0);
+if (marker != 0.0) {
+    if (mod(marker, 2.0) == 0.0) {
+        gl_FragColor.rgb = mix(uHighlightColor, gl_FragColor.rgb, 0.3);
+    } else {
+        gl_FragColor.rgb = mix(uSelectColor, gl_FragColor.rgb, 0.3);
+    }
+}

src/mol-gl/shader/chunks/assign-marker-varying.glsl

@@ -0,0 +1 @@
+vMarker = readFromTexture(tMarker, aInstanceId * float(uElementCount) + aElementId, uMarkerTexSize).a;

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

@@ -1,5 +1,7 @@
 uniform int uObjectId;
 uniform int uInstanceCount;
 uniform int uElementCount;
+uniform vec3 uHighlightColor;
+uniform vec3 uSelectColor;
 
-varying float vFlag;
+varying float vMarker;

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

@@ -4,7 +4,7 @@ uniform int uObjectId;
 uniform int uInstanceCount;
 uniform int uElementCount;
 
-uniform vec2 uFlagTexSize;
-uniform sampler2D tFlag;
-varying float vFlag;
+uniform vec2 uMarkerTexSize;
+uniform sampler2D tMarker;
+varying float vMarker;
 #pragma glslify: readFromTexture = require(../utils/read-from-texture.glsl)

src/mol-gl/shader/mesh.frag

@@ -36,7 +36,7 @@ const float albedo = 0.95;
 
 void main() {
     // material color
-    #pragma glslify: import('./chunks/color-assign-material.glsl')
+    #pragma glslify: import('./chunks/assign-material-color.glsl')
 
     #if defined(dColorType_objectPicking) || defined(dColorType_instancePicking) || defined(dColorType_elementPicking)
         // gl_FragColor = vec4(material.r, material.g, material.a, 1.0);
@@ -76,20 +76,6 @@ void main() {
         gl_FragColor.rgb = finalColor;
         gl_FragColor.a = uAlpha;
 
-        // if (vFlag == 1.0) {
-        //     gl_FragColor.rgb = mix(vec3(1.0, 0.4, 0.6), gl_FragColor.rgb, 0.3);
-        // }
-
-        float flag = floor(vFlag * 255.0);
-
-        if (flag == 0.0) {
-            // diffuseColor = vec4( vColor, opacity );
-        } else if (mod(flag, 2.0) == 0.0) {
-            // diffuseColor = vec4(highlightColor, opacity);
-            gl_FragColor.rgb = mix(vec3(1.0, 0.4, 0.6), gl_FragColor.rgb, 0.3);
-        } else {
-            // diffuseColor = vec4(selectionColor, opacity);
-            gl_FragColor.rgb = mix(vec3(0.2, 1.0, 0.1), gl_FragColor.rgb, 0.3);
-        }
+        #pragma glslify: import('./chunks/apply-marker-color.glsl')
     #endif
 }

src/mol-gl/shader/mesh.vert

@@ -26,8 +26,8 @@ varying vec3 vViewPosition;
 #pragma glslify: transpose = require(./utils/transpose.glsl)
 
 void main(){
-    #pragma glslify: import('./chunks/color-assign-varying.glsl')
-    vFlag = readFromTexture(tFlag, aInstanceId * float(uElementCount) + aElementId, uFlagTexSize).a;
+    #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);

src/mol-gl/shader/point.frag

@@ -13,6 +13,6 @@ precision highp int;
 uniform float uAlpha;
 
 void main(){
-    #pragma glslify: import('./chunks/color-assign-material.glsl')
+    #pragma glslify: import('./chunks/assign-material-color.glsl')
     gl_FragColor = vec4(material, uAlpha);
 }

src/mol-gl/shader/point.vert

@@ -25,7 +25,7 @@ attribute float aInstanceId;
 attribute float aElementId;
 
 void main(){
-    #pragma glslify: import('./chunks/color-assign-varying.glsl')
+    #pragma glslify: import('./chunks/assign-color-varying.glsl')
 
     mat4 modelView = uView * uModel * aTransform;
     vec4 mvPosition = modelView * vec4(aPosition, 1.0);

src/mol-view/viewer.ts

@@ -23,7 +23,7 @@ import Scene from 'mol-gl/scene';
 import { RenderVariant } from 'mol-gl/webgl/render-item';
 import { PickingId, decodeIdRGBA } from 'mol-geo/util/picking';
 import { labelFirst } from './label';
-import { FlagAction } from 'mol-geo/util/flag-data';
+import { MarkerAction } from 'mol-geo/util/marker-data';
 import { EveryLoci } from 'mol-model/loci';
 
 interface Viewer {
@@ -83,11 +83,11 @@ namespace Viewer {
             const p = identify(x, y)
             let label = ''
             reprMap.forEach((roSet, repr) => {
-                repr.applyFlags(EveryLoci, FlagAction.RemoveHighlight)
+                repr.mark(EveryLoci, MarkerAction.RemoveHighlight)
                 const loci = repr.getLoci(p)
                 if (loci) {
                     label = labelFirst(loci)
-                    repr.applyFlags(loci, FlagAction.Highlight)
+                    repr.mark(loci, MarkerAction.Highlight)
                 }
                 scene.update()
                 requestDraw()
@@ -99,7 +99,7 @@ namespace Viewer {
             reprMap.forEach((roSet, repr) => {
                 const loci = repr.getLoci(p)
                 if (loci) {
-                    repr.applyFlags(loci, FlagAction.ToggleSelect)
+                    repr.mark(loci, MarkerAction.ToggleSelect)
                     scene.update()
                     requestDraw()
                 }