wip, coloring

src/mol-geo/color/index.ts

@@ -4,10 +4,84 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+import { ColorBrewer } from './tables'
+
 export { ElementColor } from './structure/element';
 
-export function hexColorToArray(hexColor: number, array: Helpers.NumberArray, offset: number) {
+export function colorToRgb(hexColor: number) {
+    return { r: hexColor >> 16 & 255, g: hexColor >> 8 & 255, b: hexColor & 255 }
+}
+
+/** Copies hex color to rgb array */
+export function colorToArray(hexColor: number, array: Helpers.NumberArray, offset: number) {
+
+    array[ offset ] = (hexColor >> 16 & 255)
+    array[ offset + 1 ] = (hexColor >> 8 & 255)
+    array[ offset + 2 ] = (hexColor & 255)
+}
+
+/** Copies normalized (0 to 1) hex color to rgb array */
+export function normalizedColorToArray(hexColor: number, array: Helpers.NumberArray, offset: number) {
     array[ offset ] = (hexColor >> 16 & 255) / 255
     array[ offset + 1 ] = (hexColor >> 8 & 255) / 255
     array[ offset + 2 ] = (hexColor & 255) / 255
-}
+}
+
+/** Linear interpolation between two colors */
+export function interpolate(c1: number, c2: number, t: number) {
+    const r1 = c1 >> 16 & 255
+    const g1 = c1 >> 8 & 255
+    const b1 = c1 & 255
+    const r2 = c2 >> 16 & 255
+    const g2 = c2 >> 8 & 255
+    const b2 = c2 & 255
+
+    const r = r1 + (r2 - r1) * t
+    const g = g1 + (g2 - g1) * t
+    const b = b1 + (b2 - b1) * t
+
+    return (r << 16) | (g << 8) | b
+}
+
+export type Color = number
+
+export interface ColorScale {
+    /** Returns hex color for given value */
+    color: (value: number) => Color
+    /** Copies color to rgb int8 array */
+    colorToArray: (value: number, array: Helpers.NumberArray, offset: number) => void
+    /** Copies normalized (0 to 1) hex color to rgb array */
+    normalizedColorToArray: (value: number, array: Helpers.NumberArray, offset: number) => void
+}
+
+export const DefaultColorScale = {
+    domain: [0, 1],
+    reverse: false,
+    colors: ColorBrewer.RdYlBu as Color[]
+}
+export type ColorScaleProps = Partial<typeof DefaultColorScale>
+
+export namespace ColorScale {
+    export function create(props: ColorScaleProps): ColorScale {
+        const { domain, reverse, colors } = { ...DefaultColorScale, ...props }
+        const [ min, max ] = reverse ? domain.slice().reverse() : domain
+        const count1 = colors.length - 1
+
+        function color(value: number) {
+            const t = ((value - min) / (max - min)) * count1
+            const tf = Math.floor(t)
+            const c1 = colors[tf]
+            const c2 = colors[Math.ceil(t)]
+            return interpolate(c1, c2, t - tf)
+        }
+        return {
+            color,
+            colorToArray: (value: number, array: Helpers.NumberArray, offset: number) => {
+                colorToArray(color(value), array, offset)
+            },
+            normalizedColorToArray: (value: number, array: Helpers.NumberArray, offset: number) => {
+                normalizedColorToArray(color(value), array, offset)
+            },
+        }
+    }
+}

src/mol-geo/color/tables.ts

