Merge branch 'master' into asa

README.md

@@ -55,19 +55,9 @@ This project builds on experience from previous solutions:
 
 ### Build automatically on file save:
     npm run watch
-    npm run watch-extra
 
-### Build/watch mol-viewer
-**Build**
-
-    npm run build
-    npm run build-viewer
-
-**Watch**
-
-    npm run watch
-    npm run watch-extra
-    npm run watch-viewer
+### With debug mode enabled:
+    DEBUG=molstar npm run watch
 
 **Run**
 

package.json

@@ -19,7 +19,7 @@
     "watch-ts": "tsc -watch",
     "watch-extra": "cpx \"src/**/*.{vert,frag,glsl,scss,woff,woff2,ttf,otf,eot,svg,html,gql}\" build/src/ --watch",
     "build-webpack": "webpack --mode production",
-    "watch-webpack": "webpack -w --mode development",
+    "watch-webpack": "webpack -w --mode development --display minimal",
     "model-server": "node build/src/servers/model/server.js",
     "model-server-watch": "nodemon --watch build/src build/src/servers/model/server.js"
   },
@@ -79,52 +79,52 @@
     "@types/benchmark": "^1.0.31",
     "@types/compression": "0.0.36",
     "@types/express": "^4.16.1",
-    "@types/jest": "^24.0.9",
-    "@types/node": "^11.10.4",
-    "@types/node-fetch": "^2.1.6",
-    "@types/react": "^16.8.6",
-    "@types/react-dom": "^16.8.2",
+    "@types/jest": "^24.0.11",
+    "@types/node": "^11.13.4",
+    "@types/node-fetch": "^2.3.2",
+    "@types/react": "^16.8.13",
+    "@types/react-dom": "^16.8.4",
     "@types/webgl2": "0.0.4",
     "@types/swagger-ui-dist": "3.0.0",
     "benchmark": "^2.1.4",
     "circular-dependency-plugin": "^5.0.2",
     "concurrently": "^4.1.0",
     "cpx": "^1.5.0",
-    "css-loader": "^2.1.0",
+    "css-loader": "^2.1.1",
     "extra-watch-webpack-plugin": "^1.0.3",
     "file-loader": "^3.0.1",
     "glslify": "^7.0.0",
     "glslify-import": "^3.1.0",
     "glslify-loader": "^2.0.0",
-    "graphql-code-generator": "^0.18.0",
-    "graphql-codegen-time": "^0.18.0",
-    "graphql-codegen-typescript-template": "^0.18.0",
-    "jest": "^24.1.0",
+    "graphql-code-generator": "^0.18.1",
+    "graphql-codegen-time": "^0.18.1",
+    "graphql-codegen-typescript-template": "^0.18.1",
+    "jest": "^24.7.1",
     "jest-raw-loader": "^1.0.1",
-    "mini-css-extract-plugin": "^0.5.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.11.0",
-    "raw-loader": "^1.0.0",
-    "resolve-url-loader": "^3.0.1",
+    "raw-loader": "^2.0.0",
+    "resolve-url-loader": "^3.1.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "ts-jest": "^24.0.0",
-    "tslint": "^5.13.1",
-    "typescript": "^3.3.3",
-    "uglify-js": "^3.4.9",
+    "ts-jest": "^24.0.2",
+    "tslint": "^5.15.0",
+    "typescript": "^3.4.3",
+    "uglify-js": "^3.5.4",
     "util.promisify": "^1.0.0",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3"
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0"
   },
   "dependencies": {
     "argparse": "^1.0.10",
-    "compression": "^1.7.3",
+    "compression": "^1.7.4",
     "express": "^4.16.4",
-    "graphql": "^14.1.1",
+    "graphql": "^14.2.1",
     "immutable": "^3.8.2",
     "node-fetch": "^2.3.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "rxjs": "^6.4.0",
-    "swagger-ui-dist": "^3.21.0"
+    "swagger-ui-dist": "^3.22.1"
   }
 }

src/apps/basic-wrapper/index.ts

@@ -50,7 +50,7 @@ class BasicWrapper {
 
         return parsed
             .apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex: 0 })
-            .apply(StateTransforms.Model.CustomModelProperties, { properties: [StripedResidues.Descriptor.name] }, { ref: 'props', props: { isGhost: false } })
+            .apply(StateTransforms.Model.CustomModelProperties, { properties: [StripedResidues.Descriptor.name] }, { ref: 'props', state: { isGhost: false } })
             .apply(StateTransforms.Model.StructureAssemblyFromModel, { id: assemblyId || 'deposited' }, { ref: 'asm' });
     }
 
@@ -98,7 +98,8 @@ class BasicWrapper {
     }
 
     setBackground(color: number) {
-        PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { backgroundColor: Color(color) } });
+        const renderer = this.plugin.canvas3d.props.renderer;
+        PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { renderer: { ...renderer,  backgroundColor: Color(color) } } });
     }
 
     toggleSpin() {

src/apps/model-server-query/index.tsx

@@ -105,7 +105,7 @@ const state: State = {
     query: new Rx.BehaviorSubject(QueryList[1].definition),
     id: new Rx.BehaviorSubject('1cbs'),
     params: new Rx.BehaviorSubject({ }),
-    isBinary: new Rx.BehaviorSubject(false),
+    isBinary: new Rx.BehaviorSubject<boolean>(false),
     models: new Rx.BehaviorSubject<number[]>([]),
     url: new Rx.Subject()
 }

src/apps/viewer/extensions/jolecule.ts

@@ -57,7 +57,7 @@ interface JoleculeSnapshot {
 
 function createTemplate(plugin: PluginContext, state: State, id: string) {
     const b = new StateBuilder.Root(state.tree);
-    const data = b.toRoot().apply(StateTransforms.Data.Download, { url: `https://www.ebi.ac.uk/pdbe/static/entry/${id}_updated.cif` }, { props: { isGhost: true }});
+    const data = b.toRoot().apply(StateTransforms.Data.Download, { url: `https://www.ebi.ac.uk/pdbe/static/entry/${id}_updated.cif` }, { state: { isGhost: true }});
     const model = createModelTree(data, 'cif');
     const structure = model.apply(StateTransforms.Model.StructureFromModel, {});
     complexRepresentation(plugin, structure, { hideWater: true });

src/examples/proteopedia-wrapper/changelog.md

@@ -1,3 +1,11 @@
+== v3.0 ==
+
+* Fixed initial camera zoom.
+* Custom chain coloring.
+* Customize visualizations.
+* Show ligand list.
+* Show 3D-SNFG.
+
 == v2.0 ==
 
 * Changed how state saving works.

src/examples/proteopedia-wrapper/coloring.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+
+import { Unit, StructureProperties, StructureElement, Link } from 'mol-model/structure';
+
+import { Color } from 'mol-util/color';
+import { Location } from 'mol-model/location';
+import { ColorTheme, LocationColor } from 'mol-theme/color';
+import { ParamDefinition as PD } from 'mol-util/param-definition'
+import { ThemeDataContext } from 'mol-theme/theme';
+import { Column } from 'mol-data/db';
+
+const Description = 'Gives every chain a color from a list based on its `asym_id` value.'
+
+export function createProteopediaCustomTheme(colors: number[]) {
+    const ProteopediaCustomColorThemeParams = {
+        colors: PD.ObjectList({ color: PD.Color(Color(0xffffff)) }, ({ color }) => Color.toHexString(color),
+            { defaultValue: colors.map(c => ({ color: Color(c) })) })
+    }
+    type ProteopediaCustomColorThemeParams = typeof ProteopediaCustomColorThemeParams
+    function getChainIdColorThemeParams(ctx: ThemeDataContext) {
+        return ProteopediaCustomColorThemeParams // TODO return copy
+    }
+
+    function getAsymId(unit: Unit): StructureElement.Property<string> {
+        switch (unit.kind) {
+            case Unit.Kind.Atomic:
+                return StructureProperties.chain.label_asym_id
+            case Unit.Kind.Spheres:
+            case Unit.Kind.Gaussians:
+                return StructureProperties.coarse.asym_id
+        }
+    }
+
+    function addAsymIds(map: Map<string, number>, data: Column<string>) {
+        let j = map.size
+        for (let o = 0, ol = data.rowCount; o < ol; ++o) {
+            const k = data.value(o)
+            if (!map.has(k)) {
+                map.set(k, j)
+                j += 1
+            }
+        }
+    }
+
+    function ProteopediaCustomColorTheme(ctx: ThemeDataContext, props: PD.Values<ProteopediaCustomColorThemeParams>): ColorTheme<ProteopediaCustomColorThemeParams> {
+        let color: LocationColor
+
+        const colors = props.colors, colorCount = colors.length, defaultColor = colors[0].color;
+
+        if (ctx.structure) {
+            const l = StructureElement.create()
+            const { models } = ctx.structure
+            const asymIdSerialMap = new Map<string, number>()
+            for (let i = 0, il = models.length; i < il; ++i) {
+                const m = models[i]
+                addAsymIds(asymIdSerialMap, m.atomicHierarchy.chains.label_asym_id)
+                if (m.coarseHierarchy.isDefined) {
+                    addAsymIds(asymIdSerialMap, m.coarseHierarchy.spheres.asym_id)
+                    addAsymIds(asymIdSerialMap, m.coarseHierarchy.gaussians.asym_id)
+                }
+            }
+
+            color = (location: Location): Color => {
+                if (StructureElement.isLocation(location)) {
+                    const asym_id = getAsymId(location.unit);
+                    const o = asymIdSerialMap.get(asym_id(location)) || 0;
+                    return colors[o % colorCount].color;
+                } else if (Link.isLocation(location)) {
+                    const asym_id = getAsymId(location.aUnit)
+                    l.unit = location.aUnit
+                    l.element = location.aUnit.elements[location.aIndex]
+                    const o = asymIdSerialMap.get(asym_id(l)) || 0;
+                    return colors[o % colorCount].color;
+                }
+                return defaultColor
+            }
+        } else {
+            color = () => defaultColor
+        }
+
+        return {
+            factory: ProteopediaCustomColorTheme,
+            granularity: 'group',
+            color,
+            props,
+            description: Description,
+            legend: undefined
+        }
+    }
+
+    const ProteopediaCustomColorThemeProvider: ColorTheme.Provider<ProteopediaCustomColorThemeParams> = {
+        label: 'Proteopedia Custom',
+        factory: ProteopediaCustomColorTheme,
+        getParams: getChainIdColorThemeParams,
+        defaultValues: PD.getDefaultValues(ProteopediaCustomColorThemeParams),
+        isApplicable: (ctx: ThemeDataContext) => !!ctx.structure
+    }
+
+    return ProteopediaCustomColorThemeProvider;
+}

src/examples/proteopedia-wrapper/helpers.ts

@@ -92,9 +92,26 @@ export interface LoadParams {
 export interface RepresentationStyle {
     sequence?: RepresentationStyle.Entry,
     hetGroups?: RepresentationStyle.Entry,
+    snfg3d?: { hide?: boolean },
     water?: RepresentationStyle.Entry
 }
 
 export namespace RepresentationStyle {
-    export type Entry = { kind?: BuiltInStructureRepresentationsName, coloring?: BuiltInColorThemeName }
+    export type Entry = { hide?: boolean, kind?: BuiltInStructureRepresentationsName, coloring?: BuiltInColorThemeName }
+}
+
+export enum StateElements {
+    Model = 'model',
+    ModelProps = 'model-props',
+    Assembly = 'assembly',
+
+    Sequence = 'sequence',
+    SequenceVisual = 'sequence-visual',
+    Het = 'het',
+    HetVisual = 'het-visual',
+    Het3DSNFG = 'het-3dsnfg',
+    Water = 'water',
+    WaterVisual = 'water-visual',
+
+    HetGroupFocus = 'het-group-focus'
 }

src/examples/proteopedia-wrapper/index.html

@@ -55,11 +55,14 @@
             </select>
         </div>
         <div id="app"></div>
-        <script>  
+        <script>
+            // it might be a good idea to define these colors in a separate script file 
+            var CustomColors = [0x00ff00, 0x0000ff];
+
             // create an instance of the plugin
             var PluginWrapper = new MolStarProteopediaWrapper();
 
-            console.log('Wrapper version', MolStarProteopediaWrapper.VERSION_MAJOR);
+            console.log('Wrapper version', MolStarProteopediaWrapper.VERSION_MAJOR, MolStarProteopediaWrapper.VERSION_MINOR);
 
             function $(id) { return document.getElementById(id); }
         
@@ -78,13 +81,23 @@
             // var format = 'pdb';
             // var assemblyId = 'deposited';
 
-            PluginWrapper.init('app' /** or document.getElementById('app') */);
+            var representationStyle = {
+                sequence: { coloring: 'proteopedia-custom' }, // or just { }
+                hetGroups: { kind: 'ball-and-stick' }, // or 'spacefill
+                water: { hide: true },
+                snfg3d: { hide: false }
+            };
+
+            PluginWrapper.init('app' /** or document.getElementById('app') */, {
+                customColorList: CustomColors
+            });
             PluginWrapper.setBackground(0xffffff);
-            PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId });
+            PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId, representationStyle: representationStyle });
             PluginWrapper.toggleSpin();
 
             PluginWrapper.events.modelInfo.subscribe(function (info) {
                 console.log('Model Info', info);
+                listHetGroups(info);
             });
 
             addControl('Load Asym Unit', () => PluginWrapper.load({ url: url, format: format }));
@@ -92,6 +105,22 @@
 
             addSeparator();
 
+            addHeader('Representation');
+
+            addControl('Custom Chain Colors', () => PluginWrapper.updateStyle({ sequence: { coloring: 'proteopedia-custom' } }, true));
+            addControl('Default Chain Colors', () => PluginWrapper.updateStyle({ sequence: { } }, true));
+
+            addControl('HET Spacefill', () => PluginWrapper.updateStyle({ hetGroups: { kind: 'spacefill' } }, true));
+            addControl('HET Ball-and-stick', () => PluginWrapper.updateStyle({ hetGroups: { kind: 'ball-and-stick' } }, true));
+
+            addControl('Hide 3DSNFG', () => PluginWrapper.updateStyle({ snfg3d: { hide: true } }, true));
+            addControl('Show 3DSNFG', () => PluginWrapper.updateStyle({ snfg3d: { hide: false } }, true));
+
+            addControl('Hide Water', () => PluginWrapper.updateStyle({ water: { hide: true } }, true));
+            addControl('Show Water', () => PluginWrapper.updateStyle({ water: { hide: false } }, true));
+
+            addSeparator();
+
             addHeader('Camera');
             addControl('Toggle Spin', () => PluginWrapper.toggleSpin());
             
@@ -115,6 +144,12 @@
             addControl('Apply Evo Cons', () => PluginWrapper.coloring.evolutionaryConservation());
             addControl('Default Visuals', () => PluginWrapper.updateStyle());
 
+            addSeparator();
+            addHeader('HET Groups');
+
+            addControl('Reset', () => PluginWrapper.hetGroups.reset());
+            addHetGroupsContainer();
+
             addSeparator();
             addHeader('State');
 
@@ -133,6 +168,12 @@
 
             ////////////////////////////////////////////////////////
 
+            function addHetGroupsContainer() {
+                var div = document.createElement('div');
+                div.id = 'het-groups';
+                $('controls').appendChild(div);
+            }
+
             function addControl(label, action) {
                 var btn = document.createElement('button');
                 btn.onclick = action;
@@ -150,6 +191,19 @@
                 h.innerText = header;
                 $('controls').appendChild(h);
             }
+
+            function listHetGroups(info) {
+                var div = $('het-groups');
+                div.innerHTML = '';
+                info.hetResidues.forEach(function (r) {
+                    var l = document.createElement('button');
+                    l.innerText = r.name;
+                    l.onclick = function () {
+                        PluginWrapper.hetGroups.focusFirst(r.name);
+                    };
+                    div.appendChild(l);
+                });
+            }
         </script>
     </body>
 </html>

src/examples/proteopedia-wrapper/index.ts

@@ -15,15 +15,25 @@ import { PluginStateObject as PSO, PluginStateObject } from 'mol-plugin/state/ob
 import { AnimateModelIndex } from 'mol-plugin/state/animation/built-in';
 import { StateBuilder, StateObject } from 'mol-state';
 import { EvolutionaryConservation } from './annotation';
-import { LoadParams, SupportedFormats, RepresentationStyle, ModelInfo } from './helpers';
+import { LoadParams, SupportedFormats, RepresentationStyle, ModelInfo, StateElements } from './helpers';
 import { RxEventHelper } from 'mol-util/rx-event-helper';
 import { ControlsWrapper } from './ui/controls';
 import { PluginState } from 'mol-plugin/state';
+import { Scheduler } from 'mol-task';
+import { createProteopediaCustomTheme } from './coloring';
+import { MolScriptBuilder as MS } from 'mol-script/language/builder';
+import { BuiltInStructureRepresentations } from 'mol-repr/structure/registry';
+import { BuiltInColorThemes } from 'mol-theme/color';
+import { BuiltInSizeThemes } from 'mol-theme/size';
+import { ColorNames } from 'mol-util/color/tables';
+// import { Vec3 } from 'mol-math/linear-algebra';
+// import { ParamDefinition } from 'mol-util/param-definition';
+// import { Text } from 'mol-geo/geometry/text/text';
 require('mol-plugin/skin/light.scss')
 
 class MolStarProteopediaWrapper {
-    static VERSION_MAJOR = 2;
-    static VERSION_MINOR = 0;
+    static VERSION_MAJOR = 3;
+    static VERSION_MINOR = 1;
 
     private _ev = RxEventHelper.create();
 
@@ -33,9 +43,14 @@ class MolStarProteopediaWrapper {
 
     plugin: PluginContext;
 
-    init(target: string | HTMLElement) {
+    init(target: string | HTMLElement, options?: {
+        customColorList?: number[]
+    }) {
         this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
             ...DefaultPluginSpec,
+            animations: [
+                AnimateModelIndex
+            ],
             layout: {
                 initial: {
                     isExpanded: false,
@@ -47,6 +62,9 @@ class MolStarProteopediaWrapper {
             }
         });
 
+        const customColoring = createProteopediaCustomTheme((options && options.customColorList) || []);
+
+        this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.add('proteopedia-custom', customColoring);
         this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.add(EvolutionaryConservation.Descriptor.name, EvolutionaryConservation.colorTheme!);
         this.plugin.lociLabels.addProvider(EvolutionaryConservation.labelProvider);
         this.plugin.customModelProperties.register(EvolutionaryConservation.propertyProvider);
@@ -66,43 +84,86 @@ class MolStarProteopediaWrapper {
             : b.apply(StateTransforms.Model.TrajectoryFromPDB);
 
         return parsed
-            .apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex: 0 }, { ref: 'model' });
+            .apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex: 0 }, { ref: StateElements.Model });
     }
 
     private structure(assemblyId: string) {
-        const model = this.state.build().to('model');
+        const model = this.state.build().to(StateElements.Model);
+
+        const s = model
+            .apply(StateTransforms.Model.CustomModelProperties, { properties: [EvolutionaryConservation.Descriptor.name] }, { ref: StateElements.ModelProps, state: { isGhost: false } })
+            .apply(StateTransforms.Model.StructureAssemblyFromModel, { id: assemblyId || 'deposited' }, { ref: StateElements.Assembly });
 
-        return model
-            .apply(StateTransforms.Model.CustomModelProperties, { properties: [EvolutionaryConservation.Descriptor.name] }, { ref: 'props', props: { isGhost: false } })
-            .apply(StateTransforms.Model.StructureAssemblyFromModel, { id: assemblyId || 'deposited' }, { ref: 'asm' });
+        s.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' }, { ref: StateElements.Sequence });
+        s.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' }, { ref: StateElements.Het });
+        s.apply(StateTransforms.Model.StructureComplexElement, { type: 'water' }, { ref: StateElements.Water });
+
+        return s;
     }
 