@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+/**
+ * Brewer Color Lists
+ *
+ * Copyright (c) 2002 Cynthia Brewer, Mark Harrower, and The Pennsylvania State University.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ */
+export const ColorBrewer = {
+    // sequential
+    OrRd: [0xfff7ec, 0xfee8c8, 0xfdd49e, 0xfdbb84, 0xfc8d59, 0xef6548, 0xd7301f, 0xb30000, 0x7f0000],
+    PuBu: [0xfff7fb, 0xece7f2, 0xd0d1e6, 0xa6bddb, 0x74a9cf, 0x3690c0, 0x0570b0, 0x045a8d, 0x023858],
+    BuPu: [0xf7fcfd, 0xe0ecf4, 0xbfd3e6, 0x9ebcda, 0x8c96c6, 0x8c6bb1, 0x88419d, 0x810f7c, 0x4d004b],
+    Oranges: [0xfff5eb, 0xfee6ce, 0xfdd0a2, 0xfdae6b, 0xfd8d3c, 0xf16913, 0xd94801, 0xa63603, 0x7f2704],
+    BuGn: [0xf7fcfd, 0xe5f5f9, 0xccece6, 0x99d8c9, 0x66c2a4, 0x41ae76, 0x238b45, 0x006d2c, 0x00441b],
+    YlOrBr: [0xffffe5, 0xfff7bc, 0xfee391, 0xfec44f, 0xfe9929, 0xec7014, 0xcc4c02, 0x993404, 0x662506],
+    YlGn: [0xffffe5, 0xf7fcb9, 0xd9f0a3, 0xaddd8e, 0x78c679, 0x41ab5d, 0x238443, 0x006837, 0x004529],
+    Reds: [0xfff5f0, 0xfee0d2, 0xfcbba1, 0xfc9272, 0xfb6a4a, 0xef3b2c, 0xcb181d, 0xa50f15, 0x67000d],
+    RdPu: [0xfff7f3, 0xfde0dd, 0xfcc5c0, 0xfa9fb5, 0xf768a1, 0xdd3497, 0xae017e, 0x7a0177, 0x49006a],
+    Greens: [0xf7fcf5, 0xe5f5e0, 0xc7e9c0, 0xa1d99b, 0x74c476, 0x41ab5d, 0x238b45, 0x006d2c, 0x00441b],
+    YlGnBu: [0xffffd9, 0xedf8b1, 0xc7e9b4, 0x7fcdbb, 0x41b6c4, 0x1d91c0, 0x225ea8, 0x253494, 0x081d58],
+    Purples: [0xfcfbfd, 0xefedf5, 0xdadaeb, 0xbcbddc, 0x9e9ac8, 0x807dba, 0x6a51a3, 0x54278f, 0x3f007d],
+    GnBu: [0xf7fcf0, 0xe0f3db, 0xccebc5, 0xa8ddb5, 0x7bccc4, 0x4eb3d3, 0x2b8cbe, 0x0868ac, 0x084081],
+    Greys: [0xffffff, 0xf0f0f0, 0xd9d9d9, 0xbdbdbd, 0x969696, 0x737373, 0x525252, 0x252525, 0x000000],
+    YlOrRd: [0xffffcc, 0xffeda0, 0xfed976, 0xfeb24c, 0xfd8d3c, 0xfc4e2a, 0xe31a1c, 0xbd0026, 0x800026],
+    PuRd: [0xf7f4f9, 0xe7e1ef, 0xd4b9da, 0xc994c7, 0xdf65b0, 0xe7298a, 0xce1256, 0x980043, 0x67001f],
+    Blues: [0xf7fbff, 0xdeebf7, 0xc6dbef, 0x9ecae1, 0x6baed6, 0x4292c6, 0x2171b5, 0x08519c, 0x08306b],
+    PuBuGn: [0xfff7fb, 0xece2f0, 0xd0d1e6, 0xa6bddb, 0x67a9cf, 0x3690c0, 0x02818a, 0x016c59, 0x014636],
+    Viridis: [0x440154, 0x482777, 0x3f4a8a, 0x31678e, 0x26838f, 0x1f9d8a, 0x6cce5a, 0xb6de2b, 0xfee825],
+
+    // diverging
+    Spectral: [0x9e0142, 0xd53e4f, 0xf46d43, 0xfdae61, 0xfee08b, 0xffffbf, 0xe6f598, 0xabdda4, 0x66c2a5, 0x3288bd, 0x5e4fa2],
+    RdYlGn: [0xa50026, 0xd73027, 0xf46d43, 0xfdae61, 0xfee08b, 0xffffbf, 0xd9ef8b, 0xa6d96a, 0x66bd63, 0x1a9850, 0x006837],
+    RdBu: [0x67001f, 0xb2182b, 0xd6604d, 0xf4a582, 0xfddbc7, 0xf7f7f7, 0xd1e5f0, 0x92c5de, 0x4393c3, 0x2166ac, 0x053061],
+    PiYG: [0x8e0152, 0xc51b7d, 0xde77ae, 0xf1b6da, 0xfde0ef, 0xf7f7f7, 0xe6f5d0, 0xb8e186, 0x7fbc41, 0x4d9221, 0x276419],
+    PRGn: [0x40004b, 0x762a83, 0x9970ab, 0xc2a5cf, 0xe7d4e8, 0xf7f7f7, 0xd9f0d3, 0xa6dba0, 0x5aae61, 0x1b7837, 0x00441b],
+    RdYlBu: [0xa50026, 0xd73027, 0xf46d43, 0xfdae61, 0xfee090, 0xffffbf, 0xe0f3f8, 0xabd9e9, 0x74add1, 0x4575b4, 0x313695],
+    BrBG: [0x543005, 0x8c510a, 0xbf812d, 0xdfc27d, 0xf6e8c3, 0xf5f5f5, 0xc7eae5, 0x80cdc1, 0x35978f, 0x01665e, 0x003c30],
+    RdGy: [0x67001f, 0xb2182b, 0xd6604d, 0xf4a582, 0xfddbc7, 0xffffff, 0xe0e0e0, 0xbababa, 0x878787, 0x4d4d4d, 0x1a1a1a],
+    PuOr: [0x7f3b08, 0xb35806, 0xe08214, 0xfdb863, 0xfee0b6, 0xf7f7f7, 0xd8daeb, 0xb2abd2, 0x8073ac, 0x542788, 0x2d004b],
+
+    // qualitative
+    Set2: [0x66c2a5, 0xfc8d62, 0x8da0cb, 0xe78ac3, 0xa6d854, 0xffd92f, 0xe5c494, 0xb3b3b3],
+    Accent: [0x7fc97f, 0xbeaed4, 0xfdc086, 0xffff99, 0x386cb0, 0xf0027f, 0xbf5b17, 0x666666],
+    Set1: [0xe41a1c, 0x377eb8, 0x4daf4a, 0x984ea3, 0xff7f00, 0xffff33, 0xa65628, 0xf781bf, 0x999999],
+    Set3: [0x8dd3c7, 0xffffb3, 0xbebada, 0xfb8072, 0x80b1d3, 0xfdb462, 0xb3de69, 0xfccde5, 0xd9d9d9, 0xbc80bd, 0xccebc5, 0xffed6f],
+    Dark2: [0x1b9e77, 0xd95f02, 0x7570b3, 0xe7298a, 0x66a61e, 0xe6ab02, 0xa6761d, 0x666666],
+    Paired: [0xa6cee3, 0x1f78b4, 0xb2df8a, 0x33a02c, 0xfb9a99, 0xe31a1c, 0xfdbf6f, 0xff7f00, 0xcab2d6, 0x6a3d9a, 0xffff99, 0xb15928],
+    Pastel2: [0xb3e2cd, 0xfdcdac, 0xcbd5e8, 0xf4cae4, 0xe6f5c9, 0xfff2ae, 0xf1e2cc, 0xcccccc],
+    Pastel1: [0xfbb4ae, 0xb3cde3, 0xccebc5, 0xdecbe4, 0xfed9a6, 0xffffcc, 0xe5d8bd, 0xfddaec, 0xf2f2f2]
+}
+
+/** X11 color names http://www.w3.org/TR/css3-color/#svg-color */
+export const ColorNames = {
+    aliceblue: 0xf0f8ff,
+    antiquewhite: 0xfaebd7,
+    aqua: 0x00ffff,
+    aquamarine: 0x7fffd4,
+    azure: 0xf0ffff,
+    beige: 0xf5f5dc,
+    bisque: 0xffe4c4,
+    black: 0x000000,
+    blanchedalmond: 0xffebcd,
+    blue: 0x0000ff,
+    blueviolet: 0x8a2be2,
+    brown: 0xa52a2a,
+    burlywood: 0xdeb887,
+    cadetblue: 0x5f9ea0,
+    chartreuse: 0x7fff00,
+    chocolate: 0xd2691e,
+    coral: 0xff7f50,
+    cornflower: 0x6495ed,
+    cornflowerblue: 0x6495ed,
+    cornsilk: 0xfff8dc,
+    crimson: 0xdc143c,
+    cyan: 0x00ffff,
+    darkblue: 0x00008b,
+    darkcyan: 0x008b8b,
+    darkgoldenrod: 0xb8860b,
+    darkgray: 0xa9a9a9,
+    darkgreen: 0x006400,
+    darkgrey: 0xa9a9a9,
+    darkkhaki: 0xbdb76b,
+    darkmagenta: 0x8b008b,
+    darkolivegreen: 0x556b2f,
+    darkorange: 0xff8c00,
+    darkorchid: 0x9932cc,
+    darkred: 0x8b0000,
+    darksalmon: 0xe9967a,
+    darkseagreen: 0x8fbc8f,
+    darkslateblue: 0x483d8b,
+    darkslategray: 0x2f4f4f,
+    darkslategrey: 0x2f4f4f,
+    darkturquoise: 0x00ced1,
+    darkviolet: 0x9400d3,
+    deeppink: 0xff1493,
+    deepskyblue: 0x00bfff,
+    dimgray: 0x696969,
+    dimgrey: 0x696969,
+    dodgerblue: 0x1e90ff,
+    firebrick: 0xb22222,
+    floralwhite: 0xfffaf0,
+    forestgreen: 0x228b22,
+    fuchsia: 0xff00ff,
+    gainsboro: 0xdcdcdc,
+    ghostwhite: 0xf8f8ff,
+    gold: 0xffd700,
+    goldenrod: 0xdaa520,
+    gray: 0x808080,
+    green: 0x008000,
+    greenyellow: 0xadff2f,
+    grey: 0x808080,
+    honeydew: 0xf0fff0,
+    hotpink: 0xff69b4,
+    indianred: 0xcd5c5c,
+    indigo: 0x4b0082,
+    ivory: 0xfffff0,
+    khaki: 0xf0e68c,
+    laserlemon: 0xffff54,
+    lavender: 0xe6e6fa,
+    lavenderblush: 0xfff0f5,
+    lawngreen: 0x7cfc00,
+    lemonchiffon: 0xfffacd,
+    lightblue: 0xadd8e6,
+    lightcoral: 0xf08080,
+    lightcyan: 0xe0ffff,
+    lightgoldenrod: 0xfafad2,
+    lightgoldenrodyellow: 0xfafad2,
+    lightgray: 0xd3d3d3,
+    lightgreen: 0x90ee90,
+    lightgrey: 0xd3d3d3,
+    lightpink: 0xffb6c1,
+    lightsalmon: 0xffa07a,
+    lightseagreen: 0x20b2aa,
+    lightskyblue: 0x87cefa,
+    lightslategray: 0x778899,
+    lightslategrey: 0x778899,
+    lightsteelblue: 0xb0c4de,
+    lightyellow: 0xffffe0,
+    lime: 0x00ff00,
+    limegreen: 0x32cd32,
+    linen: 0xfaf0e6,
+    magenta: 0xff00ff,
+    maroon: 0x800000,
+    maroon2: 0x7f0000,
+    maroon3: 0xb03060,
+    mediumaquamarine: 0x66cdaa,
+    mediumblue: 0x0000cd,
+    mediumorchid: 0xba55d3,
+    mediumpurple: 0x9370db,
+    mediumseagreen: 0x3cb371,
+    mediumslateblue: 0x7b68ee,
+    mediumspringgreen: 0x00fa9a,
+    mediumturquoise: 0x48d1cc,
+    mediumvioletred: 0xc71585,
+    midnightblue: 0x191970,
+    mintcream: 0xf5fffa,
+    mistyrose: 0xffe4e1,
+    moccasin: 0xffe4b5,
+    navajowhite: 0xffdead,
+    navy: 0x000080,
+    oldlace: 0xfdf5e6,
+    olive: 0x808000,
+    olivedrab: 0x6b8e23,
+    orange: 0xffa500,
+    orangered: 0xff4500,
+    orchid: 0xda70d6,
+    palegoldenrod: 0xeee8aa,
+    palegreen: 0x98fb98,
+    paleturquoise: 0xafeeee,
+    palevioletred: 0xdb7093,
+    papayawhip: 0xffefd5,
+    peachpuff: 0xffdab9,
+    peru: 0xcd853f,
+    pink: 0xffc0cb,
+    plum: 0xdda0dd,
+    powderblue: 0xb0e0e6,
+    purple: 0x800080,
+    purple2: 0x7f007f,
+    purple3: 0xa020f0,
+    rebeccapurple: 0x663399,
+    red: 0xff0000,
+    rosybrown: 0xbc8f8f,
+    royalblue: 0x4169e1,
+    saddlebrown: 0x8b4513,
+    salmon: 0xfa8072,
+    sandybrown: 0xf4a460,
+    seagreen: 0x2e8b57,
+    seashell: 0xfff5ee,
+    sienna: 0xa0522d,
+    silver: 0xc0c0c0,
+    skyblue: 0x87ceeb,
+    slateblue: 0x6a5acd,
+    slategray: 0x708090,
+    slategrey: 0x708090,
+    snow: 0xfffafa,
+    springgreen: 0x00ff7f,
+    steelblue: 0x4682b4,
+    tan: 0xd2b48c,
+    teal: 0x008080,
+    thistle: 0xd8bfd8,
+    tomato: 0xff6347,
+    turquoise: 0x40e0d0,
+    violet: 0xee82ee,
+    wheat: 0xf5deb3,
+    white: 0xffffff,
+    whitesmoke: 0xf5f5f5,
+    yellow: 0xffff00,
+    yellowgreen: 0x9acd32
+}

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

@@ -15,7 +15,7 @@ import { RepresentationProps, UnitsRepresentation } from './index';
 import { Task } from 'mol-task'
 import { MeshBuilder } from '../../shape/mesh-builder';
 import { VdwRadius } from 'mol-model/structure/model/properties/atomic';
-import { ElementColor, hexColorToArray } from '../../color';
+import { ElementColor, colorToArray, normalizedColorToArray, ColorScale, colorToRgb } from '../../color';
 import { ChunkedArray } from 'mol-data/util';
 import { Color } from 'mol-gl/renderable/mesh';
 import { createColorTexture } from 'mol-gl/util';
@@ -69,6 +69,7 @@ export default function Spacefill(): UnitsRepresentation<SpacefillProps> {
 
             const mesh = meshBuilder.getMesh()
             console.log(mesh)
+            if (!mesh.offsetBuffer.ref.value) return
 
             const unitsCount = units.length
             const transformArray = new Float32Array(unitsCount * 16)
@@ -78,40 +79,56 @@ export default function Spacefill(): UnitsRepresentation<SpacefillProps> {
 
             console.log({ unitsCount, elementCount })
 
-            let colorType = 'instance'
+            let colorType = 'element'
             let color: Color
 
             if (colorType === 'attribute') {
                 const colors = new Float32Array(mesh.vertexCount * 3);
-                if (mesh.offsetBuffer.ref.value) {
-                    const offsets = mesh.offsetBuffer.ref.value
-                    for (let i = 0, il = mesh.offsetCount - 1; i < il; ++i) {
-                        const start = offsets[i]
-                        const end = offsets[i + 1]
-                        const e = OrderedSet.getAt(elementGroup.elements, i)
-                        const hexColor = ElementColor(type_symbol.value(e))
-                        for (let i = start, il = end; i < il; ++i) {
-                            hexColorToArray(hexColor, colors, i * 3)
-                        }
+                const offsets = mesh.offsetBuffer.ref.value
+                for (let i = 0, il = mesh.offsetCount - 1; i < il; ++i) {
+                    const start = offsets[i]
+                    const end = offsets[i + 1]
+                    const e = OrderedSet.getAt(elementGroup.elements, i)
+                    const hexColor = ElementColor(type_symbol.value(e))
+                    for (let i = start, il = end; i < il; ++i) {
+                        normalizedColorToArray(hexColor, colors, i * 3)
                     }
-                    color = { type: 'attribute', value: ValueCell.create(colors) }
                 }
+                color = { type: 'attribute', value: ValueCell.create(colors) }
             } else if (colorType === 'instance') {
                 const colors = createColorTexture(unitsCount)
-                colors.set([ 0, 0, 255 ])
-
+                const scale = ColorScale.create({ domain: [ 0, unitsCount - 1 ] })
+                for (let i = 0; i < unitsCount; i++) {
+                    scale.colorToArray(i, colors, i * 3)
+                }
                 color = { type: 'instance', value: ValueCell.create(colors) }
+            } else if (colorType === 'element') {
+                const elementCount = mesh.offsetCount - 1
+                const count = unitsCount * elementCount
+                const colors = createColorTexture(count)
+                const scale = ColorScale.create({ domain: [ 0, count - 1 ] })
+                let colorOffset = 0
+                for (let i = 0; i < unitsCount; i++) {
+                    for (let j = 0, jl = elementCount; j < jl; ++j) {
+                        const hexColor = scale.color(i * elementCount + j)
+                        colorToArray(hexColor, colors, colorOffset)
+                        colorOffset += 3
+                    }
+                }
+                color = { type: 'element', value: ValueCell.create(colors) }
             }
 
             const spheres = createRenderObject('mesh', {
                 position: mesh.vertexBuffer,
                 normal: mesh.normalBuffer,
                 color: color!,
+                id: mesh.idBuffer,
                 transform: ValueCell.create(transformArray),
-                elements: mesh.indexBuffer,
+                index: mesh.indexBuffer,
 
                 instanceCount: unitsCount,
-                elementCount: mesh.triangleCount,
+                indexCount: mesh.triangleCount,
+                elementCount: mesh.offsetCount - 1,
                 positionCount: mesh.vertexCount
             }, {})
             renderObjects.push(spheres)

src/mol-geo/shape/mesh-builder.ts

@@ -32,7 +32,7 @@ export namespace MeshBuilder {
         const normals = ChunkedArray.create(Float32Array, 3, chunkSize, initialCount);
         const indices = ChunkedArray.create(Uint32Array, 3, chunkSize * 3, initialCount * 3);
 
-        const ids = ChunkedArray.create(Uint32Array, 1, chunkSize, initialCount);
+        const ids = ChunkedArray.create(Float32Array, 1, chunkSize, initialCount);
         const offsets = ChunkedArray.create(Uint32Array, 1, chunkSize, initialCount);
 
         let currentId = -1
@@ -86,7 +86,7 @@ export namespace MeshBuilder {
                     vertexBuffer: ValueCell.create(ChunkedArray.compact(vertices, true) as Float32Array),
                     indexBuffer: ValueCell.create(ChunkedArray.compact(indices, true) as Uint32Array),
                     normalBuffer: ValueCell.create(ChunkedArray.compact(normals, true) as Float32Array),
-                    idBuffer: ValueCell.create(ChunkedArray.compact(ids, true) as Uint32Array),
+                    idBuffer: ValueCell.create(ChunkedArray.compact(ids, true) as Float32Array),
                     offsetBuffer: ValueCell.create(ChunkedArray.compact(offsets, true) as Uint32Array),
                     normalsComputed: true,
                 }

src/mol-geo/shape/mesh.ts

@@ -14,10 +14,11 @@ export interface Mesh {
     vertexCount: number,
     triangleCount: number,
     offsetCount: number,
+
     vertexBuffer: ValueCell<Float32Array>,
     indexBuffer: ValueCell<Uint32Array>,
     normalBuffer: ValueCell<Float32Array | undefined>,
-    idBuffer: ValueCell<Uint32Array | undefined>,
+    idBuffer: ValueCell<Float32Array | undefined>,
     offsetBuffer: ValueCell<Uint32Array | undefined>,
     normalsComputed: boolean,
 

src/mol-gl/renderable/mesh.ts

@@ -26,10 +26,13 @@ namespace Mesh {
     export type Data = {
         position: ValueCell<Float32Array>
         normal: ValueCell<Float32Array>
+        id: ValueCell<Float32Array>
+
         readonly color: Color
         transform: ValueCell<Float32Array>
-        elements: ValueCell<Uint32Array>
+        index: ValueCell<Uint32Array>
 
+        indexCount: number
         instanceCount: number
         elementCount: number
         positionCount: number
@@ -40,6 +43,7 @@ namespace Mesh {
         const uniforms = {
             objectId: _uniforms.objectId || 0,
             instanceCount: data.instanceCount,
+            elementCount: data.elementCount,
             ..._uniforms
         }
         if (data.color.type === 'instance' || data.color.type === 'element') {
@@ -49,6 +53,8 @@ namespace Mesh {
             instanceId: Attribute.create(regl, instanceId, data.instanceCount, { size: 1, divisor: 1 }),
             position: Attribute.create(regl, data.position, data.positionCount, { size: 3 }),
             normal: Attribute.create(regl, data.normal, data.positionCount, { size: 3 }),
+
+            elementId: Attribute.create(regl, data.id, data.positionCount, { size: 1 }),
             ...createTransformAttributes(regl, data.transform, data.instanceCount)
         })
         if (data.color.type === 'attribute') {
@@ -59,11 +65,10 @@ namespace Mesh {
             uniforms,
             attributes,
             elements: regl.elements({
-                data: data.elements.ref.value,
+                data: data.index.ref.value,
                 primitive: 'triangles',
                 type: 'uint32',
-                count: data.elementCount * 3,
-                // length: count * 3 * 2
+                count: data.indexCount * 3
             }),
             instances: data.instanceCount,
         })

src/mol-gl/shader/mesh.frag

@@ -5,7 +5,8 @@
  */
 
 // #define ATTRIBUTE_COLOR
-#define INSTANCE_COLOR
+// #define INSTANCE_COLOR
+#define ELEMENT_COLOR
 
 precision highp float;
 
@@ -54,7 +55,7 @@ float orenNayarDiffuse(vec3 lightDirection, vec3 viewDirection, vec3 surfaceNorm
 #pragma glslify: attenuation = require(./attenuation.glsl)
 
 const float specularScale = 0.65;
-const float shininess = 30.0;
+const float shininess = 100.0;
 const float roughness = 5.0;
 const float albedo = 0.95;
 

src/mol-gl/shader/mesh.vert

@@ -5,7 +5,8 @@
  */
 
 // #define ATTRIBUTE_COLOR
-#define INSTANCE_COLOR
+// #define INSTANCE_COLOR
+#define ELEMENT_COLOR
 
 precision highp float;
 
@@ -13,6 +14,7 @@ uniform mat4 projection, model, view;
 
 uniform int objectId;
 uniform int instanceCount;
+uniform int elementCount;
 
 #if defined( UNIFORM_COLOR )
     uniform vec3 color;
@@ -27,7 +29,7 @@ attribute vec3 position;
 attribute vec3 normal;
 attribute vec4 transformColumn0, transformColumn1, transformColumn2, transformColumn3;
 attribute float instanceId;
-// attribute int elementId;
+attribute float elementId;
 
 varying vec3 vColor;
 varying vec3 vNormal;
@@ -42,8 +44,9 @@ void main(){
         vColor = color;
     #elif defined( INSTANCE_COLOR )
         vColor = read_vec3(colorTex, instanceId, colorTexSize);
-    // #elif defined( ELEMENT_COLOR )
-    //     vColor = read_vec3(colorTex, instanceId * instanceCount + elementId, colorTexSize);
+    #elif defined( ELEMENT_COLOR )
+        // vColor = read_vec3(colorTex, elementId, colorTexSize);
+        vColor = read_vec3(colorTex, instanceId * float(elementCount) + elementId, colorTexSize);
     #endif
 
     mat4 transform = mat4(transformColumn0, transformColumn1, transformColumn2, transformColumn3);