-    private visual(ref: string, style?: RepresentationStyle) {
-        const structure = this.getObj<PluginStateObject.Molecule.Structure>(ref);
+    private visual(_style?: RepresentationStyle, partial?: boolean) {
+        const structure = this.getObj<PluginStateObject.Molecule.Structure>(StateElements.Assembly);
         if (!structure) return;
 
-        const root = this.state.build().to(ref);
-
-        root.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' }, { ref: 'sequence' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
-                    (style && style.sequence && style.sequence.kind) || 'cartoon',
-                    (style && style.sequence && style.sequence.coloring) || 'unit-index', structure),
-                    { ref: 'sequence-visual' });
-        root.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' }, { ref: 'het' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
-                    (style && style.hetGroups && style.hetGroups.kind) || 'ball-and-stick',
-                    (style && style.hetGroups && style.hetGroups.coloring), structure),
-                    { ref: 'het-visual' });
-        root.apply(StateTransforms.Model.StructureComplexElement, { type: 'water' }, { ref: 'water' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
-                    (style && style.water && style.water.kind) || 'ball-and-stick',
-                    (style && style.water && style.water.coloring), structure, { alpha: 0.51 }),
-                    { ref: 'water-visual' });
-
-        return root;
+        const style = _style || { };
+
+        const update = this.state.build();
+
+        if (!partial || (partial && style.sequence)) {
+            const root = update.to(StateElements.Sequence);
+            if (style.sequence && style.sequence.hide) {
+                root.delete(StateElements.SequenceVisual);
+            } else {
+                root.applyOrUpdate(StateElements.SequenceVisual, StateTransforms.Representation.StructureRepresentation3D,
+                    StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
+                        (style.sequence && style.sequence.kind) || 'cartoon',
+                        (style.sequence && style.sequence.coloring) || 'unit-index', structure));
+            }
+        }
+
+        if (!partial || (partial && style.hetGroups)) {
+            const root = update.to(StateElements.Het);
+            if (style.hetGroups && style.hetGroups.hide) {
+                root.delete(StateElements.HetVisual);
+            } else {
+                if (style.hetGroups && style.hetGroups.hide) {
+                    root.delete(StateElements.HetVisual);
+                } else {
+                    root.applyOrUpdate(StateElements.HetVisual, StateTransforms.Representation.StructureRepresentation3D,
+                        StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
+                            (style.hetGroups && style.hetGroups.kind) || 'ball-and-stick',
+                            (style.hetGroups && style.hetGroups.coloring), structure));
+                }
+            }
+        }
+
+        if (!partial || (partial && style.snfg3d)) {
+            const root = update.to(StateElements.Het);
+            if (style.hetGroups && style.hetGroups.hide) {
+                root.delete(StateElements.HetVisual);
+            } else {
+                if (style.snfg3d && style.snfg3d.hide) {
+                    root.delete(StateElements.Het3DSNFG);
+                } else {
+                    root.applyOrUpdate(StateElements.Het3DSNFG, StateTransforms.Representation.StructureRepresentation3D,
+                        StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin, 'carbohydrate', void 0, structure));
+                }
+            }
+        }
+
+        if (!partial || (partial && style.water)) {
+            const root = update.to(StateElements.Water);
+            if (style.water && style.water.hide) {
+                root.delete(StateElements.WaterVisual);
+            } else {
+                root.applyOrUpdate(StateElements.WaterVisual, StateTransforms.Representation.StructureRepresentation3D,
+                        StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
+                            (style.water && style.water.kind) || 'ball-and-stick',
+                            (style.water && style.water.coloring), structure, { alpha: 0.51 }));
+            }
+        }
+
+        return update;
     }
 
     private getObj<T extends StateObject>(ref: string): T['data'] {
@@ -134,7 +195,7 @@ class MolStarProteopediaWrapper {
         if (this.loadedParams.url !== url || this.loadedParams.format !== format) {
             loadType = 'full';
         } else if (this.loadedParams.url === url) {
-            if (state.select('asm').length > 0) loadType = 'update';
+            if (state.select(StateElements.Assembly).length > 0) loadType = 'update';
         }
 
         if (loadType === 'full') {
@@ -146,24 +207,25 @@ class MolStarProteopediaWrapper {
             await this.applyState(structureTree);
         } else {
             const tree = state.build();
-            tree.to('asm').update(StateTransforms.Model.StructureAssemblyFromModel, p => ({ ...p, id: assemblyId || 'deposited' }));
+            tree.to(StateElements.Assembly).update(StateTransforms.Model.StructureAssemblyFromModel, p => ({ ...p, id: assemblyId || 'deposited' }));
             await this.applyState(tree);
         }
 
         await this.updateStyle(representationStyle);
 
         this.loadedParams = { url, format, assemblyId };
-        PluginCommands.Camera.Reset.dispatch(this.plugin, { });
+        Scheduler.setImmediate(() => PluginCommands.Camera.Reset.dispatch(this.plugin, { }));
     }
 
-    async updateStyle(style?: RepresentationStyle) {
-        const tree = this.visual('asm', style);
+    async updateStyle(style?: RepresentationStyle, partial?: boolean) {
+        const tree = this.visual(style, partial);
         if (!tree) return;
         await PluginCommands.State.Update.dispatch(this.plugin, { state: this.plugin.state.dataState, tree });
     }
 
     setBackground(color: number) {
-        PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { backgroundColor: Color(color) } });
+        const renderer = this.plugin.canvas3d.props.renderer;
+        PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { renderer: { ...renderer,  backgroundColor: Color(color) } } });
     }
 
     toggleSpin() {
@@ -186,7 +248,7 @@ class MolStarProteopediaWrapper {
 
     coloring = {
         evolutionaryConservation: async () => {
-            await this.updateStyle({ sequence: { kind: 'spacefill' } });
+            await this.updateStyle({ sequence: { kind: 'spacefill' } }, true);
 
             const state = this.state;
 
@@ -194,7 +256,7 @@ class MolStarProteopediaWrapper {
             const tree = state.build();
             const colorTheme = { name: EvolutionaryConservation.Descriptor.name, params: this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.get(EvolutionaryConservation.Descriptor.name).defaultValues };
 
-            tree.to('sequence-visual').update(StateTransforms.Representation.StructureRepresentation3D, old => ({ ...old, colorTheme }));
+            tree.to(StateElements.SequenceVisual).update(StateTransforms.Representation.StructureRepresentation3D, old => ({ ...old, colorTheme }));
             // for (const v of visuals) {
             // }
 
@@ -202,6 +264,69 @@ class MolStarProteopediaWrapper {
         }
     }
 
+    hetGroups = {
+        reset: () => {
+            const update = this.state.build().delete(StateElements.HetGroupFocus);
+            PluginCommands.State.Update.dispatch(this.plugin, { state: this.state, tree: update });
+            PluginCommands.Camera.Reset.dispatch(this.plugin, { });
+        },
+        focusFirst: async (resn: string) => {
+            if (!this.state.transforms.has(StateElements.Assembly)) return;
+
+            // const asm = (this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure).data;
+
+            const update = this.state.build();
+
+            update.delete(StateElements.HetGroupFocus);
+
+            const surroundings = MS.struct.modifier.includeSurroundings({
+                0: MS.struct.filter.first([
+                    MS.struct.generator.atomGroups({
+                        'residue-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.label_comp_id(), resn]),
+                        'group-by': MS.struct.atomProperty.macromolecular.residueKey()
+                    })
+                ]),
+                radius: 5,
+                'as-whole-residues': true
+            });
+
+            const sel = update.to(StateElements.Assembly)
+                .apply(StateTransforms.Model.StructureSelection, { label: resn, query: surroundings }, { ref: StateElements.HetGroupFocus });
+
+            sel.apply(StateTransforms.Representation.StructureRepresentation3D, this.createSurVisualParams());
+            // sel.apply(StateTransforms.Representation.StructureLabels3D, {
+            //     target: { name: 'residues', params: { } },
+            //     options: {
+            //         ...ParamDefinition.getDefaultValues(Text.Params),
+            //         background: true,
+            //         backgroundMargin: 0.2,
+            //         backgroundColor: ColorNames.snow,
+            //         backgroundOpacity: 0.9,
+            //     }
+            // });
+
+            await PluginCommands.State.Update.dispatch(this.plugin, { state: this.state, tree: update });
+
+            const focus = (this.state.select(StateElements.HetGroupFocus)[0].obj as PluginStateObject.Molecule.Structure).data;
+            const sphere = focus.boundary.sphere;
+            // const asmCenter = asm.boundary.sphere.center;
+            // const position = Vec3.sub(Vec3.zero(), sphere.center, asmCenter);
+            // Vec3.normalize(position, position);
+            // Vec3.scaleAndAdd(position, sphere.center, position, sphere.radius);
+            const snapshot = this.plugin.canvas3d.camera.getFocus(sphere.center, 0.75 * sphere.radius);
+            PluginCommands.Camera.SetSnapshot.dispatch(this.plugin, { snapshot, durationMs: 250 });
+        }
+    }
+
+    private createSurVisualParams() {
+        const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
+        return StructureRepresentation3DHelpers.createParams(this.plugin, asm.data, {
+            repr: BuiltInStructureRepresentations['ball-and-stick'],
+            color: [BuiltInColorThemes.uniform, () => ({ value: ColorNames.gray })],
+            size: [BuiltInSizeThemes.uniform, () => ({ value: 0.33 } )]
+        });
+    }
+
     snapshot = {
         get: () => {
             return this.plugin.state.getSnapshot();

src/mol-canvas3d/camera.ts

@@ -84,7 +84,7 @@ class Camera implements Object3D {
         return ret;
     }
 
-    focus(target: Vec3, radius: number) {
+    getFocus(target: Vec3, radius: number): Partial<Camera.Snapshot> {
         const fov = this.state.fov
         const { width, height } = this.viewport
         const aspect = width / height
@@ -98,7 +98,11 @@ class Camera implements Object3D {
         if (currentDistance < targetDistance) Vec3.negate(this.deltaDirection, this.deltaDirection)
         Vec3.add(this.newPosition, this.state.position, this.deltaDirection)
 
-        this.setState({ target, position: this.newPosition })
+        return { target, position: Vec3.clone(this.newPosition) };
+    }
+
+    focus(target: Vec3, radius: number) {
+        this.setState(this.getFocus(target, radius));
     }
 
     // lookAt(target: Vec3) {

src/mol-canvas3d/camera/util.ts

@@ -1,19 +1,28 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { Mat4, Vec3, Vec4, EPSILON } from 'mol-math/linear-algebra'
 
-export type Viewport = {
+export { Viewport }
+
+type Viewport = {
     x: number
     y: number
     width: number
     height: number
 }
 
-export namespace Viewport {
+function Viewport() {
+    return Viewport.zero()
+}
+
+namespace Viewport {
+    export function zero(): Viewport {
+        return { x: 0, y: 0, width: 0, height: 0 }
+    }
     export function create(x: number, y: number, width: number, height: number): Viewport {
         return { x, y, width, height }
     }
@@ -38,9 +47,15 @@ export namespace Viewport {
         v4[3] = viewport.height
         return v4
     }
+
+    export function equals(a: Viewport, b: Viewport) {
+        return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+    }
 }
 
-const tmpVec3 = Vec3.zero()
+//
+
+const tmpVec3 = Vec3()
 
 /** Modifies the direction & up vectors in place, both are normalized */
 export function cameraLookAt(position: Vec3, up: Vec3, direction: Vec3, target: Vec3) {
@@ -68,7 +83,7 @@ export function cameraLookAt(position: Vec3, up: Vec3, direction: Vec3, target:
 const NEAR_RANGE = 0
 const FAR_RANGE = 1
 
-const tmpVec4 = Vec4.zero()
+const tmpVec4 = Vec4()
 
 /** Transform point into 2D window coordinates. */
 export function cameraProject (out: Vec4, point: Vec3, viewport: Viewport, projectionView: Mat4) {

src/mol-canvas3d/canvas3d.ts

@@ -9,7 +9,7 @@ import { now } from 'mol-util/now';
 
 import { Vec3 } from 'mol-math/linear-algebra'
 import InputObserver, { ModifiersKeys, ButtonsType } from 'mol-util/input/input-observer'
-import Renderer, { RendererStats } from 'mol-gl/renderer'
+import Renderer, { RendererStats, RendererParams } from 'mol-gl/renderer'
 import { GraphicsRenderObject } from 'mol-gl/render-object'
 
 import { TrackballControls, TrackballControlsParams } from './controls/trackball'
@@ -19,11 +19,10 @@ import { createContext, getGLContext, WebGLContext } from 'mol-gl/webgl/context'
 import { Representation } from 'mol-repr/representation';
 import { createRenderTarget } from 'mol-gl/webgl/render-target';
 import Scene from 'mol-gl/scene';
-import { RenderVariant } from 'mol-gl/webgl/render-item';
+import { GraphicsRenderVariant } from 'mol-gl/webgl/render-item';
 import { PickingId } from 'mol-geo/geometry/picking';
 import { MarkerAction } from 'mol-geo/geometry/marker-data';
 import { Loci, EmptyLoci, isEmptyLoci } from 'mol-model/loci';
-import { Color } from 'mol-util/color';
 import { Camera } from './camera';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { BoundingSphereHelper, DebugHelperParams } from './helper/bounding-sphere-helper';
@@ -35,11 +34,10 @@ export const Canvas3DParams = {
     // TODO: FPS cap?
     // maxFps: PD.Numeric(30),
     cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]),
-    backgroundColor: PD.Color(Color(0x000000)),
     cameraClipDistance: PD.Numeric(0, { min: 0.0, max: 50.0, step: 0.1 }, { description: 'The distance between camera and scene at which to clip regardless of near clipping plane.' }),
     clip: PD.Interval([1, 100], { min: 1, max: 100, step: 1 }),
     fog: PD.Interval([50, 100], { min: 1, max: 100, step: 1 }),
-    pickingAlphaThreshold: PD.Numeric(0.5, { min: 0.0, max: 1.0, step: 0.01 }, { description: 'The minimum opacity value needed for an object to be pickable.' }),
+    renderer: PD.Group(RendererParams),
     trackball: PD.Group(TrackballControlsParams),
     debug: PD.Group(DebugHelperParams)
 }
@@ -70,11 +68,11 @@ interface Canvas3D {
     resetCamera: () => void
     readonly camera: Camera
     downloadScreenshot: () => void
-    getImageData: (variant: RenderVariant) => ImageData
+    getImageData: (variant: GraphicsRenderVariant) => ImageData
     setProps: (props: Partial<Canvas3DProps>) => void
 
     /** Returns a copy of the current Canvas3D instance props */
-    readonly props: Canvas3DProps
+    readonly props: Readonly<Canvas3DProps>
     readonly input: InputObserver
     readonly stats: RendererStats
     readonly interaction: Canvas3dInteractionHelper['events']
@@ -117,7 +115,7 @@ namespace Canvas3D {
 
         const scene = Scene.create(webgl)
         const controls = TrackballControls.create(input, camera, p.trackball)
-        const renderer = Renderer.create(webgl, camera, { clearColor: p.backgroundColor })
+        const renderer = Renderer.create(webgl, camera, p.renderer)
 
         let pickScale = 0.25 / webgl.pixelRatio
         let pickWidth = Math.round(canvas.width * pickScale)
@@ -210,19 +208,15 @@ namespace Canvas3D {
                     case 'pick':
                         renderer.setViewport(0, 0, pickWidth, pickHeight);
                         objectPickTarget.bind();
-                        renderer.clear()
                         renderer.render(scene, 'pickObject');
                         instancePickTarget.bind();
-                        renderer.clear()
                         renderer.render(scene, 'pickInstance');
                         groupPickTarget.bind();
-                        renderer.clear()
                         renderer.render(scene, 'pickGroup');
                         break;
                     case 'draw':
                         webgl.unbindFramebuffer();
                         renderer.setViewport(0, 0, canvas.width, canvas.height);
-                        renderer.clear()
                         renderer.render(scene, variant);
                         if (debugHelper.isEnabled) {
                             debugHelper.syncVisibility()
@@ -388,7 +382,7 @@ namespace Canvas3D {
             downloadScreenshot: () => {
                 // TODO
             },
-            getImageData: (variant: RenderVariant) => {
+            getImageData: (variant: GraphicsRenderVariant) => {
                 switch (variant) {
                     case 'draw': return renderer.getImageData()
                     case 'pickObject': return objectPickTarget.getImageData()
@@ -401,17 +395,11 @@ namespace Canvas3D {
                 if (props.cameraMode !== undefined && props.cameraMode !== camera.state.mode) {
                     camera.setState({ mode: props.cameraMode })
                 }
-                if (props.backgroundColor !== undefined && props.backgroundColor !== renderer.props.clearColor) {
-                    renderer.setClearColor(props.backgroundColor)
-                }
-
                 if (props.cameraClipDistance !== undefined) p.cameraClipDistance = props.cameraClipDistance
                 if (props.clip !== undefined) p.clip = [props.clip[0], props.clip[1]]
                 if (props.fog !== undefined) p.fog = [props.fog[0], props.fog[1]]
 
-                if (props.pickingAlphaThreshold !== undefined && props.pickingAlphaThreshold !== renderer.props.pickingAlphaThreshold) {
-                    renderer.setPickingAlphaThreshold(props.pickingAlphaThreshold)
-                }
+                if (props.renderer) renderer.setProps(props.renderer)
                 if (props.trackball) controls.setProps(props.trackball)
                 if (props.debug) debugHelper.setProps(props.debug)
                 requestDraw(true)
@@ -420,11 +408,10 @@ namespace Canvas3D {
             get props() {
                 return {
                     cameraMode: camera.state.mode,
-                    backgroundColor: renderer.props.clearColor,
                     cameraClipDistance: p.cameraClipDistance,
                     clip: p.clip,
                     fog: p.fog,
-                    pickingAlphaThreshold: renderer.props.pickingAlphaThreshold,
+                    renderer: { ...renderer.props },
                     trackball: { ...controls.props },
                     debug: { ...debugHelper.props }
                 }

src/mol-canvas3d/helper/bounding-sphere-helper.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { createRenderObject, RenderObject } from 'mol-gl/render-object'
+import { createRenderObject, GraphicsRenderObject, getNextMaterialId } from 'mol-gl/render-object'
 import { MeshBuilder } from 'mol-geo/geometry/mesh/mesh-builder';
 import { addSphere } from 'mol-geo/geometry/mesh/builder/sphere';
 import { Mesh } from 'mol-geo/geometry/mesh/mesh';
@@ -27,15 +27,15 @@ export const DebugHelperParams = {
 export type DebugHelperParams = typeof DebugHelperParams
 export type DebugHelperProps = PD.Values<DebugHelperParams>
 
-type BoundingSphereData = { boundingSphere: Sphere3D, renderObject: RenderObject, mesh: Mesh }
+type BoundingSphereData = { boundingSphere: Sphere3D, renderObject: GraphicsRenderObject, mesh: Mesh }
 
 export class BoundingSphereHelper {
     readonly scene: Scene
 
     private readonly parent: Scene
     private _props: DebugHelperProps
-    private objectsData = new Map<RenderObject, BoundingSphereData>()
-    private instancesData = new Map<RenderObject, BoundingSphereData>()
+    private objectsData = new Map<GraphicsRenderObject, BoundingSphereData>()
+    private instancesData = new Map<GraphicsRenderObject, BoundingSphereData>()
     private sceneData: BoundingSphereData | undefined
 
     constructor(ctx: WebGLContext, parent: Scene, props: Partial<DebugHelperProps>) {
@@ -136,7 +136,8 @@ function createBoundingSphereMesh(boundingSphere: Sphere3D, mesh?: Mesh) {
     return MeshBuilder.getMesh(builderState)
 }
 
+const boundingSphereHelberMaterialId = getNextMaterialId()
 function createBoundingSphereRenderObject(mesh: Mesh, color: Color, transform?: TransformData) {
     const values = Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform)
-    return createRenderObject('mesh', values, { visible: true, alphaFactor: 1, pickable: false, opaque: false })
+    return createRenderObject('mesh', values, { visible: true, alphaFactor: 1, pickable: false, opaque: false }, boundingSphereHelberMaterialId)
 }

src/mol-geo/geometry/base.ts

@@ -64,9 +64,10 @@ export namespace BaseGeometry {
             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)),
+            dUseFog: ValueCell.create(props.useFog),
+
             uGroupCount: ValueCell.create(counts.groupCount),
             drawCount: ValueCell.create(counts.drawCount),
-            dUseFog: ValueCell.create(props.useFog),
         }
     }
 

src/mol-geo/geometry/color-data.ts

@@ -33,14 +33,14 @@ export function createColors(locationIt: LocationIterator, colorTheme: ColorThem
 
 export function createValueColor(value: Color, colorData?: ColorData): ColorData {
     if (colorData) {
-        ValueCell.update(colorData.uColor, Color.toRgbNormalized(value) as Vec3)
+        ValueCell.update(colorData.uColor, Color.toVec3Normalized(colorData.uColor.ref.value, value))
         if (colorData.dColorType.ref.value !== 'uniform') {
             ValueCell.update(colorData.dColorType, 'uniform')
         }
         return colorData
     } else {
         return {
-            uColor: ValueCell.create(Color.toRgbNormalized(value) as Vec3),
+            uColor: ValueCell.create(Color.toVec3Normalized(Vec3(), value)),
             tColor: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
             uColorTexDim: ValueCell.create(Vec2.create(1, 1)),
             dColorType: ValueCell.create('uniform'),
@@ -74,7 +74,7 @@ export function createTextureColor(colors: TextureImage<Uint8Array>, type: Color
 /** Creates color texture with color for each instance/unit */
 export function createInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { instanceCount } = locationIt
-    const colors = createTextureImage(Math.max(1, instanceCount), 3, colorData && colorData.tColor.ref.value.array)
+    const colors = createTextureImage(Math.max(1, instanceCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array)
     locationIt.reset()
     while (locationIt.hasNext) {
         const { location, isSecondary, instanceIndex } = locationIt.move()
@@ -87,7 +87,7 @@ export function createInstanceColor(locationIt: LocationIterator, color: Locatio
 /** Creates color texture with color for each group (i.e. shared across instances/units) */
 export function createGroupColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount } = locationIt
-    const colors = createTextureImage(Math.max(1, groupCount), 3, colorData && colorData.tColor.ref.value.array)
+    const colors = createTextureImage(Math.max(1, groupCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array)
     locationIt.reset()
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
         const { location, isSecondary, groupIndex } = locationIt.move()
@@ -100,7 +100,7 @@ export function createGroupColor(locationIt: LocationIterator, color: LocationCo
 export function createGroupInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount, instanceCount } = locationIt
     const count = instanceCount * groupCount
-    const colors = createTextureImage(Math.max(1, count), 3, colorData && colorData.tColor.ref.value.array)
+    const colors = createTextureImage(Math.max(1, count), 3, Uint8Array, colorData && colorData.tColor.ref.value.array)
     locationIt.reset()
     while (locationIt.hasNext) {
         const { location, isSecondary, index } = locationIt.move()

src/mol-geo/geometry/direct-volume/direct-volume.ts

@@ -25,6 +25,7 @@ import { ColorListOptions, ColorListName } from 'mol-util/color/scale';
 import { Color } from 'mol-util/color';
 import { BaseGeometry } from '../base';
 import { createEmptyOverpaint } from '../overpaint-data';
+import { createEmptyTransparency } from '../transparency-data';
 
 const VolumeBox = Box()
 const RenderModeOptions = [['isosurface', 'Isosurface'], ['volume', 'Volume']] as [string, string][]
@@ -103,6 +104,7 @@ export namespace DirectVolume {
         const color = createColors(locationIt, theme.color)
         const marker = createMarkers(instanceCount * groupCount)
         const overpaint = createEmptyOverpaint()
+        const transparency = createEmptyTransparency()
 
         const counts = { drawCount: VolumeBox.indices.length, groupCount, instanceCount }
 
@@ -117,6 +119,7 @@ export namespace DirectVolume {
             ...color,
             ...marker,
             ...overpaint,
+            ...transparency,
             ...transform,
             ...BaseGeometry.createValues(props, counts),
 

src/mol-geo/geometry/geometry.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -21,6 +21,7 @@ import { TransformData } from './transform-data';
 import { Theme } from 'mol-theme/theme';
 import { RenderObjectValuesType } from 'mol-gl/render-object';
 import { ValueOf } from 'mol-util/type-helpers';
+import { TextureMesh } from './texture-mesh/texture-mesh';
 
 export type GeometryKindType = {
     'mesh': Mesh,
@@ -29,6 +30,7 @@ export type GeometryKindType = {
     'text': Text,
     'lines': Lines,
     'direct-volume': DirectVolume,
+    'texture-mesh': TextureMesh,
 }
 export type GeometryKindParams = {
     'mesh': Mesh.Params,
@@ -37,6 +39,7 @@ export type GeometryKindParams = {
     'text': Text.Params,
     'lines': Lines.Params,
     'direct-volume': DirectVolume.Params,
+    'texture-mesh': TextureMesh.Params,
 }
 export type GeometryKind = keyof GeometryKindType
 export type Geometry = ValueOf<GeometryKindType>
@@ -63,6 +66,7 @@ export namespace Geometry {
             case 'text': return geometry.charCount * 2 * 3
             case 'lines': return geometry.lineCount * 2 * 3
             case 'direct-volume': return 12 * 3
+            case 'texture-mesh': return geometry.vertexCount.ref.value
         }
     }
 
@@ -76,6 +80,8 @@ export namespace Geometry {
                 return getDrawCount(geometry) === 0 ? 0 : (arrayMax(geometry.groupBuffer.ref.value) + 1)
             case 'direct-volume':
                 return 1
+            case 'texture-mesh':
+                return geometry.groupCount.ref.value
         }
     }
 
@@ -88,6 +94,7 @@ export namespace Geometry {
             case 'text': return Text.Utils as any
             case 'lines': return Lines.Utils as any
             case 'direct-volume': return DirectVolume.Utils as any
+            case 'texture-mesh': return TextureMesh.Utils as any
         }
         throw new Error('unknown geometry kind')
     }

src/mol-geo/geometry/lines/lines.ts

@@ -23,6 +23,7 @@ import { Theme } from 'mol-theme/theme';
 import { Color } from 'mol-util/color';
 import { BaseGeometry } from '../base';
 import { createEmptyOverpaint } from '../overpaint-data';
+import { createEmptyTransparency } from '../transparency-data';
 
 /** Wide line */
 export interface Lines {
@@ -119,6 +120,7 @@ export namespace Lines {
         const size = createSizes(locationIt, theme.size)
         const marker = createMarkers(instanceCount * groupCount)
         const overpaint = createEmptyOverpaint()
+        const transparency = createEmptyTransparency()
 
         const counts = { drawCount: lines.lineCount * 2 * 3, groupCount, instanceCount }
 
@@ -137,6 +139,7 @@ export namespace Lines {
             ...size,
             ...marker,
             ...overpaint,
+            ...transparency,
             ...transform,
 
             ...BaseGeometry.createValues(props, counts),
@@ -177,7 +180,7 @@ function getBoundingSphere(lineStart: Float32Array, lineEnd: Float32Array, lineC
     const start = calculateBoundingSphere(lineStart, lineCount * 4, transform, transformCount)
     const end = calculateBoundingSphere(lineEnd, lineCount * 4, transform, transformCount)
     return {
-        boundingSphere: Sphere3D.addSphere(start.boundingSphere, end.boundingSphere),
-        invariantBoundingSphere: Sphere3D.addSphere(start.invariantBoundingSphere, end.invariantBoundingSphere)
+        boundingSphere: Sphere3D.expandBySphere(start.boundingSphere, end.boundingSphere),
+        invariantBoundingSphere: Sphere3D.expandBySphere(start.invariantBoundingSphere, end.invariantBoundingSphere)
     }
 }

src/mol-geo/geometry/marker-data.ts

@@ -65,7 +65,7 @@ export function applyMarkerAction(array: Uint8Array, start: number, end: number,
 }
 
 export function createMarkers(count: number, markerData?: MarkerData): MarkerData {
-    const markers = createTextureImage(Math.max(1, count), 1, markerData && markerData.tMarker.ref.value.array)
+    const markers = createTextureImage(Math.max(1, count), 1, Uint8Array, markerData && markerData.tMarker.ref.value.array)
     if (markerData) {
         ValueCell.update(markerData.tMarker, markers)
         ValueCell.update(markerData.uMarkerTexDim, Vec2.create(markers.width, markers.height))

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

@@ -45,7 +45,7 @@ export namespace MeshBuilder {
     export function addTriangle(state: State, a: Vec3, b: Vec3, c: Vec3) {
         const { vertices, normals, indices, groups, currentGroup } = state
         const offset = vertices.elementCount
-        
+
         // positions
         ChunkedArray.add3(vertices, a[0], a[1], a[2]);
         ChunkedArray.add3(vertices, b[0], b[1], b[2]);

src/mol-geo/geometry/mesh/mesh.ts

@@ -22,6 +22,7 @@ import { MeshValues } from 'mol-gl/renderable/mesh';
 import { Color } from 'mol-util/color';
 import { BaseGeometry } from '../base';
 import { createEmptyOverpaint } from '../overpaint-data';
+import { createEmptyTransparency } from '../transparency-data';
 
 export interface Mesh {
     readonly kind: 'mesh',
@@ -383,6 +384,7 @@ export namespace Mesh {
         const color = createColors(locationIt, theme.color)
         const marker = createMarkers(instanceCount * groupCount)
         const overpaint = createEmptyOverpaint()
+        const transparency = createEmptyTransparency()
 
         const counts = { drawCount: mesh.triangleCount * 3, groupCount, instanceCount }
 
@@ -401,6 +403,7 @@ export namespace Mesh {
             ...color,
             ...marker,
             ...overpaint,
+            ...transparency,
             ...transform,
 
             ...BaseGeometry.createValues(props, counts),

src/mol-geo/geometry/overpaint-data.ts

@@ -28,7 +28,7 @@ export function clearOverpaint(array: Uint8Array, start: number, end: number) {
 }
 
 export function createOverpaint(count: number, overpaintData?: OverpaintData): OverpaintData {
-    const overpaint = createTextureImage(Math.max(1, count), 4, overpaintData && overpaintData.tOverpaint.ref.value.array)
+    const overpaint = createTextureImage(Math.max(1, count), 4, Uint8Array, overpaintData && overpaintData.tOverpaint.ref.value.array)
     if (overpaintData) {
         ValueCell.update(overpaintData.tOverpaint, overpaint)
         ValueCell.update(overpaintData.uOverpaintTexDim, Vec2.create(overpaint.width, overpaint.height))

src/mol-geo/geometry/points/points.ts

@@ -22,6 +22,7 @@ import { RenderableState } from 'mol-gl/renderable';
 import { Color } from 'mol-util/color';
 import { BaseGeometry } from '../base';
 import { createEmptyOverpaint } from '../overpaint-data';
+import { createEmptyTransparency } from '../transparency-data';
 
 /** Point cloud */
 export interface Points {
@@ -84,6 +85,7 @@ export namespace Points {
         const size = createSizes(locationIt, theme.size)
         const marker = createMarkers(instanceCount * groupCount)
         const overpaint = createEmptyOverpaint()
+        const transparency = createEmptyTransparency()
 
         const counts = { drawCount: points.pointCount, groupCount, instanceCount }
 
@@ -101,6 +103,7 @@ export namespace Points {
             ...size,
             ...marker,
             ...overpaint,
+            ...transparency,
             ...transform,
 
             ...BaseGeometry.createValues(props, counts),

src/mol-geo/geometry/size-data.ts

@@ -101,7 +101,7 @@ export function createTextureSize(sizes: TextureImage<Uint8Array>, type: SizeTyp
 /** Creates size texture with size for each instance/unit */
 export function createInstanceSize(locationIt: LocationIterator, sizeFn: LocationSize, sizeData?: SizeData): SizeData {
     const { instanceCount} = locationIt
-    const sizes = createTextureImage(Math.max(1, instanceCount), 1, sizeData && sizeData.tSize.ref.value.array)
+    const sizes = createTextureImage(Math.max(1, instanceCount), 1, Uint8Array, sizeData && sizeData.tSize.ref.value.array)
     locationIt.reset()
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
         const v = locationIt.move()
@@ -114,7 +114,7 @@ export function createInstanceSize(locationIt: LocationIterator, sizeFn: Locatio
 /** Creates size texture with size for each group (i.e. shared across instances/units) */
 export function createGroupSize(locationIt: LocationIterator, sizeFn: LocationSize, sizeData?: SizeData): SizeData {
     const { groupCount } = locationIt
-    const sizes = createTextureImage(Math.max(1, groupCount), 1, sizeData && sizeData.tSize.ref.value.array)
+    const sizes = createTextureImage(Math.max(1, groupCount), 1, Uint8Array, sizeData && sizeData.tSize.ref.value.array)
     locationIt.reset()
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
         const v = locationIt.move()
@@ -127,7 +127,7 @@ export function createGroupSize(locationIt: LocationIterator, sizeFn: LocationSi
 export function createGroupInstanceSize(locationIt: LocationIterator, sizeFn: LocationSize, sizeData?: SizeData): SizeData {
     const { groupCount, instanceCount } = locationIt
     const count = instanceCount * groupCount
-    const sizes = createTextureImage(Math.max(1, count), 1, sizeData && sizeData.tSize.ref.value.array)
+    const sizes = createTextureImage(Math.max(1, count), 1, Uint8Array, sizeData && sizeData.tSize.ref.value.array)
     locationIt.reset()
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
         const v = locationIt.move()

src/mol-geo/geometry/spheres/spheres.ts

@@ -19,6 +19,7 @@ import { createSizes, getMaxSize } from '../size-data';
 import { Color } from 'mol-util/color';
 import { BaseGeometry } from '../base';
 import { createEmptyOverpaint } from '../overpaint-data';
+import { createEmptyTransparency } from '../transparency-data';
 
 /** Spheres */
 export interface Spheres {
@@ -81,6 +82,7 @@ export namespace Spheres {
         const size = createSizes(locationIt, theme.size)
         const marker = createMarkers(instanceCount * groupCount)
         const overpaint = createEmptyOverpaint()
+        const transparency = createEmptyTransparency()
 
         const counts = { drawCount: spheres.sphereCount * 2 * 3, groupCount, instanceCount }
 
@@ -101,6 +103,7 @@ export namespace Spheres {
             ...size,
             ...marker,
             ...overpaint,
+            ...transparency,
             ...transform,
 
             padding: ValueCell.create(padding),

src/mol-geo/geometry/text/font-atlas.ts

@@ -81,7 +81,7 @@ export class FontAtlas {
         this.maxWidth = Math.round(this.lineHeight * 0.75)
 
         // create texture (for ~350 characters)
-        this.texture = createTextureImage(350 * this.lineHeight * this.maxWidth, 1)
+        this.texture = createTextureImage(350 * this.lineHeight * this.maxWidth, 1, Uint8Array)
 
         // prepare scratch canvas
         this.scratchCanvas = document.createElement('canvas')

src/mol-geo/geometry/text/text.ts

@@ -25,6 +25,7 @@ import { clamp } from 'mol-math/interpolate';
 import { createRenderObject as _createRenderObject } from 'mol-gl/render-object';
 import { BaseGeometry } from '../base';
 import { createEmptyOverpaint } from '../overpaint-data';
+import { createEmptyTransparency } from '../transparency-data';
 
 type TextAttachment = (
     'bottom-left' | 'bottom-center' | 'bottom-right' |
@@ -57,7 +58,7 @@ export interface Text {
 
 export namespace Text {
     export function createEmpty(text?: Text): Text {
-        const ft = text ? text.fontTexture.ref.value : createTextureImage(0, 1)
+        const ft = text ? text.fontTexture.ref.value : createTextureImage(0, 1, Uint8Array)
         const cb = text ? text.centerBuffer.ref.value : new Float32Array(0)
         const mb = text ? text.mappingBuffer.ref.value : new Float32Array(0)
         const db = text ? text.depthBuffer.ref.value : new Float32Array(0)
@@ -124,6 +125,7 @@ export namespace Text {
         const size = createSizes(locationIt, theme.size)
         const marker = createMarkers(instanceCount * groupCount)
         const overpaint = createEmptyOverpaint()
+        const transparency = createEmptyTransparency()
 
         const counts = { drawCount: text.charCount * 2 * 3, groupCount, instanceCount }
 
@@ -145,6 +147,7 @@ export namespace Text {
             ...size,
             ...marker,
             ...overpaint,
+            ...transparency,
             ...transform,
 
             aTexCoord: text.tcoordBuffer,

src/mol-geo/geometry/texture-mesh/texture-mesh.ts

@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ValueCell } from 'mol-util'
+import { Sphere3D } from 'mol-math/geometry'
+import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { LocationIterator } from 'mol-geo/util/location-iterator';
+import { TransformData } from '../transform-data';
+import { createColors } from '../color-data';
+import { createMarkers } from '../marker-data';
+import { GeometryUtils } from '../geometry';
+import { Theme } from 'mol-theme/theme';
+import { Color } from 'mol-util/color';
+import { BaseGeometry } from '../base';
+import { createEmptyOverpaint } from '../overpaint-data';
+import { createEmptyTransparency } from '../transparency-data';
+import { TextureMeshValues } from 'mol-gl/renderable/texture-mesh';
+import { calculateTransformBoundingSphere } from 'mol-gl/renderable/util';
+import { Texture } from 'mol-gl/webgl/texture';
+import { Vec2 } from 'mol-math/linear-algebra';
+import { fillSerial } from 'mol-util/array';
+
+export interface TextureMesh {
+    readonly kind: 'texture-mesh',
+
+    /** Number of vertices in the texture-mesh */
+    readonly vertexCount: ValueCell<number>,
+    /** Number of groups in the texture-mesh */
+    readonly groupCount: ValueCell<number>,
+
+    readonly geoTextureDim: ValueCell<Vec2>,
+    /** texture has vertex positions in XYZ and group id in W */
+    readonly vertexGroupTexture: ValueCell<Texture>,
+    readonly normalTexture: ValueCell<Texture>,
+
+    readonly boundingSphere: ValueCell<Sphere3D>,
+}
+
+export namespace TextureMesh {
+    export function create(vertexCount: number, groupCount: number, vertexGroupTexture: Texture, normalTexture: Texture, boundingSphere: Sphere3D, textureMesh?: TextureMesh): TextureMesh {
+        const { width, height } = vertexGroupTexture
+        if (textureMesh) {
+            ValueCell.update(textureMesh.vertexCount, vertexCount)
+            ValueCell.update(textureMesh.groupCount, groupCount)
+            ValueCell.update(textureMesh.geoTextureDim, Vec2.set(textureMesh.geoTextureDim.ref.value, width, height))
+            ValueCell.update(textureMesh.vertexGroupTexture, vertexGroupTexture)
+            ValueCell.update(textureMesh.normalTexture, normalTexture)
+            ValueCell.update(textureMesh.boundingSphere, boundingSphere)
+            return textureMesh
+        } else {
+            return {
+                kind: 'texture-mesh',
+                vertexCount: ValueCell.create(vertexCount),
+                groupCount: ValueCell.create(groupCount),
+                geoTextureDim: ValueCell.create(Vec2.create(width, height)),
+                vertexGroupTexture: ValueCell.create(vertexGroupTexture),
+                normalTexture: ValueCell.create(normalTexture),
+                boundingSphere: ValueCell.create(boundingSphere),
+            }
+        }
+    }
+
+    export function createEmpty(textureMesh?: TextureMesh): TextureMesh {
+        return {} as TextureMesh // TODO
+    }
+
+    export const Params = {
+        ...BaseGeometry.Params,
+        doubleSided: PD.Boolean(false),
+        flipSided: PD.Boolean(false),
+        flatShaded: PD.Boolean(false),
+    }
+    export type Params = typeof Params
+
+    export const Utils: GeometryUtils<TextureMesh, Params> = {
+        Params,
+        createEmpty,
+        createValues,
+        createValuesSimple,
+        updateValues,
+        updateBoundingSphere,
+        createRenderableState: BaseGeometry.createRenderableState,
+        updateRenderableState: BaseGeometry.updateRenderableState
+    }
+
+    function createValues(textureMesh: TextureMesh, transform: TransformData, locationIt: LocationIterator, theme: Theme, props: PD.Values<Params>): TextureMeshValues {
+        const { instanceCount, groupCount } = locationIt
+        const color = createColors(locationIt, theme.color)
+        const marker = createMarkers(instanceCount * groupCount)
+        const overpaint = createEmptyOverpaint()
+        const transparency = createEmptyTransparency()
+
+        const counts = { drawCount: textureMesh.vertexCount.ref.value, groupCount, instanceCount }
+
+        const transformBoundingSphere = calculateTransformBoundingSphere(textureMesh.boundingSphere.ref.value, transform.aTransform.ref.value, transform.instanceCount.ref.value)
+
+        return {
+            uGeoTexDim: textureMesh.geoTextureDim,
+            tPositionGroup: textureMesh.vertexGroupTexture,
+            tNormal: textureMesh.normalTexture,
+
+            // aGroup is used as a vertex index here and the group id is retirieved from tPositionGroup
+            aGroup: ValueCell.create(fillSerial(new Float32Array(textureMesh.vertexCount.ref.value))),
+            boundingSphere: ValueCell.create(transformBoundingSphere),
+            invariantBoundingSphere: textureMesh.boundingSphere,
+
+            ...color,
+            ...marker,
+            ...overpaint,
+            ...transparency,
+            ...transform,
+
+            ...BaseGeometry.createValues(props, counts),
+            dDoubleSided: ValueCell.create(props.doubleSided),
+            dFlatShaded: ValueCell.create(props.flatShaded),
+            dFlipSided: ValueCell.create(props.flipSided),
+            dGeoTexture: ValueCell.create(true),
+        }
+    }
+
+    function createValuesSimple(textureMesh: TextureMesh, props: Partial<PD.Values<Params>>, colorValue: Color, sizeValue: number, transform?: TransformData) {
+        const s = BaseGeometry.createSimple(colorValue, sizeValue, transform)
+        const p = { ...PD.getDefaultValues(Params), ...props }
+        return createValues(textureMesh, s.transform, s.locationIterator, s.theme, p)
+    }
+
+    function updateValues(values: TextureMeshValues, props: PD.Values<Params>) {
+        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.alpha, props.alpha) // `uAlpha` is set in renderable.render
+        ValueCell.updateIfChanged(values.dUseFog, props.useFog)
+
+        ValueCell.updateIfChanged(values.dDoubleSided, props.doubleSided)
+        ValueCell.updateIfChanged(values.dFlatShaded, props.flatShaded)
+        ValueCell.updateIfChanged(values.dFlipSided, props.flipSided)
+
+        if (values.drawCount.ref.value > values.aGroup.ref.value.length) {
+            // console.log('updating vertex ids in aGroup to handle larger drawCount')
+            ValueCell.update(values.aGroup, fillSerial(new Float32Array(values.drawCount.ref.value)))
+        }
+    }
+
+    function updateBoundingSphere(values: TextureMeshValues, textureMesh: TextureMesh) {
+        const invariantBoundingSphere = textureMesh.boundingSphere.ref.value
+        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, values.aTransform.ref.value, values.instanceCount.ref.value)
+        if (!Sphere3D.equals(boundingSphere, values.boundingSphere.ref.value)) {
+            ValueCell.update(values.boundingSphere, boundingSphere)
+        }
+        if (!Sphere3D.equals(invariantBoundingSphere, values.invariantBoundingSphere.ref.value)) {
+            ValueCell.update(values.invariantBoundingSphere, invariantBoundingSphere)
+        }
+    }
+}

src/mol-geo/geometry/transparency-data.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ValueCell } from 'mol-util/value-cell'
+import { Vec2 } from 'mol-math/linear-algebra'
+import { TextureImage, createTextureImage } from 'mol-gl/renderable/util';
+import { Transparency } from 'mol-theme/transparency';
+
+export type TransparencyData = {
+    tTransparency: ValueCell<TextureImage<Uint8Array>>
+    uTransparencyTexDim: ValueCell<Vec2>
+    dTransparency: ValueCell<boolean>,
+    dTransparencyVariant: ValueCell<string>,
+}
+
+export function applyTransparencyValue(array: Uint8Array, start: number, end: number, value: number) {
+    for (let i = start; i < end; ++i) {
+        array[i] = value * 255
+    }
+    return true
+}
+
+export function clearTransparency(array: Uint8Array, start: number, end: number) {
+    array.fill(0, start, end)
+}
+
+export function createTransparency(count: number, variant: Transparency.Variant, transparencyData?: TransparencyData): TransparencyData {
+    const transparency = createTextureImage(Math.max(1, count), 1, Uint8Array, transparencyData && transparencyData.tTransparency.ref.value.array)
+    if (transparencyData) {
+        ValueCell.update(transparencyData.tTransparency, transparency)
+        ValueCell.update(transparencyData.uTransparencyTexDim, Vec2.create(transparency.width, transparency.height))
+        ValueCell.update(transparencyData.dTransparency, count > 0)
+        ValueCell.update(transparencyData.dTransparencyVariant, variant)
+        return transparencyData
+    } else {
+        return {
+            tTransparency: ValueCell.create(transparency),
+            uTransparencyTexDim: ValueCell.create(Vec2.create(transparency.width, transparency.height)),
+            dTransparency: ValueCell.create(count > 0),
+            dTransparencyVariant: ValueCell.create(variant),
+        }
+    }
+}
+
+const emptyTransparencyTexture = { array: new Uint8Array(1), width: 1, height: 1 }
+export function createEmptyTransparency(transparencyData?: TransparencyData): TransparencyData {
+    if (transparencyData) {
+        ValueCell.update(transparencyData.tTransparency, emptyTransparencyTexture)
+        ValueCell.update(transparencyData.uTransparencyTexDim, Vec2.create(1, 1))
+        return transparencyData
+    } else {
+        return {
+            tTransparency: ValueCell.create(emptyTransparencyTexture),
+            uTransparencyTexDim: ValueCell.create(Vec2.create(1, 1)),
+            dTransparency: ValueCell.create(false),
+            dTransparencyVariant: ValueCell.create('single'),
+        }
+    }
+}

src/mol-geo/util/marching-cubes/algorithm.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -12,7 +12,6 @@ import { Index, EdgeIdInfo, CubeEdges, EdgeTable, TriTable } from './tables'
 import { defaults } from 'mol-util'
 import { MarchinCubesBuilder, MarchinCubesMeshBuilder, MarchinCubesLinesBuilder } from './builder';
 import { Lines } from '../../geometry/lines/lines';
-// import { Lines } from '../../geometry/lines/lines';
 
 /**
  * The parameters required by the algorithm.
@@ -156,17 +155,40 @@ class MarchingCubesState {
         const ret = this.verticesOnEdges[edgeId];
         if (ret > 0) return ret - 1;
 
+        const sf = this.scalarField
+        const sfg = this.scalarFieldGet
+
         const edge = CubeEdges[edgeNum];
         const a = edge.a, b = edge.b;
         const li = a.i + this.i, lj = a.j + this.j, lk = a.k + this.k;
         const hi = b.i + this.i, hj = b.j + this.j, hk = b.k + this.k;
-        const v0 = this.scalarFieldGet(this.scalarField, li, lj, lk);
-        const v1 = this.scalarFieldGet(this.scalarField, hi, hj, hk);
+        const v0 = sfg(sf, li, lj, lk);
+        const v1 = sfg(sf, hi, hj, hk);
         const t = (this.isoLevel - v0) / (v0 - v1);
 
-        const id = this.builder.addVertex(li + t * (li - hi), lj + t * (lj - hj), lk + t * (lk - hk));
+        const id = this.builder.addVertex(
+            li + t * (li - hi),
+            lj + t * (lj - hj),
+            lk + t * (lk - hk)
+        );
         this.verticesOnEdges[edgeId] = id + 1;
 
+        // TODO cache scalarField differences for slices
+        // TODO make calculation optional
+        const n0x = sfg(sf, Math.max(0, li - 1), lj, lk) - sfg(sf, Math.min(this.nX - 1, li + 1), lj, lk)
+        const n0y = sfg(sf, li, Math.max(0, lj - 1), lk) - sfg(sf, li, Math.min(this.nY - 1, lj + 1), lk)
+        const n0z = sfg(sf, li, lj, Math.max(0, lk - 1)) - sfg(sf, li, lj, Math.min(this.nZ, lk + 1))
+
+        const n1x = sfg(sf, Math.max(0, hi - 1), hj, hk) - sfg(sf, Math.min(this.nX - 1, hi + 1), hj, hk)
+        const n1y = sfg(sf, hi, Math.max(0, hj - 1), hk) - sfg(sf, hi, Math.min(this.nY - 1, hj + 1), hk)
+        const n1z = sfg(sf, hi, hj, Math.max(0, hk - 1)) - sfg(sf, hi, hj, Math.min(this.nZ - 1, hk + 1))
+
+        this.builder.addNormal(
+            n0x + t * (n0x - n1x),
+            n0y + t * (n0y - n1y),
+            n0z + t * (n0z - n1z)
+        )
+
         if (this.idField) {
             const u = this.idFieldGet!(this.idField, li, lj, lk);
             const v = this.idFieldGet!(this.idField, hi, hj, hk)

src/mol-geo/util/marching-cubes/builder.ts

@@ -7,7 +7,7 @@
  */
 
 import { ChunkedArray } from '../../../mol-data/util';
-import { ValueCell } from 'mol-util';
+import { ValueCell, noop } from 'mol-util';
 import { Mesh } from '../../geometry/mesh/mesh';
 import { AllowedContours } from './tables';
 import { LinesBuilder } from '../../geometry/lines/lines-builder';
@@ -15,6 +15,7 @@ import { Lines } from '../../geometry/lines/lines';
 
  export interface MarchinCubesBuilder<T> {
     addVertex(x: number, y: number, z: number): number
+    addNormal(x: number, y: number, z: number): void
     addGroup(group: number): void
     addTriangle(vertList: number[], a: number, b: number, c: number, edgeFilter: number): void
     get(): T
@@ -24,6 +25,7 @@ export function MarchinCubesMeshBuilder(vertexChunkSize: number, mesh?: Mesh): M
     const triangleChunkSize = Math.min(1 << 16, vertexChunkSize * 4)
 
     const vertices = ChunkedArray.create(Float32Array, 3, vertexChunkSize, mesh && mesh.vertexBuffer.ref.value);
+    const normals = ChunkedArray.create(Float32Array, 3, vertexChunkSize, mesh && mesh.normalBuffer.ref.value);
     const groups = ChunkedArray.create(Float32Array, 1, vertexChunkSize, mesh && mesh.groupBuffer.ref.value);
     const indices = ChunkedArray.create(Uint32Array, 3, triangleChunkSize, mesh && mesh.indexBuffer.ref.value);
 
@@ -35,6 +37,9 @@ export function MarchinCubesMeshBuilder(vertexChunkSize: number, mesh?: Mesh): M
             ++vertexCount
             return ChunkedArray.add3(vertices, x, y, z );
         },
+        addNormal: (x: number, y: number, z: number) => {
+            ChunkedArray.add3(normals, x, y, z );
+        },
         addGroup: (group: number) => {
             ChunkedArray.add(groups, group);
         },
@@ -44,6 +49,7 @@ export function MarchinCubesMeshBuilder(vertexChunkSize: number, mesh?: Mesh): M
         },
         get: () => {
             const vb = ChunkedArray.compact(vertices, true) as Float32Array;
+            const nb = ChunkedArray.compact(normals, true) as Float32Array;
             const ib = ChunkedArray.compact(indices, true) as Uint32Array;
             const gb = ChunkedArray.compact(groups, true) as Float32Array;
 
@@ -54,8 +60,8 @@ export function MarchinCubesMeshBuilder(vertexChunkSize: number, mesh?: Mesh): M
                 vertexBuffer: mesh ? ValueCell.update(mesh.vertexBuffer, vb) : ValueCell.create(vb),
                 groupBuffer: mesh ? ValueCell.update(mesh.groupBuffer, gb) : ValueCell.create(gb),
                 indexBuffer: mesh ? ValueCell.update(mesh.indexBuffer, ib) : ValueCell.create(ib),
-                normalBuffer: mesh ? mesh.normalBuffer : ValueCell.create(new Float32Array(0)),
-                normalsComputed: false
+                normalBuffer: mesh ? ValueCell.update(mesh.normalBuffer, nb) : ValueCell.create(nb),
+                normalsComputed: true
             }
         }
     }
@@ -72,6 +78,7 @@ export function MarchinCubesLinesBuilder(vertexChunkSize: number, lines?: Lines)
         addVertex: (x: number, y: number, z: number) => {
             return ChunkedArray.add3(vertices, x, y, z);
         },
+        addNormal: () => noop,
         addGroup: (group: number) => {
             ChunkedArray.add(groups, group);
         },

src/mol-gl/_spec/gl.shim.ts

@@ -1,5 +1,3 @@
-
-
 /**
  * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
@@ -679,14 +677,14 @@ export function createGl(width: number, height: number, contextAttributes: WebGL
             return {
                 size: 1,
                 type: gl.INT_VEC3,
-                name: `activeUniform${index}`,
+                name: `__activeUniform${index}`,
             };
         },
         getActiveAttrib: function (program: WebGLProgram, index: number) {
             return {
                 size: 1,
                 type: gl.FLOAT,
-                name: `activeAttrib${index}`
+                name: `__activeAttrib${index}`
             };
         },
         clear: function () { },

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

@@ -23,6 +23,7 @@ import { fillSerial } from 'mol-util/array';
 import { Color } from 'mol-util/color';
 import { Sphere3D } from 'mol-math/geometry';
 import { createEmptyOverpaint } from 'mol-geo/geometry/overpaint-data';
+import { createEmptyTransparency } from 'mol-geo/geometry/transparency-data';
 
 // function writeImage(gl: WebGLRenderingContext, width: number, height: number) {
 //     const pixels = new Uint8Array(width * height * 4)
@@ -54,6 +55,7 @@ function createPoints() {
     const size = createValueSize(1)
     const marker = createEmptyMarkers()
     const overpaint = createEmptyOverpaint()
+    const transparency = createEmptyTransparency()
 
     const aTransform = ValueCell.create(new Float32Array(16))
     const m4 = Mat4.identity()
@@ -73,6 +75,7 @@ function createPoints() {
         ...marker,
         ...size,
         ...overpaint,
+        ...transparency,
 
         uAlpha: ValueCell.create(1.0),
         uHighlightColor: ValueCell.create(Vec3.create(1.0, 0.4, 0.6)),
@@ -102,7 +105,7 @@ function createPoints() {
         opaque: true
     }
 
-    return createRenderObject('points', values, state)
+    return createRenderObject('points', values, state, -1)
 }
 
 describe('renderer', () => {
@@ -114,9 +117,9 @@ describe('renderer', () => {
         expect(ctx.gl.canvas.width).toBe(32)
         expect(ctx.gl.canvas.height).toBe(32)
 
-        expect(ctx.bufferCount).toBe(0);
-        expect(ctx.textureCount).toBe(0);
-        expect(ctx.vaoCount).toBe(0);
+        expect(ctx.stats.bufferCount).toBe(0);
+        expect(ctx.stats.textureCount).toBe(0);
+        expect(ctx.stats.vaoCount).toBe(0);
         expect(ctx.programCache.count).toBe(0);
         expect(ctx.shaderCache.count).toBe(0);
 
@@ -134,16 +137,16 @@ describe('renderer', () => {
         const points = createPoints()
 
         scene.add(points)
-        expect(ctx.bufferCount).toBe(4);
-        expect(ctx.textureCount).toBe(4);
-        expect(ctx.vaoCount).toBe(4);
+        expect(ctx.stats.bufferCount).toBe(4);
+        expect(ctx.stats.textureCount).toBe(5);
+        expect(ctx.stats.vaoCount).toBe(4);
         expect(ctx.programCache.count).toBe(4);
         expect(ctx.shaderCache.count).toBe(8);
 
         scene.remove(points)
-        expect(ctx.bufferCount).toBe(0);
-        expect(ctx.textureCount).toBe(0);
-        expect(ctx.vaoCount).toBe(0);
+        expect(ctx.stats.bufferCount).toBe(0);
+        expect(ctx.stats.textureCount).toBe(0);
+        expect(ctx.stats.vaoCount).toBe(0);
         expect(ctx.programCache.count).toBe(4);
         expect(ctx.shaderCache.count).toBe(8);
 

src/mol-gl/compute/histogram-pyramid/reduction.ts

@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { createComputeRenderable, ComputeRenderable } from '../../renderable'
+import { WebGLContext } from '../../webgl/context';
+import { createComputeRenderItem } from '../../webgl/render-item';
+import { Values, TextureSpec, UniformSpec } from '../../renderable/schema';
+import { Texture, createTexture } from 'mol-gl/webgl/texture';
+import { ShaderCode } from 'mol-gl/shader-code';
+import { ValueCell } from 'mol-util';
+import { QuadSchema, QuadValues } from '../util';
+import { Vec2 } from 'mol-math/linear-algebra';
+import { getHistopyramidSum } from './sum';
+import { Framebuffer, createFramebuffer } from 'mol-gl/webgl/framebuffer';
+import { isPowerOfTwo } from 'mol-math/misc';
+
+const HistopyramidReductionSchema = {
+    ...QuadSchema,
+    tPreviousLevel: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+    uSize: UniformSpec('f'),
+    uTexSize: UniformSpec('f'),
+}
+
+let HistopyramidReductionRenderable: ComputeRenderable<Values<typeof HistopyramidReductionSchema>>
+function getHistopyramidReductionRenderable(ctx: WebGLContext, initialTexture: Texture) {
+    if (HistopyramidReductionRenderable) {
+        ValueCell.update(HistopyramidReductionRenderable.values.tPreviousLevel, initialTexture)
+        HistopyramidReductionRenderable.update()
+        return HistopyramidReductionRenderable
+    } else {
+        const values: Values<typeof HistopyramidReductionSchema> = {
+            ...QuadValues,
+            tPreviousLevel: ValueCell.create(initialTexture),
+            uSize: ValueCell.create(0),
+            uTexSize: ValueCell.create(0),
+        }
+
+        const schema = { ...HistopyramidReductionSchema }
+        const shaderCode = ShaderCode(
+            require('mol-gl/shader/quad.vert').default,
+            require('mol-gl/shader/histogram-pyramid/reduction.frag').default
+        )
+        const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
+
+        HistopyramidReductionRenderable = createComputeRenderable(renderItem, values);
+        return HistopyramidReductionRenderable
+    }
+}
+
+type TextureFramebuffer = { texture: Texture, framebuffer: Framebuffer }
+const LevelTexturesFramebuffers: TextureFramebuffer[] = []
+function getLevelTextureFramebuffer(ctx: WebGLContext, level: number) {
+    let textureFramebuffer  = LevelTexturesFramebuffers[level]
+    const size = Math.pow(2, level)
+    if (textureFramebuffer === undefined) {
+        const texture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+        const framebuffer = createFramebuffer(ctx.gl, ctx.stats)
+        texture.attachFramebuffer(framebuffer, 0)
+        textureFramebuffer = { texture, framebuffer }
+        textureFramebuffer.texture.define(size, size)
+        LevelTexturesFramebuffers[level] = textureFramebuffer
+    }
+    return textureFramebuffer
+}
+
+function setRenderingDefaults(ctx: WebGLContext) {
+    const { gl, state } = ctx
+    state.disable(gl.CULL_FACE)
+    state.disable(gl.BLEND)
+    state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
+    state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
+}
+
+export interface HistogramPyramid {
+    pyramidTex: Texture
+    count: number
+    height: number
+    levels: number
+    scale: Vec2
+}
+
+export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture, scale: Vec2): HistogramPyramid {
+    const { gl, framebufferCache } = ctx
+
+    // printTexture(ctx, inputTexture, 2)
+    if (inputTexture.width !== inputTexture.height || !isPowerOfTwo(inputTexture.width)) {
+        throw new Error('inputTexture must be of square power-of-two size')
+    }
+
+    // This part set the levels
+    const levels = Math.ceil(Math.log(inputTexture.width) / Math.log(2))
+    const maxSize = Math.pow(2, levels)
+    // console.log('levels', levels, 'maxSize', maxSize)
+
+    const pyramidTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+    pyramidTexture.define(maxSize, maxSize)
+
+    const framebuffer = framebufferCache.get('reduction').value
+    pyramidTexture.attachFramebuffer(framebuffer, 0)
+    gl.clear(gl.COLOR_BUFFER_BIT)
+
+    const levelTexturesFramebuffers: TextureFramebuffer[] = []
+    for (let i = 0; i < levels; ++i) levelTexturesFramebuffers.push(getLevelTextureFramebuffer(ctx, i))
+
+    const renderable = getHistopyramidReductionRenderable(ctx, inputTexture)
+    ctx.state.currentRenderItemId = -1
+    setRenderingDefaults(ctx)
+
+    let offset = 0;
+    for (let i = 0; i < levels; i++) {
+        const currLevel = levels - 1 - i
+        const tf = levelTexturesFramebuffers[currLevel]
+        tf.framebuffer.bind()
+        // levelTextures[currLevel].attachFramebuffer(framebuffer, 0)
+
+        const size = Math.pow(2, currLevel)
+        // console.log('size', size, 'draw-level', currLevel, 'read-level', levels - i)
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        gl.viewport(0, 0, size, size)
+
+        ValueCell.update(renderable.values.uSize, Math.pow(2, i + 1) / maxSize)
+        ValueCell.update(renderable.values.uTexSize, size)
+        if (i > 0) {
+            ValueCell.update(renderable.values.tPreviousLevel, levelTexturesFramebuffers[levels - i].texture)
+            renderable.update()
+        }
+        ctx.state.currentRenderItemId = -1
+        renderable.render()
+
+        pyramidTexture.bind(0)
+        gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, offset, 0, 0, 0, size, size);
+        pyramidTexture.unbind(0)
+
+        offset += size;
+    }
+
+    gl.finish()
+
+    // printTexture(ctx, pyramidTexture, 2)
+
+    //
+
+    const finalCount = getHistopyramidSum(ctx, levelTexturesFramebuffers[0].texture)
+    const height = Math.ceil(finalCount / Math.pow(2, levels))
+    // const scale = Vec2.create(maxSize / inputTexture.width, maxSize / inputTexture.height)
+    // console.log('height', height, 'finalCount', finalCount, 'scale', scale)
+
+
+    return {
+        pyramidTex: pyramidTexture,
+        count: finalCount,
+        height,
+        levels,
+        scale
+    }
+}

src/mol-gl/compute/histogram-pyramid/sum.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { createComputeRenderable, ComputeRenderable } from '../../renderable'
+import { WebGLContext } from '../../webgl/context';
+import { createComputeRenderItem } from '../../webgl/render-item';
+import { Values, TextureSpec } from '../../renderable/schema';
+import { Texture, createTexture } from 'mol-gl/webgl/texture';
+import { ShaderCode } from 'mol-gl/shader-code';
+import { ValueCell } from 'mol-util';
+import { decodeFloatRGB } from 'mol-util/float-packing';
+import { QuadSchema, QuadValues } from '../util';
+
+const HistopyramidSumSchema = {
+    ...QuadSchema,
+    tTexture: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+}
+
+let HistopyramidSumRenderable: ComputeRenderable<Values<typeof HistopyramidSumSchema>>
+function getHistopyramidSumRenderable(ctx: WebGLContext, texture: Texture) {
+    if (HistopyramidSumRenderable) {
+        ValueCell.update(HistopyramidSumRenderable.values.tTexture, texture)
+        HistopyramidSumRenderable.update()
+        return HistopyramidSumRenderable
+    } else {
+        const values: Values<typeof HistopyramidSumSchema> = {
+            ...QuadValues,
+            tTexture: ValueCell.create(texture),
+        }
+
+        const schema = { ...HistopyramidSumSchema }
+        const shaderCode = ShaderCode(
+            require('mol-gl/shader/quad.vert').default,
+            require('mol-gl/shader/histogram-pyramid/sum.frag').default
+        )
+        const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
+
+        HistopyramidSumRenderable = createComputeRenderable(renderItem, values)
+        return HistopyramidSumRenderable
+    }
+}
+
+let SumTexture: Texture
+function getSumTexture(ctx: WebGLContext) {
+    if (SumTexture) return SumTexture
+    SumTexture = createTexture(ctx, 'image-uint8', 'rgba', 'ubyte', 'nearest')
+    SumTexture.define(1, 1)
+    return SumTexture
+}
+
+/** name for shared framebuffer used for histogram-pyramid operations */
+const FramebufferName = 'histogram-pyramid-sum'
+
+function setRenderingDefaults(ctx: WebGLContext) {
+    const { gl, state } = ctx
+    state.disable(gl.CULL_FACE)
+    state.disable(gl.BLEND)
+    state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
+    state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
+}
+
+const sumArray = new Uint8Array(4)
+export function getHistopyramidSum(ctx: WebGLContext, pyramidTopTexture: Texture) {
+    const { gl, framebufferCache } = ctx
+
+    const renderable = getHistopyramidSumRenderable(ctx, pyramidTopTexture)
+    ctx.state.currentRenderItemId = -1
+    
+    const framebuffer = framebufferCache.get(FramebufferName).value
+    const sumTexture = getSumTexture(ctx)
+    sumTexture.attachFramebuffer(framebuffer, 0)
+
+    setRenderingDefaults(ctx)
+
+    gl.viewport(0, 0, 1, 1)
+    renderable.render()
+    gl.finish()
+    ctx.readPixels(0, 0, 1, 1, sumArray)
+    ctx.unbindFramebuffer()
+
+    return decodeFloatRGB(sumArray[0], sumArray[1], sumArray[2])
+}

src/mol-gl/compute/marching-cubes/active-voxels.ts

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { createComputeRenderable } from '../../renderable'
+import { WebGLContext } from '../../webgl/context';
+import { createComputeRenderItem } from '../../webgl/render-item';
+import { Values, TextureSpec, UniformSpec } from '../../renderable/schema';
+import { Texture, createTexture } from 'mol-gl/webgl/texture';
+import { ShaderCode } from 'mol-gl/shader-code';
+import { ValueCell } from 'mol-util';
+import { Vec3, Vec2 } from 'mol-math/linear-algebra';
+import { QuadSchema, QuadValues } from '../util';
+import { getTriCount } from './tables';
+
+/** name for shared framebuffer used for gpu marching cubes operations */
+const FramebufferName = 'marching-cubes-active-voxels'
+
+const ActiveVoxelsSchema = {
+    ...QuadSchema,
+
+    tTriCount: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
+    tVolumeData: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    uIsoValue: UniformSpec('f'),
+
+    uGridDim: UniformSpec('v3'),
+    uGridTexDim: UniformSpec('v3'),
+
+    uScale: UniformSpec('v2'),
+}
+
+function getActiveVoxelsRenderable(ctx: WebGLContext, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, isoValue: number, scale: Vec2) {
+    const values: Values<typeof ActiveVoxelsSchema> = {
+        ...QuadValues,
+        uQuadScale: ValueCell.create(scale),
+
+        tTriCount: ValueCell.create(getTriCount()),
+        tVolumeData: ValueCell.create(volumeData),
+        uIsoValue: ValueCell.create(isoValue),
+
+        uGridDim: ValueCell.create(gridDim),
+        uGridTexDim: ValueCell.create(gridTexDim),
+
+        uScale: ValueCell.create(scale),
+    }
+
+    const schema = { ...ActiveVoxelsSchema }
+    const shaderCode = ShaderCode(
+        require('mol-gl/shader/quad.vert').default,
+        require('mol-gl/shader/marching-cubes/active-voxels.frag').default
+    )
+    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
+
+    return createComputeRenderable(renderItem, values);
+}
+
+function setRenderingDefaults(ctx: WebGLContext) {
+    const { gl, state } = ctx
+    state.disable(gl.CULL_FACE)
+    state.disable(gl.BLEND)
+    state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
+    state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
+}
+
+export function calcActiveVoxels(ctx: WebGLContext, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, isoValue: number, gridScale: Vec2) {
+    const { gl, framebufferCache } = ctx
+    const { width, height } = volumeData
+
+    const framebuffer = framebufferCache.get(FramebufferName).value
+    framebuffer.bind()
+
+    const activeVoxelsTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+    activeVoxelsTex.define(width, height)
+
+    const renderable = getActiveVoxelsRenderable(ctx, volumeData, gridDim, gridTexDim, isoValue, gridScale)
+    ctx.state.currentRenderItemId = -1
+
+    activeVoxelsTex.attachFramebuffer(framebuffer, 0)
+    setRenderingDefaults(ctx)
+    gl.viewport(0, 0, width, height)
+    renderable.render()
+
+    // console.log('gridScale', gridScale, 'gridTexDim', gridTexDim, 'gridDim', gridDim)
+    // console.log('volumeData', volumeData)
+    // console.log('at', readTexture(ctx, activeVoxelsTex))
+
+    gl.finish()
+
+    return activeVoxelsTex
+}

src/mol-gl/compute/marching-cubes/isosurface.ts

@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { createComputeRenderable } from '../../renderable'
+import { WebGLContext } from '../../webgl/context';
+import { createComputeRenderItem } from '../../webgl/render-item';
+import { Values, TextureSpec, UniformSpec } from '../../renderable/schema';
+import { Texture, createTexture } from 'mol-gl/webgl/texture';
+import { ShaderCode } from 'mol-gl/shader-code';
+import { ValueCell } from 'mol-util';
+import { Vec3, Vec2, Mat4 } from 'mol-math/linear-algebra';
+import { QuadSchema, QuadValues } from '../util';
+import { HistogramPyramid } from '../histogram-pyramid/reduction';
+import { getTriIndices } from './tables';
+
+/** name for shared framebuffer used for gpu marching cubes operations */
+const FramebufferName = 'marching-cubes-isosurface'
+
+const IsosurfaceSchema = {
+    ...QuadSchema,
+
+    tTriIndices: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
+    tActiveVoxelsPyramid: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+    tActiveVoxelsBase: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+    tVolumeData: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    uIsoValue: UniformSpec('f'),
+
+    uSize: UniformSpec('f'),
+    uLevels: UniformSpec('f'),
+    uCount: UniformSpec('f'),
+
+    uGridDim: UniformSpec('v3'),
+    uGridTexDim: UniformSpec('v3'),
+    uGridTransform: UniformSpec('m4'),
+
+    uScale: UniformSpec('v2'),
+}
+
+function getIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture, activeVoxelsBase: Texture, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, levels: number, scale: Vec2, count: number, height: number) {
+    // console.log('uSize', Math.pow(2, levels))
+    const values: Values<typeof IsosurfaceSchema> = {
+        ...QuadValues,
+        uQuadScale: ValueCell.create(Vec2.create(1, height / Math.pow(2, levels))),
+
+        tTriIndices: ValueCell.create(getTriIndices()),
+        tActiveVoxelsPyramid: ValueCell.create(activeVoxelsPyramid),
+        tActiveVoxelsBase: ValueCell.create(activeVoxelsBase),
+        tVolumeData: ValueCell.create(volumeData),
+        uIsoValue: ValueCell.create(isoValue),
+
+        uSize: ValueCell.create(Math.pow(2, levels)),
+        uLevels: ValueCell.create(levels),
+        uCount: ValueCell.create(count),
+
+        uGridDim: ValueCell.create(gridDim),
+        uGridTexDim: ValueCell.create(gridTexDim),
+        uGridTransform: ValueCell.create(transform),
+
+        uScale: ValueCell.create(scale),
+    }
+
+    const schema = { ...IsosurfaceSchema }
+    const shaderCode = ShaderCode(
+        require('mol-gl/shader/quad.vert').default,
+        require('mol-gl/shader/marching-cubes/isosurface.frag').default,
+        { drawBuffers: true }
+    )
+    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
+
+    return createComputeRenderable(renderItem, values);
+}
+
+function setRenderingDefaults(ctx: WebGLContext) {
+    const { gl, state } = ctx
+    state.disable(gl.CULL_FACE)
+    state.disable(gl.BLEND)
+    state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
+    state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
+}
+
+export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Texture, volumeData: Texture, histogramPyramid: HistogramPyramid, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, vertexGroupTexture?: Texture, normalTexture?: Texture) {
+    const { gl, framebufferCache } = ctx
+    const { pyramidTex, height, levels, scale, count } = histogramPyramid
+
+    // console.log('iso', 'gridDim', gridDim, 'scale', scale, 'gridTexDim', gridTexDim)
+    // console.log('iso volumeData', volumeData)
+
+    const framebuffer = framebufferCache.get(FramebufferName).value
+
+    let needsClear = false
+
+    if (!vertexGroupTexture) {
+        vertexGroupTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+        vertexGroupTexture.define(pyramidTex.width, pyramidTex.height)
+    } else if (vertexGroupTexture.width !== pyramidTex.width || vertexGroupTexture.height !== pyramidTex.height) {
+        vertexGroupTexture.define(pyramidTex.width, pyramidTex.height)
+    } else {
+        needsClear = true
+    }
+
+    if (!normalTexture) {
+        normalTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+        normalTexture.define(pyramidTex.width, pyramidTex.height)
+    } else if (normalTexture.width !== pyramidTex.width || normalTexture.height !== pyramidTex.height) {
+        normalTexture.define(pyramidTex.width, pyramidTex.height)
+    } else {
+        needsClear = true
+    }
+
+    // const infoTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+    // infoTex.define(pyramidTex.width, pyramidTex.height)
+
+    // const pointTexA = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+    // pointTexA.define(pyramidTex.width, pyramidTex.height)
+
+    // const pointTexB = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+    // pointTexB.define(pyramidTex.width, pyramidTex.height)
+
+    // const coordTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+    // coordTex.define(pyramidTex.width, pyramidTex.height)
+
+    // const indexTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+    // indexTex.define(pyramidTex.width, pyramidTex.height)
+
+    const renderable = getIsosurfaceRenderable(ctx, pyramidTex, activeVoxelsBase, volumeData, gridDim, gridTexDim, transform, isoValue, levels, scale, count, height)
+    ctx.state.currentRenderItemId = -1
+
+    vertexGroupTexture.attachFramebuffer(framebuffer, 0)
+    normalTexture.attachFramebuffer(framebuffer, 1)
+    // infoTex.attachFramebuffer(framebuffer, 1)
+    // pointTexA.attachFramebuffer(framebuffer, 2)
+    // pointTexB.attachFramebuffer(framebuffer, 3)
+    // coordTex.attachFramebuffer(framebuffer, 4)
+    // indexTex.attachFramebuffer(framebuffer, 5)
+
+    const { drawBuffers } = ctx.extensions
+    if (!drawBuffers) throw new Error('need WebGL draw buffers')
+
+    drawBuffers.drawBuffers([
+        drawBuffers.COLOR_ATTACHMENT0,
+        drawBuffers.COLOR_ATTACHMENT1,
+        // drawBuffers.COLOR_ATTACHMENT2,
+        // drawBuffers.COLOR_ATTACHMENT3,
+        // drawBuffers.COLOR_ATTACHMENT4,
+        // drawBuffers.COLOR_ATTACHMENT5
+    ])
+
+    setRenderingDefaults(ctx)
+    gl.viewport(0, 0, pyramidTex.width, pyramidTex.height)
+    if (needsClear) gl.clear(gl.COLOR_BUFFER_BIT)
+    renderable.render()
+
+    gl.finish()
+
+    // const vgt = readTexture(ctx, vertexGroupTexture, pyramidTex.width, height)
+    // console.log('vertexGroupTexture', vgt.array.subarray(0, 4 * count))
+
+    // const vt = readTexture(ctx, verticesTex, pyramidTex.width, height)
+    // console.log('vt', vt)
+    // const vertices = new Float32Array(3 * compacted.count)
+    // for (let i = 0; i < compacted.count; ++i) {
+    //     vertices[i * 3] = vt.array[i * 4]
+    //     vertices[i * 3 + 1] = vt.array[i * 4 + 1]
+    //     vertices[i * 3 + 2] = vt.array[i * 4 + 2]
+    // }
+    // console.log('vertices', vertices)
+
+    // const it = readTexture(ctx, infoTex, pyramidTex.width, height)
+    // console.log('info', it.array.subarray(0, 4 * compacted.count))
+
+    // const pat = readTexture(ctx, pointTexA, pyramidTex.width, height)
+    // console.log('point a', pat.array.subarray(0, 4 * compacted.count))
+
+    // const pbt = readTexture(ctx, pointTexB, pyramidTex.width, height)
+    // console.log('point b', pbt.array.subarray(0, 4 * compacted.count))
+
+    // const ct = readTexture(ctx, coordTex, pyramidTex.width, height)
+    // console.log('coord', ct.array.subarray(0, 4 * compacted.count))
+
+    // const idxt = readTexture(ctx, indexTex, pyramidTex.width, height)
+    // console.log('index', idxt.array.subarray(0, 4 * compacted.count))
+
+    // const { field, idField } = await fieldFromTexture2d(ctx, volumeData, gridDimensions)
+    // console.log({ field, idField })
+
+    // const valuesA = new Float32Array(compacted.count)
+    // const valuesB = new Float32Array(compacted.count)
+    // for (let i = 0; i < compacted.count; ++i) {
+    //     valuesA[i] = field.space.get(field.data, pat.array[i * 4], pat.array[i * 4 + 1], pat.array[i * 4 + 2])
+    //     valuesB[i] = field.space.get(field.data, pbt.array[i * 4], pbt.array[i * 4 + 1], pbt.array[i * 4 + 2])
+    // }
+    // console.log('valuesA', valuesA)
+    // console.log('valuesB', valuesB)
+
+    return { vertexGroupTexture, normalTexture, vertexCount: count }
+}

src/mol-gl/compute/marching-cubes/tables.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { TriTable,  } from 'mol-geo/util/marching-cubes/tables';
+import { TextureImage, createTextureImage } from 'mol-gl/renderable/util';
+
+let TriCount: TextureImage<Uint8Array> | undefined
+export function getTriCount(): TextureImage<Uint8Array> {
+    if (TriCount !== undefined) return TriCount
+    TriCount = createTextureImage(16 * 16, 1, Uint8Array)
+    const { array } = TriCount
+    for (let i = 0, il = TriTable.length; i < il; ++i) {
+        array[i] = TriTable[i].length / 3
+    }
+    return TriCount
+}
+
+let TriIndices: TextureImage<Uint8Array> | undefined
+export function getTriIndices(): TextureImage<Uint8Array> {
+    if (TriIndices !== undefined) return TriIndices
+    TriIndices = createTextureImage(64 * 64, 1, Uint8Array)
+    const { array } = TriIndices
+    for (let i = 0, il = TriTable.length; i < il; ++i) {
+        for (let j = 0; j < 16; ++j) {
+            if (j < TriTable[i].length) {
+                array[i * 16 + j] = TriTable[i][j]
+            } else {
+                array[i * 16 + j] = 255
+            }
+        }
+    }
+    return TriIndices
+}

src/mol-gl/compute/util.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { WebGLContext } from 'mol-gl/webgl/context';
+import { Texture } from 'mol-gl/webgl/texture';
+import { printTextureImage } from 'mol-gl/renderable/util';
+import { defaults, ValueCell } from 'mol-util';
+import { ValueSpec, AttributeSpec, UniformSpec, Values } from 'mol-gl/renderable/schema';
+import { Vec2 } from 'mol-math/linear-algebra';
+
+export const QuadPositions = new Float32Array([
+     1.0,  1.0,  -1.0,  1.0,  -1.0, -1.0, // First triangle
+    -1.0, -1.0,   1.0, -1.0,   1.0,  1.0  // Second triangle
+])
+
+export const QuadSchema = {
+    drawCount: ValueSpec('number'),
+    instanceCount: ValueSpec('number'),
+    aPosition: AttributeSpec('float32', 2, 0),
+    uQuadScale: UniformSpec('v2'),
+}
+
+export const QuadValues: Values<typeof QuadSchema> = {
+    drawCount: ValueCell.create(6),
+    instanceCount: ValueCell.create(1),
+    aPosition: ValueCell.create(QuadPositions),
+    uQuadScale: ValueCell.create(Vec2.create(1, 1)),
+}
+
+//
+
+export function readTexture(ctx: WebGLContext, texture: Texture, width?: number, height?: number) {
+    const { gl, framebufferCache } = ctx
+    width = defaults(width, texture.width)
+    height = defaults(height, texture.height)
+    const framebuffer = framebufferCache.get('read-texture').value
+    const array = texture.type === gl.UNSIGNED_BYTE ? new Uint8Array(width * height * 4) : new Float32Array(width * height * 4)
+    framebuffer.bind()
+    texture.attachFramebuffer(framebuffer, 0)
+    ctx.readPixels(0, 0, width, height, array)
+
+    return { array, width, height }
+}
+
+export function printTexture(ctx: WebGLContext, texture: Texture, scale: number) {
+    printTextureImage(readTexture(ctx, texture), scale)
+}

src/mol-gl/render-object.ts

@@ -8,33 +8,30 @@ import { RenderableState, Renderable } from './renderable'
 import { RenderableValues } from './renderable/schema';
 import { idFactory } from 'mol-util/id-factory';
 import { WebGLContext } from './webgl/context';
-import { GaussianDensityValues, GaussianDensityRenderable } from './renderable/gaussian-density';
 import { DirectVolumeValues, DirectVolumeRenderable } from './renderable/direct-volume';
 import { MeshValues, MeshRenderable } from './renderable/mesh';
 import { PointsValues, PointsRenderable } from './renderable/points';
 import { LinesValues, LinesRenderable } from './renderable/lines';
 import { SpheresValues, SpheresRenderable } from './renderable/spheres';
 import { TextValues, TextRenderable } from './renderable/text';
+import { TextureMeshValues, TextureMeshRenderable } from './renderable/texture-mesh';
 
 const getNextId = idFactory(0, 0x7FFFFFFF)
 
-export interface BaseRenderObject { id: number, type: string, values: RenderableValues, state: RenderableState }
+export const getNextMaterialId = idFactory(0, 0x7FFFFFFF)
+
+export interface BaseRenderObject { id: number, type: string, values: RenderableValues, state: RenderableState, materialId: number }
 export interface MeshRenderObject extends BaseRenderObject { type: 'mesh', values: MeshValues }
 export interface PointsRenderObject extends BaseRenderObject { type: 'points', values: PointsValues }
 export interface SpheresRenderObject extends BaseRenderObject { type: 'spheres', values: SpheresValues }
 export interface TextRenderObject extends BaseRenderObject { type: 'text', values: TextValues }
 export interface LinesRenderObject extends BaseRenderObject { type: 'lines', values: LinesValues }
 export interface DirectVolumeRenderObject extends BaseRenderObject { type: 'direct-volume', values: DirectVolumeValues }
-
-export interface GaussianDensityRenderObject extends BaseRenderObject { type: 'gaussian-density', values: GaussianDensityValues }
+export interface TextureMeshRenderObject extends BaseRenderObject { type: 'texture-mesh', values: TextureMeshValues }
 
 //
 
-export type GraphicsRenderObject = MeshRenderObject | PointsRenderObject | SpheresRenderObject | TextRenderObject | LinesRenderObject | DirectVolumeRenderObject
-
-export type ComputeRenderObject = GaussianDensityRenderObject
-
-export type RenderObject = GraphicsRenderObject | ComputeRenderObject
+export type GraphicsRenderObject = MeshRenderObject | PointsRenderObject | SpheresRenderObject | TextRenderObject | LinesRenderObject | DirectVolumeRenderObject | TextureMeshRenderObject
 
 export type RenderObjectKindType = {
     'mesh': MeshRenderObject
@@ -43,8 +40,7 @@ export type RenderObjectKindType = {
     'text': TextRenderObject
     'lines': LinesRenderObject
     'direct-volume': DirectVolumeRenderObject
-
-    'gaussian-density': GaussianDensityRenderObject
+    'texture-mesh': TextureMeshRenderObject
 }
 export type RenderObjectValuesType = {
     'mesh': MeshValues
@@ -53,26 +49,24 @@ export type RenderObjectValuesType = {
     'text': TextValues
     'lines': LinesValues
     'direct-volume': DirectVolumeValues
-
-    'gaussian-density': GaussianDensityValues
+    'texture-mesh': TextureMeshValues
 }
 export type RenderObjectType = keyof RenderObjectKindType
 
 //
 
-export function createRenderObject<T extends RenderObjectType>(type: T, values: RenderObjectValuesType[T], state: RenderableState): RenderObjectKindType[T] {
-    return { id: getNextId(), type, values, state } as RenderObjectKindType[T]
+export function createRenderObject<T extends RenderObjectType>(type: T, values: RenderObjectValuesType[T], state: RenderableState, materialId: number): RenderObjectKindType[T] {
+    return { id: getNextId(), type, values, state, materialId } as RenderObjectKindType[T]
 }
 
-export function createRenderable(ctx: WebGLContext, o: RenderObject): Renderable<any> {
+export function createRenderable(ctx: WebGLContext, o: GraphicsRenderObject): Renderable<any> {
     switch (o.type) {
-        case 'mesh': return MeshRenderable(ctx, o.id, o.values, o.state)
-        case 'points': return PointsRenderable(ctx, o.id, o.values, o.state)
-        case 'spheres': return SpheresRenderable(ctx, o.id, o.values, o.state)
-        case 'text': return TextRenderable(ctx, o.id, o.values, o.state)
-        case 'lines': return LinesRenderable(ctx, o.id, o.values, o.state)
-        case 'direct-volume': return DirectVolumeRenderable(ctx, o.id, o.values, o.state)
-
-        case 'gaussian-density': return GaussianDensityRenderable(ctx, o.id, o.values, o.state)
+        case 'mesh': return MeshRenderable(ctx, o.id, o.values, o.state, o.materialId)
+        case 'points': return PointsRenderable(ctx, o.id, o.values, o.state, o.materialId)
+        case 'spheres': return SpheresRenderable(ctx, o.id, o.values, o.state, o.materialId)
+        case 'text': return TextRenderable(ctx, o.id, o.values, o.state, o.materialId)
+        case 'lines': return LinesRenderable(ctx, o.id, o.values, o.state, o.materialId)
+        case 'direct-volume': return DirectVolumeRenderable(ctx, o.id, o.values, o.state, o.materialId)
+        case 'texture-mesh': return TextureMeshRenderable(ctx, o.id, o.values, o.state, o.materialId)
     }
 }

src/mol-gl/renderable.ts

@@ -6,7 +6,7 @@
 
 import { Program } from './webgl/program';
 import { RenderableValues, Values, RenderableSchema } from './renderable/schema';
-import { RenderVariant, RenderItem } from './webgl/render-item';
+import { GraphicsRenderItem, ComputeRenderItem, GraphicsRenderVariant } from './webgl/render-item';
 import { ValueCell } from 'mol-util';
 import { idFactory } from 'mol-util/id-factory';
 import { clamp } from 'mol-math/interpolate';
@@ -22,22 +22,24 @@ export type RenderableState = {
 
 export interface Renderable<T extends RenderableValues> {
     readonly id: number
+    readonly materialId: number
     readonly values: T
     readonly state: RenderableState
 
-    render: (variant: RenderVariant) => void
-    getProgram: (variant: RenderVariant) => Program
+    render: (variant: GraphicsRenderVariant) => void
+    getProgram: (variant: GraphicsRenderVariant) => Program
     update: () => void
     dispose: () => void
 }
 
-export function createRenderable<T extends Values<RenderableSchema>>(renderItem: RenderItem, values: T, state: RenderableState): Renderable<T> {
+export function createRenderable<T extends Values<RenderableSchema>>(renderItem: GraphicsRenderItem, values: T, state: RenderableState): Renderable<T> {
     return {
         id: getNextRenderableId(),
+        materialId: renderItem.materialId,
         values,
         state,
 
-        render: (variant: RenderVariant) => {
+        render: (variant: GraphicsRenderVariant) => {
             if (values.uAlpha && values.alpha) {
                 ValueCell.updateIfChanged(values.uAlpha, clamp(values.alpha.ref.value * state.alphaFactor, 0, 1))
             }
@@ -46,7 +48,29 @@ export function createRenderable<T extends Values<RenderableSchema>>(renderItem:
             }
             renderItem.render(variant)
         },
-        getProgram: (variant: RenderVariant) => renderItem.getProgram(variant),
+        getProgram: (variant: GraphicsRenderVariant) => renderItem.getProgram(variant),
+        update: () => renderItem.update(),
+        dispose: () => renderItem.destroy()
+    }
+}
+
+//
+
+export interface ComputeRenderable<T extends RenderableValues> {
+    readonly id: number
+    readonly values: T
+
+    render: () => void
+    update: () => void
+    dispose: () => void
+}
+
+export function createComputeRenderable<T extends Values<RenderableSchema>>(renderItem: ComputeRenderItem, values: T): ComputeRenderable<T> {
+    return {
+        id: getNextRenderableId(),
+        values,
+
+        render: () => renderItem.render('compute'),
         update: () => renderItem.update(),
         dispose: () => renderItem.destroy()
     }

src/mol-gl/renderable/direct-volume.ts

@@ -6,7 +6,7 @@
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
 import { WebGLContext } from '../webgl/context';
-import { createRenderItem } from '../webgl/render-item';
+import { createGraphicsRenderItem } from '../webgl/render-item';
 import { AttributeSpec, Values, UniformSpec, GlobalUniformSchema, InternalSchema, TextureSpec, ValueSpec, ElementsSpec, DefineSpec, InternalValues } from './schema';
 import { DirectVolumeShaderCode } from '../shader-code';
 import { ValueCell } from 'mol-util';
@@ -24,6 +24,11 @@ export const DirectVolumeSchema = {
     tOverpaint: TextureSpec('image-uint8', 'rgba', 'ubyte', 'nearest'),
     dOverpaint: DefineSpec('boolean'),
 
+    uTransparencyTexDim: UniformSpec('v2'),
+    tTransparency: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
+    dTransparency: DefineSpec('boolean'),
+    dTransparencyVariant: DefineSpec('string', ['single', 'multi']),
+
     uInstanceCount: UniformSpec('i'),
     uGroupCount: UniformSpec('i'),
 
@@ -62,18 +67,18 @@ export const DirectVolumeSchema = {
 
     dGridTexType: DefineSpec('string', ['2d', '3d']),
     uGridTexDim: UniformSpec('v3'),
-    tGridTex: TextureSpec('texture', 'rgba', 'ubyte', 'linear'),
+    tGridTex: TextureSpec('texture', 'rgba', 'float', 'nearest'),
 }
 export type DirectVolumeSchema = typeof DirectVolumeSchema
 export type DirectVolumeValues = Values<DirectVolumeSchema>
 
-export function DirectVolumeRenderable(ctx: WebGLContext, id: number, values: DirectVolumeValues, state: RenderableState): Renderable<DirectVolumeValues> {
+export function DirectVolumeRenderable(ctx: WebGLContext, id: number, values: DirectVolumeValues, state: RenderableState, materialId: number): Renderable<DirectVolumeValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...DirectVolumeSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id),
-        uPickable: ValueCell.create(state.pickable ? 1 : 0)
+        uPickable: ValueCell.create(state.pickable ? 1 : 0),
     }
     const shaderCode = DirectVolumeShaderCode
-    const renderItem = createRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues })
+    const renderItem = createGraphicsRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues }, materialId)
     return createRenderable(renderItem, values, state);
 }

src/mol-gl/renderable/gaussian-density.ts

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import { Renderable, RenderableState, createRenderable } from '../renderable'
-import { WebGLContext } from '../webgl/context';
-import { createRenderItem } from '../webgl/render-item';
-import { AttributeSpec, Values, UniformSpec, ValueSpec, DefineSpec, TextureSpec } from './schema';
-import { GaussianDensityShaderCode } from '../shader-code';
-
-export const GaussianDensitySchema = {
-    drawCount: ValueSpec('number'),
-    instanceCount: ValueSpec('number'),
-
-    aRadius: AttributeSpec('float32', 1, 0),
-    aPosition: AttributeSpec('float32', 3, 0),
-    aGroup: AttributeSpec('float32', 1, 0),
-
-    uCurrentSlice: UniformSpec('f'),
-    uCurrentX: UniformSpec('f'),
-    uCurrentY: UniformSpec('f'),
-    uBboxMin: UniformSpec('v3'),
-    uBboxMax: UniformSpec('v3'),
-    uBboxSize: UniformSpec('v3'),
-    uGridDim: UniformSpec('v3'),
-    uGridTexDim: UniformSpec('v3'),
-    uAlpha: UniformSpec('f'),
-    tMinDistanceTex: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
-
-    dGridTexType: DefineSpec('string', ['2d', '3d']),
-    dCalcType: DefineSpec('string', ['density', 'minDistance', 'groupId']),
-}
-export type GaussianDensitySchema = typeof GaussianDensitySchema
-export type GaussianDensityValues = Values<GaussianDensitySchema>
-
-export function GaussianDensityRenderable(ctx: WebGLContext, id: number, values: GaussianDensityValues, state: RenderableState): Renderable<GaussianDensityValues> {
-    const schema = { ...GaussianDensitySchema }
-    const shaderCode = GaussianDensityShaderCode
-    const renderItem = createRenderItem(ctx, 'points', shaderCode, schema, values)
-
-    return createRenderable(renderItem, values, state);
-}

src/mol-gl/renderable/lines.ts

@@ -6,7 +6,7 @@
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
 import { WebGLContext } from '../webgl/context';
-import { createRenderItem } from '../webgl/render-item';
+import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, DefineSpec, Values, InternalSchema, SizeSchema, ElementsSpec, InternalValues } from './schema';
 import { ValueCell } from 'mol-util';
 import { LinesShaderCode } from '../shader-code';
@@ -25,14 +25,14 @@ export const LinesSchema = {
 export type LinesSchema = typeof LinesSchema
 export type LinesValues = Values<LinesSchema>
 
-export function LinesRenderable(ctx: WebGLContext, id: number, values: LinesValues, state: RenderableState): Renderable<LinesValues> {
+export function LinesRenderable(ctx: WebGLContext, id: number, values: LinesValues, state: RenderableState, materialId: number): Renderable<LinesValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...LinesSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id),
         uPickable: ValueCell.create(state.pickable ? 1 : 0)
     }
     const shaderCode = LinesShaderCode
-    const renderItem = createRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues })
+    const renderItem = createGraphicsRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues }, materialId)
 
     return createRenderable(renderItem, values, state);
 }

src/mol-gl/renderable/mesh.ts

@@ -6,7 +6,7 @@
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
 import { WebGLContext } from '../webgl/context';
-import { createRenderItem } from '../webgl/render-item';
+import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, ElementsSpec, DefineSpec, Values, InternalSchema, InternalValues } from './schema';
 import { MeshShaderCode } from '../shader-code';
 import { ValueCell } from 'mol-util';
@@ -23,14 +23,14 @@ export const MeshSchema = {
 export type MeshSchema = typeof MeshSchema
 export type MeshValues = Values<MeshSchema>
 
-export function MeshRenderable(ctx: WebGLContext, id: number, values: MeshValues, state: RenderableState): Renderable<MeshValues> {
+export function MeshRenderable(ctx: WebGLContext, id: number, values: MeshValues, state: RenderableState, materialId: number): Renderable<MeshValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...MeshSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id),
         uPickable: ValueCell.create(state.pickable ? 1 : 0)
     }
     const shaderCode = MeshShaderCode
-    const renderItem = createRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues })
+    const renderItem = createGraphicsRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues }, materialId)
 
     return createRenderable(renderItem, values, state)
 }

src/mol-gl/renderable/points.ts

@@ -6,7 +6,7 @@
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
 import { WebGLContext } from '../webgl/context';
-import { createRenderItem } from '../webgl/render-item';
+import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, UniformSpec, DefineSpec, Values, InternalSchema, SizeSchema, InternalValues } from './schema';
 import { PointsShaderCode } from '../shader-code';
 import { ValueCell } from 'mol-util';
@@ -22,13 +22,13 @@ export const PointsSchema = {
 export type PointsSchema = typeof PointsSchema
 export type PointsValues = Values<PointsSchema>
 
-export function PointsRenderable(ctx: WebGLContext, id: number, values: PointsValues, state: RenderableState): Renderable<PointsValues> {
+export function PointsRenderable(ctx: WebGLContext, id: number, values: PointsValues, state: RenderableState, materialId: number): Renderable<PointsValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...PointsSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id),
         uPickable: ValueCell.create(state.pickable ? 1 : 0)
     }
     const shaderCode = PointsShaderCode
-    const renderItem = createRenderItem(ctx, 'points', shaderCode, schema, { ...values, ...internalValues })
+    const renderItem = createGraphicsRenderItem(ctx, 'points', shaderCode, schema, { ...values, ...internalValues }, materialId)
     return createRenderable(renderItem, values, state);
 }

src/mol-gl/renderable/schema.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { ValueCell } from 'mol-util';
-import { ArrayKind, BufferItemSize, ElementsKind, AttributeValues } from '../webgl/buffer';
+import { AttributeItemSize, ElementsKind, AttributeValues, AttributeKind } from '../webgl/buffer';
 import { UniformKind, UniformValues } from '../webgl/uniform';
 import { DefineKind, DefineValues } from '../shader-code';
 import { Vec2, Vec3, Vec4, Mat3, Mat4 } from 'mol-math/linear-algebra';
@@ -68,27 +68,19 @@ export function splitValues(schema: RenderableSchema, values: RenderableValues)
     const defineValues: DefineValues = {}
     const textureValues: TextureValues = {}
     const uniformValues: UniformValues = {}
+    const materialUniformValues: UniformValues = {}
     Object.keys(schema).forEach(k => {
-        if (schema[k].type === 'attribute') attributeValues[k] = values[k]
-        if (schema[k].type === 'define') defineValues[k] = values[k]
-        if (schema[k].type === 'texture') textureValues[k] = values[k]
-        if (schema[k].type === 'uniform') uniformValues[k] = values[k]
+        const spec = schema[k]
+        if (spec.type === 'attribute') attributeValues[k] = values[k]
+        if (spec.type === 'define') defineValues[k] = values[k]
+        if (spec.type === 'texture') textureValues[k] = values[k]
+        // check if k exists in values so that global uniforms are excluded here
+        if (spec.type === 'uniform' && values[k] !== undefined) {
+            if (spec.isMaterial) materialUniformValues[k] = values[k]
+            else uniformValues[k] = values[k]
+        }
     })
-    return { attributeValues, defineValues, textureValues, uniformValues }
-}
-
-export function splitKeys(schema: RenderableSchema) {
-    const attributeKeys: string[] = []
-    const defineKeys: string[] = []
-    const textureKeys: string[] = []
-    const uniformKeys: string[] = []
-    Object.keys(schema).forEach(k => {
-        if (schema[k].type === 'attribute') attributeKeys.push(k)
-        if (schema[k].type === 'define') defineKeys.push(k)
-        if (schema[k].type === 'texture') textureKeys.push(k)
-        if (schema[k].type === 'uniform') uniformKeys.push(k)
-    })
-    return { attributeKeys, defineKeys, textureKeys, uniformKeys }
+    return { attributeValues, defineValues, textureValues, uniformValues, materialUniformValues }
 }
 
 export type Versions<T extends RenderableValues> = { [k in keyof T]: number }
@@ -102,14 +94,14 @@ export function getValueVersions<T extends RenderableValues>(values: T) {
 
 //
 
-export type AttributeSpec<K extends ArrayKind> = { type: 'attribute', kind: K, itemSize: BufferItemSize, divisor: number }
-export function AttributeSpec<K extends ArrayKind>(kind: K, itemSize: BufferItemSize, divisor: number): AttributeSpec<K> {
+export type AttributeSpec<K extends AttributeKind> = { type: 'attribute', kind: K, itemSize: AttributeItemSize, divisor: number }
+export function AttributeSpec<K extends AttributeKind>(kind: K, itemSize: AttributeItemSize, divisor: number): AttributeSpec<K> {
     return { type: 'attribute', kind, itemSize, divisor }
 }
 
-export type UniformSpec<K extends UniformKind> = { type: 'uniform', kind: K }
-export function UniformSpec<K extends UniformKind>(kind: K): UniformSpec<K> {
-    return { type: 'uniform', kind }
+export type UniformSpec<K extends UniformKind> = { type: 'uniform', kind: K, isMaterial: boolean }
+export function UniformSpec<K extends UniformKind>(kind: K, isMaterial = false): UniformSpec<K> {
+    return { type: 'uniform', kind, isMaterial }
 }
 
 export type TextureSpec<K extends TextureKind> = { type: 'texture', kind: K, format: TextureFormat, dataType: TextureType, filter: TextureFilter }
@@ -136,7 +128,7 @@ export function ValueSpec<K extends ValueKind>(kind: K): ValueSpec<K> {
 
 export type RenderableSchema = {
     [k: string]: (
-        AttributeSpec<ArrayKind> | UniformSpec<UniformKind> | TextureSpec<TextureKind> |
+        AttributeSpec<AttributeKind> | UniformSpec<UniformKind> | TextureSpec<TextureKind> |
         ValueSpec<ValueKind> | DefineSpec<DefineKind> | ElementsSpec<ElementsKind>
     )
 }
@@ -154,9 +146,13 @@ export const GlobalUniformSchema = {
     uInvProjection: UniformSpec('m4'),
     uModelViewProjection: UniformSpec('m4'),
     uInvModelViewProjection: UniformSpec('m4'),
-    // uLightPosition: Uniform('v3'),
-    uLightColor: UniformSpec('v3'),
-    uLightAmbient: UniformSpec('v3'),
+
+    uLightIntensity: UniformSpec('f'),
+    uAmbientIntensity: UniformSpec('f'),
+
+    uMetalness: UniformSpec('f'),
+    uRoughness: UniformSpec('f'),
+    uReflectivity: UniformSpec('f'),
 
     uPixelRatio: UniformSpec('f'),
     uViewportHeight: UniformSpec('f'),
@@ -170,18 +166,18 @@ export const GlobalUniformSchema = {
     uPickingAlphaThreshold: UniformSpec('f'),
 }
 export type GlobalUniformSchema = typeof GlobalUniformSchema
-export type GlobalUniformValues = { [k in keyof GlobalUniformSchema]: ValueCell<any> }
+export type GlobalUniformValues = Values<GlobalUniformSchema> // { [k in keyof GlobalUniformSchema]: ValueCell<any> }
 
 export const InternalSchema = {
     uObjectId: UniformSpec('i'),
-    uPickable: UniformSpec('i'),
+    uPickable: UniformSpec('i', true),
 }
 export type InternalSchema = typeof InternalSchema
 export type InternalValues = { [k in keyof InternalSchema]: ValueCell<any> }
 
 export const ColorSchema = {
     // aColor: AttributeSpec('float32', 3, 0), // TODO
-    uColor: UniformSpec('v3'),
+    uColor: UniformSpec('v3', true),
     uColorTexDim: UniformSpec('v2'),
     tColor: TextureSpec('image-uint8', 'rgb', 'ubyte', 'nearest'),
     dColorType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'group_instance']),
@@ -191,7 +187,7 @@ export type ColorValues = Values<ColorSchema>
 
 export const SizeSchema = {
     // aSize: AttributeSpec('float32', 1, 0), // TODO
-    uSize: UniformSpec('f'),
+    uSize: UniformSpec('f', true),
     uSizeTexDim: UniformSpec('v2'),
     tSize: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
     dSizeType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'group_instance']),
@@ -215,10 +211,22 @@ export const OverpaintSchema = {
 export type OverpaintSchema = typeof OverpaintSchema
 export type OverpaintValues = Values<OverpaintSchema>
 
+export const TransparencySchema = {
+    // aTransparency: AttributeSpec('float32', 1, 0), // TODO
+    uTransparencyTexDim: UniformSpec('v2'),
+    tTransparency: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
+    dTransparency: DefineSpec('boolean'),
+    // dTransparencyType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'group_instance']), // TODO
+    dTransparencyVariant: DefineSpec('string', ['single', 'multi']),
+}
+export type TransparencySchema = typeof TransparencySchema
+export type TransparencyValues = Values<TransparencySchema>
+
 export const BaseSchema = {
     ...ColorSchema,
     ...MarkerSchema,
     ...OverpaintSchema,
+    ...TransparencySchema,
 
     aInstance: AttributeSpec('float32', 1, 1),
     aGroup: AttributeSpec('float32', 1, 0),
@@ -231,12 +239,12 @@ export const BaseSchema = {
     /**
      * final alpha, calculated as `values.alpha * state.alpha`
      */
-    uAlpha: UniformSpec('f'),
+    uAlpha: UniformSpec('f', true),
     uInstanceCount: UniformSpec('i'),
     uGroupCount: UniformSpec('i'),
 
-    uHighlightColor: UniformSpec('v3'),
-    uSelectColor: UniformSpec('v3'),
+    uHighlightColor: UniformSpec('v3', true),
+    uSelectColor: UniformSpec('v3', true),
 
     drawCount: ValueSpec('number'),
     instanceCount: ValueSpec('number'),

src/mol-gl/renderable/spheres.ts

@@ -6,7 +6,7 @@
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
 import { WebGLContext } from '../webgl/context';
-import { createRenderItem } from '../webgl/render-item';
+import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, Values, InternalSchema, SizeSchema, InternalValues, ElementsSpec, ValueSpec, DefineSpec } from './schema';
 import { SpheresShaderCode } from '../shader-code';
 import { ValueCell } from 'mol-util';
@@ -24,13 +24,13 @@ export const SpheresSchema = {
 export type SpheresSchema = typeof SpheresSchema
 export type SpheresValues = Values<SpheresSchema>
 
-export function SpheresRenderable(ctx: WebGLContext, id: number, values: SpheresValues, state: RenderableState): Renderable<SpheresValues> {
+export function SpheresRenderable(ctx: WebGLContext, id: number, values: SpheresValues, state: RenderableState, materialId: number): Renderable<SpheresValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...SpheresSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id),
         uPickable: ValueCell.create(state.pickable ? 1 : 0)
     }
     const shaderCode = SpheresShaderCode
-    const renderItem = createRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues })
+    const renderItem = createGraphicsRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues }, materialId)
     return createRenderable(renderItem, values, state);
 }

src/mol-gl/renderable/text.ts

@@ -6,7 +6,7 @@
 
 import { Renderable, RenderableState, createRenderable } from '../renderable'
 import { WebGLContext } from '../webgl/context';
-import { createRenderItem } from '../webgl/render-item';
+import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, UniformSpec, Values, InternalSchema, SizeSchema, InternalValues, TextureSpec, ElementsSpec, ValueSpec } from './schema';
 import { TextShaderCode } from '../shader-code';
 import { ValueCell } from 'mol-util';
@@ -34,13 +34,13 @@ export const TextSchema = {
 export type TextSchema = typeof TextSchema
 export type TextValues = Values<TextSchema>
 
-export function TextRenderable(ctx: WebGLContext, id: number, values: TextValues, state: RenderableState): Renderable<TextValues> {
+export function TextRenderable(ctx: WebGLContext, id: number, values: TextValues, state: RenderableState, materialId: number): Renderable<TextValues> {
     const schema = { ...GlobalUniformSchema, ...InternalSchema, ...TextSchema }
     const internalValues: InternalValues = {
         uObjectId: ValueCell.create(id),
         uPickable: ValueCell.create(state.pickable ? 1 : 0)
     }
     const shaderCode = TextShaderCode
-    const renderItem = createRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues })
+    const renderItem = createGraphicsRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues }, materialId)
     return createRenderable(renderItem, values, state);
 }

src/mol-gl/renderable/texture-mesh.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Renderable, RenderableState, createRenderable } from '../renderable'
+import { WebGLContext } from '../webgl/context';
+import { createGraphicsRenderItem } from '../webgl/render-item';
+import { GlobalUniformSchema, BaseSchema, DefineSpec, Values, InternalSchema, InternalValues, UniformSpec, TextureSpec } from './schema';
+import { MeshShaderCode } from '../shader-code';
+import { ValueCell } from 'mol-util';
+
+export const TextureMeshSchema = {
+    ...BaseSchema,
+
+    uGeoTexDim: UniformSpec('v2'),
+    /** texture has vertex positions in XYZ and group id in W */
+    tPositionGroup: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+    tNormal: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+
+    dFlatShaded: DefineSpec('boolean'),
+    dDoubleSided: DefineSpec('boolean'),
+    dFlipSided: DefineSpec('boolean'),
+    dGeoTexture: DefineSpec('boolean'),
+}
+export type TextureMeshSchema = typeof TextureMeshSchema
+export type TextureMeshValues = Values<TextureMeshSchema>
+
+export function TextureMeshRenderable(ctx: WebGLContext, id: number, values: TextureMeshValues, state: RenderableState, materialId: number): Renderable<TextureMeshValues> {
+    const schema = { ...GlobalUniformSchema, ...InternalSchema, ...TextureMeshSchema }
+    const internalValues: InternalValues = {
+        uObjectId: ValueCell.create(id),
+        uPickable: ValueCell.create(state.pickable ? 1 : 0)
+    }
+    const shaderCode = MeshShaderCode
+    const renderItem = createGraphicsRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues }, materialId)
+
+    return createRenderable(renderItem, values, state)
+}

src/mol-gl/renderable/util.ts

@@ -29,9 +29,9 @@ export interface TextureVolume<T extends Uint8Array | Float32Array> {
     readonly depth: number
 }
 
-export function createTextureImage(n: number, itemSize: number, array?: Uint8Array): TextureImage<Uint8Array> {
+export function createTextureImage<T extends Uint8Array | Float32Array>(n: number, itemSize: number, arrayCtor: new (length: number) => T, array?: T): TextureImage<T> {
     const { length, width, height } = calculateTextureInfo(n, itemSize)
-    array = array && array.length >= length ? array : new Uint8Array(length)
+    array = array && array.length >= length ? array : new arrayCtor(length)
     return { array, width, height }
 }
 
@@ -65,7 +65,8 @@ export function printImageData(imageData: ImageData, scale = 1) {
         const img = document.createElement('img')
         img.src = objectURL
         img.style.width = imageData.width * scale + 'px'
-        img.style.height = imageData.height * scale + 'px'
+        img.style.height = imageData.height * scale + 'px';
+        (img.style as any).imageRendering = 'pixelated' // works in Chrome
         img.style.position = 'absolute'
         img.style.top = '0px'
         img.style.left = '0px'

src/mol-gl/renderer.ts

@@ -1,10 +1,9 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-// import { Vec3, Mat4 } from 'mol-math/linear-algebra'
 import { Viewport } from 'mol-canvas3d/camera/util';
 import { Camera } from 'mol-canvas3d/camera';
 
@@ -15,7 +14,9 @@ import { Renderable } from './renderable';
 import { Color } from 'mol-util/color';
 import { ValueCell } from 'mol-util';
 import { RenderableValues, GlobalUniformValues, BaseValues } from './renderable/schema';
-import { RenderVariant } from './webgl/render-item';
+import { GraphicsRenderVariant } from './webgl/render-item';
+import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { deepClone } from 'mol-util/object';
 
 export interface RendererStats {
     programCount: number
@@ -34,44 +35,36 @@ export interface RendererStats {
 
 interface Renderer {
     readonly stats: RendererStats
-    readonly props: RendererProps
+    readonly props: Readonly<RendererProps>
 
     clear: () => void
-    render: (scene: Scene, variant: RenderVariant) => void
+    render: (scene: Scene, variant: GraphicsRenderVariant) => void
+    setProps: (props: Partial<RendererProps>) => void
     setViewport: (x: number, y: number, width: number, height: number) => void
-    setClearColor: (color: Color) => void
-    setPickingAlphaThreshold: (value: number) => void
     getImageData: () => ImageData
     dispose: () => void
 }
 
-export const DefaultRendererProps = {
-    clearColor: Color(0x000000),
-    viewport: Viewport.create(0, 0, 0, 0),
-    pickingAlphaThreshold: 0.5,
+export const RendererParams = {
+    backgroundColor: PD.Color(Color(0x000000)),
+    pickingAlphaThreshold: PD.Numeric(0.5, { min: 0.0, max: 1.0, step: 0.01 }, { description: 'The minimum opacity value needed for an object to be pickable.' }),
+
+    lightIntensity: PD.Numeric(0.6, { min: 0.0, max: 1.0, step: 0.01 }),
+    ambientIntensity: PD.Numeric(0.4, { min: 0.0, max: 1.0, step: 0.01 }),
+
+    metalness: PD.Numeric(0.0, { min: 0.0, max: 1.0, step: 0.01 }),
+    roughness: PD.Numeric(0.4, { min: 0.0, max: 1.0, step: 0.01 }),
+    reflectivity: PD.Numeric(0.5, { min: 0.0, max: 1.0, step: 0.01 }),
 }
-export type RendererProps = typeof DefaultRendererProps
+export type RendererProps = PD.Values<typeof RendererParams>
 
 namespace Renderer {
     export function create(ctx: WebGLContext, camera: Camera, props: Partial<RendererProps> = {}): Renderer {
-        const { gl } = ctx
-        let { clearColor, viewport: _viewport, pickingAlphaThreshold } = { ...DefaultRendererProps, ...props }
-
-        const viewport = Viewport.clone(_viewport)
-        const viewportVec4 = Viewport.toVec4(Vec4.zero(), viewport)
-
-        // 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 fogColor = Vec3.create(0.0, 0.0, 0.0)
-
-        function setClearColor(color: Color) {
-            clearColor = color
-            const [ r, g, b ] = Color.toRgbNormalized(color)
-            gl.clearColor(r, g, b, 1.0)
-            Vec3.set(fogColor, r, g, b)
-        }
-        setClearColor(clearColor)
+        const { gl, state, stats } = ctx
+        const p = deepClone({ ...PD.getDefaultValues(RendererParams), ...props })
+
+        const viewport = Viewport()
+        const bgColor = Color.toVec3Normalized(Vec3(), p.backgroundColor)
 
         const view = Mat4.clone(camera.view)
         const invView = Mat4.invert(Mat4.identity(), view)
@@ -94,63 +87,71 @@ namespace Renderer {
 
             uPixelRatio: ValueCell.create(ctx.pixelRatio),
             uViewportHeight: ValueCell.create(viewport.height),
-            uViewport: ValueCell.create(viewportVec4),
+            uViewport: ValueCell.create(Viewport.toVec4(Vec4(), viewport)),
+
+            uLightIntensity: ValueCell.create(p.lightIntensity),
+            uAmbientIntensity: ValueCell.create(p.ambientIntensity),
 
-            uLightColor: ValueCell.create(lightColor),
-            uLightAmbient: ValueCell.create(lightAmbient),
+            uMetalness: ValueCell.create(p.metalness),
+            uRoughness: ValueCell.create(p.roughness),
+            uReflectivity: ValueCell.create(p.reflectivity),
 
             uCameraPosition: ValueCell.create(Vec3.clone(camera.state.position)),
             uFogNear: ValueCell.create(camera.state.fogNear),
             uFogFar: ValueCell.create(camera.state.fogFar),
-            uFogColor: ValueCell.create(fogColor),
+            uFogColor: ValueCell.create(bgColor),
 
-            uPickingAlphaThreshold: ValueCell.create(pickingAlphaThreshold),
+            uPickingAlphaThreshold: ValueCell.create(p.pickingAlphaThreshold),
         }
+        const globalUniformList = Object.entries(globalUniforms)
 
         let globalUniformsNeedUpdate = true
-        const renderObject = (r: Renderable<RenderableValues & BaseValues>, variant: RenderVariant) => {
+
+        const renderObject = (r: Renderable<RenderableValues & BaseValues>, variant: GraphicsRenderVariant) => {
             const program = r.getProgram(variant)
             if (r.state.visible) {
-                if (ctx.currentProgramId !== program.id) {
+                if (state.currentProgramId !== program.id) {
+                    // console.log('new program')
                     globalUniformsNeedUpdate = true
+                    program.use()
                 }
 
-                program.use()
                 if (globalUniformsNeedUpdate) {
-                    program.setUniforms(globalUniforms)
+                    // console.log('globalUniformsNeedUpdate')
+                    program.setUniforms(globalUniformList)
                     globalUniformsNeedUpdate = false
                 }
 
                 if (r.values.dDoubleSided) {
                     if (r.values.dDoubleSided.ref.value) {
-                        gl.disable(gl.CULL_FACE)
+                        state.disable(gl.CULL_FACE)
                     } else {
-                        gl.enable(gl.CULL_FACE)
+                        state.enable(gl.CULL_FACE)
                     }
                 } else {
                     // webgl default
-                    gl.disable(gl.CULL_FACE)
+                    state.disable(gl.CULL_FACE)
                 }
 
                 if (r.values.dFlipSided) {
                     if (r.values.dFlipSided.ref.value) {
-                        gl.frontFace(gl.CW)
-                        gl.cullFace(gl.FRONT)
+                        state.frontFace(gl.CW)
+                        state.cullFace(gl.FRONT)
                     } else {
-                        gl.frontFace(gl.CCW)
-                        gl.cullFace(gl.BACK)
+                        state.frontFace(gl.CCW)
+                        state.cullFace(gl.BACK)
                     }
                 } else {
                     // webgl default
-                    gl.frontFace(gl.CCW)
-                    gl.cullFace(gl.BACK)
+                    state.frontFace(gl.CCW)
+                    state.cullFace(gl.BACK)
                 }
 
                 r.render(variant)
             }
         }
 
-        const render = (scene: Scene, variant: RenderVariant) => {
+        const render = (scene: Scene, variant: GraphicsRenderVariant) => {
             ValueCell.update(globalUniforms.uModel, scene.view)
             ValueCell.update(globalUniforms.uView, camera.view)
             ValueCell.update(globalUniforms.uInvView, Mat4.invert(invView, camera.view))
@@ -166,30 +167,33 @@ namespace Renderer {
             ValueCell.update(globalUniforms.uFogNear, camera.state.fogNear)
 
             globalUniformsNeedUpdate = true
+            state.currentRenderItemId = -1
 
             const { renderables } = scene
 
+            state.disable(gl.SCISSOR_TEST)
+            state.disable(gl.BLEND)
+            state.depthMask(true)
+            state.colorMask(true, true, true, true)
+            state.enable(gl.DEPTH_TEST)
+            state.clearColor(bgColor[0], bgColor[1], bgColor[2], 1.0)
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+
             if (variant === 'draw') {
-                gl.disable(gl.BLEND)
-                gl.enable(gl.DEPTH_TEST)
-                gl.depthMask(true)
                 for (let i = 0, il = renderables.length; i < il; ++i) {
                     const r = renderables[i]
                     if (r.state.opaque) renderObject(r, variant)
                 }
 
-                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
-                gl.enable(gl.BLEND)
+                state.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+                state.enable(gl.BLEND)
                 for (let i = 0, il = renderables.length; i < il; ++i) {
                     const r = renderables[i]
-                    gl.depthMask(r.values.uAlpha.ref.value === 1.0)
+                    state.depthMask(r.values.uAlpha.ref.value === 1.0)
                     if (!r.state.opaque) renderObject(r, variant)
                 }
             } else {
                 // picking
-                gl.disable(gl.BLEND)
-                gl.enable(gl.DEPTH_TEST)
-                gl.depthMask(true)
                 for (let i = 0, il = renderables.length; i < il; ++i) {
                     renderObject(renderables[i], variant)
                 }
@@ -200,51 +204,79 @@ namespace Renderer {
 
         return {
             clear: () => {
-                gl.depthMask(true)
+                state.depthMask(true)
+                state.clearColor(bgColor[0], bgColor[1], bgColor[2], 1.0)
                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
             },
             render,
 
-            setClearColor,
-            setPickingAlphaThreshold: (value: number) => {
-                pickingAlphaThreshold = value
-                ValueCell.update(globalUniforms.uPickingAlphaThreshold, pickingAlphaThreshold)
+            setProps: (props: Partial<RendererProps>) => {
+                if (props.pickingAlphaThreshold !== undefined && props.pickingAlphaThreshold !== p.pickingAlphaThreshold) {
+                    p.pickingAlphaThreshold = props.pickingAlphaThreshold
+                    ValueCell.update(globalUniforms.uPickingAlphaThreshold, p.pickingAlphaThreshold)
+                }
+                if (props.backgroundColor !== undefined && props.backgroundColor !== p.backgroundColor) {
+                    p.backgroundColor = props.backgroundColor
+                    Color.toVec3Normalized(bgColor, p.backgroundColor)
+                    ValueCell.update(globalUniforms.uFogColor, Vec3.copy(globalUniforms.uFogColor.ref.value, bgColor))
+                }
+                if (props.lightIntensity !== undefined && props.lightIntensity !== p.lightIntensity) {
+                    p.lightIntensity = props.lightIntensity
+                    ValueCell.update(globalUniforms.uLightIntensity, p.lightIntensity)
+                }
+                if (props.ambientIntensity !== undefined && props.ambientIntensity !== p.ambientIntensity) {
+                    p.ambientIntensity = props.ambientIntensity
+                    ValueCell.update(globalUniforms.uAmbientIntensity, p.ambientIntensity)
+                }
+
+                if (props.metalness !== undefined && props.metalness !== p.metalness) {
+                    p.metalness = props.metalness
+                    ValueCell.update(globalUniforms.uMetalness, p.metalness)
+                }
+                if (props.roughness !== undefined && props.roughness !== p.roughness) {
+                    p.roughness = props.roughness
+                    ValueCell.update(globalUniforms.uRoughness, p.roughness)
+                }
+                if (props.reflectivity !== undefined && props.reflectivity !== p.reflectivity) {
+                    p.reflectivity = props.reflectivity
+                    ValueCell.update(globalUniforms.uReflectivity, p.reflectivity)
+                }
             },
             setViewport: (x: number, y: number, width: number, height: number) => {
-                Viewport.set(viewport, x, y, width, height)
                 gl.viewport(x, y, width, height)
-                ValueCell.update(globalUniforms.uViewportHeight, height)
-                ValueCell.update(globalUniforms.uViewport, Vec4.set(viewportVec4, x, y, width, height))
+                if (x !== viewport.x || y !== viewport.y || width !== viewport.width || height !== viewport.height) {
+                    Viewport.set(viewport, x, y, width, height)
+                    ValueCell.update(globalUniforms.uViewportHeight, height)
+                    ValueCell.update(globalUniforms.uViewport, Vec4.set(globalUniforms.uViewport.ref.value, x, y, width, height))
+                }
             },
             getImageData: () => {
-                const { width, height } = viewport
-                const buffer = new Uint8Array(width * height * 4)
+                const { x, y, width, height } = viewport
+                const dw = width - x
+                const dh = height - y
+                const buffer = new Uint8Array(dw * dh * 4)
                 ctx.unbindFramebuffer()
-                ctx.readPixels(0, 0, width, height, buffer)
-                return createImageData(buffer, width, height)
+                ctx.readPixels(x, y, width, height, buffer)
+                return createImageData(buffer, dw, dh)
             },
 
             get props() {
-                return {
-                    clearColor,
-                    pickingAlphaThreshold,
-                    viewport
-                }
+                return p
             },
             get stats(): RendererStats {
                 return {
                     programCount: ctx.programCache.count,
                     shaderCount: ctx.shaderCache.count,
 
-                    bufferCount: ctx.bufferCount,
-                    framebufferCount: ctx.framebufferCount,
-                    renderbufferCount: ctx.renderbufferCount,
-                    textureCount: ctx.textureCount,
-                    vaoCount: ctx.vaoCount,
+                    bufferCount: stats.bufferCount,
+                    framebufferCount: stats.framebufferCount,
+                    renderbufferCount: stats.renderbufferCount,
+                    textureCount: stats.textureCount,
+                    vaoCount: stats.vaoCount,
 
-                    drawCount: ctx.drawCount,
-                    instanceCount: ctx.instanceCount,
-                    instancedDrawCount: ctx.instancedDrawCount,
+                    drawCount: stats.drawCount,
+                    instanceCount: stats.instanceCount,
+                    instancedDrawCount: stats.instancedDrawCount,
                 }
             },
             dispose: () => {

src/mol-gl/scene.ts

@@ -7,7 +7,7 @@
 import { Renderable } from './renderable'
 import { WebGLContext } from './webgl/context';
 import { RenderableValues, BaseValues } from './renderable/schema';
-import { RenderObject, createRenderable, GraphicsRenderObject } from './render-object';
+import { GraphicsRenderObject, createRenderable } from './render-object';
 import { Object3D } from './object3d';
 import { Sphere3D } from 'mol-math/geometry';
 import { Vec3 } from 'mol-math/linear-algebra';
@@ -38,15 +38,19 @@ function calculateBoundingSphere(renderables: Renderable<RenderableValues & Base
 function renderableSort(a: Renderable<RenderableValues & BaseValues>, b: Renderable<RenderableValues & BaseValues>) {
     const drawProgramIdA = a.getProgram('draw').id
     const drawProgramIdB = b.getProgram('draw').id
+    const materialIdA = a.materialId
+    const materialIdB = b.materialId
     const zA = a.values.boundingSphere.ref.value.center[2]
-    const zB = a.values.boundingSphere.ref.value.center[2]
+    const zB = b.values.boundingSphere.ref.value.center[2]
 
     if (drawProgramIdA !== drawProgramIdB) {
-        return drawProgramIdA - drawProgramIdB; // sort by program id to minimize gl state changes
+        return drawProgramIdA - drawProgramIdB // sort by program id to minimize gl state changes
+    } else if (materialIdA !== materialIdB) {
+        return materialIdA - materialIdB // sort by material id to minimize gl state changes
     } else if (zA !== zB) {
         return a.state.opaque
-            ? zA - zB // when opaque draw closer elements first to minimize overdraw
-            : zB - zA // when transparent draw elements last to maximize partial visibility
+            ? zA - zB // when opaque, draw closer elements first to minimize overdraw
+            : zB - zA // when transparent, draw elements last to maximize partial visibility
     } else {
         return a.id - b.id;
     }
@@ -58,16 +62,16 @@ interface Scene extends Object3D {
     readonly boundingSphere: Sphere3D
 
     update: (objects: ArrayLike<GraphicsRenderObject> | undefined, keepBoundingSphere: boolean) => void
-    add: (o: RenderObject) => Renderable<any>
-    remove: (o: RenderObject) => void
-    has: (o: RenderObject) => boolean
+    add: (o: GraphicsRenderObject) => Renderable<any>
+    remove: (o: GraphicsRenderObject) => void
+    has: (o: GraphicsRenderObject) => boolean
     clear: () => void
-    forEach: (callbackFn: (value: Renderable<RenderableValues & BaseValues>, key: RenderObject) => void) => void
+    forEach: (callbackFn: (value: Renderable<RenderableValues & BaseValues>, key: GraphicsRenderObject) => void) => void
 }
 
 namespace Scene {
     export function create(ctx: WebGLContext): Scene {
-        const renderableMap = new Map<RenderObject, Renderable<RenderableValues & BaseValues>>()
+        const renderableMap = new Map<GraphicsRenderObject, Renderable<RenderableValues & BaseValues>>()
         const renderables: Renderable<RenderableValues & BaseValues>[] = []
         const boundingSphere = Sphere3D.zero()
         let boundingSphereDirty = true
@@ -95,7 +99,7 @@ namespace Scene {
                 }
                 if (!keepBoundingSphere) boundingSphereDirty = true
             },
-            add: (o: RenderObject) => {
+            add: (o: GraphicsRenderObject) => {
                 if (!renderableMap.has(o)) {
                     const renderable = createRenderable(ctx, o)
                     renderables.push(renderable)
@@ -108,7 +112,7 @@ namespace Scene {
                     return renderableMap.get(o)!
                 }
             },
-            remove: (o: RenderObject) => {
+            remove: (o: GraphicsRenderObject) => {
                 const renderable = renderableMap.get(o)
                 if (renderable) {
                     renderable.dispose()
@@ -118,7 +122,7 @@ namespace Scene {
                     boundingSphereDirty = true
                 }
             },
-            has: (o: RenderObject) => {
+            has: (o: GraphicsRenderObject) => {
                 return renderableMap.has(o)
             },
             clear: () => {
@@ -129,7 +133,7 @@ namespace Scene {
                 renderableMap.clear()
                 boundingSphereDirty = true
             },
-            forEach: (callbackFn: (value: Renderable<any>, key: RenderObject) => void) => {
+            forEach: (callbackFn: (value: Renderable<any>, key: GraphicsRenderObject) => void) => {
                 renderableMap.forEach(callbackFn)
             },
             get count() {

src/mol-gl/shader-code.ts

@@ -1,12 +1,13 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { ValueCell } from 'mol-util';
 import { idFactory } from 'mol-util/id-factory';
-import { WebGLContext } from './webgl/context';
+import { WebGLExtensions } from './webgl/context';
+import { isWebGL2, GLRenderingContext } from './webgl/compat';
 
 export type DefineKind = 'boolean' | 'string' | 'number'
 export type DefineType = boolean | string
@@ -15,8 +16,10 @@ export type DefineValues = { [k: string]: ValueCell<DefineType> }
 const shaderCodeId = idFactory()
 
 export interface ShaderExtensions {
-    readonly standardDerivatives: boolean
-    readonly fragDepth: boolean
+    readonly standardDerivatives?: boolean
+    readonly fragDepth?: boolean
+    readonly drawBuffers?: boolean
+    readonly shaderTextureLod?: boolean
 }
 
 export interface ShaderCode {
@@ -26,52 +29,46 @@ export interface ShaderCode {
     readonly extensions: ShaderExtensions
 }
 
-export function ShaderCode(vert: string, frag: string, extensions: ShaderExtensions): ShaderCode {
+export function ShaderCode(vert: string, frag: string, extensions: ShaderExtensions = {}): ShaderCode {
     return { id: shaderCodeId(), vert, frag, extensions }
 }
 
 export const PointsShaderCode = ShaderCode(
-    require('mol-gl/shader/points.vert'),
-    require('mol-gl/shader/points.frag'),
-    { standardDerivatives: false, fragDepth: false }
+    require('mol-gl/shader/points.vert').default,
+    require('mol-gl/shader/points.frag').default
 )
 
 export const SpheresShaderCode = ShaderCode(
-    require('mol-gl/shader/spheres.vert'),
-    require('mol-gl/shader/spheres.frag'),
-    { standardDerivatives: false, fragDepth: true }
+    require('mol-gl/shader/spheres.vert').default,
+    require('mol-gl/shader/spheres.frag').default,
+    { fragDepth: true }
 )
 
 export const TextShaderCode = ShaderCode(
-    require('mol-gl/shader/text.vert'),
-    require('mol-gl/shader/text.frag'),
-    { standardDerivatives: true, fragDepth: false }
+    require('mol-gl/shader/text.vert').default,
+    require('mol-gl/shader/text.frag').default,
+    { standardDerivatives: true }
 )
 
 export const LinesShaderCode = ShaderCode(
-    require('mol-gl/shader/lines.vert'),
-    require('mol-gl/shader/lines.frag'),
-    { standardDerivatives: false, fragDepth: false }
+    require('mol-gl/shader/lines.vert').default,
+    require('mol-gl/shader/lines.frag').default
 )
 
 export const MeshShaderCode = ShaderCode(
-    require('mol-gl/shader/mesh.vert'),
-    require('mol-gl/shader/mesh.frag'),
-    { standardDerivatives: true, fragDepth: false }
-)
-
-export const GaussianDensityShaderCode = ShaderCode(
-    require('mol-gl/shader/gaussian-density.vert'),
-    require('mol-gl/shader/gaussian-density.frag'),
-    { standardDerivatives: false, fragDepth: false }
+    require('mol-gl/shader/mesh.vert').default,
+    require('mol-gl/shader/mesh.frag').default,
+    { standardDerivatives: true }
 )
 
 export const DirectVolumeShaderCode = ShaderCode(
-    require('mol-gl/shader/direct-volume.vert'),
-    require('mol-gl/shader/direct-volume.frag'),
-    { standardDerivatives: false, fragDepth: true }
+    require('mol-gl/shader/direct-volume.vert').default,
+    require('mol-gl/shader/direct-volume.frag').default,
+    { fragDepth: true }
 )
 
+
+
 export type ShaderDefines = {
     [k: string]: ValueCell<DefineType>
 }
@@ -97,16 +94,34 @@ function getDefinesCode (defines: ShaderDefines) {
     return lines.join('\n') + '\n'
 }
 
-function getGlsl100FragPrefix(ctx: WebGLContext, extensions: ShaderExtensions) {
+function getGlsl100FragPrefix(extensions: WebGLExtensions, shaderExtensions: ShaderExtensions) {
     const prefix: string[] = []
-    if (extensions.standardDerivatives) {
+    if (shaderExtensions.standardDerivatives) {
         prefix.push('#extension GL_OES_standard_derivatives : enable')
         prefix.push('#define enabledStandardDerivatives')
     }
-    if (extensions.fragDepth) {
-        if (ctx.extensions.fragDepth) {
+    if (shaderExtensions.fragDepth) {
+        if (extensions.fragDepth) {
             prefix.push('#extension GL_EXT_frag_depth : enable')
             prefix.push('#define enabledFragDepth')
+        } else {
+            throw new Error(`requested 'GL_EXT_frag_depth' extension is unavailable`)
+        }
+    }
+    if (shaderExtensions.drawBuffers) {
+        if (extensions.drawBuffers) {
+            prefix.push('#extension GL_EXT_draw_buffers : require')
+            prefix.push('#define requiredDrawBuffers')
+        } else {
+            throw new Error(`requested 'GL_EXT_draw_buffers' extension is unavailable`)
+        }
+    }
+    if (shaderExtensions.shaderTextureLod) {
+        if (extensions.shaderTextureLod) {
+            prefix.push('#extension GL_EXT_shader_texture_lod : enable')
+            prefix.push('#define enabledShaderTextureLod')
+        } else {
+            throw new Error(`requested 'GL_EXT_shader_texture_lod' extension is unavailable`)
         }
     }
     return prefix.join('\n') + '\n'
@@ -119,25 +134,41 @@ const glsl300VertPrefix = `#version 300 es
 `
 
 const glsl300FragPrefix = `#version 300 es
+layout(location = 0) out highp vec4 out_FragData0;
+layout(location = 1) out highp vec4 out_FragData1;
+layout(location = 2) out highp vec4 out_FragData2;
+layout(location = 3) out highp vec4 out_FragData3;
+layout(location = 4) out highp vec4 out_FragData4;
+layout(location = 5) out highp vec4 out_FragData5;
+layout(location = 6) out highp vec4 out_FragData6;
+layout(location = 7) out highp vec4 out_FragData7;
+
 #define varying in
-layout(location = 0) out highp vec4 out_FragColor;
-#define gl_FragColor out_FragColor
-#define gl_FragDepthEXT gl_FragDepth
 #define texture2D texture
+#define texture2DLodEXT textureLod
+
+#define gl_FragColor out_FragData0
+#define gl_FragDepthEXT gl_FragDepth
 
 #define enabledStandardDerivatives
 #define enabledFragDepth
+#define requiredDrawBuffers
 `
 
-export function addShaderDefines(ctx: WebGLContext, defines: ShaderDefines, shaders: ShaderCode): ShaderCode {
-    const { isWebGL2 } = ctx
+function transformGlsl300Frag(frag: string) {
+    return frag.replace(/gl_FragData\[([0-7])\]/g, 'out_FragData$1')
+}
+
+export function addShaderDefines(gl: GLRenderingContext, extensions: WebGLExtensions, defines: ShaderDefines, shaders: ShaderCode): ShaderCode {
+    const webgl2 = isWebGL2(gl)
     const header = getDefinesCode(defines)
-    const vertPrefix = isWebGL2 ? glsl300VertPrefix : ''
-    const fragPrefix = isWebGL2 ? glsl300FragPrefix : getGlsl100FragPrefix(ctx, shaders.extensions)
+    const vertPrefix = webgl2 ? glsl300VertPrefix : ''
+    const fragPrefix = webgl2 ? glsl300FragPrefix : getGlsl100FragPrefix(extensions, shaders.extensions)
+    const frag = webgl2 ? transformGlsl300Frag(shaders.frag) : shaders.frag
     return {
         id: shaderCodeId(),
         vert: `${vertPrefix}${header}${shaders.vert}`,
-        frag: `${fragPrefix}${header}${shaders.frag}`,
+        frag: `${fragPrefix}${header}${frag}`,
         extensions: shaders.extensions
     }
 }

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

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ *
+ * adapted from three.js (https://github.com/mrdoob/three.js/)
+ * which under the MIT License, Copyright © 2010-2019 three.js authors
+ */
+
+// inputs
+// - vec4 material
+// - vec3 vViewPosition
+// - vec3 normal
+// - float uMetalness
+// - float uRoughness
+// - float uReflectivity
+// - float uLightIntensity
+// - float uAmbientIntensity
+
+// outputs
+// - sets gl_FragColor
+
+vec4 color = material;
+
+ReflectedLight reflectedLight = ReflectedLight(vec3(0.0), vec3(0.0), vec3(0.0));
+
+PhysicalMaterial physicalMaterial;
+physicalMaterial.diffuseColor = color.rgb * (1.0 - uMetalness);
+physicalMaterial.specularRoughness = clamp(uRoughness, 0.04, 1.0);
+physicalMaterial.specularColor = mix(vec3(0.16 * pow2(uReflectivity)), color.rgb, uMetalness);
+
+GeometricContext geometry;
+geometry.position = -vViewPosition;
+geometry.normal = normal;
+geometry.viewDir = normalize(vViewPosition);
+
+IncidentLight directLight;
+directLight.direction = geometry.viewDir;
+directLight.color = vec3(uLightIntensity);
+
+RE_Direct_Physical(directLight, geometry, physicalMaterial, reflectedLight);
+
+vec3 irradiance = vec3(uAmbientIntensity) * PI;
+RE_IndirectDiffuse_Physical(irradiance, geometry, physicalMaterial, reflectedLight);
+
+vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular;
+
+gl_FragColor = vec4(outgoingLight, color.a);

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

@@ -1,5 +1,5 @@
 // only mark elements with an alpha above the picking threshold
-if (uAlpha >= uPickingAlphaThreshold) {
+if (gl_FragColor.a >= uPickingAlphaThreshold) {
     float marker = floor(vMarker * 255.0 + 0.5); // rounding required to work on some cards on win
     if (marker > 0.1) {
         if (intMod(marker, 2.0) > 0.1) {

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

@@ -3,17 +3,22 @@
 #elif defined(dColorType_instance)
     vColor.rgb = readFromTexture(tColor, aInstance, uColorTexDim).rgb;
 #elif defined(dColorType_group)
-    vColor.rgb = readFromTexture(tColor, aGroup, uColorTexDim).rgb;
+    vColor.rgb = readFromTexture(tColor, group, uColorTexDim).rgb;
 #elif defined(dColorType_groupInstance)
-    vColor.rgb = readFromTexture(tColor, aInstance * float(uGroupCount) + aGroup, uColorTexDim).rgb;
+    vColor.rgb = readFromTexture(tColor, aInstance * float(uGroupCount) + group, uColorTexDim).rgb;
 #elif defined(dColorType_objectPicking)
     vColor = vec4(encodeFloatRGB(float(uObjectId)), 1.0);
 #elif defined(dColorType_instancePicking)
     vColor = vec4(encodeFloatRGB(aInstance), 1.0);
 #elif defined(dColorType_groupPicking)
-    vColor = vec4(encodeFloatRGB(aGroup), 1.0);
+    vColor = vec4(encodeFloatRGB(group), 1.0);
 #endif
 
 #ifdef dOverpaint
-    vOverpaint = readFromTexture(tOverpaint, aInstance * float(uGroupCount) + aGroup, uOverpaintTexDim);
+    vOverpaint = readFromTexture(tOverpaint, aInstance * float(uGroupCount) + group, uOverpaintTexDim);
+#endif
+
+#ifdef dTransparency
+    vGroup = group;
+    vTransparency = readFromTexture(tTransparency, aInstance * float(uGroupCount) + group, uTransparencyTexDim).a;
 #endif

src/mol-gl/shader/chunks/assign-group.glsl

@@ -0,0 +1,6 @@
+#ifdef dGeoTexture
+    // aGroup is used as a vertex index here and the group id is retirieved from tPositionGroup
+    float group = readFromTexture(tPositionGroup, aGroup, uGeoTexDim).w;
+#else
+    float group = aGroup;
+#endif

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

@@ -1 +1 @@
-vMarker = readFromTexture(tMarker, aInstance * float(uGroupCount) + aGroup, uMarkerTexDim).a;
+vMarker = readFromTexture(tMarker, aInstance * float(uGroupCount) + group, uMarkerTexDim).a;

src/mol-gl/shader/chunks/assign-material-color.glsl

@@ -9,4 +9,24 @@
 // mix material with overpaint
 #if defined(dOverpaint) && (defined(dColorType_uniform) || defined(dColorType_attribute) || defined(dColorType_instance) || defined(dColorType_group) || defined(dColorType_groupInstance))
     material.rgb = mix(material.rgb, vOverpaint.rgb, vOverpaint.a);
+#endif
+
+// apply screendoor transparency
+#if defined(dTransparency) && (defined(dColorType_uniform) || defined(dColorType_attribute) || defined(dColorType_instance) || defined(dColorType_group) || defined(dColorType_groupInstance))
+    float ta = 1.0 - vTransparency;
+    float at = 0.0;
+
+    #if defined(dTransparencyVariant_single)
+        const mat4 thresholdMatrix = mat4(
+            1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
+            13.0 / 17.0,  5.0 / 17.0, 15.0 / 17.0,  7.0 / 17.0,
+            4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
+            16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
+        );
+        at = thresholdMatrix[int(intMod(gl_FragCoord.x, 4.0))][int(intMod(gl_FragCoord.y, 4.0))];
+    #elif defined(dTransparencyVariant_multi)
+        at = fract(dot(vec3(gl_FragCoord.xy, vGroup + 0.5), vec3(2.0, 7.0, 23.0) / 17.0f));
+    #endif
+
+    if (ta < 0.99 && (ta < 0.01 || ta < at)) discard;
 #endif

src/mol-gl/shader/chunks/assign-normal.glsl

@@ -0,0 +1,18 @@
+// inputs
+// - vViewPosition (if dFlatShaded)
+// - vNormal (if NOT dFlatShaded)
+
+// outputs
+// - normal
+
+// surface normal
+#if defined(dFlatShaded) && defined(enabledStandardDerivatives)
+    vec3 fdx = dFdx(vViewPosition);
+    vec3 fdy = dFdy(vViewPosition);
+    vec3 normal = -normalize(cross(fdx, fdy));
+#else
+    vec3 normal = -normalize(vNormal);
+    #ifdef dDoubleSided
+        normal = normal * (float(gl_FrontFacing) * 2.0 - 1.0);
+    #endif
+#endif

src/mol-gl/shader/chunks/assign-position.glsl

@@ -1,4 +1,9 @@
 mat4 modelView = uView * uModel * aTransform;
-vec4 mvPosition = modelView * vec4(aPosition, 1.0);
+#ifdef dGeoTexture
+    vec3 position = readFromTexture(tPositionGroup, aGroup, uGeoTexDim).xyz;
+#else
+    vec3 position = aPosition;
+#endif
+vec4 mvPosition = modelView * vec4(position, 1.0);
 vViewPosition = mvPosition.xyz;
 gl_Position = uProjection * mvPosition;

src/mol-gl/shader/chunks/assign-size.glsl

@@ -5,9 +5,9 @@
 #elif defined(dSizeType_instance)
     float size = readFromTexture(tSize, aInstance, uSizeTexDim).a;
 #elif defined(dSizeType_group)
-    float size = readFromTexture(tSize, aGroup, uSizeTexDim).a;
+    float size = readFromTexture(tSize, group, uSizeTexDim).a;
 #elif defined(dSizeType_groupInstance)
-    float size = readFromTexture(tSize, aInstance * float(uGroupCount) + aGroup, uSizeTexDim).a;
+    float size = readFromTexture(tSize, aInstance * float(uGroupCount) + group, uSizeTexDim).a;
 #endif
 
 #if defined(dSizeType_instance) || defined(dSizeType_group) || defined(dSizeType_groupInstance)

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

@@ -12,4 +12,9 @@
 
 #ifdef dOverpaint
     varying vec4 vOverpaint;
+#endif
+
+#ifdef dTransparency
+    varying float vGroup;
+    varying float vTransparency;
 #endif

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

@@ -20,4 +20,11 @@
     varying vec4 vOverpaint;
     uniform vec2 uOverpaintTexDim;
     uniform sampler2D tOverpaint;
+#endif
+
+#ifdef dTransparency
+    varying float vGroup;
+    varying float vTransparency;
+    uniform vec2 uTransparencyTexDim;
+    uniform sampler2D tTransparency;
 #endif

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

@@ -1,5 +1,13 @@
-float intDiv(float a, float b) { return float(int(a) / int(b)); }
-float intMod(float a, float b) { return a - b * float(int(a) / int(b)); }
+#define PI 3.14159265
+#define RECIPROCAL_PI 0.31830988618
+#define EPSILON 1e-6
+
+#define saturate(a) clamp(a, 0.0, 1.0)
+
+float intDiv(const in float a, const in float b) { return float(int(a) / int(b)); }
+float intMod(const in float a, const in float b) { return a - b * float(int(a) / int(b)); }
+
+float pow2(const in float x) { return x*x; }
 
 #if __VERSION__ != 300
     // transpose

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

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ *
+ * adapted from three.js (https://github.com/mrdoob/three.js/)
+ * which under the MIT License, Copyright © 2010-2019 three.js authors
+ */
+
+uniform float uLightIntensity;
+uniform float uAmbientIntensity;
+uniform float uReflectivity;
+uniform float uMetalness;
+uniform float uRoughness;
+
+struct PhysicalMaterial {
+	vec3 diffuseColor;
+	float specularRoughness;
+	vec3 specularColor;
+};
+
+struct IncidentLight {
+	vec3 color;
+	vec3 direction;
+};
+
+struct ReflectedLight {
+	vec3 directDiffuse;
+	vec3 directSpecular;
+	vec3 indirectDiffuse;
+};
+
+struct GeometricContext {
+	vec3 position;
+	vec3 normal;
+	vec3 viewDir;
+};
+
+vec3 F_Schlick(const in vec3 specularColor, const in float dotLH) {
+	// Original approximation by Christophe Schlick '94
+	// float fresnel = pow( 1.0 - dotLH, 5.0 );
+	// Optimized variant (presented by Epic at SIGGRAPH '13)
+	// https://cdn2.unrealengine.com/Resources/files/2013SiggraphPresentationsNotes-26915738.pdf
+	float fresnel = exp2((-5.55473 * dotLH - 6.98316) * dotLH);
+	return (1.0 - specularColor) * fresnel + specularColor;
+}
+
+// Moving Frostbite to Physically Based Rendering 3.0 - page 12, listing 2
+// https://seblagarde.files.wordpress.com/2015/07/course_notes_moving_frostbite_to_pbr_v32.pdf
+float G_GGX_SmithCorrelated(const in float alpha, const in float dotNL, const in float dotNV) {
+	float a2 = pow2(alpha);
+	// dotNL and dotNV are explicitly swapped. This is not a mistake.
+	float gv = dotNL * sqrt(a2 + (1.0 - a2) * pow2(dotNV));
+	float gl = dotNV * sqrt(a2 + (1.0 - a2) * pow2(dotNL));
+	return 0.5 / max(gv + gl, EPSILON);
+}
+
+// Microfacet Models for Refraction through Rough Surfaces - equation (33)
+// http://graphicrants.blogspot.com/2013/08/specular-brdf-reference.html
+// alpha is "roughness squared" in Disney’s reparameterization
+float D_GGX(const in float alpha, const in float dotNH) {
+	float a2 = pow2(alpha);
+	float denom = pow2(dotNH) * (a2 - 1.0) + 1.0; // avoid alpha = 0 with dotNH = 1
+	return RECIPROCAL_PI * a2 / pow2(denom);
+}
+
+vec3 BRDF_Diffuse_Lambert(const in vec3 diffuseColor) {
+	return RECIPROCAL_PI * diffuseColor;
+}
+
+// GGX Distribution, Schlick Fresnel, GGX-Smith Visibility
+vec3 BRDF_Specular_GGX(const in IncidentLight incidentLight, const in GeometricContext geometry, const in vec3 specularColor, const in float roughness) {
+	float alpha = pow2(roughness); // UE4's roughness
+	vec3 halfDir = normalize(incidentLight.direction + geometry.viewDir);
+
+	float dotNL = saturate(dot(geometry.normal, incidentLight.direction));
+	float dotNV = saturate(dot(geometry.normal, geometry.viewDir));
+	float dotNH = saturate(dot(geometry.normal, halfDir));
+	float dotLH = saturate(dot(incidentLight.direction, halfDir));
+
+	vec3 F = F_Schlick(specularColor, dotLH);
+	float G = G_GGX_SmithCorrelated(alpha, dotNL, dotNV);
+	float D = D_GGX(alpha, dotNH);
+	return F * (G * D);
+}
+
+// ref: https://www.unrealengine.com/blog/physically-based-shading-on-mobile - environmentBRDF for GGX on mobile
+vec3 BRDF_Specular_GGX_Environment(const in GeometricContext geometry, const in vec3 specularColor, const in float roughness) {
+	float dotNV = saturate(dot(geometry.normal, geometry.viewDir));
+	const vec4 c0 = vec4(-1, -0.0275, -0.572, 0.022);
+	const vec4 c1 = vec4(1, 0.0425, 1.04, -0.04);
+	vec4 r = roughness * c0 + c1;
+	float a004 = min(r.x * r.x, exp2(-9.28 * dotNV)) * r.x + r.y;
+	vec2 AB = vec2(-1.04, 1.04) * a004 + r.zw;
+	return specularColor * AB.x + AB.y;
+}
+
+void RE_Direct_Physical(const in IncidentLight directLight, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) {
+	float dotNL = saturate(dot(geometry.normal, directLight.direction));
+    vec3 irradiance = dotNL * directLight.color;
+	irradiance *= PI; // punctual light
+
+	reflectedLight.directSpecular += irradiance * BRDF_Specular_GGX(directLight, geometry, material.specularColor, material.specularRoughness);
+	reflectedLight.directDiffuse += irradiance * BRDF_Diffuse_Lambert(material.diffuseColor);
+}
+
+void RE_IndirectDiffuse_Physical(const in vec3 irradiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) {
+	reflectedLight.indirectDiffuse += irradiance * BRDF_Diffuse_Lambert(material.diffuseColor);
+}

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

@@ -0,0 +1,3 @@
+#if !defined(dFlatShaded) || !defined(enabledStandardDerivatives)
+    varying vec3 vNormal;
+#endif

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
@@ -30,11 +30,11 @@ uniform float uPickingAlphaThreshold;
 uniform int uPickable;
 
 #if defined(dGridTexType_2d)
-    precision mediump sampler2D;
+    precision highp sampler2D;
     uniform sampler2D tGridTex;
     uniform vec3 uGridTexDim;
 #elif defined(dGridTexType_3d)
-    precision mediump sampler3D;
+    precision highp sampler3D;
     uniform sampler3D tGridTex;
 #endif
 
@@ -46,26 +46,14 @@ uniform int uPickable;
 #endif
 
 #pragma glslify: import('./chunks/common.glsl')
+#pragma glslify: import('./chunks/light-frag-params.glsl')
+
 #pragma glslify: readFromTexture = require(./utils/read-from-texture.glsl, intMod=intMod, intDiv=intDiv, foo=foo) // foo=foo is a workaround for a bug in glslify
 #pragma glslify: encodeFloatRGB = require(./utils/encode-float-rgb.glsl)
 #pragma glslify: decodeFloatRGB = require(./utils/decode-float-rgb.glsl)
 #pragma glslify: texture3dFrom2dNearest = require(./utils/texture3d-from-2d-nearest.glsl, intMod=intMod, intDiv=intDiv, foo=foo) // foo=foo is a workaround for a bug in glslify
 #pragma glslify: texture3dFrom2dLinear = require(./utils/texture3d-from-2d-linear.glsl, intMod=intMod, intDiv=intDiv, foo=foo) // foo=foo is a workaround for a bug in glslify
 
-// uniform vec3 uLightPosition;
-uniform vec3 uLightColor;
-uniform vec3 uLightAmbient;
-uniform mat4 uView;
-
-#pragma glslify: attenuation = require(./utils/attenuation.glsl)
-#pragma glslify: calculateSpecular = require(./utils/phong-specular.glsl)
-#pragma glslify: calculateDiffuse = require(./utils/oren-nayar-diffuse.glsl)
-
-const float specularScale = 0.15;
-const float shininess = 200.0;
-const float roughness = 100.0;
-const float albedo = 0.95;
-
 #if defined(dGridTexType_2d)
     vec4 textureVal(vec3 pos) {
         return texture3dFrom2dLinear(tGridTex, pos, uGridDim, uGridTexDim.xy);
@@ -160,29 +148,16 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 viewDir) {
                         color = readFromTexture(tColor, instance * float(uGroupCount) + group, uColorTexDim).rgb;
                     #endif
 
-                    vec3 L = normalize(viewDir); // light direction
-                    vec3 V = normalize(viewDir); // eye direction
-                    vec3 N = normalize(gradient); // surface normal
+                    vec3 normal = normalize(gradient);
+                    vec3 vViewPosition = normalize(viewDir);
+                    vec4 material = vec4(color, uAlpha);
+                    #pragma glslify: import('./chunks/apply-light-color.glsl')
 
-                    // compute our diffuse & specular terms
-                    float specular = calculateSpecular(L, V, N, shininess) * specularScale;
-                    vec3 diffuse = uLightColor * calculateDiffuse(L, V, N, roughness, albedo);
-                    vec3 ambient = uLightAmbient;
+                    float vMarker = readFromTexture(tMarker, instance * float(uGroupCount) + group, uMarkerTexDim).a;
+                    #pragma glslify: import('./chunks/apply-marker-color.glsl')
 
-                    // add the lighting
-                    vec3 finalColor = color.rgb * (diffuse + ambient) + specular;
-
-                    src.rgb = finalColor;
-                    src.a = uAlpha;
-
-                    float marker = readFromTexture(tMarker, instance * float(uGroupCount) + group, uMarkerTexDim).a * 255.0;
-                    if (marker > 0.1) {
-                        if (mod(marker, 2.0) > 0.1) {
-                            src.rgb = mix(uHighlightColor, src.rgb, 0.3);
-                        } else {
-                            src.rgb = mix(uSelectColor, src.rgb, 0.3);
-                        }
-                    }
+                    src.rgb = gl_FragColor.rgb;
+                    src.a = gl_FragColor.a;
 
                     // draw interior darker
                     if( (prevValue - uIsoValue) > 0.0 ) {

src/mol-gl/shader/gaussian-density.frag

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
@@ -8,62 +8,41 @@
 precision highp float;
 
 varying vec3 vPosition;
-varying float vRadius;
+varying float vRadiusSqInv;
 #if defined(dCalcType_groupId)
-    #if defined(dGridTexType_2d)
-        precision mediump sampler2D;
-        uniform sampler2D tMinDistanceTex;
-        uniform vec3 uGridTexDim;
-    #elif defined(dGridTexType_3d)
-        precision highp sampler3D;
-        uniform sampler3D tMinDistanceTex;
-    #endif
+    precision highp sampler2D;
+    uniform sampler2D tMinDistanceTex;
+    uniform vec3 uGridTexDim;
     varying float vGroup;
 #endif
 
 #pragma glslify: import('./chunks/common.glsl')
-#pragma glslify: encodeFloatLog = require(./utils/encode-float-log.glsl)
-#pragma glslify: decodeFloatLog = require(./utils/decode-float-log.glsl)
+// #pragma glslify: encodeFloatLog = require(./utils/encode-float-log.glsl)
+// #pragma glslify: decodeFloatLog = require(./utils/decode-float-log.glsl)
 #pragma glslify: encodeFloatRGB = require(./utils/encode-float-rgb.glsl)
-#pragma glslify: texture3dFrom2dNearest = require(./utils/texture3d-from-2d-nearest.glsl, intMod=intMod, intDiv=intDiv, foo=foo) // foo=foo is a workaround for a bug in glslify
 
-uniform vec3 uBboxSize;
-uniform vec3 uBboxMin;
-uniform vec3 uBboxMax;
 uniform vec3 uGridDim;
+uniform vec2 uGridTexScale;
 uniform float uCurrentSlice;
 uniform float uCurrentX;
 uniform float uCurrentY;
 uniform float uAlpha;
-
-#if defined(dCalcType_groupId)
-    #if defined(dGridTexType_2d)
-        vec4 textureMinDist(vec3 pos) {
-            return texture3dFrom2dNearest(tMinDistanceTex, pos, uGridDim, uGridTexDim.xy);
-        }
-    #elif defined(dGridTexType_3d)
-        vec4 textureMinDist(vec3 pos) {
-            return texture(tMinDistanceTex, pos);
-        }
-    #endif
-#endif
+uniform float uResolution;
 
 void main() {
     vec2 v = gl_FragCoord.xy - vec2(uCurrentX, uCurrentY) - 0.5;
-    vec3 fragPos = vec3(v.x, v.y, uCurrentSlice) / uGridDim;
-    float dist = distance(fragPos * uBboxSize, vPosition * uBboxSize);
+    vec3 fragPos = vec3(v.x, v.y, uCurrentSlice);
+    float dist = distance(fragPos, vPosition) * uResolution;
 
     #if defined(dCalcType_density)
-        float radiusSq = vRadius * vRadius;
-        float density = exp(-uAlpha * ((dist * dist) / radiusSq));
-        gl_FragColor = vec4(density);
+        float density = exp(-uAlpha * ((dist * dist) * vRadiusSqInv));
+        gl_FragColor.a = density;
     #elif defined(dCalcType_minDistance)
-        gl_FragColor.a = 1.0 - encodeFloatLog(dist);
+        gl_FragColor.a = 10000.0 - dist;
+        // gl_FragColor.a = 1.0 - encodeFloatLog(dist);
     #elif defined(dCalcType_groupId)
-        float minDistance = decodeFloatLog(1.0 - textureMinDist(fragPos).a);
-        // TODO verify `length(uBboxSize / uGridDim) * 2.0`
-        //      on some machines `* 2.0` is needed while on others `* 0.5` works
-        if (dist > minDistance + length(uBboxSize / uGridDim) * 0.5)
+        float minDistance = 10000.0 - texture2D(tMinDistanceTex, (gl_FragCoord.xy) / (uGridTexDim.xy / uGridTexScale)).a;
+        if (dist > minDistance + uResolution * 0.05)
             discard;
         gl_FragColor.rgb = encodeFloatRGB(vGroup);
     #endif

src/mol-gl/shader/gaussian-density.vert

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
@@ -11,7 +11,7 @@ attribute vec3 aPosition;
 attribute float aRadius;
 
 varying vec3 vPosition;
-varying float vRadius;
+varying float vRadiusSqInv;
 
 #if defined(dCalcType_groupId)
     attribute float aGroup;
@@ -20,17 +20,15 @@ varying float vRadius;
 
 uniform vec3 uBboxSize;
 uniform vec3 uBboxMin;
-uniform vec3 uBboxMax;
-uniform vec3 uGridDim;
 uniform float uCurrentSlice;
+uniform float uResolution;
 
 void main() {
-    vRadius = aRadius;
+    vRadiusSqInv = 1.0 / (aRadius * aRadius);
     #if defined(dCalcType_groupId)
         vGroup = aGroup;
     #endif
-    float scale = max(uBboxSize.z, max(uBboxSize.x, uBboxSize.y));
-    gl_PointSize = (vRadius / scale) * max(uGridDim.x, uGridDim.y) * 6.0;
-    vPosition = (aPosition - uBboxMin) / uBboxSize;
-    gl_Position = vec4(vPosition * 2.0 - 1.0, 1.0);
+    gl_PointSize = floor(((aRadius * 4.0) / uResolution) + 0.5);
+    vPosition = (aPosition - uBboxMin) / uResolution;
+    gl_Position = vec4(((aPosition - uBboxMin) / uBboxSize) * 2.0 - 1.0, 1.0);
 }

src/mol-gl/shader/histogram-pyramid/reduction.frag

@@ -0,0 +1,22 @@
+precision highp float;
+precision highp sampler2D;
+
+// input texture (previous level used to evaluate the new level)
+uniform sampler2D tPreviousLevel;
+
+// 1/size of the previous level texture.
+uniform float uSize;
+uniform float uTexSize;
+
+void main(void) {
+    float k = 0.5 * uSize;
+    vec2 position = floor((gl_FragCoord.xy / uTexSize) / uSize) * uSize;
+    float a = texture2D(tPreviousLevel, position).r;
+    float b = texture2D(tPreviousLevel, position + vec2(k, 0.)).r;
+    float c = texture2D(tPreviousLevel, position + vec2(0., k)).r;
+    float d = texture2D(tPreviousLevel, position + vec2(k, k)).r;
+    gl_FragColor.a = a;
+    gl_FragColor.b = a + b;
+    gl_FragColor.g = gl_FragColor.b + c;
+    gl_FragColor.r = gl_FragColor.g + d;
+}

src/mol-gl/shader/histogram-pyramid/sum.frag

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+precision highp float;
+precision highp sampler2D;
+
+uniform sampler2D tTexture;
+
+#pragma glslify: encodeFloatRGB = require(../utils/encode-float-rgb.glsl)
+
+void main(void) {
+    gl_FragColor = vec4(encodeFloatRGB(texture2D(tTexture, vec2(0.5)).r), 1.0);
+}

src/mol-gl/shader/lines.vert

@@ -36,6 +36,7 @@ void trimSegment(const in vec4 start, inout vec4 end) {
 }
 
 void main(){
+    #pragma glslify: import('./chunks/assign-group.glsl')
     #pragma glslify: import('./chunks/assign-color-varying.glsl')
     #pragma glslify: import('./chunks/assign-marker-varying.glsl')
     #pragma glslify: import('./chunks/assign-size.glsl')

src/mol-gl/shader/marching-cubes/active-voxels.frag

@@ -0,0 +1,75 @@
+precision highp float;
+precision highp sampler2D;
+
+uniform sampler2D tTriCount;
+uniform sampler2D tVolumeData;
+
+uniform float uIsoValue;
+uniform vec3 uGridDim;
+uniform vec3 uGridTexDim;
+uniform vec2 uScale;
+
+// cube corners
+const vec3 c0 = vec3(0., 0., 0.);
+const vec3 c1 = vec3(1., 0., 0.);
+const vec3 c2 = vec3(1., 1., 0.);
+const vec3 c3 = vec3(0., 1., 0.);
+const vec3 c4 = vec3(0., 0., 1.);
+const vec3 c5 = vec3(1., 0., 1.);
+const vec3 c6 = vec3(1., 1., 1.);
+const vec3 c7 = vec3(0., 1., 1.);
+
+vec3 index3dFrom2d(vec2 coord) {
+    vec2 gridTexPos = coord * uGridTexDim.xy;
+    vec2 columnRow = floor(gridTexPos / uGridDim.xy);
+    vec2 posXY = gridTexPos - columnRow * uGridDim.xy;
+    float posZ = columnRow.y * floor(uGridTexDim.x / uGridDim.x) + columnRow.x;
+    vec3 posXYZ = vec3(posXY, posZ) / uGridDim;
+    return posXYZ;
+}
+
+float intDiv(float a, float b) { return float(int(a) / int(b)); }
+float intMod(float a, float b) { return a - b * float(int(a) / int(b)); }
+
+vec4 texture3dFrom2dNearest(sampler2D tex, vec3 pos, vec3 gridDim, vec2 texDim) {
+    float zSlice = floor(pos.z * gridDim.z + 0.5); // round to nearest z-slice
+    float column = intMod(zSlice * gridDim.x, texDim.x) / gridDim.x;
+    float row = floor(intDiv(zSlice * gridDim.x, texDim.x));
+    vec2 coord = (vec2(column * gridDim.x, row * gridDim.y) + (pos.xy * gridDim.xy)) / (texDim / uScale);
+    // return texture2D(tex, coord + 0.5 / texDim);
+    return texture2D(tex, coord);
+}
+
+vec4 voxel(vec3 pos) {
+    return texture3dFrom2dNearest(tVolumeData, pos, uGridDim, uGridTexDim.xy);
+}
+
+void main(void) {
+    vec2 uv = gl_FragCoord.xy / uGridTexDim.xy;
+    vec3 posXYZ = index3dFrom2d(uv);
+
+    // get MC case as the sum of corners that are below the given iso level
+    float c = step(voxel(posXYZ).a, uIsoValue)
+        + 2. * step(voxel(posXYZ + c1 / uGridDim).a, uIsoValue)
+        + 4. * step(voxel(posXYZ + c2 / uGridDim).a, uIsoValue)
+        + 8. * step(voxel(posXYZ + c3 / uGridDim).a, uIsoValue)
+        + 16. * step(voxel(posXYZ + c4 / uGridDim).a, uIsoValue)
+        + 32. * step(voxel(posXYZ + c5 / uGridDim).a, uIsoValue)
+        + 64. * step(voxel(posXYZ + c6 / uGridDim).a, uIsoValue)
+        + 128. * step(voxel(posXYZ + c7 / uGridDim).a, uIsoValue);
+    c *= step(c, 254.);
+
+    // get total triangles to generate for calculated MC case from triCount texture
+    float totalTrianglesToGenerate = texture2D(tTriCount, vec2(intMod(c, 16.), floor(c / 16.)) / 16.).a;
+    gl_FragColor = vec4(vec3(floor(totalTrianglesToGenerate * 255.0 + 0.5) * 3.0), c);
+
+    // gl_FragColor = vec4(255.0, 0.0, 0.0, voxel(posXYZ + c4 / uGridDim).a * 255.0);
+    // gl_FragColor = vec4(255.0, 0.0, 0.0, voxel(posXYZ).a * 255.0);
+
+    // vec2 uv = vCoordinate;
+    // uv = gl_FragCoord.xy / uGridTexDim.xy;
+
+    // if (uv.y < 0.91) discard;
+    // gl_FragColor = vec4(vCoordinate * 255.0, 0.0, 255.0);
+    // gl_FragColor = vec4(250.0, 0.0, 0.0, 255.0);
+}

src/mol-gl/shader/marching-cubes/isosurface.frag

@@ -0,0 +1,209 @@
+precision highp float;
+precision highp sampler2D;
+
+uniform sampler2D tActiveVoxelsPyramid;
+uniform sampler2D tActiveVoxelsBase;
+uniform sampler2D tVolumeData;
+uniform sampler2D tTriIndices;
+
+uniform float uIsoValue;
+uniform float uLevels;
+uniform float uSize;
+uniform float uCount;
+
+uniform vec3 uGridDim;
+uniform vec3 uGridTexDim;
+uniform mat4 uGridTransform;
+
+// scale to volume data coord
+uniform vec2 uScale;
+
+// varying vec2 vCoordinate;
+
+#pragma glslify: import('../chunks/common.glsl')
+#pragma glslify: decodeFloatRGB = require(../utils/decode-float-rgb.glsl)
+
+// cube corners
+const vec3 c0 = vec3(0., 0., 0.);
+const vec3 c1 = vec3(1., 0., 0.);
+const vec3 c2 = vec3(1., 1., 0.);
+const vec3 c3 = vec3(0., 1., 0.);
+const vec3 c4 = vec3(0., 0., 1.);
+const vec3 c5 = vec3(1., 0., 1.);
+const vec3 c6 = vec3(1., 1., 1.);
+const vec3 c7 = vec3(0., 1., 1.);
+
+const float EPS = 0.00001;
+
+vec3 index3dFrom2d(vec2 coord) {
+    vec2 gridTexPos = coord * uGridTexDim.xy;
+    vec2 columnRow = floor(gridTexPos / uGridDim.xy);
+    vec2 posXY = gridTexPos - columnRow * uGridDim.xy;
+    float posZ = columnRow.y * floor(uGridTexDim.x / uGridDim.x) + columnRow.x;
+    vec3 posXYZ = vec3(posXY, posZ);
+    return posXYZ;
+}
+
+vec4 texture3dFrom2dNearest(sampler2D tex, vec3 pos, vec3 gridDim, vec2 texDim) {
+    float zSlice = floor(pos.z * gridDim.z + 0.5); // round to nearest z-slice
+    float column = intMod(zSlice * gridDim.x, texDim.x) / gridDim.x;
+    float row = floor(intDiv(zSlice * gridDim.x, texDim.x));
+    vec2 coord = (vec2(column * gridDim.x, row * gridDim.y) + (pos.xy * gridDim.xy)) / (texDim / uScale);
+    return texture2D(tex, coord + 0.5 / (texDim / uScale));
+    // return texture2D(tex, coord);
+}
+
+vec4 voxel(vec3 pos) {
+    return texture3dFrom2dNearest(tVolumeData, pos, uGridDim, uGridTexDim.xy);
+}
+
+void main(void) {
+    // get 1D index
+    float vI = dot(floor(uSize * (gl_FragCoord.xy / uSize)), vec2(1.0, uSize));
+
+    // ignore 1D indices outside of the grid
+    if(vI >= uCount) discard;
+
+    float offset = uSize - 2.;
+    float k = 1. / uSize;
+
+    vec2 relativePosition = k * vec2(offset, 0.);
+    vec4 partialSums = texture2D(tActiveVoxelsPyramid, relativePosition);
+    float start = 0.;
+    vec4 starts = vec4(0.);
+    vec4 ends = vec4(0.);
+    float diff = 2.;
+    vec4 m = vec4(0.);
+    vec2 position = vec2(0.);
+    vec4 vI4 = vec4(vI);
+
+    // traverse the different levels of the pyramid
+    for(int i = 1; i < 12; i++) {
+        if(float(i) >= uLevels) break;
+
+        offset -= diff;
+        diff *= 2.;
+        relativePosition = position + k * vec2(offset, 0.);
+
+        ends = partialSums.wzyx + vec4(start);
+        starts = vec4(start, ends.xyz);
+        m = vec4(greaterThanEqual(vI4, starts)) * vec4(lessThan(vI4, ends));
+        relativePosition += m.y * vec2(k, 0.) + m.z * vec2(0., k) + m.w * vec2(k, k);
+
+        start = dot(m, starts);
+        position = 2. * (relativePosition - k * vec2(offset, 0.));
+        partialSums = texture2D(tActiveVoxelsPyramid, relativePosition);
+    }
+
+    ends = partialSums.wzyx + vec4(start);
+    starts = vec4(start, ends.xyz);
+    m = vec4(greaterThanEqual(vI4, starts)) * vec4(lessThan(vI4, ends));
+    position += m.y * vec2(k, 0.) + m.z * vec2(0., k) + m.w * vec2(k, k);
+
+    vec2 coord2d = position / uScale;
+    vec3 coord3d = floor(index3dFrom2d(coord2d) + 0.5);
+
+    float edgeIndex = floor(texture2D(tActiveVoxelsBase, position).a + 0.5);
+
+    // current vertex for the up to 15 MC cases
+    float currentVertex = vI - dot(m, starts);
+
+    // get index into triIndices table
+    float mcIndex = 16. * edgeIndex + currentVertex;
+    vec4 mcData = texture2D(tTriIndices, vec2(intMod(mcIndex, 64.), floor(mcIndex / 64.)) / 64.);
+
+    // bit mask to avoid conditionals (see comment below) for getting MC case corner
+    vec4 m0 = vec4(floor(mcData.a * 255.0 + 0.5));
+
+    // get edge value masks
+    vec4 m1 = vec4(equal(m0, vec4(0., 1., 2., 3.)));
+    vec4 m2 = vec4(equal(m0, vec4(4., 5., 6., 7.)));
+    vec4 m3 = vec4(equal(m0, vec4(8., 9., 10., 11.)));
+
+    // apply bit masks
+    vec3 b0 = coord3d +
+                m1.y * c1 +
+                m1.z * c2 +
+                m1.w * c3 +
+                m2.x * c4 +
+                m2.y * c5 +
+                m2.z * c6 +
+                m2.w * c7 +
+                m3.y * c1 +
+                m3.z * c2 +
+                m3.w * c3;
+    vec3 b1 = coord3d +
+                m1.x * c1 +
+                m1.y * c2 +
+                m1.z * c3 +
+                m2.x * c5 +
+                m2.y * c6 +
+                m2.z * c7 +
+                m2.w * c4 +
+                m3.x * c4 +
+                m3.y * c5 +
+                m3.z * c6 +
+                m3.w * c7;
+
+    // the conditionals that are avoided by above bitmasks
+    // vec3 b0 = coord3d;
+    // vec3 b1 = coord3d;
+    // if (mcIndex == 0.0) {
+    //     b0 += c0; b1 += c1;
+    // } else if (mcIndex == 1.0) {
+    //     b0 += c1; b1 += c2;
+    // } else if (mcIndex == 2.0) {
+    //     b0 += c2; b1 += c3;
+    // } else if (mcIndex == 3.0) {
+    //     b0 += c3; b1 += c0;
+    // } else if (mcIndex == 4.0) {
+    //     b0 += c4; b1 += c5;
+    // } else if (mcIndex == 5.0) {
+    //     b0 += c5; b1 += c6;
+    // } else if (mcIndex == 6.0) {
+    //     b0 += c6; b1 += c7;
+    // } else if (mcIndex == 7.0) {
+    //     b0 += c7; b1 += c4;
+    // } else if (mcIndex == 8.0) {
+    //     b0 += c0; b1 += c4;
+    // } else if (mcIndex == 9.0) {
+    //     b0 += c1; b1 += c5;
+    // } else if (mcIndex == 10.0) {
+    //     b0 += c2; b1 += c6;
+    // } else if (mcIndex == 11.0) {
+    //     b0 += c3; b1 += c7;
+    // }
+    // b0 = floor(b0 + 0.5);
+    // b1 = floor(b1 + 0.5);
+
+    vec4 d0 = voxel(b0 / uGridDim);
+    vec4 d1 = voxel(b1 / uGridDim);
+
+    float v0 = d0.a;
+    float v1 = d1.a;
+
+    float t = (uIsoValue - v0) / (v0 - v1);
+    // t = -0.5;
+    gl_FragData[0].xyz = (uGridTransform * vec4(b0 + t * (b0 - b1), 1.0)).xyz;
+    gl_FragData[0].w = decodeFloatRGB(d0.rgb); // group id
+
+    // normals from gradients
+    vec3 n0 = -normalize(vec3(
+        voxel((b0 - c1) / uGridDim).a - voxel((b0 + c1) / uGridDim).a,
+        voxel((b0 - c3) / uGridDim).a - voxel((b0 + c3) / uGridDim).a,
+        voxel((b0 - c4) / uGridDim).a - voxel((b0 + c4) / uGridDim).a
+    ));
+    vec3 n1 = -normalize(vec3(
+        voxel((b1 - c1) / uGridDim).a - voxel((b1 + c1) / uGridDim).a,
+        voxel((b1 - c3) / uGridDim).a - voxel((b1 + c3) / uGridDim).a,
+        voxel((b1 - c4) / uGridDim).a - voxel((b1 + c4) / uGridDim).a
+    ));
+    gl_FragData[1].xyz = -vec3(
+        n0.x + t * (n0.x - n1.x),
+        n0.y + t * (n0.y - n1.y),
+        n0.z + t * (n0.z - n1.z)
+    );
+
+    mat3 normalMatrix = transpose(inverse(mat3(uGridTransform)));
+    gl_FragData[1].xyz = normalMatrix * gl_FragData[1].xyz;
+}

src/mol-gl/shader/mesh.frag

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -9,24 +9,8 @@ precision highp int;
 
 #pragma glslify: import('./chunks/common-frag-params.glsl')
 #pragma glslify: import('./chunks/color-frag-params.glsl')
-
-// uniform vec3 uLightPosition;
-uniform vec3 uLightColor;
-uniform vec3 uLightAmbient;
-uniform mat4 uView;
-
-#if !defined(dFlatShaded) || !defined(enabledStandardDerivatives)
-    varying vec3 vNormal;
-#endif
-
-#pragma glslify: attenuation = require(./utils/attenuation.glsl)
-#pragma glslify: calculateSpecular = require(./utils/phong-specular.glsl)
-#pragma glslify: calculateDiffuse = require(./utils/oren-nayar-diffuse.glsl)
-
-const float specularScale = 0.15;
-const float shininess = 200.0;
-const float roughness = 100.0;
-const float albedo = 0.95;
+#pragma glslify: import('./chunks/light-frag-params.glsl')
+#pragma glslify: import('./chunks/normal-frag-params.glsl')
 
 void main() {
     // material color
@@ -37,40 +21,8 @@ void main() {
             discard; // ignore so the element below can be picked
         gl_FragColor = material;
     #else
-        // determine surface to light direction
-        // vec4 viewLightPosition = view * vec4(lightPosition, 1.0);
-        // vec3 lightVector = viewLightPosition.xyz - vViewPosition;
-        vec3 lightVector = vViewPosition;
-
-        vec3 L = normalize(lightVector); // light direction
-        vec3 V = normalize(vViewPosition); // eye direction
-
-        // surface normal
-        #if defined(dFlatShaded) && defined(enabledStandardDerivatives)
-            vec3 fdx = dFdx(vViewPosition);
-            vec3 fdy = dFdy(vViewPosition);
-            vec3 N = -normalize(cross(fdx, fdy));
-        #else
-            vec3 N = -normalize(vNormal);
-            #ifdef dDoubleSided
-                N = N * (float(gl_FrontFacing) * 2.0 - 1.0);
-            #endif
-        #endif
-
-        // compute our diffuse & specular terms
-        float specular = calculateSpecular(L, V, N, shininess) * specularScale;
-        vec3 diffuse = uLightColor * calculateDiffuse(L, V, N, roughness, albedo);
-        vec3 ambient = uLightAmbient;
-
-        // add the lighting
-        vec3 finalColor = material.rgb * (diffuse + ambient) + specular;
-
-        // gl_FragColor.rgb = N;
-        // gl_FragColor.a = 1.0;
-        // gl_FragColor.rgb = vec3(1.0, 0.0, 0.0);
-        gl_FragColor.rgb = finalColor;
-        gl_FragColor.a = material.a;
-
+        #pragma glslify: import('./chunks/assign-normal.glsl')
+        #pragma glslify: import('./chunks/apply-light-color.glsl')
         #pragma glslify: import('./chunks/apply-marker-color.glsl')
         #pragma glslify: import('./chunks/apply-fog.glsl')
     #endif

src/mol-gl/shader/mesh.vert

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -10,24 +10,39 @@ precision highp int;
 #pragma glslify: import('./chunks/common-vert-params.glsl')
 #pragma glslify: import('./chunks/color-vert-params.glsl')
 
-attribute vec3 aPosition;
+#ifdef dGeoTexture
+    uniform vec2 uGeoTexDim;
+    uniform sampler2D tPositionGroup;
+#else
+    attribute vec3 aPosition;
+#endif
 attribute mat4 aTransform;
 attribute float aInstance;
 attribute float aGroup;
 
 #ifndef dFlatShaded
-    attribute vec3 aNormal;
+    #ifdef dGeoTexture
+        uniform sampler2D tNormal;
+    #else
+        attribute vec3 aNormal;
+    #endif
     varying vec3 vNormal;
 #endif
 
 void main(){
+    #pragma glslify: import('./chunks/assign-group.glsl')
     #pragma glslify: import('./chunks/assign-color-varying.glsl')
     #pragma glslify: import('./chunks/assign-marker-varying.glsl')
     #pragma glslify: import('./chunks/assign-position.glsl')
 
     #ifndef dFlatShaded
+        #ifdef dGeoTexture
+            vec3 normal = readFromTexture(tNormal, aGroup, uGeoTexDim).xyz;
+        #else
+            vec3 normal = aNormal;
+        #endif
         mat3 normalMatrix = transpose(inverse(mat3(modelView)));
-        vec3 transformedNormal = normalize(normalMatrix * normalize(aNormal));
+        vec3 transformedNormal = normalize(normalMatrix * normalize(normal));
         #if defined(dFlipSided) && !defined(dDoubleSided) // TODO checking dDoubleSided should not be required, ASR
             transformedNormal = -transformedNormal;
         #endif

src/mol-gl/shader/points.vert

@@ -20,6 +20,7 @@ attribute float aInstance;
 attribute float aGroup;
 
 void main(){
+    #pragma glslify: import('./chunks/assign-group.glsl')
     #pragma glslify: import('./chunks/assign-color-varying.glsl')
     #pragma glslify: import('./chunks/assign-marker-varying.glsl')
     #pragma glslify: import('./chunks/assign-position.glsl')

src/mol-gl/shader/quad.vert

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+precision highp float;
+
+attribute vec2 aPosition;
+uniform vec2 uQuadScale;
+
+void main(void) {
+    vec2 position = aPosition * uQuadScale - vec2(1.0, 1.0) + uQuadScale;
+    gl_Position = vec4(position, 0.0, 1.0);
+}

src/mol-gl/shader/spheres.frag

@@ -9,11 +9,7 @@ precision highp int;
 
 #pragma glslify: import('./chunks/common-frag-params.glsl')
 #pragma glslify: import('./chunks/color-frag-params.glsl')
-
-// uniform vec3 uLightPosition;
-uniform vec3 uLightColor;
-uniform vec3 uLightAmbient;
-uniform mat4 uView;
+#pragma glslify: import('./chunks/light-frag-params.glsl')
 
 uniform mat4 uProjection;
 // uniform vec3 interiorColor;
@@ -30,27 +26,18 @@ varying float vRadiusSq;
 varying vec3 vPoint;
 varying vec3 vPointViewPosition;
 
-#pragma glslify: attenuation = require(./utils/attenuation.glsl)
-#pragma glslify: calculateSpecular = require(./utils/phong-specular.glsl)
-#pragma glslify: calculateDiffuse = require(./utils/oren-nayar-diffuse.glsl)
-
-const float specularScale = 0.15;
-const float shininess = 200.0;
-const float roughness = 100.0;
-const float albedo = 0.95;
-
 bool flag2 = false;
 bool interior = false;
 vec3 cameraPos;
 vec3 cameraNormal;
 
 // Calculate depth based on the given camera position.
-float calcDepth(in vec3 cameraPos){
+float calcDepth(const in vec3 cameraPos){
     vec2 clipZW = cameraPos.z * uProjection[2].zw + uProjection[3].zw;
     return 0.5 + 0.5 * clipZW.x / clipZW.y;
 }
 
-float calcClip(in vec3 cameraPos) {
+float calcClip(const in vec3 cameraPos) {
     return dot(vec4(cameraPos, 1.0), vec4(0.0, 0.0, 1.0, clipNear - 0.5));
 }
 
@@ -143,36 +130,9 @@ void main(void){
             discard; // ignore so the element below can be picked
         gl_FragColor = material;
     #else
-
-        vec3 vNormal = cameraNormal;
+        vec3 normal = cameraNormal;
         vec3 vViewPosition = -cameraPos;
-
-        // determine surface to light direction
-        // vec4 viewLightPosition = view * vec4(lightPosition, 1.0);
-        // vec3 lightVector = viewLightPosition.xyz - vViewPosition;
-        vec3 lightVector = vViewPosition;
-
-        vec3 L = normalize(lightVector); // light direction
-        vec3 V = normalize(vViewPosition); // eye direction
-
-        vec3 N = normalize(vNormal);
-        #ifdef dDoubleSided
-            N = N * (float(gl_FrontFacing) * 2.0 - 1.0);
-        #endif
-
-        // compute our diffuse & specular terms
-        float specular = calculateSpecular(L, V, N, shininess) * specularScale;
-        vec3 diffuse = uLightColor * calculateDiffuse(L, V, N, roughness, albedo);
-        vec3 ambient = uLightAmbient;
-
-        // add the lighting
-        vec3 finalColor = material.rgb * (diffuse + ambient) + specular;
-
-        // gl_FragColor.rgb = N;
-        // gl_FragColor.a = 1.0;
-        // gl_FragColor.rgb = vec3(1.0, 0.0, 0.0);
-        gl_FragColor.rgb = finalColor;
-        gl_FragColor.a = material.a;
+        #pragma glslify: import('./chunks/apply-light-color.glsl')
 
         if(interior){
             #ifdef USE_INTERIOR_COLOR

src/mol-gl/shader/spheres.vert

@@ -86,6 +86,7 @@ void quadraticProjection(const in float radius, const in vec3 position){
 
 
 void main(void){
+    #pragma glslify: import('./chunks/assign-group.glsl')
     #pragma glslify: import('./chunks/assign-color-varying.glsl')
     #pragma glslify: import('./chunks/assign-marker-varying.glsl')
     #pragma glslify: import('./chunks/assign-size.glsl')

src/mol-gl/shader/text.vert

@@ -34,6 +34,7 @@ varying vec2 vTexCoord;
 #pragma glslify: matrixScale = require(./utils/matrix-scale.glsl)
 
 void main(void){
+    #pragma glslify: import('./chunks/assign-group.glsl')
     #pragma glslify: import('./chunks/assign-color-varying.glsl')
     #pragma glslify: import('./chunks/assign-marker-varying.glsl')
     #pragma glslify: import('./chunks/assign-size.glsl')

src/mol-gl/shader/utils/attenuation.glsl

@@ -1,14 +0,0 @@
-// by Tom Madams
-// Simple:
-// https://imdoingitwrong.wordpress.com/2011/01/31/light-attenuation/
-//
-// Improved
-// https://imdoingitwrong.wordpress.com/2011/02/10/improved-light-attenuation/
-float attenuation(const in float r, const in float f, const in float d) {
-    float denom = d / r + 1.0;
-    float attenuation = 1.0 / (denom*denom);
-    float t = (attenuation - f) / (1.0 - f);
-    return max(t, 0.0);
-}
-
-#pragma glslify: export(attenuation)

src/mol-gl/shader/utils/oren-nayar-diffuse.glsl

@@ -1,21 +0,0 @@
-// (c) 2014 Mikola Lysenko. MIT License
-// https://github.com/glslify/glsl-diffuse-oren-nayar
-
-#define PI 3.14159265
-
-float orenNayarDiffuse(const in vec3 lightDirection, const in vec3 viewDirection, const in vec3 surfaceNormal, const in float roughness, const in float albedo) {
-    float LdotV = dot(lightDirection, viewDirection);
-    float NdotL = dot(lightDirection, surfaceNormal);
-    float NdotV = dot(surfaceNormal, viewDirection);
-
-    float s = LdotV - NdotL * NdotV;
-    float t = mix(1.0, max(NdotL, NdotV), step(0.0, s));
-
-    float sigma2 = roughness * roughness;
-    float A = 1.0 + sigma2 * (albedo / (sigma2 + 0.13) + 0.5 / (sigma2 + 0.33));
-    float B = 0.45 * sigma2 / (sigma2 + 0.09);
-
-    return albedo * max(0.0, NdotL) * (A + B * s / t) / PI;
-}
-
-#pragma glslify: export(orenNayarDiffuse)

src/mol-gl/shader/utils/phong-specular.glsl

@@ -1,10 +0,0 @@
-// (c) 2014 Mikola Lysenko. MIT License
-// https://github.com/glslify/glsl-specular-phong
-
-float phongSpecular(const in vec3 lightDirection, const in vec3 viewDirection, const in vec3 surfaceNormal, const in float shininess) {
-    //Calculate Phong power
-    vec3 R = -reflect(lightDirection, surfaceNormal);
-    return pow(max(0.0, dot(viewDirection, R)), shininess);
-}
-
-#pragma glslify: export(phongSpecular)

src/mol-gl/webgl/buffer.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -9,12 +9,13 @@ import { ValueCell } from 'mol-util';
 import { RenderableSchema } from '../renderable/schema';
 import { idFactory } from 'mol-util/id-factory';
 import { ValueOf } from 'mol-util/type-helpers';
+import { GLRenderingContext } from './compat';
 
 const getNextBufferId = idFactory()
 
 export type UsageHint = 'static' | 'dynamic' | 'stream'
 export type DataType = 'uint8' | 'int8' | 'uint16' | 'int16' | 'uint32' | 'int32' | 'float32'
-export type BufferType = 'attribute' | 'elements'
+export type BufferType = 'attribute' | 'elements' | 'uniform'
 
 export type DataTypeArrayType = {
     'uint8': Uint8Array
@@ -28,8 +29,6 @@ export type DataTypeArrayType = {
 export type ArrayType = ValueOf<DataTypeArrayType>
 export type ArrayKind = keyof DataTypeArrayType
 
-export type BufferItemSize = 1 | 2 | 3 | 4 | 16
-
 export function getUsageHint(ctx: WebGLContext, usageHint: UsageHint) {
     const { gl } = ctx
     switch (usageHint) {
@@ -78,6 +77,7 @@ export function getBufferType(ctx: WebGLContext, bufferType: BufferType) {
     switch (bufferType) {
         case 'attribute': return gl.ARRAY_BUFFER
         case 'elements': return gl.ELEMENT_ARRAY_BUFFER
+        case 'uniform': return (gl as WebGL2RenderingContext).UNIFORM_BUFFER
     }
 }
 
@@ -90,8 +90,6 @@ export interface Buffer {
     readonly _dataType: number
     readonly _bpe: number
 
-    readonly itemSize: number
-    readonly itemCount: number
     readonly length: number
 
     updateData: (array: ArrayType) => void
@@ -99,8 +97,8 @@ export interface Buffer {
     destroy: () => void
 }
 
-export function createBuffer(ctx: WebGLContext, array: ArrayType, itemSize: BufferItemSize, usageHint: UsageHint, bufferType: BufferType): Buffer {
-    const { gl } = ctx
+export function createBuffer(ctx: WebGLContext, array: ArrayType, usageHint: UsageHint, bufferType: BufferType): Buffer {
+    const { gl, stats } = ctx
     const _buffer = gl.createBuffer()
     if (_buffer === null) {
         throw new Error('Could not create WebGL buffer')
@@ -111,16 +109,15 @@ export function createBuffer(ctx: WebGLContext, array: ArrayType, itemSize: Buff
     const _dataType = dataTypeFromArray(ctx, array)
     const _bpe = array.BYTES_PER_ELEMENT
     const _length = array.length
-    const _itemCount = Math.floor(_length / itemSize)
 
     function updateData(array: ArrayType) {
         gl.bindBuffer(_bufferType, _buffer);
-        (gl as WebGLRenderingContext).bufferData(_bufferType, array, _usageHint) // TODO remove cast when webgl2 types are fixed
+        gl.bufferData(_bufferType, array, _usageHint)
     }
     updateData(array)
 
     let destroyed = false
-    ctx.bufferCount += 1
+    stats.bufferCount += 1
 
     return {
         id: getNextBufferId(),
@@ -131,40 +128,66 @@ export function createBuffer(ctx: WebGLContext, array: ArrayType, itemSize: Buff
         _dataType,
         _bpe,
 
-        get itemSize () { return itemSize },
-        get itemCount () { return _itemCount },
-        get length () { return _length },
+        length: _length,
 
         updateData,
         updateSubData: (array: ArrayType, offset: number, count: number) => {
             gl.bindBuffer(_bufferType, _buffer);
-            (gl as WebGLRenderingContext).bufferSubData(_bufferType, offset * _bpe, array.subarray(offset, offset + count)) // TODO remove cast when webgl2 types are fixed
+            gl.bufferSubData(_bufferType, offset * _bpe, array.subarray(offset, offset + count))
         },
 
         destroy: () => {
             if (destroyed) return
             gl.deleteBuffer(_buffer)
             destroyed = true
-            ctx.bufferCount -= 1
+            stats.bufferCount -= 1
         }
     }
 }
 
+//
+
+export type AttributeItemSize = 1 | 2 | 3 | 4 | 16
+export type AttributeKind = 'float32' | 'int32'
+
+export function getAttribType(gl: GLRenderingContext, kind: AttributeKind, itemSize: AttributeItemSize) {
+    switch (kind) {
+        case 'int32':
+            switch (itemSize) {
+                case 1: return gl.INT
+                case 2: return gl.INT_VEC2
+                case 3: return gl.INT_VEC3
+                case 4: return gl.INT_VEC4
+            }
+            break
+        case 'float32':
+            switch (itemSize) {
+                case 1: return gl.FLOAT
+                case 2: return gl.FLOAT_VEC2
+                case 3: return gl.FLOAT_VEC3
+                case 4: return gl.FLOAT_VEC4
+                case 16: return gl.FLOAT_MAT4
+            }
+            break
+    }
+    throw new Error(`unknown attribute type for kind '${kind}' and itemSize '${itemSize}'`)
+}
+
 export type AttributeDefs = {
-    [k: string]: { kind: ArrayKind, itemSize: BufferItemSize, divisor: number }
+    [k: string]: { kind: AttributeKind, itemSize: AttributeItemSize, divisor: number }
 }
 export type AttributeValues = { [k: string]: ValueCell<ArrayType> }
-export type AttributeBuffers = { [k: string]: AttributeBuffer }
+export type AttributeBuffers = [string, AttributeBuffer][]
 
 export interface AttributeBuffer extends Buffer {
     bind: (location: number) => void
 }
 
-export function createAttributeBuffer<T extends ArrayType, S extends BufferItemSize>(ctx: WebGLContext, array: ArrayType, itemSize: S, divisor: number, usageHint: UsageHint = 'dynamic'): AttributeBuffer {
+export function createAttributeBuffer<T extends ArrayType, S extends AttributeItemSize>(ctx: WebGLContext, array: T, itemSize: S, divisor: number, usageHint: UsageHint = 'dynamic'): AttributeBuffer {
     const { gl } = ctx
     const { instancedArrays } = ctx.extensions
 
-    const buffer = createBuffer(ctx, array, itemSize, usageHint, 'attribute')
+    const buffer = createBuffer(ctx, array, usageHint, 'attribute')
     const { _buffer, _bufferType, _dataType, _bpe } = buffer
 
     return {
@@ -187,16 +210,18 @@ export function createAttributeBuffer<T extends ArrayType, S extends BufferItemS
 }
 
 export function createAttributeBuffers(ctx: WebGLContext, schema: RenderableSchema, values: AttributeValues) {
-    const buffers: AttributeBuffers = {}
+    const buffers: AttributeBuffers = []
     Object.keys(schema).forEach(k => {
         const spec = schema[k]
         if (spec.type === 'attribute') {
-            buffers[k] = createAttributeBuffer(ctx, values[k].ref.value, spec.itemSize, spec.divisor)
+            buffers[buffers.length] = [k, createAttributeBuffer(ctx, values[k].ref.value, spec.itemSize, spec.divisor)]
         }
     })
-    return buffers as AttributeBuffers
+    return buffers
 }
 
+//
+
 export type ElementsType = Uint16Array | Uint32Array
 export type ElementsKind = 'uint16' | 'uint32'
 
@@ -206,7 +231,7 @@ export interface ElementsBuffer extends Buffer {
 
 export function createElementsBuffer(ctx: WebGLContext, array: ElementsType, usageHint: UsageHint = 'static'): ElementsBuffer {
     const { gl } = ctx
-    const buffer = createBuffer(ctx, array, 1, usageHint, 'elements')
+    const buffer = createBuffer(ctx, array, usageHint, 'elements')
     const { _buffer } = buffer
 
     return {

src/mol-gl/webgl/compat.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -50,9 +50,7 @@ export function getStandardDerivatives(gl: GLRenderingContext): COMPAT_standard_
         return { FRAGMENT_SHADER_DERIVATIVE_HINT: gl.FRAGMENT_SHADER_DERIVATIVE_HINT }
     } else {
         const ext = gl.getExtension('OES_standard_derivatives')
-        if (ext === null) {
-            throw new Error('Could not get "OES_standard_derivatives" extension')
-        }
+        if (ext === null) return null
         return { FRAGMENT_SHADER_DERIVATIVE_HINT: ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES }
     }
 }
@@ -79,7 +77,7 @@ export function getVertexArrayObject(gl: GLRenderingContext): COMPAT_vertex_arra
             bindVertexArray: gl.bindVertexArray.bind(gl),
             createVertexArray: gl.createVertexArray.bind(gl),
             deleteVertexArray: gl.deleteVertexArray.bind(gl),
-            isVertexArray: gl.isVertexArray.bind(gl) as (value: any) => value is WebGLVertexArrayObject // TODO change when webgl2 types are fixed
+            isVertexArray: gl.isVertexArray.bind(gl)
         }
     } else {
         const ext = gl.getExtension('OES_vertex_array_object')
@@ -128,4 +126,98 @@ export interface COMPAT_frag_depth {
 
 export function getFragDepth(gl: GLRenderingContext): COMPAT_frag_depth | null {
     return isWebGL2(gl) ? {} : gl.getExtension('EXT_frag_depth')
+}
+
+export interface COMPAT_color_buffer_float {
+    readonly RGBA32F: number;
+}
+
+export function getColorBufferFloat(gl: GLRenderingContext): COMPAT_color_buffer_float | null {
+    if (isWebGL2(gl)) {
+        if (gl.getExtension('EXT_color_buffer_float') === null) return null
+        return { RGBA32F: gl.RGBA32F }
+    } else {
+        const ext = gl.getExtension('WEBGL_color_buffer_float')
+        if (ext === null) return null
+        return { RGBA32F: ext.RGBA32F_EXT }
+    }
+}
+
+export interface COMPAT_draw_buffers {
+    drawBuffers(buffers: number[]): void;
+    readonly COLOR_ATTACHMENT0: number;
+    readonly COLOR_ATTACHMENT1: number;
+    readonly COLOR_ATTACHMENT2: number;
+    readonly COLOR_ATTACHMENT3: number;
+    readonly COLOR_ATTACHMENT4: number;
+    readonly COLOR_ATTACHMENT5: number;
+    readonly COLOR_ATTACHMENT6: number;
+    readonly COLOR_ATTACHMENT7: number;
+    readonly DRAW_BUFFER0: number;
+    readonly DRAW_BUFFER1: number;
+    readonly DRAW_BUFFER2: number;
+    readonly DRAW_BUFFER3: number;
+    readonly DRAW_BUFFER4: number;
+    readonly DRAW_BUFFER5: number;
+    readonly DRAW_BUFFER6: number;
+    readonly DRAW_BUFFER7: number;
+    readonly MAX_COLOR_ATTACHMENTS: number;
+    readonly MAX_DRAW_BUFFERS: number;
+}
+
+export function getDrawBuffers(gl: GLRenderingContext): COMPAT_draw_buffers | null {
+    if (isWebGL2(gl)) {
+        return {
+            drawBuffers: gl.drawBuffers.bind(gl),
+            COLOR_ATTACHMENT0: gl.COLOR_ATTACHMENT0,
+            COLOR_ATTACHMENT1: gl.COLOR_ATTACHMENT1,
+            COLOR_ATTACHMENT2: gl.COLOR_ATTACHMENT2,
+            COLOR_ATTACHMENT3: gl.COLOR_ATTACHMENT3,
+            COLOR_ATTACHMENT4: gl.COLOR_ATTACHMENT4,
+            COLOR_ATTACHMENT5: gl.COLOR_ATTACHMENT5,
+            COLOR_ATTACHMENT6: gl.COLOR_ATTACHMENT6,
+            COLOR_ATTACHMENT7: gl.COLOR_ATTACHMENT7,
+            DRAW_BUFFER0: gl.DRAW_BUFFER0,
+            DRAW_BUFFER1: gl.DRAW_BUFFER1,
+            DRAW_BUFFER2: gl.DRAW_BUFFER2,
+            DRAW_BUFFER3: gl.DRAW_BUFFER3,
+            DRAW_BUFFER4: gl.DRAW_BUFFER4,
+            DRAW_BUFFER5: gl.DRAW_BUFFER5,
+            DRAW_BUFFER6: gl.DRAW_BUFFER6,
+            DRAW_BUFFER7: gl.DRAW_BUFFER7,
+            MAX_COLOR_ATTACHMENTS: gl.MAX_COLOR_ATTACHMENTS,
+            MAX_DRAW_BUFFERS: gl.MAX_DRAW_BUFFERS,
+        }
+    } else {
+        const ext = gl.getExtension('WEBGL_draw_buffers')
+        if (ext === null) return null
+        return {
+            drawBuffers: ext.drawBuffersWEBGL.bind(ext),
+            COLOR_ATTACHMENT0: ext.COLOR_ATTACHMENT0_WEBGL,
+            COLOR_ATTACHMENT1: ext.COLOR_ATTACHMENT1_WEBGL,
+            COLOR_ATTACHMENT2: ext.COLOR_ATTACHMENT2_WEBGL,
+            COLOR_ATTACHMENT3: ext.COLOR_ATTACHMENT3_WEBGL,
+            COLOR_ATTACHMENT4: ext.COLOR_ATTACHMENT4_WEBGL,
+            COLOR_ATTACHMENT5: ext.COLOR_ATTACHMENT5_WEBGL,
+            COLOR_ATTACHMENT6: ext.COLOR_ATTACHMENT6_WEBGL,
+            COLOR_ATTACHMENT7: ext.COLOR_ATTACHMENT7_WEBGL,
+            DRAW_BUFFER0: ext.DRAW_BUFFER0_WEBGL,
+            DRAW_BUFFER1: ext.DRAW_BUFFER1_WEBGL,
+            DRAW_BUFFER2: ext.DRAW_BUFFER2_WEBGL,
+            DRAW_BUFFER3: ext.DRAW_BUFFER3_WEBGL,
+            DRAW_BUFFER4: ext.DRAW_BUFFER4_WEBGL,
+            DRAW_BUFFER5: ext.DRAW_BUFFER5_WEBGL,
+            DRAW_BUFFER6: ext.DRAW_BUFFER6_WEBGL,
+            DRAW_BUFFER7: ext.DRAW_BUFFER7_WEBGL,
+            MAX_COLOR_ATTACHMENTS: ext.MAX_COLOR_ATTACHMENTS_WEBGL,
+            MAX_DRAW_BUFFERS: ext.MAX_DRAW_BUFFERS_WEBGL,
+        }
+    }
+}
+
+export interface COMPAT_shader_texture_lod {
+}
+
+export function getShaderTextureLod(gl: GLRenderingContext): COMPAT_shader_texture_lod | null {
+    return isWebGL2(gl) ? {} : gl.getExtension('EXT_shader_texture_lod')
 }

src/mol-gl/webgl/context.ts

@@ -1,14 +1,15 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { createProgramCache, ProgramCache } from './program'
 import { createShaderCache, ShaderCache } from './shader'
-import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, getVertexArrayObject, isWebGL2, COMPAT_element_index_uint, getElementIndexUint, COMPAT_texture_float, getTextureFloat, COMPAT_texture_float_linear, getTextureFloatLinear, COMPAT_blend_minmax, getBlendMinMax, getFragDepth, COMPAT_frag_depth } from './compat';
-import { createFramebufferCache, FramebufferCache } from './framebuffer';
+import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, getVertexArrayObject, isWebGL2, COMPAT_element_index_uint, getElementIndexUint, COMPAT_texture_float, getTextureFloat, COMPAT_texture_float_linear, getTextureFloatLinear, COMPAT_blend_minmax, getBlendMinMax, getFragDepth, COMPAT_frag_depth, COMPAT_color_buffer_float, getColorBufferFloat, COMPAT_draw_buffers, getDrawBuffers, getShaderTextureLod, COMPAT_shader_texture_lod } from './compat';
+import { createFramebufferCache, FramebufferCache, checkFramebufferStatus } from './framebuffer';
 import { Scheduler } from 'mol-task';
+import { isDebugMode } from 'mol-util/debug';
 
 export function getGLContext(canvas: HTMLCanvasElement, contextAttributes?: WebGLContextAttributes): GLRenderingContext | null {
     function getContext(contextId: 'webgl' | 'experimental-webgl' | 'webgl2') {
@@ -25,6 +26,24 @@ function getPixelRatio() {
     return (typeof window !== 'undefined') ? window.devicePixelRatio : 1
 }
 
+function getErrorDescription(gl: GLRenderingContext, error: number) {
+    switch (error) {
+        case gl.NO_ERROR: return 'no error'
+        case gl.INVALID_ENUM: return 'invalid enum'
+        case gl.INVALID_VALUE: return 'invalid value'
+        case gl.INVALID_OPERATION: return 'invalid operation'
+        case gl.INVALID_FRAMEBUFFER_OPERATION: return 'invalid framebuffer operation'
+        case gl.OUT_OF_MEMORY: return 'out of memory'
+        case gl.CONTEXT_LOST_WEBGL: return 'context lost'
+    }
+    return 'unknown error'
+}
+
+export function checkError(gl: GLRenderingContext) {
+    const error = gl.getError()
+    if (error) throw new Error(`WebGL error: '${getErrorDescription(gl, error)}'`)
+}
+
 function unbindResources (gl: GLRenderingContext) {
     // bind null to all texture units
     const maxTextureImageUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)
@@ -32,6 +51,10 @@ function unbindResources (gl: GLRenderingContext) {
         gl.activeTexture(gl.TEXTURE0 + i)
         gl.bindTexture(gl.TEXTURE_2D, null)
         gl.bindTexture(gl.TEXTURE_CUBE_MAP, null)
+        if (isWebGL2(gl)) {
+            gl.bindTexture(gl.TEXTURE_2D_ARRAY, null)
+            gl.bindTexture(gl.TEXTURE_3D, null)
+        }
     }
 
     // assign the smallest possible buffer to all attributes
@@ -93,9 +116,20 @@ function waitForGpuCommandsComplete(gl: GLRenderingContext): Promise<void> {
 }
 
 function waitForGpuCommandsCompleteSync(gl: GLRenderingContext): void {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null)
     gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, tmpPixel)
 }
 
+function readPixels(gl: GLRenderingContext, x: number, y: number, width: number, height: number, buffer: Uint8Array | Float32Array) {
+    if (isDebugMode) checkFramebufferStatus(gl)
+    if (buffer instanceof Uint8Array) {
+        gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buffer)
+    } else {
+        gl.readPixels(x, y, width, height, gl.RGBA, gl.FLOAT, buffer)
+    }
+    if (isDebugMode) checkError(gl)
+}
+
 export function createImageData(buffer: ArrayLike<number>, width: number, height: number) {
     const w = width * 4
     const h = height
@@ -113,7 +147,7 @@ export function createImageData(buffer: ArrayLike<number>, width: number, height
 
 //
 
-type Extensions = {
+export type WebGLExtensions = {
     instancedArrays: COMPAT_instanced_arrays
     standardDerivatives: COMPAT_standard_derivatives
     blendMinMax: COMPAT_blend_minmax
@@ -122,43 +156,12 @@ type Extensions = {
     elementIndexUint: COMPAT_element_index_uint | null
     vertexArrayObject: COMPAT_vertex_array_object | null
     fragDepth: COMPAT_frag_depth | null
+    colorBufferFloat: COMPAT_color_buffer_float | null
+    drawBuffers: COMPAT_draw_buffers | null
+    shaderTextureLod: COMPAT_shader_texture_lod | null
 }
 
-/** A WebGL context object, including the rendering context, resource caches and counts */
-export interface WebGLContext {
-    readonly gl: GLRenderingContext
-    readonly isWebGL2: boolean
-    readonly extensions: Extensions
-    readonly pixelRatio: number
-
-    readonly shaderCache: ShaderCache
-    readonly programCache: ProgramCache
-    readonly framebufferCache: FramebufferCache
-
-    currentProgramId: number
-
-    bufferCount: number
-    framebufferCount: number
-    renderbufferCount: number
-    textureCount: number
-    vaoCount: number
-
-    drawCount: number
-    instanceCount: number
-    instancedDrawCount: number
-
-    readonly maxTextureSize: number
-    readonly maxDrawBuffers: number
-
-    unbindFramebuffer: () => void
-    readPixels: (x: number, y: number, width: number, height: number, buffer: Uint8Array) => void
-    readPixelsAsync: (x: number, y: number, width: number, height: number, buffer: Uint8Array) => Promise<void>
-    waitForGpuCommandsComplete: () => Promise<void>
-    waitForGpuCommandsCompleteSync: () => void
-    destroy: () => void
-}
-
-export function createContext(gl: GLRenderingContext): WebGLContext {
+function createExtensions(gl: GLRenderingContext): WebGLExtensions {
     const instancedArrays = getInstancedArrays(gl)
     if (instancedArrays === null) {
         throw new Error('Could not find support for "instanced_arrays"')
@@ -191,19 +194,230 @@ export function createContext(gl: GLRenderingContext): WebGLContext {
     if (fragDepth === null) {
         console.log('Could not find support for "frag_depth"')
     }
+    const colorBufferFloat = getColorBufferFloat(gl)
+    if (colorBufferFloat === null) {
+        console.log('Could not find support for "color_buffer_float"')
+    }
+    const drawBuffers = getDrawBuffers(gl)
+    if (drawBuffers === null) {
+        console.log('Could not find support for "draw_buffers"')
+    }
+    const shaderTextureLod = getShaderTextureLod(gl)
+    if (shaderTextureLod === null) {
+        console.log('Could not find support for "shader_texture_lod"')
+    }
+    
+
+    return {
+        instancedArrays,
+        standardDerivatives,
+        blendMinMax,
+        textureFloat,
+        textureFloatLinear,
+        elementIndexUint,
+        vertexArrayObject,
+        fragDepth,
+        colorBufferFloat,
+        drawBuffers,
+        shaderTextureLod
+    }
+}
+
+export type WebGLStats = {
+    bufferCount: number
+    framebufferCount: number
+    renderbufferCount: number
+    textureCount: number
+    vaoCount: number
+
+    drawCount: number
+    instanceCount: number
+    instancedDrawCount: number
+}
+
+function createStats(): WebGLStats {
+    return {
+        bufferCount: 0,
+        framebufferCount: 0,
+        renderbufferCount: 0,
+        textureCount: 0,
+        vaoCount: 0,
+
+        drawCount: 0,
+        instanceCount: 0,
+        instancedDrawCount: 0,
+    }
+}
+
+export type WebGLState = {
+    currentProgramId: number
+    currentMaterialId: number
+    currentRenderItemId: number
+
+    enable: (cap: number) => void
+    disable: (cap: number) => void
+
+    frontFace: (mode: number) => void
+    cullFace: (mode: number) => void
+    depthMask: (flag: boolean) => void
+    colorMask: (red: boolean, green: boolean, blue: boolean, alpha: boolean) => void
+    clearColor: (red: number, green: number, blue: number, alpha: number) => void
+
+    blendFunc: (src: number, dst: number) => void
+    blendFuncSeparate: (srcRGB: number, dstRGB: number, srcAlpha: number, dstAlpha: number) => void
+
+    blendEquation: (mode: number) => void
+    blendEquationSeparate: (modeRGB: number, modeAlpha: number) => void
+}
+
+function createState(gl: GLRenderingContext): WebGLState {
+    const enabledCapabilities: { [k: number]: boolean } = {}
+
+    let currentFrontFace = gl.getParameter(gl.FRONT_FACE)
+    let currentCullFace = gl.getParameter(gl.CULL_FACE_MODE)
+    let currentDepthMask = gl.getParameter(gl.DEPTH_WRITEMASK)
+    let currentColorMask = gl.getParameter(gl.COLOR_WRITEMASK)
+    let currentClearColor = gl.getParameter(gl.COLOR_CLEAR_VALUE)
+
+    let currentBlendSrcRGB = gl.getParameter(gl.BLEND_SRC_RGB)
+    let currentBlendDstRGB = gl.getParameter(gl.BLEND_DST_RGB)
+    let currentBlendSrcAlpha = gl.getParameter(gl.BLEND_SRC_ALPHA)
+    let currentBlendDstAlpha = gl.getParameter(gl.BLEND_DST_ALPHA)
+
+    let currentBlendEqRGB = gl.getParameter(gl.BLEND_EQUATION_RGB)
+    let currentBlendEqAlpha = gl.getParameter(gl.BLEND_EQUATION_ALPHA)
+
+    return {
+        currentProgramId: -1,
+        currentMaterialId: -1,
+        currentRenderItemId: -1,
+
+        enable: (cap: number) => {
+            if (enabledCapabilities[cap] !== true ) {
+                gl.enable(cap)
+                enabledCapabilities[cap] = true
+            }
+        },
+        disable: (cap: number) => {
+            if (enabledCapabilities[cap] !== false) {
+                gl.disable(cap)
+                enabledCapabilities[cap] = false
+            }
+        },
+
+        frontFace: (mode: number) => {
+            if (mode !== currentFrontFace) {
+                gl.frontFace(mode)
+                currentFrontFace = mode
+            }
+        },
+        cullFace: (mode: number) => {
+            if (mode !== currentCullFace) {
+                gl.cullFace(mode)
+                currentCullFace = mode
+            }
+        },
+        depthMask: (flag: boolean) => {
+            if (flag !== currentDepthMask) {
+                gl.depthMask(flag)
+                currentDepthMask = flag
+            }
+        },
+        colorMask: (red: boolean, green: boolean, blue: boolean, alpha: boolean) => {
+            if (red !== currentColorMask[0] || green !== currentColorMask[1] || blue !== currentColorMask[2] || alpha !== currentColorMask[3])
+            gl.colorMask(red, green, blue, alpha)
+            currentColorMask[0] = red
+            currentColorMask[1] = green
+            currentColorMask[2] = blue
+            currentColorMask[3] = alpha
+        },
+        clearColor: (red: number, green: number, blue: number, alpha: number) => {
+            if (red !== currentClearColor[0] || green !== currentClearColor[1] || blue !== currentClearColor[2] || alpha !== currentClearColor[3])
+            gl.clearColor(red, green, blue, alpha)
+            currentClearColor[0] = red
+            currentClearColor[1] = green
+            currentClearColor[2] = blue
+            currentClearColor[3] = alpha
+        },
+
+        blendFunc: (src: number, dst: number) => {
+            if (src !== currentBlendSrcRGB || dst !== currentBlendDstRGB || src !== currentBlendSrcAlpha || dst !== currentBlendDstAlpha) {
+                gl.blendFunc(src, dst)
+                currentBlendSrcRGB = src
+                currentBlendDstRGB = dst
+                currentBlendSrcAlpha = src
+                currentBlendDstAlpha = dst
+            }
+        },
+        blendFuncSeparate: (srcRGB: number, dstRGB: number, srcAlpha: number, dstAlpha: number) => {
+            if (srcRGB !== currentBlendSrcRGB || dstRGB !== currentBlendDstRGB || srcAlpha !== currentBlendSrcAlpha || dstAlpha !== currentBlendDstAlpha) {
+                gl.blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)
+                currentBlendSrcRGB = srcRGB
+                currentBlendDstRGB = dstRGB
+                currentBlendSrcAlpha = srcAlpha
+                currentBlendDstAlpha = dstAlpha
+            }
+        },
+
+        blendEquation: (mode: number) => {
+            if (mode !== currentBlendEqRGB || mode !== currentBlendEqAlpha) {
+                gl.blendEquation(mode)
+                currentBlendEqRGB = mode
+                currentBlendEqAlpha = mode
+            }
+        },
+        blendEquationSeparate: (modeRGB: number, modeAlpha: number) => {
+            if (modeRGB !== currentBlendEqRGB || modeAlpha !== currentBlendEqAlpha) {
+                gl.blendEquationSeparate(modeRGB, modeAlpha)
+                currentBlendEqRGB = modeRGB
+                currentBlendEqAlpha = modeAlpha
+            }
+        }
+    }
+}
+
+/** A WebGL context object, including the rendering context, resource caches and counts */
+export interface WebGLContext {
+    readonly gl: GLRenderingContext
+    readonly isWebGL2: boolean
+    readonly pixelRatio: number
+
+    readonly extensions: WebGLExtensions
+    readonly state: WebGLState
+    readonly stats: WebGLStats
+
+    readonly shaderCache: ShaderCache
+    readonly programCache: ProgramCache
+    readonly framebufferCache: FramebufferCache
+
+    readonly maxTextureSize: number
+    readonly maxDrawBuffers: number
+
+    unbindFramebuffer: () => void
+    readPixels: (x: number, y: number, width: number, height: number, buffer: Uint8Array | Float32Array) => void
+    readPixelsAsync: (x: number, y: number, width: number, height: number, buffer: Uint8Array) => Promise<void>
+    waitForGpuCommandsComplete: () => Promise<void>
+    waitForGpuCommandsCompleteSync: () => void
+    destroy: () => void
+}
+
+export function createContext(gl: GLRenderingContext): WebGLContext {
+    const extensions = createExtensions(gl)
+    const state = createState(gl)
+    const stats = createStats()
 
-    const shaderCache = createShaderCache()
-    const programCache = createProgramCache()
-    const framebufferCache = createFramebufferCache()
+    const shaderCache: ShaderCache = createShaderCache(gl)
+    const programCache: ProgramCache = createProgramCache(gl, state, extensions, shaderCache)
+    const framebufferCache: FramebufferCache = createFramebufferCache(gl, stats)
 
     const parameters = {
-        maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
-        maxDrawBuffers: isWebGL2(gl) ? gl.getParameter(gl.MAX_DRAW_BUFFERS) : 0,
-        maxVertexTextureImageUnits: gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS),
+        maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE) as number,
+        maxDrawBuffers: isWebGL2(gl) ? gl.getParameter(gl.MAX_DRAW_BUFFERS) as number : 0,
+        maxVertexTextureImageUnits: gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) as number,
     }
 
-    if (parameters.maxVertexTextureImageUnits < 4) {
-        throw new Error('Need "MAX_VERTEX_TEXTURE_IMAGE_UNITS" >= 4')
+    if (parameters.maxVertexTextureImageUnits < 8) {
+        throw new Error('Need "MAX_VERTEX_TEXTURE_IMAGE_UNITS" >= 8')
     }
 
     let readPixelsAsync: (x: number, y: number, width: number, height: number, buffer: Uint8Array) => Promise<void>
@@ -239,53 +453,32 @@ export function createContext(gl: GLRenderingContext): WebGLContext {
         })
     } else {
         readPixelsAsync = async (x: number, y: number, width: number, height: number, buffer: Uint8Array) => {
-            gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buffer)
+            readPixels(gl, x, y, width, height, buffer)
         }
     }
 
     return {
         gl,
         isWebGL2: isWebGL2(gl),
-        extensions: {
-            instancedArrays,
-            standardDerivatives,
-            blendMinMax,
-            textureFloat,
-            textureFloatLinear,
-            elementIndexUint,
-            vertexArrayObject,
-            fragDepth
+        get pixelRatio () {
+            // this can change during the lifetime of a rendering context, so need to re-obtain on access
+            return getPixelRatio()
         },
-        get pixelRatio () { return getPixelRatio() },
+
+        extensions,
+        state,
+        stats,
 
         shaderCache,
         programCache,
         framebufferCache,
 
-        currentProgramId: -1,
-
-        bufferCount: 0,
-        framebufferCount: 0,
-        renderbufferCount: 0,
-        textureCount: 0,
-        vaoCount: 0,
-
-        drawCount: 0,
-        instanceCount: 0,
-        instancedDrawCount: 0,
-
         get maxTextureSize () { return parameters.maxTextureSize },
         get maxDrawBuffers () { return parameters.maxDrawBuffers },
 
         unbindFramebuffer: () => unbindFramebuffer(gl),
-        readPixels: (x: number, y: number, width: number, height: number, buffer: Uint8Array) => {
-            gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buffer)
-            // TODO check is very expensive
-            // if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
-            //     gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buffer)
-            // } else {
-            //     console.error('Reading pixels failed. Framebuffer not complete.')
-            // }
+        readPixels: (x: number, y: number, width: number, height: number, buffer: Uint8Array | Float32Array) => {
+            readPixels(gl, x, y, width, height, buffer)
         },
         readPixelsAsync,
         waitForGpuCommandsComplete: () => waitForGpuCommandsComplete(gl),

src/mol-gl/webgl/framebuffer.ts

@@ -1,15 +1,41 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { WebGLContext } from './context'
+import { WebGLStats } from './context'
 import { idFactory } from 'mol-util/id-factory';
 import { ReferenceCache, createReferenceCache } from 'mol-util/reference-cache';
+import { GLRenderingContext, isWebGL2 } from './compat';
 
 const getNextFramebufferId = idFactory()
 
+function getFramebufferStatusDescription(gl: GLRenderingContext, status: number) {
+    switch (status) {
+        case gl.FRAMEBUFFER_COMPLETE: return 'complete'
+        case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: return 'incomplete attachment'
+        case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: return 'incomplete missing attachment'
+        case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: return 'incomplete dimensions'
+        case gl.FRAMEBUFFER_UNSUPPORTED: return 'unsupported'
+    }
+    if (isWebGL2(gl)) {
+        switch (status) {
+            case gl.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE: return 'incomplete multisample'
+            case gl.RENDERBUFFER_SAMPLES: return 'renderbuffer samples'
+        }
+    }
+    return 'unknown error'
+}
+
+export function checkFramebufferStatus(gl: GLRenderingContext) {
+    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER)
+    if (status !== gl.FRAMEBUFFER_COMPLETE) {
+        const description = getFramebufferStatusDescription(gl, status)
+        throw new Error(`Framebuffer status: ${description}`)
+    }
+}
+
 export interface Framebuffer {
     readonly id: number
 
@@ -17,15 +43,14 @@ export interface Framebuffer {
     destroy: () => void
 }
 
-export function createFramebuffer (ctx: WebGLContext): Framebuffer {
-    const { gl } = ctx
+export function createFramebuffer (gl: GLRenderingContext, stats: WebGLStats): Framebuffer {
     const _framebuffer = gl.createFramebuffer()
     if (_framebuffer === null) {
         throw new Error('Could not create WebGL framebuffer')
     }
 
     let destroyed = false
-    ctx.framebufferCount += 1
+    stats.framebufferCount += 1
 
     return {
         id: getNextFramebufferId(),
@@ -35,17 +60,17 @@ export function createFramebuffer (ctx: WebGLContext): Framebuffer {
             if (destroyed) return
             gl.deleteFramebuffer(_framebuffer)
             destroyed = true
-            ctx.framebufferCount -= 1
+            stats.framebufferCount -= 1
         }
     }
 }
 
-export type FramebufferCache = ReferenceCache<Framebuffer, string, WebGLContext>
+export type FramebufferCache = ReferenceCache<Framebuffer, string>
 
-export function createFramebufferCache(): FramebufferCache {
+export function createFramebufferCache(gl: GLRenderingContext, stats: WebGLStats): FramebufferCache {
     return createReferenceCache(
         (name: string) => name,
-        (ctx: WebGLContext) => createFramebuffer(ctx),
+        () => createFramebuffer(gl, stats),
         (framebuffer: Framebuffer) => { framebuffer.destroy() }
     )
 }

src/mol-gl/webgl/program.ts

@@ -1,18 +1,21 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { ShaderCode, DefineValues, addShaderDefines } from '../shader-code'
-import { WebGLContext } from './context';
-import { UniformValues, getUniformSetters } from './uniform';
-import { AttributeBuffers } from './buffer';
-import { Textures, TextureId } from './texture';
+import { WebGLExtensions, WebGLState } from './context';
+import { getUniformSetters, UniformsList, getUniformType } from './uniform';
+import { AttributeBuffers, getAttribType } from './buffer';
+import { TextureId, Textures } from './texture';
 import { createReferenceCache, ReferenceCache } from 'mol-util/reference-cache';
 import { idFactory } from 'mol-util/id-factory';
 import { RenderableSchema } from '../renderable/schema';
 import { hashFnv32a, hashString } from 'mol-data/util';
+import { isDebugMode } from 'mol-util/debug';
+import { GLRenderingContext } from './compat';
+import { ShaderCache } from './shader';
 
 const getNextProgramId = idFactory()
 
@@ -20,7 +23,7 @@ export interface Program {
     readonly id: number
 
     use: () => void
-    setUniforms: (uniformValues: UniformValues) => void
+    setUniforms: (uniformValues: UniformsList) => void
     bindAttributes: (attribueBuffers: AttributeBuffers) => void
     bindTextures: (textures: Textures) => void
 
@@ -29,8 +32,7 @@ export interface Program {
 
 type Locations = { [k: string]: number }
 
-function getLocations(ctx: WebGLContext, program: WebGLProgram, schema: RenderableSchema) {
-    const { gl } = ctx
+function getLocations(gl: GLRenderingContext, program: WebGLProgram, schema: RenderableSchema) {
     const locations: Locations = {}
     Object.keys(schema).forEach(k => {
         const spec = schema[k]
@@ -47,14 +49,76 @@ function getLocations(ctx: WebGLContext, program: WebGLProgram, schema: Renderab
     return locations
 }
 
+function checkActiveAttributes(gl: GLRenderingContext, program: WebGLProgram, schema: RenderableSchema) {
+    const attribCount = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+    for (let i = 0; i < attribCount; ++i) {
+        const info = gl.getActiveAttrib(program, i);
+        if (info) {
+            const { name, type } = info
+            if (name.startsWith('__activeAttribute')) {
+                // name assigned by `gl.shim.ts`, ignore for checks
+                continue
+            }
+            const spec = schema[name]
+            if (spec === undefined) {
+                throw new Error(`missing 'uniform' or 'texture' with name '${name}' in schema`)
+            }
+            if (spec.type !== 'attribute') {
+                throw new Error(`'${name}' must be of type 'attribute' but is '${spec.type}'`)
+            }
+            const attribType = getAttribType(gl, spec.kind, spec.itemSize)
+            if (attribType !== type) {
+                throw new Error(`unexpected attribute type for ${name}`)
+            }
+        }
+    }
+}
+
+function checkActiveUniforms(gl: GLRenderingContext, program: WebGLProgram, schema: RenderableSchema) {
+    const attribCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < attribCount; ++i) {
+        const info = gl.getActiveUniform(program, i);
+        if (info) {
+            const { name, type } = info
+            if (name.startsWith('__activeUniform')) {
+                // name assigned by `gl.shim.ts`, ignore for checks
+                continue
+            }
+            const spec = schema[name]
+            if (spec === undefined) {
+                throw new Error(`missing 'uniform' or 'texture' with name '${name}' in schema`)
+            }
+            if (spec.type === 'uniform') {
+                const uniformType = getUniformType(gl, spec.kind)
+                if (uniformType !== type) {
+                    throw new Error(`unexpected uniform type for ${name}`)
+                }
+            } else if (spec.type === 'texture') {
+                if (spec.kind === 'image-float32' || spec.kind === 'image-uint8') {
+                    if (type !== gl.SAMPLER_2D) {
+                        throw new Error(`unexpected sampler type for '${name}'`)
+                    }
+                } else if (spec.kind === 'volume-float32' || spec.kind === 'volume-uint8') {
+                    if (type !== (gl as WebGL2RenderingContext).SAMPLER_3D) {
+                        throw new Error(`unexpected sampler type for '${name}'`)
+                    }
+                } else {
+                    // TODO
+                }
+            } else {
+                throw new Error(`'${name}' must be of type 'uniform' or 'texture' but is '${spec.type}'`)
+            }
+        }
+    }
+}
+
 export interface ProgramProps {
     defineValues: DefineValues,
     shaderCode: ShaderCode,
     schema: RenderableSchema
 }
 
-export function createProgram(ctx: WebGLContext, props: ProgramProps): Program {
-    const { gl, shaderCache } = ctx
+export function createProgram(gl: GLRenderingContext, state: WebGLState, extensions: WebGLExtensions, shaderCache: ShaderCache, props: ProgramProps): Program {
     const { defineValues, shaderCode: _shaderCode, schema } = props
 
     const program = gl.createProgram()
@@ -63,20 +127,29 @@ export function createProgram(ctx: WebGLContext, props: ProgramProps): Program {
     }
     const programId = getNextProgramId()
 
-    const shaderCode = addShaderDefines(ctx, defineValues, _shaderCode)
-    const vertShaderRef = shaderCache.get(ctx, { type: 'vert', source: shaderCode.vert })
-    const fragShaderRef = shaderCache.get(ctx, { type: 'frag', source: shaderCode.frag })
+    const shaderCode = addShaderDefines(gl, extensions, defineValues, _shaderCode)
+    const vertShaderRef = shaderCache.get({ type: 'vert', source: shaderCode.vert })
+    const fragShaderRef = shaderCache.get({ type: 'frag', source: shaderCode.frag })
 
     vertShaderRef.value.attach(program)
     fragShaderRef.value.attach(program)
     gl.linkProgram(program)
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        throw new Error(`Could not compile WebGL program. \n\n${gl.getProgramInfoLog(program)}`);
+    if (isDebugMode) {
+        // no-op in FF on Mac, see https://bugzilla.mozilla.org/show_bug.cgi?id=1284425
+        // gl.validateProgram(program)
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(`Could not compile WebGL program. \n\n${gl.getProgramInfoLog(program)}`);
+        }
     }
 
-    const locations = getLocations(ctx, program, schema)
+    const locations = getLocations(gl, program, schema)
     const uniformSetters = getUniformSetters(schema)
 
+    if (isDebugMode) {
+        checkActiveAttributes(gl, program, schema)
+        checkActiveUniforms(gl, program, schema)
+    }
+
     let destroyed = false
 
     return {
@@ -84,33 +157,35 @@ export function createProgram(ctx: WebGLContext, props: ProgramProps): Program {
 
         use: () => {
             // console.log('use', programId)
-            ctx.currentProgramId = programId
+            state.currentProgramId = programId
             gl.useProgram(program)
         },
-        setUniforms: (uniformValues: UniformValues) => {
-            const uniformKeys = Object.keys(uniformValues)
-            for (let i = 0, il = uniformKeys.length; i < il; ++i) {
-                const k = uniformKeys[i]
-                const l = locations[k]
-                const v = uniformValues[k]
-                if (v) uniformSetters[k](gl, l, v.ref.value)
+        setUniforms: (uniformValues: UniformsList) => {
+            for (let i = 0, il = uniformValues.length; i < il; ++i) {
+                const [k, v] = uniformValues[i]
+                if (v) {
+                    const l = locations[k]
+                    if (l !== null) uniformSetters[k](gl, l, v.ref.value)
+                }
             }
         },
         bindAttributes: (attribueBuffers: AttributeBuffers) => {
-            const attributeKeys = Object.keys(attribueBuffers)
-            for (let i = 0, il = attributeKeys.length; i < il; ++i) {
-                const k = attributeKeys[i]
+            for (let i = 0, il = attribueBuffers.length; i < il; ++i) {
+                const [k, buffer] = attribueBuffers[i]
                 const l = locations[k]
-                if (l !== -1) attribueBuffers[k].bind(l)
+                if (l !== -1) buffer.bind(l)
             }
         },
         bindTextures: (textures: Textures) => {
-            const textureKeys = Object.keys(textures)
-            for (let i = 0, il = textureKeys.length; i < il; ++i) {
-                const k = textureKeys[i]
+            for (let i = 0, il = textures.length; i < il; ++i) {
+                const [k, texture] = textures[i]
                 const l = locations[k]
-                textures[k].bind(i as TextureId)
-                uniformSetters[k](gl, l, i as TextureId)
+                if (l !== null) {
+                    // TODO if the order and count of textures in a material can be made invariant
+                    //      bind needs to be called only when the material changes
+                    texture.bind(i as TextureId)
+                    uniformSetters[k](gl, l, i as TextureId)
+                }
             }
         },
 
@@ -124,14 +199,14 @@ export function createProgram(ctx: WebGLContext, props: ProgramProps): Program {
     }
 }
 
-export type ProgramCache = ReferenceCache<Program, ProgramProps, WebGLContext>
+export type ProgramCache = ReferenceCache<Program, ProgramProps>
 
 function defineValueHash(v: boolean | number | string): number {
     return typeof v === 'boolean' ? (v ? 1 : 0) :
         typeof v === 'number' ? v : hashString(v)
 }
 
-export function createProgramCache(): ProgramCache {
+export function createProgramCache(gl: GLRenderingContext, state: WebGLState, extensions: WebGLExtensions, shaderCache: ShaderCache): ProgramCache {
     return createReferenceCache(
         (props: ProgramProps) => {
             const array = [ props.shaderCode.id ]
@@ -141,7 +216,7 @@ export function createProgramCache(): ProgramCache {
             })
             return hashFnv32a(array).toString()
         },
-        (ctx: WebGLContext, props: ProgramProps) => createProgram(ctx, props),
+        (props: ProgramProps) => createProgram(gl, state, extensions, shaderCache, props),
         (program: Program) => { program.destroy() }
     )
 }

src/mol-gl/webgl/render-item.ts

@@ -1,20 +1,22 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { createAttributeBuffers, createElementsBuffer, ElementsBuffer, createAttributeBuffer, ArrayKind } from './buffer';
-import { createTextures } from './texture';
-import { WebGLContext } from './context';
+import { createAttributeBuffers, createElementsBuffer, ElementsBuffer, createAttributeBuffer, AttributeKind } from './buffer';
+import { createTextures, Texture } from './texture';
+import { WebGLContext, checkError } from './context';
 import { ShaderCode } from '../shader-code';
 import { Program } from './program';
-import { RenderableSchema, RenderableValues, AttributeSpec, getValueVersions, splitValues, Values, splitKeys } from '../renderable/schema';
+import { RenderableSchema, RenderableValues, AttributeSpec, getValueVersions, splitValues, Values } from '../renderable/schema';
 import { idFactory } from 'mol-util/id-factory';
 import { deleteVertexArray, createVertexArray } from './vertex-array';
 import { ValueCell } from 'mol-util';
 import { ReferenceItem } from 'mol-util/reference-cache';
 import { TextureImage, TextureVolume } from 'mol-gl/renderable/util';
+import { checkFramebufferStatus } from './framebuffer';
+import { isDebugMode } from 'mol-util/debug';
 
 const getNextRenderItemId = idFactory()
 
@@ -33,22 +35,34 @@ export function getDrawMode(ctx: WebGLContext, drawMode: DrawMode) {
     }
 }
 
-export interface RenderItem {
+export interface RenderItem<T extends string> {
     readonly id: number
-    getProgram: (variant: RenderVariant) => Program
+    readonly materialId: number
+    getProgram: (variant: T) => Program
 
-    render: (variant: RenderVariant) => void
+    render: (variant: T) => void
     update: () => Readonly<ValueChanges>
     destroy: () => void
 }
 
-const RenderVariantDefines = {
+//
+
+const GraphicsRenderVariantDefines = {
     'draw': {},
     'pickObject': { dColorType: ValueCell.create('objectPicking') },
     'pickInstance': { dColorType: ValueCell.create('instancePicking') },
     'pickGroup': { dColorType: ValueCell.create('groupPicking') }
 }
-export type RenderVariant = keyof typeof RenderVariantDefines
+export type GraphicsRenderVariant = keyof typeof GraphicsRenderVariantDefines
+
+const ComputeRenderVariantDefines = {
+    'compute': {},
+}
+export type ComputeRenderVariant = keyof typeof ComputeRenderVariantDefines
+
+type RenderVariantDefines = typeof GraphicsRenderVariantDefines | typeof ComputeRenderVariantDefines
+
+//
 
 type ProgramVariants = { [k: string]: ReferenceItem<Program> }
 type VertexArrayVariants = { [k: string]: WebGLVertexArrayObjectOES | null }
@@ -58,7 +72,6 @@ interface ValueChanges {
     defines: boolean
     elements: boolean
     textures: boolean
-    uniforms: boolean
 }
 function createValueChanges() {
     return {
@@ -66,7 +79,6 @@ function createValueChanges() {
         defines: false,
         elements: false,
         textures: false,
-        uniforms: false,
     }
 }
 function resetValueChanges(valueChanges: ValueChanges) {
@@ -74,31 +86,44 @@ function resetValueChanges(valueChanges: ValueChanges) {
     valueChanges.defines = false
     valueChanges.elements = false
     valueChanges.textures = false
-    valueChanges.uniforms = false
 }
 
-// TODO make `RenderVariantDefines` a parameter for `createRenderItem`
+//
+
+export type GraphicsRenderItem = RenderItem<keyof typeof GraphicsRenderVariantDefines & string>
+export function createGraphicsRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues, materialId: number) {
+    return createRenderItem(ctx, drawMode, shaderCode, schema, values, materialId, GraphicsRenderVariantDefines)
+}
+
+export type ComputeRenderItem = RenderItem<keyof typeof ComputeRenderVariantDefines & string>
+export function createComputeRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues, materialId = -1) {
+    return createRenderItem(ctx, drawMode, shaderCode, schema, values, materialId, ComputeRenderVariantDefines)
+}
 
 /**
  * Creates a render item
  *
  * - assumes that `values.drawCount` and `values.instanceCount` exist
  */
-export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues): RenderItem {
+export function createRenderItem<T extends RenderVariantDefines, S extends keyof T & string>(ctx: WebGLContext, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues, materialId: number, renderVariantDefines: T): RenderItem<S> {
     const id = getNextRenderItemId()
-    const { programCache } = ctx
+    const { stats, state, programCache } = ctx
     const { instancedArrays, vertexArrayObject } = ctx.extensions
 
-    const { attributeValues, defineValues, textureValues, uniformValues } = splitValues(schema, values)
-    const { attributeKeys, defineKeys, textureKeys } = splitKeys(schema)
+    const { attributeValues, defineValues, textureValues, uniformValues, materialUniformValues } = splitValues(schema, values)
+
+    const uniformValueEntries = Object.entries(uniformValues)
+    const materialUniformValueEntries = Object.entries(materialUniformValues)
+    const defineValueEntries = Object.entries(defineValues)
+
     const versions = getValueVersions(values)
 
     const glDrawMode = getDrawMode(ctx, drawMode)
 
     const programs: ProgramVariants = {}
-    Object.keys(RenderVariantDefines).forEach(k => {
-        const variantDefineValues: Values<RenderableSchema> = (RenderVariantDefines as any)[k]
-        programs[k] = programCache.get(ctx, {
+    Object.keys(renderVariantDefines).forEach(k => {
+        const variantDefineValues: Values<RenderableSchema> = (renderVariantDefines as any)[k]
+        programs[k] = programCache.get({
             defineValues: { ...defineValues, ...variantDefineValues },
             shaderCode,
             schema
@@ -115,51 +140,80 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
     }
 
     const vertexArrays: VertexArrayVariants = {}
-    Object.keys(RenderVariantDefines).forEach(k => {
+    Object.keys(renderVariantDefines).forEach(k => {
         vertexArrays[k] = createVertexArray(ctx, programs[k].value, attributeBuffers, elementsBuffer)
     })
 
     let drawCount = values.drawCount.ref.value
     let instanceCount = values.instanceCount.ref.value
 
-    ctx.drawCount += drawCount
-    ctx.instanceCount += instanceCount
-    ctx.instancedDrawCount += instanceCount * drawCount
+    stats.drawCount += drawCount
+    stats.instanceCount += instanceCount
+    stats.instancedDrawCount += instanceCount * drawCount
 
     const valueChanges = createValueChanges()
 
     let destroyed = false
+    let currentProgramId = -1
 
     return {
         id,
-        getProgram: (variant: RenderVariant) => programs[variant].value,
+        materialId,
+        getProgram: (variant: S) => programs[variant].value,
 
-        render: (variant: RenderVariant) => {
+        render: (variant: S) => {
             if (drawCount === 0 || instanceCount === 0) return
             const program = programs[variant].value
-            const vertexArray = vertexArrays[variant]
-            program.setUniforms(uniformValues)
-            if (vertexArrayObject && vertexArray) {
-                vertexArrayObject.bindVertexArray(vertexArray)
-                // need to bind elements buffer explicitly since it is not always recorded in the VAO
-                if (elementsBuffer) elementsBuffer.bind()
+            if (program.id === currentProgramId && state.currentRenderItemId === id) {
+                program.setUniforms(uniformValueEntries)
+                program.bindTextures(textures)
             } else {
-                if (elementsBuffer) elementsBuffer.bind()
-                program.bindAttributes(attributeBuffers)
+                const vertexArray = vertexArrays[variant]
+                if (program.id !== state.currentProgramId || program.id !== currentProgramId ||
+                    materialId === -1 || materialId !== state.currentMaterialId
+                ) {
+                    // console.log('program.id changed or materialId changed/-1', materialId)
+                    if (program.id !== state.currentProgramId) program.use()
+                    program.setUniforms(materialUniformValueEntries)
+                    state.currentMaterialId = materialId
+                    currentProgramId = program.id
+                }
+                program.setUniforms(uniformValueEntries)
+                program.bindTextures(textures)
+                if (vertexArrayObject && vertexArray) {
+                    vertexArrayObject.bindVertexArray(vertexArray)
+                    // need to bind elements buffer explicitly since it is not always recorded in the VAO
+                    if (elementsBuffer) elementsBuffer.bind()
+                } else {
+                    if (elementsBuffer) elementsBuffer.bind()
+                    program.bindAttributes(attributeBuffers)
+                }
+                state.currentRenderItemId = id
+            }
+            if (isDebugMode) {
+                checkFramebufferStatus(ctx.gl)
             }
-            program.bindTextures(textures)
             if (elementsBuffer) {
                 instancedArrays.drawElementsInstanced(glDrawMode, drawCount, elementsBuffer._dataType, 0, instanceCount);
             } else {
                 instancedArrays.drawArraysInstanced(glDrawMode, 0, drawCount, instanceCount)
             }
+            if (isDebugMode) {
+                try {
+                    checkError(ctx.gl)
+                } catch (e) {
+                    // console.log('shaderCode', shaderCode)
+                    // console.log('schema', schema)
+                    // console.log('attributeBuffers', attributeBuffers)
+                    throw new Error(`Error rendering item id ${id}: '${e}'`)
+                }
+            }
         },
         update: () => {
             resetValueChanges(valueChanges)
 
-            for (let i = 0, il = defineKeys.length; i < il; ++i) {
-                const k = defineKeys[i]
-                const value = defineValues[k]
+            for (let i = 0, il = defineValueEntries.length; i < il; ++i) {
+                const [k, value] = defineValueEntries[i]
                 if (value.ref.version !== versions[k]) {
                     // console.log('define version changed', k)
                     valueChanges.defines = true
@@ -169,10 +223,10 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
 
             if (valueChanges.defines) {
                 // console.log('some defines changed, need to rebuild programs')
-                Object.keys(RenderVariantDefines).forEach(k => {
-                    const variantDefineValues: Values<RenderableSchema> = (RenderVariantDefines as any)[k]
+                Object.keys(renderVariantDefines).forEach(k => {
+                    const variantDefineValues: Values<RenderableSchema> = (renderVariantDefines as any)[k]
                     programs[k].free()
-                    programs[k] = programCache.get(ctx, {
+                    programs[k] = programCache.get({
                         defineValues: { ...defineValues, ...variantDefineValues },
                         shaderCode,
                         schema
@@ -182,32 +236,31 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
 
             if (values.drawCount.ref.version !== versions.drawCount) {
                 // console.log('drawCount version changed')
-                ctx.drawCount += values.drawCount.ref.value - drawCount
-                ctx.instancedDrawCount += instanceCount * values.drawCount.ref.value - instanceCount * drawCount
+                stats.drawCount += values.drawCount.ref.value - drawCount
+                stats.instancedDrawCount += instanceCount * values.drawCount.ref.value - instanceCount * drawCount
                 drawCount = values.drawCount.ref.value
                 versions.drawCount = values.drawCount.ref.version
             }
             if (values.instanceCount.ref.version !== versions.instanceCount) {
                 // console.log('instanceCount version changed')
-                ctx.instanceCount += values.instanceCount.ref.value - instanceCount
-                ctx.instancedDrawCount += values.instanceCount.ref.value * drawCount - instanceCount * drawCount
+                stats.instanceCount += values.instanceCount.ref.value - instanceCount
+                stats.instancedDrawCount += values.instanceCount.ref.value * drawCount - instanceCount * drawCount
                 instanceCount = values.instanceCount.ref.value
                 versions.instanceCount = values.instanceCount.ref.version
             }
 
-            for (let i = 0, il = attributeKeys.length; i < il; ++i) {
-                const k = attributeKeys[i]
+            for (let i = 0, il = attributeBuffers.length; i < il; ++i) {
+                const [k, buffer] = attributeBuffers[i]
                 const value = attributeValues[k]
                 if (value.ref.version !== versions[k]) {
-                    const buffer = attributeBuffers[k]
                     if (buffer.length >= value.ref.value.length) {
                         // console.log('attribute array large enough to update', k, value.ref.id, value.ref.version)
                         buffer.updateData(value.ref.value)
                     } else {
                         // console.log('attribute array to small, need to create new attribute', k, value.ref.id, value.ref.version)
                         buffer.destroy()
-                        const { itemSize, divisor } = schema[k] as AttributeSpec<ArrayKind>
-                        attributeBuffers[k] = createAttributeBuffer(ctx, value.ref.value, itemSize, divisor)
+                        const { itemSize, divisor } = schema[k] as AttributeSpec<AttributeKind>
+                        attributeBuffers[i][1] = createAttributeBuffer(ctx, value.ref.value, itemSize, divisor)
                         valueChanges.attributes = true
                     }
                     versions[k] = value.ref.version
@@ -231,7 +284,7 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
                 // console.log('program/defines or buffers changed, update vaos')
                 const { vertexArrayObject } = ctx.extensions
                 if (vertexArrayObject) {
-                    Object.keys(RenderVariantDefines).forEach(k => {
+                    Object.keys(renderVariantDefines).forEach(k => {
                         vertexArrayObject.bindVertexArray(vertexArrays[k])
                         if (elementsBuffer && (valueChanges.defines || valueChanges.elements)) {
                             elementsBuffer.bind()
@@ -244,16 +297,18 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
                 }
             }
 
-            for (let i = 0, il = textureKeys.length; i < il; ++i) {
-                const k = textureKeys[i]
+            for (let i = 0, il = textures.length; i < il; ++i) {
+                const [k, texture] = textures[i]
                 const value = textureValues[k]
                 if (value.ref.version !== versions[k]) {
                     // update of textures with kind 'texture' is done externally
                     if (schema[k].kind !== 'texture') {
                         // console.log('texture version changed, uploading image', k)
-                        textures[k].load(value.ref.value as TextureImage<any> | TextureVolume<any>)
+                        texture.load(value.ref.value as TextureImage<any> | TextureVolume<any>)
                         versions[k] = value.ref.version
                         valueChanges.textures = true
+                    } else {
+                        textures[i][1] = value.ref.value as Texture
                     }
                 }
             }
@@ -262,17 +317,17 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
         },
         destroy: () => {
             if (!destroyed) {
-                Object.keys(RenderVariantDefines).forEach(k => {
+                Object.keys(renderVariantDefines).forEach(k => {
                     programs[k].free()
                     deleteVertexArray(ctx, vertexArrays[k])
                 })
-                Object.keys(textures).forEach(k => {
+                textures.forEach(([k, texture]) => {
                     // lifetime of textures with kind 'texture' is defined externally
                     if (schema[k].kind !== 'texture') {
-                        textures[k].destroy()
+                        texture.destroy()
                     }
                 })
-                Object.keys(attributeBuffers).forEach(k => attributeBuffers[k].destroy())
+                attributeBuffers.forEach(([_, buffer]) => buffer.destroy())
                 if (elementsBuffer) elementsBuffer.destroy()
                 destroyed = true
             }

src/mol-gl/webgl/render-target.ts

@@ -31,7 +31,7 @@ export interface RenderTarget {
 }
 
 export function createRenderTarget (ctx: WebGLContext, _width: number, _height: number): RenderTarget {
-    const { gl } = ctx
+    const { gl, stats } = ctx
 
     const image: Mutable<TextureImage<Uint8Array>> = {
         array: new Uint8Array(_width * _height * 4),
@@ -42,7 +42,7 @@ export function createRenderTarget (ctx: WebGLContext, _width: number, _height:
     const targetTexture = createTexture(ctx, 'image-uint8', 'rgba', 'ubyte', 'linear')
     targetTexture.load(image)
 
-    const framebuffer = createFramebuffer(ctx)
+    const framebuffer = createFramebuffer(gl, stats)
 
     // attach the texture as the first color attachment
     targetTexture.attachFramebuffer(framebuffer, 'color0')

src/mol-gl/webgl/renderbuffer.ts

@@ -42,7 +42,7 @@ export interface Renderbuffer {
 }
 
 export function createRenderbuffer (ctx: WebGLContext, format: RenderbufferFormat, attachment: RenderbufferAttachment, _width: number, _height: number): Renderbuffer {
-    const { gl } = ctx
+    const { gl, stats } = ctx
     const _renderbuffer = gl.createRenderbuffer()
     if (_renderbuffer === null) {
         throw new Error('Could not create WebGL renderbuffer')
@@ -57,7 +57,7 @@ export function createRenderbuffer (ctx: WebGLContext, format: RenderbufferForma
     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, _attachment, gl.RENDERBUFFER, _renderbuffer)
 
     let destroyed = false
-    ctx.renderbufferCount += 1
+    stats.renderbufferCount += 1
 
     return {
         id: getNextRenderbufferId(),
@@ -72,7 +72,7 @@ export function createRenderbuffer (ctx: WebGLContext, format: RenderbufferForma
             if (destroyed) return
             gl.deleteRenderbuffer(_renderbuffer)
             destroyed = true
-            ctx.framebufferCount -= 1
+            stats.framebufferCount -= 1
         }
     }
 }

src/mol-gl/webgl/shader.ts

@@ -1,12 +1,13 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { createReferenceCache, ReferenceCache } from 'mol-util/reference-cache';
-import { WebGLContext } from './context';
 import { idFactory } from 'mol-util/id-factory';
+import { GLRenderingContext } from './compat';
+import { isDebugMode } from 'mol-util/debug';
 
 const getNextShaderId = idFactory()
 
@@ -26,8 +27,7 @@ export interface Shader {
     destroy: () => void
 }
 
-function createShader(ctx: WebGLContext, props: ShaderProps): Shader {
-    const { gl } = ctx
+function createShader(gl: GLRenderingContext, props: ShaderProps): Shader {
     const { type, source } = props
 
     const shader = gl.createShader(type === 'vert' ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER)
@@ -38,7 +38,7 @@ function createShader(ctx: WebGLContext, props: ShaderProps): Shader {
     gl.shaderSource(shader, source)
     gl.compileShader(shader)
 
-    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) === false) {
+    if (isDebugMode && gl.getShaderParameter(shader, gl.COMPILE_STATUS) === false) {
         console.warn(`'${type}' shader info log '${gl.getShaderInfoLog(shader)}'\n${addLineNumbers(source)}`)
         throw new Error(`Error compiling ${type} shader`)
     }
@@ -54,12 +54,12 @@ function createShader(ctx: WebGLContext, props: ShaderProps): Shader {
     }
 }
 
-export type ShaderCache = ReferenceCache<Shader, ShaderProps, WebGLContext>
+export type ShaderCache = ReferenceCache<Shader, ShaderProps>
 
-export function createShaderCache(): ShaderCache {
+export function createShaderCache(gl: GLRenderingContext): ShaderCache {
     return createReferenceCache(
         (props: ShaderProps) => JSON.stringify(props),
-        (ctx: WebGLContext, props: ShaderProps) => createShader(ctx, props),
+        (props: ShaderProps) => createShader(gl, props),
         (shader: Shader) => { shader.destroy() }
     )
 }

src/mol-gl/webgl/texture.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -42,40 +42,42 @@ export function getTarget(ctx: WebGLContext, kind: TextureKind): number {
             case 'volume-float32': return gl.TEXTURE_3D
         }
     }
-    throw new Error('unknown texture kind')
+    throw new Error(`unknown texture kind '${kind}'`)
 }
 
-export function getFormat(ctx: WebGLContext, format: TextureFormat): number {
+export function getFormat(ctx: WebGLContext, format: TextureFormat, type: TextureType): number {
     const { gl } = ctx
     switch (format) {
-        case 'alpha': return gl.ALPHA
+        case 'alpha':
+            if (isWebGL2 && type === 'float') return (gl as WebGL2RenderingContext).RED
+            else return gl.ALPHA
         case 'rgb': return gl.RGB
         case 'rgba': return gl.RGBA
     }
 }
 
 export function getInternalFormat(ctx: WebGLContext, format: TextureFormat, type: TextureType): number {
-    const { gl, isWebGL2 } = ctx
-    if (isWebGL2) {
+    const { gl } = ctx
+    if (isWebGL2(gl)) {
         switch (format) {
             case 'alpha':
                 switch (type) {
                     case 'ubyte': return gl.ALPHA
-                    case 'float': throw new Error('invalid format/type combination alpha/float')
+                    case 'float': return gl.R32F
                 }
             case 'rgb':
                 switch (type) {
                     case 'ubyte': return gl.RGB
-                    case 'float': return (gl as WebGL2RenderingContext).RGB32F
+                    case 'float': return gl.RGB32F
                 }
             case 'rgba':
                 switch (type) {
                     case 'ubyte': return gl.RGBA
-                    case 'float': return (gl as WebGL2RenderingContext).RGBA32F
+                    case 'float': return gl.RGBA32F
                 }
         }
     }
-    return getFormat(ctx, format)
+    return getFormat(ctx, format, type)
 }
 
 export function getType(ctx: WebGLContext, type: TextureType): number {
@@ -95,21 +97,21 @@ export function getFilter(ctx: WebGLContext, type: TextureFilter): number {
 }
 
 export function getAttachment(ctx: WebGLContext, attachment: TextureAttachment): number {
-    const { gl } = ctx
+    const { gl, extensions } = ctx
     switch (attachment) {
         case 'depth': return gl.DEPTH_ATTACHMENT
         case 'stencil': return gl.STENCIL_ATTACHMENT
         case 'color0': case 0: return gl.COLOR_ATTACHMENT0
     }
-    if (isWebGL2(gl)) {
+    if (extensions.drawBuffers) {
         switch (attachment) {
-            case 'color1': case 1: return gl.COLOR_ATTACHMENT1
-            case 'color2': case 2: return gl.COLOR_ATTACHMENT2
-            case 'color3': case 3: return gl.COLOR_ATTACHMENT3
-            case 'color4': case 4: return gl.COLOR_ATTACHMENT4
-            case 'color5': case 5: return gl.COLOR_ATTACHMENT5
-            case 'color6': case 6: return gl.COLOR_ATTACHMENT6
-            case 'color7': case 7: return gl.COLOR_ATTACHMENT7
+            case 'color1': case 1: return extensions.drawBuffers.COLOR_ATTACHMENT1
+            case 'color2': case 2: return extensions.drawBuffers.COLOR_ATTACHMENT2
+            case 'color3': case 3: return extensions.drawBuffers.COLOR_ATTACHMENT3
+            case 'color4': case 4: return extensions.drawBuffers.COLOR_ATTACHMENT4
+            case 'color5': case 5: return extensions.drawBuffers.COLOR_ATTACHMENT5
+            case 'color6': case 6: return extensions.drawBuffers.COLOR_ATTACHMENT6
+            case 'color7': case 7: return extensions.drawBuffers.COLOR_ATTACHMENT7
         }
     }
     throw new Error('unknown texture attachment')
@@ -139,19 +141,24 @@ export interface Texture {
 export type TextureId = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
 
 export type TextureValues = { [k: string]: ValueCell<TextureValueType> }
-export type Textures = { [k: string]: Texture }
+export type Textures = [string, Texture][]
 
 export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: TextureFormat, _type: TextureType, _filter: TextureFilter): Texture {
     const id = getNextTextureId()
-    const { gl } = ctx
+    const { gl, stats } = ctx
     const texture = gl.createTexture()
     if (texture === null) {
         throw new Error('Could not create WebGL texture')
     }
 
+    // check texture kind and type compatability
+    if ((kind.endsWith('float32') && _type !== 'float') || kind.endsWith('uint8') && _type !== 'ubyte') {
+        throw new Error(`texture kind '${kind}' and type '${_type}' are incompatible`)
+    }
+
     const target = getTarget(ctx, kind)
     const filter = getFilter(ctx, _filter)
-    const format = getFormat(ctx, _format)
+    const format = getFormat(ctx, _format, _type)
     const internalFormat = getInternalFormat(ctx, _format, _type)
     const type = getType(ctx, _type)
 
@@ -166,7 +173,7 @@ export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: Tex
     let width = 0, height = 0, depth = 0
 
     let destroyed = false
-    ctx.textureCount += 1
+    stats.textureCount += 1
 
     return {
         id,
@@ -184,8 +191,8 @@ export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: Tex
             gl.bindTexture(target, texture)
             if (target === gl.TEXTURE_2D) {
                 gl.texImage2D(target, 0, internalFormat, width, height, 0, format, type, null)
-            } else if (target === (gl as WebGL2RenderingContext).TEXTURE_3D && depth !== undefined) {
-                (gl as WebGL2RenderingContext).texImage3D(target, 0, internalFormat, width, height, depth, 0, format, type, null)
+            } else if (isWebGL2(gl) && target === gl.TEXTURE_3D && depth !== undefined) {
+                gl.texImage3D(target, 0, internalFormat, width, height, depth, 0, format, type, null)
             } else {
                 throw new Error('unknown texture target')
             }
@@ -200,10 +207,10 @@ export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: Tex
                 const { array, width: _width, height: _height } = data as TextureImage<any>
                 width = _width, height = _height;
                 gl.texImage2D(target, 0, internalFormat, width, height, 0, format, type, array)
-            } else if (target === (gl as WebGL2RenderingContext).TEXTURE_3D) {
+            } else if (isWebGL2(gl) && target === gl.TEXTURE_3D) {
                 const { array, width: _width, height: _height, depth: _depth } = data as TextureVolume<any>
-                width = _width, height = _height, depth = _depth;
-                (gl as WebGL2RenderingContext).texImage3D(target, 0, internalFormat, width, height, depth, 0, format, type, array)
+                width = _width, height = _height, depth = _depth
+                gl.texImage3D(target, 0, internalFormat, width, height, depth, 0, format, type, array)
             } else {
                 throw new Error('unknown texture target')
             }
@@ -238,22 +245,22 @@ export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: Tex
             if (destroyed) return
             gl.deleteTexture(texture)
             destroyed = true
-            ctx.textureCount -= 1
+            stats.textureCount -= 1
         }
     }
 }
 
 export function createTextures(ctx: WebGLContext, schema: RenderableSchema, values: TextureValues) {
-    const textures: Textures = {}
-    Object.keys(schema).forEach((k, i) => {
+    const textures: Textures = []
+    Object.keys(schema).forEach(k => {
         const spec = schema[k]
         if (spec.type === 'texture') {
             if (spec.kind === 'texture') {
-                textures[k] = values[k].ref.value as Texture
+                textures[textures.length] = [k, values[k].ref.value as Texture]
             } else {
                 const texture = createTexture(ctx, spec.kind, spec.format, spec.dataType, spec.filter)
                 texture.load(values[k].ref.value as TextureImage<any> | TextureVolume<any>)
-                textures[k] = texture
+                textures[textures.length] = [k, texture]
             }
         }
     })

src/mol-gl/webgl/uniform.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -23,6 +23,20 @@ export type UniformKind = keyof UniformKindValue
 export type UniformType = number | Vec2 | Vec3 | Vec4 | Mat3 | Mat4
 
 export type UniformValues = { [k: string]: ValueCell<UniformType> }
+export type UniformsList = [string, ValueCell<UniformType>][]
+
+export function getUniformType(gl: GLRenderingContext, kind: UniformKind) {
+    switch (kind) {
+        case 'f': return gl.FLOAT
+        case 'i': return gl.INT
+        case 'v2': return gl.FLOAT_VEC2
+        case 'v3': return gl.FLOAT_VEC3
+        case 'v4': return gl.FLOAT_VEC4
+        case 'm3': return gl.FLOAT_MAT3
+        case 'm4': return gl.FLOAT_MAT4
+        default: console.error(`unknown uniform kind '${kind}'`)
+    }
+}
 
 export function setUniform(gl: GLRenderingContext, location: WebGLUniformLocation | null, kind: UniformKind, value: any) {
     switch (kind) {

src/mol-gl/webgl/vertex-array.ts

@@ -6,18 +6,19 @@
 
 import { WebGLContext } from './context';
 import { Program } from './program';
-import { AttributeBuffers, ElementsBuffer } from './buffer';
+import { ElementsBuffer, AttributeBuffers } from './buffer';
 
 export function createVertexArray(ctx: WebGLContext, program: Program, attributeBuffers: AttributeBuffers, elementsBuffer?: ElementsBuffer) {
     const { vertexArrayObject } = ctx.extensions
     let vertexArray: WebGLVertexArrayObject | null = null
     if (vertexArrayObject) {
         vertexArray = vertexArrayObject.createVertexArray()
-        vertexArrayObject.bindVertexArray(vertexArray)
-        if (elementsBuffer) elementsBuffer.bind()
-        program.bindAttributes(attributeBuffers)
-        ctx.vaoCount += 1
-        vertexArrayObject.bindVertexArray(null)
+        if (vertexArray) {
+            updateVertexArray(ctx, vertexArray, program, attributeBuffers, elementsBuffer)
+            ctx.stats.vaoCount += 1
+        } else {
+            console.warn('Could not create WebGL vertex array')
+        }
     }
     return vertexArray
 }
@@ -36,6 +37,6 @@ export function deleteVertexArray(ctx: WebGLContext, vertexArray: WebGLVertexArr
     const { vertexArrayObject } = ctx.extensions
     if (vertexArrayObject && vertexArray) {
         vertexArrayObject.deleteVertexArray(vertexArray)
-        ctx.vaoCount -= 1
+        ctx.stats.vaoCount -= 1
     }
 }