3.12.0

changelog
Merge pull request #487 from molstar/fix/struct_conn-parsing
2026-06-06 06:34:23 +08:00 · 2022-07-17 16:28:26 -07:00 · 2022-07-17 16:23:08 -07:00 · 2022-07-17 16:20:45 -07:00 · 2022-07-17 18:01:28 +02:00 · 2022-07-17 17:58:57 +02:00
148 changed files with 22510 additions and 23303 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,90 @@ Note that since we don't clearly distinguish between a public and private interf

 ## [Unreleased]

+## [v3.12.0] - 2022-07-17
+
+- Add ``colorMarker`` option to Renderer. This disables the highlight and select marker at a shader level for faster rendering of large scenes in some cases.
+- Bind shared textures only once per pass, not for each render item
+- Fix missing 'material' annotation for some uniforms, causing unnecessary uniform updates
+- Remove use of ``isnan`` in impostor shaders, not needed and causing slowdown
+- Avoid using ``flat`` qualifier in shaders, causing slowdown
+- Improve CellPack's ``adjustStyle`` option (disable ``colorMarker``, set component options, enable marking w/o ghost)
+- Scan all entities when looking for ``struct_conn`` entries (fixes issue when the same ``label_asym_id`` is used in more than one entity)
+
+## [v3.11.0] - 2022-07-04
+
+- Add ``instanceGranularity`` option for marker, transparency, clipping, overpaint, substance data to save memory
+- CellPack extension tweaks
+    - Use instancing to create DNA/RNA curves to save memory
+    - Enable ``instanceGranularity`` by default
+    - Add ``adjustStyle`` option to LoadCellPackModel action (stylized, no multi-sample, no far clipping, chain picking)
+- Structure Superposition now respects pivot's coordinate system
+
+## [v3.10.2] - 2022-06-26
+
+- Fix superfluous shader varying
+- Improve use of gl_VertexID when possible
+
+## [v3.10.1] - 2022-06-26
+
+- Fix groupCount when updating TextureMesh-based visuals
+
+## [v3.10.0] - 2022-06-24
+
+- Add support for Glycam saccharide names
+- Add ``PluginConfig.Viewport.ShowTrajectoryControls`` config option
+
+## [v3.9.1] - 2022-06-19
+
+- Fix missing ``super.componentWillUnmount()`` calls (@simeonborko)
+- Fix missing ``uGroupCount`` update for visuals
+- Fix missing aromatic bond display
+
+## [v3.9.0] - 2022-05-30
+
+- Improve picking by using drawbuffers (when available) to reduce number of drawcalls
+- GPU timing support
+    - Add ``timing-mode`` Viewer GET param
+    - Add support for webgl timer queries
+    - Add timer marks around GPU render & compute operations
+- Volume Server CIF: Add check that a data block contains volume data before parsing
+- Fix ``Scene.clear`` not clearing primitives & volumes arrays (@JonStargaryen)
+- Fix rendering volumes when wboit is switched off and postprocessing is enabled
+
+## [v3.8.2] - 2022-05-22
+
+- Fix ``Scene.opacityAverage`` not taking xray shaded into account
+
+## [v3.8.1] - 2022-05-14
+
+- Fix issues with marking camera/handle helper (#433)
+- Fix issues with array uniforms when running with headless-gl
+- Fix Polymer Chain Instance coloring
+- Improve performance of scene marker/opacity average calculation
+
+## [v3.8.0] - 2022-04-30
+
+- Add support for outlines around transparent objects
+- Improve per-group transparency when wboit is switched off
+- Improve ``ColorTheme`` typing with ``ColorType`` generic.
+    - Defaults to ``ColorTypeLocation``
+    - Set when using ``ColorTypeDirect`` or ``ColorTypeGrid``
+- Fix case handling of ``struct_conf`` mmCIF enumeration field (#425)
+- Fix ``allowTransparentBackfaces`` for per-group transparency
+- Fix ``FormatRegistry.isApplicable`` returning true for unregistered formats
+- Fix: handle building of ``GridLookup3D`` with zero cell size
+- Fix ``ignoreLight`` for direct-volume rendering with webgl1
+- Fix (non-black) outlines when using transparent background
+
+## [v3.7.0] - 2022-04-13
+
+- Fix ``xrayShaded`` for texture-mesh geometries
+- [Breaking] Change ``allowTransparentBackfaces`` to ``transparentBackfaces`` with options ``off``, ``on``, ``opaque``. This was only added in 3.6.0, so allowing a breaking change here.
+    - ``off``: don't show (default)
+    - ``on``: show with transparency
+    - ``opaque``: show fully opaque
+- Add option to disable file drop overlay.
+
 ## [v3.6.2] - 2022-04-05

 - ModelServer ligand queries: fixes for alternate locations, additional atoms & UNL ligand
@@ -27,8 +111,8 @@ Note that since we don't clearly distinguish between a public and private interf
 - Fix handling of case insensitive mmCIF enumeration fields (including entity.type)
 - Fix ``disable-wboit`` Viewer GET param
 - Add support for React 18.
-  - Used by importing ``createPluginUI`` from ``mol-plugin-ui/react18``;
-  - In Mol* 4.0, React 18 will become the default option.
+    - Used by importing ``createPluginUI`` from ``mol-plugin-ui/react18``;
+    - In Mol* 4.0, React 18 will become the default option.

 ## [v3.5.0] - 2022-03-25

--- a/docs/file-formats.md
+++ b/docs/file-formats.md
@@ -0,0 +1,44 @@
+
+Support file formats and their extensions.
+
+## Structure
+
+- MMCIF and CIFCORE (mmCIF and coreCIF schemas): cif, bcif, mmcif, mcif
+- GRO: gro
+- MOL: mol
+- MOL2: mol2
+- PDB/PDBQT: pdb, ent, pdbqt
+- SDF: sdf, sd
+- XYZ: xyz
+
+
+## Topology
+
+Need to be loaded together with Coordinates.
+
+- PRMTOP: prmtop, parm7
+- PSF: psf
+- TOP: top
+
+## Coordinates
+
+Need to be loaded together with a Structure or Topology.
+
+- DCD: dcd
+- NCTRAJ: nc, nctraj
+- TRR: trr
+- XTC: xtc
+
+
+## Volume
+
+- CCP4/MRC/MAP: ccp4, mrc, map
+- CUBE (may include a Structure): cub, cube
+- DSN6/BRIX: dsn6, brix
+- DX and DXBIN: dx, dxbin
+- DSCIF (DensityServer CIF schema): cif, bcif
+
+
+## Shape
+
+- PLY
--- a/docs/interesting-pdb-entries.md
+++ b/docs/interesting-pdb-entries.md
@@ -13,6 +13,7 @@
    * DZ has C1 instead of N1 (e.g. 6I4N)
    * DP has N5 instead of C5 and C7 instead of N7 (e.g. 6I4N)
 * Beta & Gamma peptides (e.g. 1GAC, 6PQF)
+* Helices of D-amino acids (e.g. 7QDI)
 * Mixed (heterogeneous) all-atom/trace-only RNA model (1JGQ)
 * Polymers with residues with missing trace atoms (e.g. 2QFJ)
 * Modified RNA bases (1y26, 5L4O)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "molstar",
-  "version": "3.6.2",
+  "version": "3.12.0",
  "description": "A comprehensive macromolecular library.",
  "homepage": "https://github.com/molstar/molstar#readme",
  "repository": {
@@ -91,72 +91,72 @@
  ],
  "license": "MIT",
  "devDependencies": {
-    "@graphql-codegen/add": "^3.1.1",
-    "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/time": "^3.1.1",
-    "@graphql-codegen/typescript": "^2.4.7",
-    "@graphql-codegen/typescript-graphql-files-modules": "^2.1.1",
-    "@graphql-codegen/typescript-graphql-request": "^4.4.2",
-    "@graphql-codegen/typescript-operations": "^2.3.4",
+    "@graphql-codegen/add": "^3.2.0",
+    "@graphql-codegen/cli": "^2.8.1",
+    "@graphql-codegen/time": "^3.2.0",
+    "@graphql-codegen/typescript": "^2.7.1",
+    "@graphql-codegen/typescript-graphql-files-modules": "^2.2.0",
+    "@graphql-codegen/typescript-graphql-request": "^4.5.1",
+    "@graphql-codegen/typescript-operations": "^2.5.1",
    "@types/cors": "^2.8.12",
-    "@types/gl": "^4.1.0",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
+    "@types/gl": "^4.1.1",
+    "@types/jest": "^28.1.6",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
    "benchmark": "^2.1.4",
-    "concurrently": "^7.0.0",
+    "concurrently": "^7.2.2",
    "cpx2": "^4.2.0",
    "crypto-browserify": "^3.12.0",
    "css-loader": "^6.7.1",
-    "eslint": "^8.11.0",
+    "eslint": "^8.19.0",
    "extra-watch-webpack-plugin": "^1.0.3",
    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.1",
-    "graphql": "^16.3.0",
-    "http-server": "^14.1.0",
-    "jest": "^27.5.1",
-    "mini-css-extract-plugin": "^2.6.0",
+    "fs-extra": "^10.1.0",
+    "graphql": "^16.5.0",
+    "http-server": "^14.1.1",
+    "jest": "^28.1.3",
+    "mini-css-extract-plugin": "^2.6.1",
    "path-browserify": "^1.0.1",
    "raw-loader": "^4.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sass": "^1.49.9",
-    "sass-loader": "^12.6.0",
-    "simple-git": "^3.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
+    "simple-git": "^3.10.0",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.1",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.6.3",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2"
+    "ts-jest": "^28.0.6",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "@types/argparse": "^2.0.10",
    "@types/benchmark": "^2.1.1",
    "@types/compression": "1.7.2",
    "@types/express": "^4.17.13",
-    "@types/node": "^16.11.26",
-    "@types/node-fetch": "^2.6.1",
+    "@types/node": "^16.11.45",
+    "@types/node-fetch": "^2.6.2",
    "@types/swagger-ui-dist": "3.30.1",
    "argparse": "^2.0.1",
-    "body-parser": "^1.19.2",
+    "body-parser": "^1.20.0",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
-    "express": "^4.17.3",
+    "express": "^4.18.1",
    "h264-mp4-encoder": "^1.0.12",
-    "immer": "^9.0.12",
-    "immutable": "^4.0.0",
+    "immer": "^9.0.15",
+    "immutable": "^4.1.0",
    "node-fetch": "^2.6.7",
-    "rxjs": "^7.5.5",
-    "swagger-ui-dist": "^4.6.2",
-    "tslib": "^2.3.1",
+    "rxjs": "^7.5.6",
+    "swagger-ui-dist": "^4.12.0",
+    "tslib": "^2.4.0",
    "util.promisify": "^1.1.1",
    "xhr2": "^0.2.1"
  },
  "peerDependencies": {
-    "react": "^18.0.0 || ^17.0.2 || ^16.14.0",
-    "react-dom": "^18.0.0 || ^17.0.2 || ^16.14.0"
+    "react": "^18.1.0 || ^17.0.2 || ^16.14.0",
+    "react-dom": "^18.1.0 || ^17.0.2 || ^16.14.0"
  }
 }
--- a/src/apps/viewer/app.ts
+++ b/src/apps/viewer/app.ts
@@ -45,9 +45,10 @@ import { Asset } from '../../mol-util/assets';
 import { Color } from '../../mol-util/color';
 import '../../mol-util/polyfill';
 import { ObjectKeys } from '../../mol-util/type-helpers';
+import { SaccharideCompIdMapType } from '../../mol-model/structure/structure/carbohydrates/constants';

 export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
-export { setDebugMode, setProductionMode } from '../../mol-util/debug';
+export { setDebugMode, setProductionMode, setTimingMode } from '../../mol-util/debug';

 const CustomFormats = [
    ['g3d', G3dProvider] as const
@@ -92,11 +93,13 @@ const DefaultViewerOptions = {
    viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,
    viewportShowSelectionMode: PluginConfig.Viewport.ShowSelectionMode.defaultValue,
    viewportShowAnimation: PluginConfig.Viewport.ShowAnimation.defaultValue,
+    viewportShowTrajectoryControls: PluginConfig.Viewport.ShowTrajectoryControls.defaultValue,
    pluginStateServer: PluginConfig.State.DefaultServer.defaultValue,
    volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,
    volumeStreamingDisabled: !PluginConfig.VolumeStreaming.Enabled.defaultValue,
    pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,
    emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
+    saccharideCompIdMapType: 'default' as SaccharideCompIdMapType,
 };
 type ViewerOptions = typeof DefaultViewerOptions;

@@ -159,6 +162,7 @@ export class Viewer {
                [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                [PluginConfig.Viewport.ShowTrajectoryControls, o.viewportShowTrajectoryControls],
                [PluginConfig.State.DefaultServer, o.pluginStateServer],
                [PluginConfig.State.CurrentServer, o.pluginStateServer],
                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
@@ -166,6 +170,7 @@ export class Viewer {
                [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
                [PluginConfig.Structure.DefaultRepresentationPreset, ViewerAutoPreset.id],
+                [PluginConfig.Structure.SaccharideCompIdMapType, o.saccharideCompIdMapType],
            ]
        };

@@ -397,7 +402,7 @@ export class Viewer {
    async loadTrajectory(params: LoadTrajectoryParams) {
        const plugin = this.plugin;

-        let model: StateObjectSelector, coords: StateObjectSelector;
+        let model: StateObjectSelector;

        if (params.model.kind === 'model-data' || params.model.kind === 'model-url') {
            const data = params.model.kind === 'model-data'
@@ -415,14 +420,12 @@ export class Viewer {
            model = await provider!.parse(plugin, data);
        }

-        {
-            const data = params.coordinates.kind === 'coordinates-data'
-                ? await plugin.builders.data.rawData({ data: params.coordinates.data, label: params.coordinatesLabel })
-                : await plugin.builders.data.download({ url: params.coordinates.url, isBinary: params.coordinates.isBinary, label: params.coordinatesLabel });
+        const data = params.coordinates.kind === 'coordinates-data'
+            ? await plugin.builders.data.rawData({ data: params.coordinates.data, label: params.coordinatesLabel })
+            : await plugin.builders.data.download({ url: params.coordinates.url, isBinary: params.coordinates.isBinary, label: params.coordinatesLabel });

-            const provider = plugin.dataFormats.get(params.coordinates.format);
-            coords = await provider!.parse(plugin, data);
-        }
+        const provider = plugin.dataFormats.get(params.coordinates.format);
+        const coords = await provider!.parse(plugin, data);

        const trajectory = await plugin.build().toRoot()
            .apply(TrajectoryFromModelAndCoordinates, {
--- a/src/apps/viewer/index.html
+++ b/src/apps/viewer/index.html
@@ -46,7 +46,10 @@
            }

            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
-            if (debugMode) molstar.setDebugMode(debugMode, debugMode);
+            if (debugMode) molstar.setDebugMode(debugMode);
+
+            var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
+            if (timingMode) molstar.setTimingMode(timingMode);

            var hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
            var collapseLeftPanel = getParam('collapse-left-panel', '[^&]+').trim() === '1';
--- a/src/cli/chem-comp-dict/create-ions.ts
+++ b/src/cli/chem-comp-dict/create-ions.ts
@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Josh McMenemy <josh.mcmenemy@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import * as argparse from 'argparse';
@@ -31,11 +32,11 @@ function extractIonNames(ccd: DatabaseCollection<CCD_Schema>) {

 function writeIonNamesFile(filePath: string, ionNames: string[]) {
    const output = `/**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * Code-generated ion names params file. Names extracted from CCD components.
 *
- * @author molstar/chem-comp-dict/create-table cli
+ * @author molstar/chem-comp-dict/create-ions cli
 */

 export const IonNames = new Set(${JSON.stringify(ionNames).replace(/"/g, "'").replace(/,/g, ', ')});
--- a/src/cli/cifschema/index.ts
+++ b/src/cli/cifschema/index.ts
@@ -161,7 +161,7 @@ const MMCIF_DIC_URL = 'http://mmcif.wwpdb.org/dictionaries/ascii/mmcif_pdbx_v50.
 const IHM_DIC_PATH = `${DIC_DIR}/ihm-extension.dic`;
 const IHM_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/IHM-dictionary/master/ihm-extension.dic';
 const MA_DIC_PATH = `${DIC_DIR}/ma-extension.dic`;
-const MA_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/MA-dictionary/master/mmcif_ma.dic';
+const MA_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/ModelCIF/master/dist/mmcif_ma.dic';

 const CIF_CORE_DIC_PATH = `${DIC_DIR}/cif_core.dic`;
 const CIF_CORE_DIC_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/cif_core.dic';
--- a/src/cli/cifschema/util/cif-dic.ts
+++ b/src/cli/cifschema/util/cif-dic.ts
@@ -51,6 +51,7 @@ export function getFieldType(type: string, description: string, values?: string[
        case 'operation_expression':
        case 'point_symmetry':
        case '4x3_matrix':
+        case '3x4_matrix':
        case '3x4_matrices':
        case 'point_group':
        case 'point_group_helical':
--- a/src/examples/alpha-orbitals/index.html
+++ b/src/examples/alpha-orbitals/index.html
@@ -55,6 +55,17 @@
            </a>
        </div>
        <script>
+            function getParam(name, regex) {
+                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
+                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
+            }
+
+            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
+            if (debugMode) AlphaOrbitalsExample.setDebugMode(debugMode);
+
+            var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
+            if (timingMode) AlphaOrbitalsExample.setTimingMode(timingMode);
+
            AlphaOrbitalsExample.init('app')
        </script>
        <!-- __MOLSTAR_ANALYTICS__ -->
--- a/src/examples/alpha-orbitals/index.ts
+++ b/src/examples/alpha-orbitals/index.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -25,6 +25,8 @@ import { DemoMoleculeSDF, DemoOrbitals } from './example-data';
 import './index.html';
 require('mol-plugin-ui/skin/light.scss');

+import { setDebugMode, setTimingMode } from '../../mol-util/debug';
+
 interface DemoInput {
    moleculeSdf: string,
    basis: Basis,
@@ -222,4 +224,6 @@ export class AlphaOrbitalsExample {
    }
 }

-(window as any).AlphaOrbitalsExample = new AlphaOrbitalsExample();
+(window as any).AlphaOrbitalsExample = new AlphaOrbitalsExample();
+(window as any).AlphaOrbitalsExample.setDebugMode = setDebugMode;
+(window as any).AlphaOrbitalsExample.setTimingMode = setTimingMode;
--- a/src/extensions/alpha-orbitals/density.ts
+++ b/src/extensions/alpha-orbitals/density.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -8,6 +8,7 @@ import { sortArray } from '../../mol-data/util';
 import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
 import { WebGLContext } from '../../mol-gl/webgl/context';
 import { Task } from '../../mol-task';
+import { isTimingMode } from '../../mol-util/debug';
 import { AlphaOrbital, createGrid, CubeGrid, CubeGridComputationParams, initCubeGrid } from './data-model';
 import { gpuComputeAlphaOrbitalsDensityGridValues } from './gpu/compute';

@@ -19,9 +20,9 @@ export function createSphericalCollocationDensityGrid(

        let matrix: Float32Array;
        if (canComputeGrid3dOnGPU(webgl)) {
-            // console.time('gpu');
-            matrix = await gpuComputeAlphaOrbitalsDensityGridValues(ctx, webgl!, cubeGrid, orbitals);
-            // console.timeEnd('gpu');
+            if (isTimingMode) webgl.timer.mark('createSphericalCollocationDensityGrid');
+            matrix = await gpuComputeAlphaOrbitalsDensityGridValues(ctx, webgl, cubeGrid, orbitals);
+            if (isTimingMode) webgl.timer.markEnd('createSphericalCollocationDensityGrid');
        } else {
            throw new Error('Missing OES_texture_float WebGL extension.');
        }
--- a/src/extensions/alpha-orbitals/orbitals.ts
+++ b/src/extensions/alpha-orbitals/orbitals.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * Inspired by https://github.com/dgasmith/gau2grid.
 *
@@ -10,12 +10,11 @@ import { sortArray } from '../../mol-data/util';
 import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
 import { WebGLContext } from '../../mol-gl/webgl/context';
 import { Task } from '../../mol-task';
+import { isTimingMode } from '../../mol-util/debug';
 import { sphericalCollocation } from './collocation';
 import { AlphaOrbital, createGrid, CubeGrid, CubeGridComputationParams, initCubeGrid } from './data-model';
 import { gpuComputeAlphaOrbitalsGridValues } from './gpu/compute';

-// setDebugMode(true);
-
 export function createSphericalCollocationGrid(
    params: CubeGridComputationParams, orbital: AlphaOrbital, webgl?: WebGLContext
 ): Task<CubeGrid> {
@@ -24,9 +23,9 @@ export function createSphericalCollocationGrid(

        let matrix: Float32Array;
        if (canComputeGrid3dOnGPU(webgl)) {
-            // console.time('gpu');
-            matrix = await gpuComputeAlphaOrbitalsGridValues(ctx, webgl!, cubeGrid, orbital);
-            // console.timeEnd('gpu');
+            if (isTimingMode) webgl.timer.mark('createSphericalCollocationGrid');
+            matrix = await gpuComputeAlphaOrbitalsGridValues(ctx, webgl, cubeGrid, orbital);
+            if (isTimingMode) webgl.timer.markEnd('createSphericalCollocationGrid');
        } else {
            // console.time('cpu');
            matrix = await sphericalCollocation(cubeGrid, orbital, ctx);
--- a/src/extensions/cellpack/model.ts
+++ b/src/extensions/cellpack/model.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 * @author Ludovic Autin <ludovic.autin@gmail.com>
@@ -12,7 +12,7 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Ingredient, CellPacking, CompartmentPrimitives } from './data';
 import { getFromPdb, getFromCellPackDB, IngredientFiles, parseCif, parsePDBfile, getStructureMean, getFromOPM } from './util';
 import { Model, Structure, StructureSymmetry, StructureSelection, QueryContext, Unit, Trajectory } from '../../mol-model/structure';
-import { trajectoryFromMmCIF, MmcifFormat } from '../../mol-model-formats/structure/mmcif';
+import { trajectoryFromMmCIF } from '../../mol-model-formats/structure/mmcif';
 import { trajectoryFromPDB } from '../../mol-model-formats/structure/pdb';
 import { Mat4, Vec3, Quat } from '../../mol-math/linear-algebra';
 import { SymmetryOperator } from '../../mol-math/geometry';
@@ -22,17 +22,12 @@ import { ParseCellPack, StructureFromCellpack, DefaultCellPackBaseUrl, Structure
 import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
 import { getMatFromResamplePoints } from './curve';
 import { compile } from '../../mol-script/runtime/query/compiler';
-import { CifCategory, CifField } from '../../mol-io/reader/cif';
-import { mmCIF_Schema } from '../../mol-io/reader/cif/schema/mmcif';
-import { Column } from '../../mol-data/db';
-import { createModels } from '../../mol-model-formats/structure/basic/parser';
 import { CellpackPackingPreset, CellpackMembranePreset } from './preset';
 import { Asset } from '../../mol-util/assets';
 import { Color } from '../../mol-util/color';
 import { objectForEach } from '../../mol-util/object';
 import { readFromFile } from '../../mol-util/data-source';
 import { ColorNames } from '../../mol-util/color/names';
-import { createBasic } from '../../mol-model-formats/structure/basic/schema';

 function getCellPackModelUrl(fileName: string, baseUrl: string) {
    return `${baseUrl}/results/${fileName}`;
@@ -142,7 +137,7 @@ async function getStructure(plugin: PluginContext, model: Model, source: Ingredi

 function getTransformLegacy(trans: Vec3, rot: Quat) {
    const q: Quat = Quat.create(-rot[3], rot[0], rot[1], rot[2]);
-    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q);
+    const m: Mat4 = Mat4.fromQuat(Mat4(), q);
    Mat4.transpose(m, m);
    Mat4.scale(m, m, Vec3.create(-1.0, 1.0, -1.0));
    Mat4.setTranslation(m, trans);
@@ -151,7 +146,7 @@ function getTransformLegacy(trans: Vec3, rot: Quat) {

 function getTransform(trans: Vec3, rot: Quat) {
    const q: Quat = Quat.create(-rot[0], rot[1], rot[2], -rot[3]);
-    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q);
+    const m: Mat4 = Mat4.fromQuat(Mat4(), q);
    const p: Vec3 = Vec3.create(-trans[0], trans[1], trans[2]);
    Mat4.setTranslation(m, p);
    return m;
@@ -214,111 +209,10 @@ function getAssembly(name: string, transforms: Mat4[], structure: Structure) {
    return builder.getStructure();
 }

-function getCifCurve(name: string, transforms: Mat4[], model: Model) {
-    if (!MmcifFormat.is(model.sourceData)) throw new Error('mmcif source data needed');
-
-    const { db } = model.sourceData.data;
-    const d = db.atom_site;
-    const n = d._rowCount;
-    const rowCount = n * transforms.length;
-
-    const { offsets, count } = model.atomicHierarchy.chainAtomSegments;
-
-    const x = d.Cartn_x.toArray();
-    const y = d.Cartn_y.toArray();
-    const z = d.Cartn_z.toArray();
-
-    const Cartn_x = new Float32Array(rowCount);
-    const Cartn_y = new Float32Array(rowCount);
-    const Cartn_z = new Float32Array(rowCount);
-    const map = new Uint32Array(rowCount);
-    const seq = new Int32Array(rowCount);
-    let offset = 0;
-    for (let c = 0; c < count; ++c) {
-        const cStart = offsets[c];
-        const cEnd = offsets[c + 1];
-        const cLength = cEnd - cStart;
-        for (let t = 0, tl = transforms.length; t < tl; ++t) {
-            const m = transforms[t];
-            for (let j = cStart; j < cEnd; ++j) {
-                const i = offset + j - cStart;
-                const xj = x[j], yj = y[j], zj = z[j];
-                Cartn_x[i] = m[0] * xj + m[4] * yj + m[8] * zj + m[12];
-                Cartn_y[i] = m[1] * xj + m[5] * yj + m[9] * zj + m[13];
-                Cartn_z[i] = m[2] * xj + m[6] * yj + m[10] * zj + m[14];
-                map[i] = j;
-                seq[i] = t + 1;
-            }
-            offset += cLength;
-        }
-    }
-
-    function multColumn<T>(column: Column<T>) {
-        const array = column.toArray();
-        return Column.ofLambda({
-            value: row => array[map[row]],
-            areValuesEqual: (rowA, rowB) => map[rowA] === map[rowB] || array[map[rowA]] === array[map[rowB]],
-            rowCount, schema: column.schema
-        });
-    }
-
-    const _atom_site: CifCategory.SomeFields<mmCIF_Schema['atom_site']> = {
-        auth_asym_id: CifField.ofColumn(multColumn(d.auth_asym_id)),
-        auth_atom_id: CifField.ofColumn(multColumn(d.auth_atom_id)),
-        auth_comp_id: CifField.ofColumn(multColumn(d.auth_comp_id)),
-        auth_seq_id: CifField.ofNumbers(seq),
-
-        B_iso_or_equiv: CifField.ofColumn(Column.ofConst(0, rowCount, Column.Schema.float)),
-        Cartn_x: CifField.ofNumbers(Cartn_x),
-        Cartn_y: CifField.ofNumbers(Cartn_y),
-        Cartn_z: CifField.ofNumbers(Cartn_z),
-        group_PDB: CifField.ofColumn(Column.ofConst('ATOM', rowCount, Column.Schema.str)),
-        id: CifField.ofColumn(Column.ofLambda({
-            value: row => row,
-            areValuesEqual: (rowA, rowB) => rowA === rowB,
-            rowCount, schema: d.id.schema,
-        })),
-
-        label_alt_id: CifField.ofColumn(multColumn(d.label_alt_id)),
-
-        label_asym_id: CifField.ofColumn(multColumn(d.label_asym_id)),
-        label_atom_id: CifField.ofColumn(multColumn(d.label_atom_id)),
-        label_comp_id: CifField.ofColumn(multColumn(d.label_comp_id)),
-        label_seq_id: CifField.ofNumbers(seq),
-        label_entity_id: CifField.ofColumn(Column.ofConst('1', rowCount, Column.Schema.str)),
-
-        occupancy: CifField.ofColumn(Column.ofConst(1, rowCount, Column.Schema.float)),
-        type_symbol: CifField.ofColumn(multColumn(d.type_symbol)),
-
-        pdbx_PDB_ins_code: CifField.ofColumn(Column.ofConst('', rowCount, Column.Schema.str)),
-        pdbx_PDB_model_num: CifField.ofColumn(Column.ofConst(1, rowCount, Column.Schema.int)),
-    };
-
-    const categories = {
-        entity: CifCategory.ofTable('entity', db.entity),
-        chem_comp: CifCategory.ofTable('chem_comp', db.chem_comp),
-        atom_site: CifCategory.ofFields('atom_site', _atom_site)
-    };
-
-    return {
-        header: name,
-        categoryNames: Object.keys(categories),
-        categories
-    };
-}
-
-async function getCurve(plugin: PluginContext, name: string, ingredient: Ingredient, transforms: Mat4[], model: Model) {
-    const cif = getCifCurve(name, transforms, model);
-    const curveModelTask = Task.create('Curve Model', async ctx => {
-        const format = MmcifFormat.fromFrame(cif);
-        const basic = createBasic(format.data.db, true);
-        const models = await createModels(basic, format, ctx);
-        return models.representative;
-    });
-
-    const curveModel = await plugin.runTask(curveModelTask);
-    // ingredient.source.selection = undefined;
-    return getStructure(plugin, curveModel, ingredient);
+async function getCurve(name: string, transforms: Mat4[], model: Model) {
+    const structure = Structure.ofModel(model);
+    const assembly = getAssembly(name, transforms, structure);
+    return assembly;
 }

 async function getIngredientStructure(plugin: PluginContext, ingredient: Ingredient, baseUrl: string, ingredientFiles: IngredientFiles, trajCache: TrajectoryCache, location: 'surface' | 'interior' | 'cytoplasme') {
@@ -339,7 +233,7 @@ async function getIngredientStructure(plugin: PluginContext, ingredient: Ingredi
    if (!model) return;
    let structure: Structure;
    if (nbCurve) {
-        structure = await getCurve(plugin, name, ingredient, getCurveTransforms(ingredient), model);
+        structure = await getCurve(name, getCurveTransforms(ingredient), model);
    } else {
        if ((!results || results.length === 0)) return;
        let bu: string|undefined = source.bu ? source.bu : undefined;
@@ -363,7 +257,7 @@ async function getIngredientStructure(plugin: PluginContext, ingredient: Ingredi
            structure = Structure.transform(structure, m1);
            if (ingredient.offset) {
                const o: Vec3 = Vec3.create(ingredient.offset[0], ingredient.offset[1], ingredient.offset[2]);
-                if (!Vec3.exactEquals(o, Vec3.zero())) { // -1, 1, 4e-16 ??
+                if (!Vec3.exactEquals(o, Vec3())) { // -1, 1, 4e-16 ??
                    if (location !== 'surface') {
                        Vec3.negate(o, o);
                    }
@@ -377,7 +271,7 @@ async function getIngredientStructure(plugin: PluginContext, ingredient: Ingredi
                if (!Vec3.exactEquals(p, Vec3.unitZ)) {
                    const q: Quat = Quat.identity();
                    Quat.rotationTo(q, p, Vec3.unitZ);
-                    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q);
+                    const m: Mat4 = Mat4.fromQuat(Mat4(), q);
                    structure = Structure.transform(structure, m);
                }
            }
@@ -521,6 +415,7 @@ async function loadMembrane(plugin: PluginContext, name: string, state: State, p
            .apply(StructureFromAssemblies, undefined, { state: { isGhost: true } })
            .commit({ revertOnError: true });
        const membraneParams = {
+            ignoreLight: params.preset.adjustStyle,
            representation: params.preset.representation,
        };
        await CellpackMembranePreset.apply(membrane, membraneParams, plugin);
@@ -537,6 +432,7 @@ async function loadMembrane(plugin: PluginContext, name: string, state: State, p
            .apply(StateTransforms.Model.StructureFromModel, props, { state: { isGhost: true } })
            .commit({ revertOnError: true });
        const membraneParams = {
+            ignoreLight: params.preset.adjustStyle,
            representation: params.preset.representation,
        };
        await CellpackMembranePreset.apply(membrane, membraneParams, plugin);
@@ -620,6 +516,7 @@ async function loadPackings(plugin: PluginContext, runtime: RuntimeContext, stat

        const packingParams = {
            traceOnly: params.preset.traceOnly,
+            ignoreLight: params.preset.adjustStyle,
            representation: params.preset.representation,
        };
        await CellpackPackingPreset.apply(packing, packingParams, plugin);
@@ -671,7 +568,8 @@ const LoadCellPackModelParams = {
    ingredients: PD.FileList({ accept: '.cif,.bcif,.pdb', label: 'Ingredient files' }),
    preset: PD.Group({
        traceOnly: PD.Boolean(false),
-        representation: PD.Select('gaussian-surface', PD.arrayToOptions(['spacefill', 'gaussian-surface', 'point', 'orientation']))
+        adjustStyle: PD.Boolean(true),
+        representation: PD.Select('gaussian-surface', PD.arrayToOptions(['spacefill', 'gaussian-surface', 'point', 'orientation'] as const))
    }, { isExpanded: true })
 };
 type LoadCellPackModelParams = PD.Values<typeof LoadCellPackModelParams>
@@ -681,5 +579,43 @@ export const LoadCellPackModel = StateAction.build({
    params: LoadCellPackModelParams,
    from: PSO.Root
 })(({ state, params }, ctx: PluginContext) => Task.create('CellPack Loader', async taskCtx => {
+    if (params.preset.adjustStyle) {
+        ctx.managers.interactivity.setProps({ granularity: 'chain' });
+        ctx.managers.structure.component.setOptions({
+            ... ctx.managers.structure.component.state.options,
+            visualQuality: 'custom',
+            ignoreLight: true,
+            showHydrogens: false,
+        });
+        ctx.canvas3d?.setProps({
+            multiSample: { mode: 'off' },
+            cameraClipping: { far: false },
+            renderer: { colorMarker: false },
+            marking: {
+                enabled: true,
+                ghostEdgeStrength: 1,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        radius: 8,
+                        bias: 1,
+                        blurKernelSize: 15,
+                        resolutionScale: 1,
+                    }
+                },
+                outline: {
+                    name: 'on',
+                    params: {
+                        scale: 1,
+                        threshold: 0.33,
+                        color: ColorNames.black,
+                    }
+                }
+            }
+        });
+    }
    await loadPackings(ctx, taskCtx, state, params);
 }));
--- a/src/extensions/cellpack/preset.ts
+++ b/src/extensions/cellpack/preset.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 * @author Ludovic Autin <ludovic.autin@gmail.com>
@@ -13,7 +13,8 @@ import { CellPackGenerateColorThemeProvider } from './color/generate';

 export const CellpackPackingPresetParams = {
    traceOnly: PD.Boolean(true),
-    representation: PD.Select('gaussian-surface', PD.arrayToOptions(['gaussian-surface', 'spacefill', 'point', 'orientation'])),
+    ignoreLight: PD.Boolean(false),
+    representation: PD.Select('gaussian-surface', PD.arrayToOptions(['gaussian-surface', 'spacefill', 'point', 'orientation'] as const)),
 };
 export type CellpackPackingPresetParams = PD.ValuesFor<typeof CellpackPackingPresetParams>

@@ -27,7 +28,9 @@ export const CellpackPackingPreset = StructureRepresentationPresetProvider({

        const reprProps = {
            ignoreHydrogens: true,
-            traceOnly: params.traceOnly
+            traceOnly: params.traceOnly,
+            instanceGranularity: true,
+            ignoreLight: params.ignoreLight,
        };
        const components = {
            polymer: await presetStaticComponent(plugin, structureCell, 'polymer')
@@ -37,8 +40,8 @@ export const CellpackPackingPreset = StructureRepresentationPresetProvider({
            Object.assign(reprProps, {
                quality: 'custom', resolution: 10, radiusOffset: 2, doubleSided: false
            });
-        } else if (params.representation === 'spacefill' && params.traceOnly) {
-            Object.assign(reprProps, { sizeFactor: 2 });
+        } else if (params.representation === 'spacefill') {
+            Object.assign(reprProps, { sizeFactor: params.traceOnly ? 2 : 1 });
        }

        // default is generated
@@ -57,7 +60,8 @@ export const CellpackPackingPreset = StructureRepresentationPresetProvider({
 //

 export const CellpackMembranePresetParams = {
-    representation: PD.Select('gaussian-surface', PD.arrayToOptions(['gaussian-surface', 'spacefill', 'point', 'orientation'])),
+    ignoreLight: PD.Boolean(false),
+    representation: PD.Select('gaussian-surface', PD.arrayToOptions(['gaussian-surface', 'spacefill', 'point', 'orientation'] as const)),
 };
 export type CellpackMembranePresetParams = PD.ValuesFor<typeof CellpackMembranePresetParams>

@@ -71,6 +75,8 @@ export const CellpackMembranePreset = StructureRepresentationPresetProvider({

        const reprProps = {
            ignoreHydrogens: true,
+            instanceGranularity: true,
+            ignoreLight: params.ignoreLight,
        };
        const components = {
            membrane: await presetStaticComponent(plugin, structureCell, 'all', { label: 'Membrane' })
@@ -84,7 +90,7 @@ export const CellpackMembranePreset = StructureRepresentationPresetProvider({

        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, {});
        const representations = {
-            membrane: builder.buildRepresentation(update, components.membrane, { type: 'gaussian-surface', typeParams: { ...typeParams, ...reprProps }, color: 'uniform', colorParams: { value: ColorNames.lightgrey } }, { tag: 'all' })
+            membrane: builder.buildRepresentation(update, components.membrane, { type: params.representation, typeParams: { ...typeParams, ...reprProps }, color: 'uniform', colorParams: { value: ColorNames.lightgrey } }, { tag: 'all' })
        };

        await update.commit({ revertOnError: true });
--- a/src/extensions/geo-export/ui.tsx
+++ b/src/extensions/geo-export/ui.tsx
@@ -71,6 +71,7 @@ export class GeometryExporterUI extends CollapsableControls<{}, State> {
    }

    componentWillUnmount() {
+        super.componentWillUnmount();
        this._controls?.dispose();
        this._controls = void 0;
    }
--- a/src/extensions/mp4-export/ui.tsx
+++ b/src/extensions/mp4-export/ui.tsx
@@ -102,6 +102,7 @@ export class Mp4EncoderUI extends CollapsableControls<{}, State> {
    }

    componentWillUnmount() {
+        super.componentWillUnmount();
        this._controls?.dispose();
        this._controls = void 0;
    }
--- a/src/extensions/rcsb/graphql/types.ts
+++ b/src/extensions/rcsb/graphql/types.ts
@@ -4,7 +4,7 @@ export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
-// Generated on 2022-02-27T12:49:36-08:00
+// Generated on 2022-06-26T14:02:35-07:00

 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
@@ -659,6 +659,8 @@ export type CoreEntry = {
  readonly em_staining?: Maybe<ReadonlyArray<Maybe<EmStaining>>>;
  readonly em_vitrification?: Maybe<ReadonlyArray<Maybe<EmVitrification>>>;
  readonly entry?: Maybe<Entry>;
+  /** Get all groups for this PDB entry. */
+  readonly entry_groups?: Maybe<ReadonlyArray<Maybe<GroupEntry>>>;
  readonly exptl?: Maybe<ReadonlyArray<Maybe<Exptl>>>;
  readonly exptl_crystal?: Maybe<ReadonlyArray<Maybe<ExptlCrystal>>>;
  readonly exptl_crystal_grow?: Maybe<ReadonlyArray<Maybe<ExptlCrystalGrow>>>;
@@ -703,6 +705,7 @@ export type CoreEntry = {
  readonly rcsb_associated_holdings?: Maybe<CurrentEntry>;
  readonly rcsb_binding_affinity?: Maybe<ReadonlyArray<Maybe<RcsbBindingAffinity>>>;
  readonly rcsb_entry_container_identifiers: RcsbEntryContainerIdentifiers;
+  readonly rcsb_entry_group_membership?: Maybe<ReadonlyArray<Maybe<RcsbEntryGroupMembership>>>;
  readonly rcsb_entry_info: RcsbEntryInfo;
  readonly rcsb_external_references?: Maybe<ReadonlyArray<Maybe<RcsbExternalReferences>>>;
  /**
@@ -851,6 +854,8 @@ export type CorePolymerEntity = {
  readonly pdbx_entity_src_syn?: Maybe<ReadonlyArray<Maybe<PdbxEntitySrcSyn>>>;
  /** Get all unique Pfam annotations associated with this molecular entity. */
  readonly pfams?: Maybe<ReadonlyArray<Maybe<CorePfam>>>;
+  /** Get all groups for this PDB entity. */
+  readonly polymer_entity_groups?: Maybe<ReadonlyArray<Maybe<GroupPolymerEntity>>>;
  /** Get all unique polymer instances (chains) for this molecular entity. */
  readonly polymer_entity_instances?: Maybe<ReadonlyArray<Maybe<CorePolymerEntityInstance>>>;
  /** Get a BIRD chemical components described in this molecular entity. */
@@ -887,6 +892,7 @@ export type CorePolymerEntity = {
  readonly rcsb_polymer_entity_container_identifiers: RcsbPolymerEntityContainerIdentifiers;
  readonly rcsb_polymer_entity_feature?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityFeature>>>;
  readonly rcsb_polymer_entity_feature_summary?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityFeatureSummary>>>;
+  readonly rcsb_polymer_entity_group_membership?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityGroupMembership>>>;
  readonly rcsb_polymer_entity_keywords?: Maybe<RcsbPolymerEntityKeywords>;
  readonly rcsb_polymer_entity_name_com?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityNameCom>>>;
  readonly rcsb_polymer_entity_name_sys?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityNameSys>>>;
@@ -3198,6 +3204,46 @@ export type GeneName = {
  readonly value?: Maybe<Scalars['String']>;
 };

+export type GroupEntry = {
+  /** Get provenance associated with this group. */
+  readonly group_provenance?: Maybe<GroupProvenance>;
+  readonly rcsb_group_accession_info?: Maybe<RcsbGroupAccessionInfo>;
+  readonly rcsb_group_container_identifiers: RcsbGroupContainerIdentifiers;
+  readonly rcsb_group_info: RcsbGroupInfo;
+  readonly rcsb_group_related?: Maybe<ReadonlyArray<Maybe<RcsbGroupRelated>>>;
+  readonly rcsb_group_statistics?: Maybe<RcsbGroupStatistics>;
+  /** A unique textual identifier for a group */
+  readonly rcsb_id: Scalars['String'];
+};
+
+export type GroupMembersAlignmentScores = {
+  readonly query_coverage: Scalars['Int'];
+  readonly query_length: Scalars['Int'];
+  readonly target_coverage: Scalars['Int'];
+  readonly target_length: Scalars['Int'];
+};
+
+export type GroupPolymerEntity = {
+  /** Get provenance associated with this group. */
+  readonly group_provenance?: Maybe<GroupProvenance>;
+  readonly rcsb_group_accession_info?: Maybe<RcsbGroupAccessionInfo>;
+  readonly rcsb_group_container_identifiers: RcsbGroupContainerIdentifiers;
+  readonly rcsb_group_info: RcsbGroupInfo;
+  readonly rcsb_group_related?: Maybe<ReadonlyArray<Maybe<RcsbGroupRelated>>>;
+  readonly rcsb_group_statistics?: Maybe<RcsbGroupStatistics>;
+  /** A unique textual identifier for a group */
+  readonly rcsb_id: Scalars['String'];
+  readonly rcsb_polymer_entity_group_members_rankings?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityGroupMembersRankings>>>;
+  readonly rcsb_polymer_entity_group_sequence_alignment?: Maybe<RcsbPolymerEntityGroupSequenceAlignment>;
+};
+
+export type GroupProvenance = {
+  readonly rcsb_group_aggregation_method?: Maybe<RcsbGroupAggregationMethod>;
+  readonly rcsb_group_provenance_container_identifiers?: Maybe<RcsbGroupProvenanceContainerIdentifiers>;
+  /** A unique textual identifier for a group provenance */
+  readonly rcsb_id?: Maybe<Scalars['String']>;
+};
+
 export type InterfacePartnerFeatureAdditionalProperties = {
  /**
   * The additional property name.
@@ -3220,6 +3266,17 @@ export type InterfacePartnerFeatureFeaturePositions = {
  readonly values?: Maybe<ReadonlyArray<Maybe<Scalars['Float']>>>;
 };

+export type MethodDetails = {
+  /** A description of special aspects of the clustering process */
+  readonly description?: Maybe<Scalars['String']>;
+  /** Defines the name of the description associated with the clustering process */
+  readonly name?: Maybe<Scalars['String']>;
+  /** Defines the type of the description associated with the clustering process */
+  readonly type?: Maybe<Scalars['String']>;
+  /** Defines the value associated with the clustering process */
+  readonly value?: Maybe<Scalars['Float']>;
+};
+
 export type PdbxAuditRevisionCategory = {
  /**
   * The category updated in the pdbx_audit_revision_category record.
@@ -6779,6 +6836,12 @@ export type Query = {
  readonly entries?: Maybe<ReadonlyArray<Maybe<CoreEntry>>>;
  /** Get PDB entry given the PDB id. */
  readonly entry?: Maybe<CoreEntry>;
+  /** Given a group ID get a group object formed by aggregating individual structures that share a degree of similarity */
+  readonly entry_group?: Maybe<GroupEntry>;
+  /** Given a list of group IDs get a list of group objects formed by aggregating structures that share a degree of similarity */
+  readonly entry_groups?: Maybe<ReadonlyArray<Maybe<GroupEntry>>>;
+  /** Given a group provenance ID get an object that describes aggregation method used to create groups */
+  readonly group_provenance?: Maybe<GroupProvenance>;
  /** Get a pairwise polymeric interface given the PDB ID, ASSEMBLY ID and INTERFACE ID. */
  readonly interface?: Maybe<CoreInterface>;
  /** Get a list of pairwise polymeric interfaces given a list of INTERFACE IDs. Here INTERFACE ID is a compound identifier that includes entry_id, assembly_id and interface_id e.g. 1XXX-1.1. */
@@ -6795,6 +6858,10 @@ export type Query = {
  readonly polymer_entities?: Maybe<ReadonlyArray<Maybe<CorePolymerEntity>>>;
  /** Get a PDB polymer entity, given the PDB ID and ENTITY ID. Here ENTITY ID is a '1', '2', '3', etc. */
  readonly polymer_entity?: Maybe<CorePolymerEntity>;
+  /** Given a group ID get a group object formed by aggregating polymer entities that share a degree of similarity */
+  readonly polymer_entity_group?: Maybe<GroupPolymerEntity>;
+  /** Given a list of group IDs get a list of group objects formed by aggregating polymer entities that share a degree of similarity */
+  readonly polymer_entity_groups?: Maybe<ReadonlyArray<Maybe<GroupPolymerEntity>>>;
  /** Get a PDB polymer entity instance (chain), given the PDB ID and ENTITY INSTANCE ID. Here ENTITY INSTANCE ID identifies structural element in the asymmetric unit, e.g. 'A', 'B', etc. */
  readonly polymer_entity_instance?: Maybe<CorePolymerEntityInstance>;
  /** Get a list of PDB polymer entity instances (chains), given the list of ENTITY INSTANCE IDs. Here ENTITY INSTANCE ID identifies structural element in the asymmetric unit, e.g. 'A', 'B', etc. */
@@ -6869,6 +6936,24 @@ export type QueryEntryArgs = {
 };


+/** Query root */
+export type QueryEntry_GroupArgs = {
+  group_id: Scalars['String'];
+};
+
+
+/** Query root */
+export type QueryEntry_GroupsArgs = {
+  group_ids: ReadonlyArray<InputMaybe<Scalars['String']>>;
+};
+
+
+/** Query root */
+export type QueryGroup_ProvenanceArgs = {
+  group_provenance_id: Scalars['String'];
+};
+
+
 /** Query root */
 export type QueryInterfaceArgs = {
  assembly_id: Scalars['String'];
@@ -6922,6 +7007,18 @@ export type QueryPolymer_EntityArgs = {
 };


+/** Query root */
+export type QueryPolymer_Entity_GroupArgs = {
+  group_id: Scalars['String'];
+};
+
+
+/** Query root */
+export type QueryPolymer_Entity_GroupsArgs = {
+  group_ids: ReadonlyArray<InputMaybe<Scalars['String']>>;
+};
+
+
 /** Query root */
 export type QueryPolymer_Entity_InstanceArgs = {
  asym_id: Scalars['String'];
@@ -8666,6 +8763,25 @@ export type RcsbEntryContainerIdentifiers = {
  readonly water_entity_ids?: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
 };

+export type RcsbEntryGroupMembership = {
+  /**
+   * Method used to establish group membership
+   *
+   * Allowable values:
+   * matching_deposit_group_id
+   *
+   */
+  readonly aggregation_method: Scalars['String'];
+  /**
+   * A unique identifier for a group of entries
+   *
+   * Examples:
+   * G_1001001
+   *
+   */
+  readonly group_id: Scalars['String'];
+};
+
 export type RcsbEntryInfo = {
  /** The number of assemblies defined for this entry including the deposited assembly. */
  readonly assembly_count?: Maybe<Scalars['Int']>;
@@ -8893,6 +9009,127 @@ export type RcsbGenomicLineage = {
  readonly name?: Maybe<Scalars['String']>;
 };

+export type RcsbGroupAccessionInfo = {
+  /** Identifies the version of the groups solution */
+  readonly version: Scalars['Int'];
+};
+
+export type RcsbGroupAggregationMethod = {
+  /** The details on a method used to calculate cluster solutions */
+  readonly method: RcsbGroupAggregationMethodMethod;
+  readonly similarity_criteria?: Maybe<RcsbGroupAggregationMethodSimilarityCriteria>;
+  /**
+   * Specifies the type of similarity criteria used to aggregate members into higher levels in the hierarchy
+   *
+   * Allowable values:
+   * sequence_identity, matching_uniprot_accession, matching_deposit_group_id
+   *
+   */
+  readonly type: Scalars['String'];
+};
+
+export type RcsbGroupAggregationMethodMethod = {
+  /** Additional details describing the clustering process */
+  readonly details?: Maybe<ReadonlyArray<Maybe<MethodDetails>>>;
+  /**
+   * The name of the software or the method used to calculate cluster solutions
+   *
+   * Allowable values:
+   * mmseqs2, matching_reference_identity
+   *
+   */
+  readonly name: Scalars['String'];
+  /**
+   * The version of the software.
+   *
+   * Examples:
+   * v1.0, 3.1-2, unknown
+   *
+   */
+  readonly version?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupAggregationMethodSimilarityCriteria = {
+  /**
+   * A function or similarity measure that quantifies the similarity between two members
+   *
+   * Allowable values:
+   * rmsd, sequence_identity
+   *
+   */
+  readonly similarity_function?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupContainerIdentifiers = {
+  /** A unique textual identifier for a group */
+  readonly group_id: Scalars['String'];
+  /** Member identifiers representing a group */
+  readonly group_member_ids: ReadonlyArray<Maybe<Scalars['String']>>;
+  /**
+   * A unique group provenance identifier
+   *
+   * Allowable values:
+   * provenance_sequence_identity, provenance_matching_uniprot_accession, provenance_matching_deposit_group_id
+   *
+   */
+  readonly group_provenance_id: Scalars['String'];
+  /** Member identifiers representing a higher level in the groping hierarchy that has parent-child relationship */
+  readonly parent_member_ids?: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+};
+
+export type RcsbGroupInfo = {
+  readonly group_description?: Maybe<Scalars['String']>;
+  readonly group_members_count: Scalars['Int'];
+  /**
+   * Granularity of group members identifiers
+   *
+   * Allowable values:
+   * assembly, entry, polymer_entity, polymer_entity_instance
+   *
+   */
+  readonly group_members_granularity: Scalars['String'];
+  readonly group_name?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupProvenanceContainerIdentifiers = {
+  /**
+   * A unique group provenance identifier
+   *
+   * Allowable values:
+   * provenance_sequence_identity, provenance_matching_uniprot_accession, provenance_matching_deposit_group_id
+   *
+   */
+  readonly group_provenance_id: Scalars['String'];
+};
+
+export type RcsbGroupRelated = {
+  /**
+   * A unique code assigned to a reference related the group
+   *
+   * Examples:
+   * P69905
+   *
+   */
+  readonly resource_accession_code?: Maybe<Scalars['String']>;
+  /**
+   * Defines the type of the resource describing related references
+   *
+   * Examples:
+   * UniProt
+   *
+   */
+  readonly resource_name?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupStatistics = {
+  /** The desired lower limit for the similarity between two members that belong to the same group */
+  readonly similarity_cutoff?: Maybe<Scalars['Float']>;
+  /** Similarity score between two most similar group members */
+  readonly similarity_score_max?: Maybe<Scalars['Float']>;
+  /** Similarity score between two least similar group members */
+  readonly similarity_score_min?: Maybe<Scalars['Float']>;
+};
+
 export type RcsbInterfaceContainerIdentifiers = {
  /** This item references an assembly in pdbx_struct_assembly */
  readonly assembly_id: Scalars['String'];
@@ -9902,6 +10139,7 @@ export type RcsbPolymerEntity = {
   *
   */
  readonly rcsb_multiple_source_flag?: Maybe<Scalars['String']>;
+  readonly rcsb_polymer_name_combined?: Maybe<RcsbPolymerEntityRcsbPolymerNameCombined>;
  /**
   * The number of biological sources for the polymer entity. Multiple source contributions
   *  may come from the same organism (taxonomy).
@@ -10228,6 +10466,69 @@ export type RcsbPolymerEntityFeatureSummary = {
  readonly type?: Maybe<Scalars['String']>;
 };

+export type RcsbPolymerEntityGroupMembersRankings = {
+  readonly group_members: ReadonlyArray<Maybe<RcsbPolymerEntityGroupMembersRankingsGroupMembers>>;
+  /**
+   * Defines ranking option applicable to group members
+   *
+   * Allowable values:
+   * coverage
+   *
+   */
+  readonly ranking_criteria_type: Scalars['String'];
+};
+
+export type RcsbPolymerEntityGroupMembersRankingsGroupMembers = {
+  readonly member_id: Scalars['String'];
+  /** Quantifies the criteria used for ranking */
+  readonly original_score?: Maybe<Scalars['Float']>;
+  /** Reflects a relationship between group members such that, for any two members the first is ranked higher (smaller rank value) than the second */
+  readonly rank: Scalars['Int'];
+};
+
+export type RcsbPolymerEntityGroupMembership = {
+  /**
+   * Method used to establish group membership
+   *
+   * Allowable values:
+   * sequence_identity, matching_uniprot_accession
+   *
+   */
+  readonly aggregation_method: Scalars['String'];
+  /**
+   * A unique identifier for a group of entities
+   *
+   * Examples:
+   * 1_100, P00003
+   *
+   */
+  readonly group_id: Scalars['String'];
+  /** Degree of similarity expressed as a floating-point number */
+  readonly similarity_cutoff?: Maybe<Scalars['Float']>;
+};
+
+export type RcsbPolymerEntityGroupSequenceAlignment = {
+  /** Abstract reference where group members can be aligned to generate a MSA */
+  readonly abstract_reference: RcsbPolymerEntityGroupSequenceAlignmentAbstractReference;
+  /** Alignment with a core_entity canonical sequence */
+  readonly group_members_alignment: ReadonlyArray<Maybe<RcsbPolymerEntityGroupSequenceAlignmentGroupMembersAlignment>>;
+};
+
+export type RcsbPolymerEntityGroupSequenceAlignmentAbstractReference = {
+  /** Abstract reference length */
+  readonly length: Scalars['Int'];
+  /** Sequence that represents the abstract reference */
+  readonly sequence?: Maybe<Scalars['String']>;
+};
+
+export type RcsbPolymerEntityGroupSequenceAlignmentGroupMembersAlignment = {
+  /** Alignment region encoded as a triplet [query_begin, target_begin, length] */
+  readonly aligned_regions: ReadonlyArray<Maybe<ReadonlyArray<Maybe<Scalars['Int']>>>>;
+  readonly member_id: Scalars['String'];
+  /** Alignment scores */
+  readonly scores: GroupMembersAlignmentScores;
+};
+
 export type RcsbPolymerEntityInstanceContainerIdentifiers = {
  /** Instance identifier for this container. */
  readonly asym_id: Scalars['String'];
@@ -10346,6 +10647,13 @@ export type RcsbPolymerEntityRcsbMacromolecularNamesCombined = {
  readonly provenance_source?: Maybe<Scalars['String']>;
 };

+export type RcsbPolymerEntityRcsbPolymerNameCombined = {
+  /** Protein name annotated by the UniProtKB or macromolecular name assigned by the PDB */
+  readonly names?: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+  /** Allowable values: PDB Preferred Name, PDB Description, UniProt Name. */
+  readonly provenance_source?: Maybe<Scalars['String']>;
+};
+
 export type RcsbPolymerInstanceAnnotation = {
  /** An identifier for the annotation. */
  readonly annotation_id?: Maybe<Scalars['String']>;
--- a/src/mol-canvas3d/canvas3d.ts
+++ b/src/mol-canvas3d/canvas3d.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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>
@@ -30,7 +30,7 @@ import { PickData } from './passes/pick';
 import { PickHelper } from './passes/pick';
 import { ImagePass, ImageProps } from './passes/image';
 import { Sphere3D } from '../mol-math/geometry';
-import { isDebugMode } from '../mol-util/debug';
+import { isDebugMode, isTimingMode } from '../mol-util/debug';
 import { CameraHelperParams } from './helper/camera-helper';
 import { produce } from 'immer';
 import { HandleHelperParams } from './helper/handle-helper';
@@ -372,12 +372,12 @@ namespace Canvas3D {
            const { repr, loci } = reprLoci;
            let changed = false;
            if (repr) {
-                changed = repr.mark(loci, action);
+                changed = repr.mark(loci, action) || changed;
            } else {
-                changed = helper.handle.mark(loci, action);
-                changed = helper.camera.mark(loci, action) || changed;
                reprRenderObjects.forEach((_, _repr) => { changed = _repr.mark(loci, action) || changed; });
            }
+            changed = helper.handle.mark(loci, action) || changed;
+            changed = helper.camera.mark(loci, action) || changed;
            return changed;
        }

@@ -395,7 +395,7 @@ namespace Canvas3D {
                y > gl.drawingBufferHeight || y + height < 0
            ) return false;

-            const markingUpdated = resolveMarking();
+            const markingUpdated = resolveMarking() && (renderer.props.colorMarker || p.marking.enabled);

            let didRender = false;
            controls.update(currentTime);
@@ -413,6 +413,7 @@ namespace Canvas3D {
                    cam = stereoCamera;
                }

+                if (isTimingMode) webgl.timer.mark('Canvas3D.render');
                const ctx = { renderer, camera: cam, scene, helper };
                if (MultiSamplePass.isEnabled(p.multiSample)) {
                    const forceOn = !cameraChanged && markingUpdated && !controls.isAnimating;
@@ -420,6 +421,8 @@ namespace Canvas3D {
                } else {
                    passes.draw.render(ctx, p, true);
                }
+                if (isTimingMode) webgl.timer.markEnd('Canvas3D.render');
+
                // if only marking has updated, do not set the flag to dirty
                pickHelper.dirty = pickHelper.dirty || shouldRender;
                didRender = true;
--- a/src/mol-canvas3d/helper/camera-helper.ts
+++ b/src/mol-canvas3d/helper/camera-helper.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -17,7 +17,7 @@ import { WebGLContext } from '../../mol-gl/webgl/context';
 import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';
 import { Sphere3D } from '../../mol-math/geometry';
 import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
-import { DataLoci, EmptyLoci, Loci } from '../../mol-model/loci';
+import { DataLoci, EmptyLoci, isEveryLoci, Loci } from '../../mol-model/loci';
 import { Shape } from '../../mol-model/shape';
 import { Visual } from '../../mol-repr/visual';
 import { ColorNames } from '../../mol-util/color/names';
@@ -113,8 +113,10 @@ export class CameraHelper {

    mark(loci: Loci, action: MarkerAction) {
        if (!MarkerActions.is(MarkerActions.Highlighting, action)) return false;
-        if (!isCameraAxesLoci(loci)) return false;
-        if (loci.data !== this) return false;
+        if (!isEveryLoci(loci)) {
+            if (!isCameraAxesLoci(loci)) return false;
+            if (loci.data !== this) return false;
+        }
        return Visual.mark(this.renderObject, loci, action, this.eachGroup);
    }

--- a/src/mol-canvas3d/helper/handle-helper.ts
+++ b/src/mol-canvas3d/helper/handle-helper.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -20,7 +20,7 @@ import produce from 'immer';
 import { Shape } from '../../mol-model/shape';
 import { PickingId } from '../../mol-geo/geometry/picking';
 import { Camera } from '../camera';
-import { DataLoci, EmptyLoci, Loci } from '../../mol-model/loci';
+import { DataLoci, EmptyLoci, isEveryLoci, Loci } from '../../mol-model/loci';
 import { MarkerAction, MarkerActions } from '../../mol-util/marker-action';
 import { Visual } from '../../mol-repr/visual';
 import { Interval } from '../../mol-data/int';
@@ -121,8 +121,10 @@ export class HandleHelper {

    mark(loci: Loci, action: MarkerAction) {
        if (!MarkerActions.is(MarkerActions.Highlighting, action)) return false;
-        if (!isHandleLoci(loci)) return false;
-        if (loci.data !== this) return false;
+        if (!isEveryLoci(loci)) {
+            if (!isHandleLoci(loci)) return false;
+            if (loci.data !== this) return false;
+        }
        return Visual.mark(this.renderObject, loci, action, this.eachGroup);
    }

--- a/src/mol-canvas3d/passes/draw.ts
+++ b/src/mol-canvas3d/passes/draw.ts
@@ -11,47 +11,16 @@ import { Renderer } from '../../mol-gl/renderer';
 import { Scene } from '../../mol-gl/scene';
 import { Texture } from '../../mol-gl/webgl/texture';
 import { Camera, ICamera } from '../camera';
-import { QuadSchema, QuadValues } from '../../mol-gl/compute/util';
-import { DefineSpec, TextureSpec, UniformSpec, Values } from '../../mol-gl/renderable/schema';
-import { ComputeRenderable, createComputeRenderable } from '../../mol-gl/renderable';
-import { ShaderCode } from '../../mol-gl/shader-code';
-import { createComputeRenderItem } from '../../mol-gl/webgl/render-item';
 import { ValueCell } from '../../mol-util';
 import { Vec2 } from '../../mol-math/linear-algebra';
 import { Helper } from '../helper/helper';

-import { quad_vert } from '../../mol-gl/shader/quad.vert';
-import { depthMerge_frag } from '../../mol-gl/shader/depth-merge.frag';
 import { StereoCamera } from '../camera/stereo';
 import { WboitPass } from './wboit';
 import { AntialiasingPass, PostprocessingPass, PostprocessingProps } from './postprocessing';
 import { MarkingPass, MarkingProps } from './marking';
 import { CopyRenderable, createCopyRenderable } from '../../mol-gl/compute/util';
-
-const DepthMergeSchema = {
-    ...QuadSchema,
-    tDepthPrimitives: TextureSpec('texture', 'depth', 'ushort', 'nearest'),
-    tDepthVolumes: TextureSpec('texture', 'depth', 'ushort', 'nearest'),
-    uTexSize: UniformSpec('v2'),
-    dPackedDepth: DefineSpec('boolean'),
-};
-const DepthMergeShaderCode = ShaderCode('depth-merge', quad_vert, depthMerge_frag);
-type DepthMergeRenderable = ComputeRenderable<Values<typeof DepthMergeSchema>>
-
-function getDepthMergeRenderable(ctx: WebGLContext, depthTexturePrimitives: Texture, depthTextureVolumes: Texture, packedDepth: boolean): DepthMergeRenderable {
-    const values: Values<typeof DepthMergeSchema> = {
-        ...QuadValues,
-        tDepthPrimitives: ValueCell.create(depthTexturePrimitives),
-        tDepthVolumes: ValueCell.create(depthTextureVolumes),
-        uTexSize: ValueCell.create(Vec2.create(depthTexturePrimitives.getWidth(), depthTexturePrimitives.getHeight())),
-        dPackedDepth: ValueCell.create(packedDepth),
-    };
-
-    const schema = { ...DepthMergeSchema };
-    const renderItem = createComputeRenderItem(ctx, 'triangles', DepthMergeShaderCode, schema, values);
-
-    return createComputeRenderable(renderItem, values);
-}
+import { isTimingMode } from '../../mol-util/debug';

 type Props = {
    postprocessing: PostprocessingProps
@@ -70,16 +39,13 @@ export class DrawPass {
    private readonly drawTarget: RenderTarget;

    readonly colorTarget: RenderTarget;
-    readonly depthTexture: Texture;
-    readonly depthTexturePrimitives: Texture;
+    readonly depthTextureTransparent: Texture;
+    readonly depthTextureOpaque: Texture;

    readonly packedDepth: boolean;

-    private depthTarget: RenderTarget;
-    private depthTargetPrimitives: RenderTarget | null;
-    private depthTargetVolumes: RenderTarget | null;
-    private depthTextureVolumes: Texture;
-    private depthMerge: DepthMergeRenderable;
+    private depthTargetTransparent: RenderTarget;
+    private depthTargetOpaque: RenderTarget | null;

    private copyFboTarget: CopyRenderable;
    private copyFboPostprocessing: CopyRenderable;
@@ -101,19 +67,15 @@ export class DrawPass {
        this.colorTarget = webgl.createRenderTarget(width, height, true, 'uint8', 'linear');
        this.packedDepth = !extensions.depthTexture;

-        this.depthTarget = webgl.createRenderTarget(width, height);
-        this.depthTexture = this.depthTarget.texture;
+        this.depthTargetTransparent = webgl.createRenderTarget(width, height);
+        this.depthTextureTransparent = this.depthTargetTransparent.texture;

-        this.depthTargetPrimitives = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
-        this.depthTargetVolumes = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
+        this.depthTargetOpaque = this.packedDepth ? webgl.createRenderTarget(width, height) : null;

-        this.depthTexturePrimitives = this.depthTargetPrimitives ? this.depthTargetPrimitives.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
-        this.depthTextureVolumes = this.depthTargetVolumes ? this.depthTargetVolumes.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
+        this.depthTextureOpaque = this.depthTargetOpaque ? this.depthTargetOpaque.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
        if (!this.packedDepth) {
-            this.depthTexturePrimitives.define(width, height);
-            this.depthTextureVolumes.define(width, height);
+            this.depthTextureOpaque.define(width, height);
        }
-        this.depthMerge = getDepthMergeRenderable(webgl, this.depthTexturePrimitives, this.depthTextureVolumes, this.packedDepth);

        this.wboit = enableWboit ? new WboitPass(webgl, width, height) : undefined;
        this.marking = new MarkingPass(webgl, width, height);
@@ -134,22 +96,14 @@ export class DrawPass {

        if (width !== w || height !== h) {
            this.colorTarget.setSize(width, height);
-            this.depthTarget.setSize(width, height);
+            this.depthTargetTransparent.setSize(width, height);

-            if (this.depthTargetPrimitives) {
-                this.depthTargetPrimitives.setSize(width, height);
+            if (this.depthTargetOpaque) {
+                this.depthTargetOpaque.setSize(width, height);
            } else {
-                this.depthTexturePrimitives.define(width, height);
+                this.depthTextureOpaque.define(width, height);
            }

-            if (this.depthTargetVolumes) {
-                this.depthTargetVolumes.setSize(width, height);
-            } else {
-                this.depthTextureVolumes.define(width, height);
-            }
-
-            ValueCell.update(this.depthMerge.values.uTexSize, Vec2.set(this.depthMerge.values.uTexSize.ref.value, width, height));
-
            ValueCell.update(this.copyFboTarget.values.uTexSize, Vec2.set(this.copyFboTarget.values.uTexSize.ref.value, width, height));
            ValueCell.update(this.copyFboPostprocessing.values.uTexSize, Vec2.set(this.copyFboPostprocessing.values.uTexSize.ref.value, width, height));

@@ -163,20 +117,6 @@ export class DrawPass {
        }
    }

-    private _depthMerge() {
-        const { state, gl } = this.webgl;
-
-        this.depthMerge.update();
-        this.depthTarget.bind();
-        state.disable(gl.BLEND);
-        state.disable(gl.DEPTH_TEST);
-        state.disable(gl.CULL_FACE);
-        state.depthMask(false);
-        state.clearColor(1, 1, 1, 1);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        this.depthMerge.render();
-    }
-
    private _renderWboit(renderer: Renderer, camera: ICamera, scene: Scene, transparentBackground: boolean, postprocessingProps: PostprocessingProps) {
        if (!this.wboit?.supported) throw new Error('expected wboit to be supported');

@@ -184,38 +124,41 @@ export class DrawPass {
        renderer.clear(true);

        // render opaque primitives
-        this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
+        this.depthTextureOpaque.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
        this.colorTarget.bind();
        renderer.clearDepth();
        renderer.renderWboitOpaque(scene.primitives, camera, null);

-        // render opaque volumes
-        this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-        this.colorTarget.bind();
-        renderer.clearDepth();
-        renderer.renderWboitOpaque(scene.volumes, camera, this.depthTexturePrimitives);
-
-        // merge depth of opaque primitives and volumes
-        this._depthMerge();
-
        if (PostprocessingPass.isEnabled(postprocessingProps)) {
+            if (PostprocessingPass.isOutlineEnabled(postprocessingProps)) {
+                this.depthTargetTransparent.bind();
+                renderer.clearDepth(true);
+                if (scene.opacityAverage < 1) {
+                    renderer.renderDepthTransparent(scene.primitives, camera, this.depthTextureOpaque);
+                }
+            }
+
            this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
        }

        // render transparent primitives and volumes
-        this.wboit.bind();
-        renderer.renderWboitTransparent(scene.primitives, camera, this.depthTexture);
-        renderer.renderWboitTransparent(scene.volumes, camera, this.depthTexture);
+        if (scene.opacityAverage < 1 || scene.volumes.renderables.length > 0) {
+            this.wboit.bind();
+            if (scene.opacityAverage < 1) {
+                renderer.renderWboitTransparent(scene.primitives, camera, this.depthTextureOpaque);
+            }
+            if (scene.volumes.renderables.length > 0) {
+                renderer.renderWboitTransparent(scene.volumes, camera, this.depthTextureOpaque);
+            }

-        // evaluate wboit
-        if (PostprocessingPass.isEnabled(postprocessingProps)) {
-            this.depthTexturePrimitives.attachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
-            this.postprocessing.target.bind();
-        } else {
-            this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-            this.colorTarget.bind();
+            // evaluate wboit
+            if (PostprocessingPass.isEnabled(postprocessingProps)) {
+                this.postprocessing.target.bind();
+            } else {
+                this.colorTarget.bind();
+            }
+            this.wboit.render();
        }
-        this.wboit.render();
    }

    private _renderBlended(renderer: Renderer, camera: ICamera, scene: Scene, toDrawingBuffer: boolean, transparentBackground: boolean, postprocessingProps: PostprocessingProps) {
@@ -224,7 +167,7 @@ export class DrawPass {
        } else {
            this.colorTarget.bind();
            if (!this.packedDepth) {
-                this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
+                this.depthTextureOpaque.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
            }
        }

@@ -234,47 +177,62 @@ export class DrawPass {
        if (!toDrawingBuffer) {
            // do a depth pass if not rendering to drawing buffer and
            // extensions.depthTexture is unsupported (i.e. depthTarget is set)
-            if (this.depthTargetPrimitives) {
-                this.depthTargetPrimitives.bind();
-                renderer.clear(false);
-                // TODO: this should only render opaque
-                renderer.renderDepth(scene.primitives, camera, null);
+            if (this.depthTargetOpaque) {
+                this.depthTargetOpaque.bind();
+                renderer.clearDepth(true);
+                renderer.renderDepthOpaque(scene.primitives, camera, null);
                this.colorTarget.bind();
            }

-            // do direct-volume rendering
-            if (!this.packedDepth) {
-                this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-                renderer.clearDepth(); // from previous frame
-            }
-            renderer.renderBlendedVolumeOpaque(scene.volumes, camera, this.depthTexturePrimitives);
-
-            // do volume depth pass if extensions.depthTexture is unsupported (i.e. depthTarget is set)
-            if (this.depthTargetVolumes) {
-                this.depthTargetVolumes.bind();
-                renderer.clear(false);
-                renderer.renderDepth(scene.volumes, camera, this.depthTexturePrimitives);
-                this.colorTarget.bind();
-            }
-
-            // merge depths from primitive and volume rendering
-            this._depthMerge();
-            this.colorTarget.bind();
-
            if (PostprocessingPass.isEnabled(postprocessingProps)) {
-                this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
-            }
-            renderer.renderBlendedVolumeTransparent(scene.volumes, camera, this.depthTexturePrimitives);
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.detachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
+                } else {
+                    this.colorTarget.depthRenderbuffer?.detachFramebuffer(this.postprocessing.target.framebuffer);
+                }

-            const target = PostprocessingPass.isEnabled(postprocessingProps)
-                ? this.postprocessing.target : this.colorTarget;
-            if (!this.packedDepth) {
-                this.depthTexturePrimitives.attachFramebuffer(target.framebuffer, 'depth');
+                if (PostprocessingPass.isOutlineEnabled(postprocessingProps)) {
+                    this.depthTargetTransparent.bind();
+                    renderer.clearDepth(true);
+                    if (scene.opacityAverage < 1) {
+                        renderer.renderDepthTransparent(scene.primitives, camera, this.depthTextureOpaque);
+                    }
+                }
+
+                this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
+
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.attachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
+                } else {
+                    this.colorTarget.depthRenderbuffer?.attachFramebuffer(this.postprocessing.target.framebuffer);
+                }
+            }
+
+            if (scene.volumes.renderables.length > 0) {
+                const target = PostprocessingPass.isEnabled(postprocessingProps)
+                    ? this.postprocessing.target : this.colorTarget;
+
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.detachFramebuffer(target.framebuffer, 'depth');
+                } else {
+                    this.colorTarget.depthRenderbuffer?.detachFramebuffer(target.framebuffer);
+                }
+                target.bind();
+
+                renderer.renderBlendedVolume(scene.volumes, camera, this.depthTextureOpaque);
+
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.attachFramebuffer(target.framebuffer, 'depth');
+                } else {
+                    this.colorTarget.depthRenderbuffer?.attachFramebuffer(target.framebuffer);
+                }
+                target.bind();
            }
-            target.bind();
        }

-        renderer.renderBlendedTransparent(scene.primitives, camera, null);
+        if (scene.opacityAverage < 1) {
+            renderer.renderBlendedTransparent(scene.primitives, camera, null);
+        }
    }

    private _render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, props: Props) {
@@ -307,10 +265,9 @@ export class DrawPass {
        }

        if (markingEnabled) {
-            const markerAverage = scene.getMarkerAverage();
-            if (markerAverage > 0) {
+            if (scene.markerAverage > 0) {
                const markingDepthTest = props.marking.ghostEdgeStrength < 1;
-                if (markingDepthTest && markerAverage !== 1) {
+                if (markingDepthTest && scene.markerAverage !== 1) {
                    this.marking.depthTarget.bind();
                    renderer.clear(false, true);
                    renderer.renderMarkingDepth(scene.primitives, camera, null);
@@ -355,6 +312,7 @@ export class DrawPass {
    }

    render(ctx: RenderContext, props: Props, toDrawingBuffer: boolean) {
+        if (isTimingMode) this.webgl.timer.mark('DrawPass.render');
        const { renderer, camera, scene, helper } = ctx;
        renderer.setTransparentBackground(props.transparentBackground);
        renderer.setDrawingBufferSize(this.colorTarget.getWidth(), this.colorTarget.getHeight());
@@ -366,6 +324,7 @@ export class DrawPass {
        } else {
            this._render(renderer, camera, scene, helper, toDrawingBuffer, props);
        }
+        if (isTimingMode) this.webgl.timer.markEnd('DrawPass.render');
    }

    getColorTarget(postprocessingProps: PostprocessingProps): RenderTarget {
--- a/src/mol-canvas3d/passes/fxaa.ts
+++ b/src/mol-canvas3d/passes/fxaa.ts
@@ -18,6 +18,7 @@ import { quad_vert } from '../../mol-gl/shader/quad.vert';
 import { fxaa_frag } from '../../mol-gl/shader/fxaa.frag';
 import { Viewport } from '../camera/util';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
+import { isTimingMode } from '../../mol-util/debug';

 export const FxaaParams = {
    edgeThresholdMin: PD.Numeric(0.0312, { min: 0.0312, max: 0.0833, step: 0.0001 }, { description: 'Trims the algorithm from processing darks.' }),
@@ -83,6 +84,7 @@ export class FxaaPass {
    }

    render(viewport: Viewport, target: RenderTarget | undefined) {
+        if (isTimingMode) this.webgl.timer.mark('FxaaPass.render');
        if (target) {
            target.bind();
        } else {
@@ -90,6 +92,7 @@ export class FxaaPass {
        }
        this.updateState(viewport);
        this.renderable.render();
+        if (isTimingMode) this.webgl.timer.markEnd('FxaaPass.render');
    }
 }

--- a/src/mol-canvas3d/passes/marking.ts
+++ b/src/mol-canvas3d/passes/marking.ts
@@ -20,6 +20,7 @@ import { Viewport } from '../camera/util';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { Color } from '../../mol-util/color';
 import { edge_frag } from '../../mol-gl/shader/marking/edge.frag';
+import { isTimingMode } from '../../mol-util/debug';

 export const MarkingParams = {
    enabled: PD.Boolean(true),
@@ -117,6 +118,7 @@ export class MarkingPass {
    }

    render(viewport: Viewport, target: RenderTarget | undefined) {
+        if (isTimingMode) this.webgl.timer.mark('MarkingPass.render');
        this.edgesTarget.bind();
        this.setEdgeState(viewport);
        this.edge.render();
@@ -128,6 +130,7 @@ export class MarkingPass {
        }
        this.setOverlayState(viewport);
        this.overlay.render();
+        if (isTimingMode) this.webgl.timer.markEnd('MarkingPass.render');
    }
 }

--- a/src/mol-canvas3d/passes/multi-sample.ts
+++ b/src/mol-canvas3d/passes/multi-sample.ts
@@ -25,6 +25,7 @@ import { StereoCamera } from '../camera/stereo';
 import { quad_vert } from '../../mol-gl/shader/quad.vert';
 import { compose_frag } from '../../mol-gl/shader/compose.frag';
 import { MarkingProps } from './marking';
+import { isTimingMode } from '../../mol-util/debug';

 const ComposeSchema = {
    ...QuadSchema,
@@ -126,6 +127,7 @@ export class MultiSamplePass {
        const { camera } = ctx;
        const { compose, composeTarget, drawPass, webgl } = this;
        const { gl, state } = webgl;
+        if (isTimingMode) webgl.timer.mark('MultiSamplePass.renderMultiSample');

        // based on the Multisample Anti-Aliasing Render Pass
        // contributed to three.js by bhouston / http://clara.io/
@@ -198,12 +200,14 @@ export class MultiSamplePass {

        camera.viewOffset.enabled = false;
        camera.update();
+        if (isTimingMode) webgl.timer.markEnd('MultiSamplePass.renderMultiSample');
    }

    private renderTemporalMultiSample(sampleIndex: number, ctx: RenderContext, props: Props, toDrawingBuffer: boolean) {
        const { camera } = ctx;
        const { compose, composeTarget, holdTarget, drawPass, webgl } = this;
        const { gl, state } = webgl;
+        if (isTimingMode) webgl.timer.mark('MultiSamplePass.renderTemporalMultiSample');

        // based on the Multisample Anti-Aliasing Render Pass
        // contributed to three.js by bhouston / http://clara.io/
@@ -301,6 +305,7 @@ export class MultiSamplePass {

        camera.viewOffset.enabled = false;
        camera.update();
+        if (isTimingMode) webgl.timer.markEnd('MultiSamplePass.renderTemporalMultiSample');

        return sampleIndex >= offsetList.length ? -2 : sampleIndex;
    }
--- a/src/mol-canvas3d/passes/pick.ts
+++ b/src/mol-canvas3d/passes/pick.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -7,11 +7,15 @@
 import { PickingId } from '../../mol-geo/geometry/picking';
 import { PickType, Renderer } from '../../mol-gl/renderer';
 import { Scene } from '../../mol-gl/scene';
+import { isWebGL2 } from '../../mol-gl/webgl/compat';
 import { WebGLContext } from '../../mol-gl/webgl/context';
-import { GraphicsRenderVariant } from '../../mol-gl/webgl/render-item';
+import { Framebuffer } from '../../mol-gl/webgl/framebuffer';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
+import { Renderbuffer } from '../../mol-gl/webgl/renderbuffer';
+import { Texture } from '../../mol-gl/webgl/texture';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { spiral2d } from '../../mol-math/misc';
+import { isTimingMode } from '../../mol-util/debug';
 import { unpackRGBToInt, unpackRGBAToDepth } from '../../mol-util/number-packing';
 import { Camera, ICamera } from '../camera';
 import { StereoCamera } from '../camera/stereo';
@@ -25,10 +29,24 @@ const NullId = Math.pow(2, 24) - 2;
 export type PickData = { id: PickingId, position: Vec3 }

 export class PickPass {
-    readonly objectPickTarget: RenderTarget;
-    readonly instancePickTarget: RenderTarget;
-    readonly groupPickTarget: RenderTarget;
-    readonly depthPickTarget: RenderTarget;
+    private readonly objectPickTarget: RenderTarget;
+    private readonly instancePickTarget: RenderTarget;
+    private readonly groupPickTarget: RenderTarget;
+    private readonly depthPickTarget: RenderTarget;
+
+    private readonly framebuffer: Framebuffer;
+
+    private readonly objectPickTexture: Texture;
+    private readonly instancePickTexture: Texture;
+    private readonly groupPickTexture: Texture;
+    private readonly depthPickTexture: Texture;
+
+    private readonly objectPickFramebuffer: Framebuffer;
+    private readonly instancePickFramebuffer: Framebuffer;
+    private readonly groupPickFramebuffer: Framebuffer;
+    private readonly depthPickFramebuffer: Framebuffer;
+
+    private readonly depthRenderbuffer: Renderbuffer;

    private pickWidth: number;
    private pickHeight: number;
@@ -38,10 +56,89 @@ export class PickPass {
        this.pickWidth = Math.ceil(drawPass.colorTarget.getWidth() * pickScale);
        this.pickHeight = Math.ceil(drawPass.colorTarget.getHeight() * pickScale);

-        this.objectPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
-        this.instancePickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
-        this.groupPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
-        this.depthPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+        const { resources, extensions: { drawBuffers }, gl } = webgl;
+
+        if (drawBuffers) {
+            this.objectPickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.objectPickTexture.define(this.pickWidth, this.pickHeight);
+
+            this.instancePickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.instancePickTexture.define(this.pickWidth, this.pickHeight);
+
+            this.groupPickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.groupPickTexture.define(this.pickWidth, this.pickHeight);
+
+            this.depthPickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.depthPickTexture.define(this.pickWidth, this.pickHeight);
+
+            this.framebuffer = resources.framebuffer();
+
+            this.objectPickFramebuffer = resources.framebuffer();
+            this.instancePickFramebuffer = resources.framebuffer();
+            this.groupPickFramebuffer = resources.framebuffer();
+            this.depthPickFramebuffer = resources.framebuffer();
+
+            this.framebuffer.bind();
+            drawBuffers!.drawBuffers([
+                drawBuffers!.COLOR_ATTACHMENT0,
+                drawBuffers!.COLOR_ATTACHMENT1,
+                drawBuffers!.COLOR_ATTACHMENT2,
+                drawBuffers!.COLOR_ATTACHMENT3,
+            ]);
+
+            this.objectPickTexture.attachFramebuffer(this.framebuffer, 'color0');
+            this.instancePickTexture.attachFramebuffer(this.framebuffer, 'color1');
+            this.groupPickTexture.attachFramebuffer(this.framebuffer, 'color2');
+            this.depthPickTexture.attachFramebuffer(this.framebuffer, 'color3');
+
+            this.depthRenderbuffer = isWebGL2(gl)
+                ? resources.renderbuffer('depth32f', 'depth', this.pickWidth, this.pickHeight)
+                : resources.renderbuffer('depth16', 'depth', this.pickWidth, this.pickHeight);
+
+            this.depthRenderbuffer.attachFramebuffer(this.framebuffer);
+
+            this.objectPickTexture.attachFramebuffer(this.objectPickFramebuffer, 'color0');
+            this.instancePickTexture.attachFramebuffer(this.instancePickFramebuffer, 'color0');
+            this.groupPickTexture.attachFramebuffer(this.groupPickFramebuffer, 'color0');
+            this.depthPickTexture.attachFramebuffer(this.depthPickFramebuffer, 'color0');
+        } else {
+            this.objectPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+            this.instancePickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+            this.groupPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+            this.depthPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+        }
+    }
+
+    bindObject() {
+        if (this.webgl.extensions.drawBuffers) {
+            this.objectPickFramebuffer.bind();
+        } else {
+            this.objectPickTarget.bind();
+        }
+    }
+
+    bindInstance() {
+        if (this.webgl.extensions.drawBuffers) {
+            this.instancePickFramebuffer.bind();
+        } else {
+            this.instancePickTarget.bind();
+        }
+    }
+
+    bindGroup() {
+        if (this.webgl.extensions.drawBuffers) {
+            this.groupPickFramebuffer.bind();
+        } else {
+            this.groupPickTarget.bind();
+        }
+    }
+
+    bindDepth() {
+        if (this.webgl.extensions.drawBuffers) {
+            this.depthPickFramebuffer.bind();
+        } else {
+            this.depthPickTarget.bind();
+        }
    }

    get drawingBufferHeight() {
@@ -57,21 +154,30 @@ export class PickPass {
            this.pickWidth = pickWidth;
            this.pickHeight = pickHeight;

-            this.objectPickTarget.setSize(this.pickWidth, this.pickHeight);
-            this.instancePickTarget.setSize(this.pickWidth, this.pickHeight);
-            this.groupPickTarget.setSize(this.pickWidth, this.pickHeight);
-            this.depthPickTarget.setSize(this.pickWidth, this.pickHeight);
+            if (this.webgl.extensions.drawBuffers) {
+                this.objectPickTexture.define(this.pickWidth, this.pickHeight);
+                this.instancePickTexture.define(this.pickWidth, this.pickHeight);
+                this.groupPickTexture.define(this.pickWidth, this.pickHeight);
+                this.depthPickTexture.define(this.pickWidth, this.pickHeight);
+
+                this.depthRenderbuffer.setSize(this.pickWidth, this.pickHeight);
+            } else {
+                this.objectPickTarget.setSize(this.pickWidth, this.pickHeight);
+                this.instancePickTarget.setSize(this.pickWidth, this.pickHeight);
+                this.groupPickTarget.setSize(this.pickWidth, this.pickHeight);
+                this.depthPickTarget.setSize(this.pickWidth, this.pickHeight);
+            }
        }
    }

-    private renderVariant(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, variant: GraphicsRenderVariant, pickType: number) {
-        const depth = this.drawPass.depthTexturePrimitives;
+    private renderVariant(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, variant: 'pick' | 'depth', pickType: number) {
        renderer.clear(false);
-
        renderer.update(camera);
        renderer.renderPick(scene.primitives, camera, variant, null, pickType);
-        renderer.renderPick(scene.volumes, camera, variant, depth, pickType);
-        renderer.renderPick(helper.handle.scene, camera, variant, null, pickType);
+
+        if (helper.handle.isEnabled) {
+            renderer.renderPick(helper.handle.scene, camera, variant, null, pickType);
+        }

        if (helper.camera.isEnabled) {
            helper.camera.update(camera);
@@ -81,18 +187,23 @@ export class PickPass {
    }

    render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper) {
-        this.objectPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Object);
+        if (this.webgl.extensions.drawBuffers) {
+            this.framebuffer.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.None);
+        } else {
+            this.objectPickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Object);

-        this.instancePickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Instance);
+            this.instancePickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Instance);

-        this.groupPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Group);
-        // printTexture(this.webgl, this.groupPickTarget.texture, { id: 'group' })
+            this.groupPickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Group);
+            // printTexture(this.webgl, this.groupPickTarget.texture, { id: 'group' })

-        this.depthPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'depth', PickType.None);
+            this.depthPickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'depth', PickType.None);
+        }
    }
 }

@@ -147,19 +258,21 @@ export class PickHelper {
    }

    private syncBuffers() {
+        if (isTimingMode) this.webgl.timer.mark('PickHelper.syncBuffers');
        const { pickX, pickY, pickWidth, pickHeight } = this;

-        this.pickPass.objectPickTarget.bind();
+        this.pickPass.bindObject();
        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.objectBuffer);

-        this.pickPass.instancePickTarget.bind();
+        this.pickPass.bindInstance();
        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.instanceBuffer);

-        this.pickPass.groupPickTarget.bind();
+        this.pickPass.bindGroup();
        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.groupBuffer);

-        this.pickPass.depthPickTarget.bind();
+        this.pickPass.bindDepth();
        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.depthBuffer);
+        if (isTimingMode) this.webgl.timer.markEnd('PickHelper.syncBuffers');
    }

    private getBufferIdx(x: number, y: number): number {
@@ -178,11 +291,12 @@ export class PickHelper {
    }

    private render(camera: Camera | StereoCamera) {
+        if (isTimingMode) this.webgl.timer.mark('PickHelper.render');
        const { pickX, pickY, pickWidth, pickHeight, halfPickWidth } = this;
        const { renderer, scene, helper } = this;

        renderer.setTransparentBackground(false);
-        renderer.setDrawingBufferSize(this.pickPass.objectPickTarget.getWidth(), this.pickPass.objectPickTarget.getHeight());
+        renderer.setDrawingBufferSize(pickWidth, pickHeight);
        renderer.setPixelRatio(this.pickScale);

        if (StereoCamera.is(camera)) {
@@ -197,6 +311,7 @@ export class PickHelper {
        }

        this.dirty = false;
+        if (isTimingMode) this.webgl.timer.markEnd('PickHelper.render');
    }

    private identifyInternal(x: number, y: number, camera: Camera | StereoCamera): PickData | undefined {
@@ -217,8 +332,10 @@ export class PickHelper {
        ) return;

        if (this.dirty) {
+            if (isTimingMode) this.webgl.timer.mark('PickHelper.identify');
            this.render(camera);
            this.syncBuffers();
+            if (isTimingMode) this.webgl.timer.markEnd('PickHelper.identify');
        }

        const xv = x - viewport.x;
@@ -240,6 +357,7 @@ export class PickHelper {
        if (groupId === -1 || groupId === NullId) return;

        const z = this.getDepth(xp, yp);
+        // console.log('z', z);
        const position = Vec3.create(x, viewport.height - y, z);
        if (StereoCamera.is(camera)) {
            const halfWidth = Math.floor(viewport.width / 2);
@@ -254,7 +372,7 @@ export class PickHelper {
            cameraUnproject(position, position, viewport, camera.inverseProjectionView);
        }

-        // console.log({ { objectId, instanceId, groupId }, position} );
+        // console.log({ id: { objectId, instanceId, groupId }, position });
        return { id: { objectId, instanceId, groupId }, position };
    }

--- a/src/mol-canvas3d/passes/postprocessing.ts
+++ b/src/mol-canvas3d/passes/postprocessing.ts
@@ -27,10 +27,12 @@ import { Framebuffer } from '../../mol-gl/webgl/framebuffer';
 import { Color } from '../../mol-util/color';
 import { FxaaParams, FxaaPass } from './fxaa';
 import { SmaaParams, SmaaPass } from './smaa';
+import { isTimingMode } from '../../mol-util/debug';

 const OutlinesSchema = {
    ...QuadSchema,
-    tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    uTexSize: UniformSpec('v2'),

    dOrthographic: DefineSpec('number'),
@@ -41,11 +43,15 @@ const OutlinesSchema = {
 };
 type OutlinesRenderable = ComputeRenderable<Values<typeof OutlinesSchema>>

-function getOutlinesRenderable(ctx: WebGLContext, depthTexture: Texture): OutlinesRenderable {
+function getOutlinesRenderable(ctx: WebGLContext, depthTextureOpaque: Texture, depthTextureTransparent: Texture): OutlinesRenderable {
+    const width = depthTextureOpaque.getWidth();
+    const height = depthTextureOpaque.getHeight();
+
    const values: Values<typeof OutlinesSchema> = {
        ...QuadValues,
-        tDepth: ValueCell.create(depthTexture),
-        uTexSize: ValueCell.create(Vec2.create(depthTexture.getWidth(), depthTexture.getHeight())),
+        tDepthOpaque: ValueCell.create(depthTextureOpaque),
+        tDepthTransparent: ValueCell.create(depthTextureTransparent),
+        uTexSize: ValueCell.create(Vec2.create(width, height)),

        dOrthographic: ValueCell.create(0),
        uNear: ValueCell.create(1),
@@ -183,7 +189,8 @@ const PostprocessingSchema = {
    ...QuadSchema,
    tSsaoDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
-    tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    tOutlines: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    uTexSize: UniformSpec('v2'),

@@ -207,12 +214,13 @@ const PostprocessingSchema = {
 };
 type PostprocessingRenderable = ComputeRenderable<Values<typeof PostprocessingSchema>>

-function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, outlinesTexture: Texture, ssaoDepthTexture: Texture): PostprocessingRenderable {
+function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTextureOpaque: Texture, depthTextureTransparent: Texture, outlinesTexture: Texture, ssaoDepthTexture: Texture): PostprocessingRenderable {
    const values: Values<typeof PostprocessingSchema> = {
        ...QuadValues,
        tSsaoDepth: ValueCell.create(ssaoDepthTexture),
        tColor: ValueCell.create(colorTexture),
-        tDepth: ValueCell.create(depthTexture),
+        tDepthOpaque: ValueCell.create(depthTextureOpaque),
+        tDepthTransparent: ValueCell.create(depthTextureTransparent),
        tOutlines: ValueCell.create(outlinesTexture),
        uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())),

@@ -274,6 +282,10 @@ export class PostprocessingPass {
        return props.occlusion.name === 'on' || props.outline.name === 'on';
    }

+    static isOutlineEnabled(props: PostprocessingProps) {
+        return props.outline.name === 'on';
+    }
+
    readonly target: RenderTarget;

    private readonly outlinesTarget: RenderTarget;
@@ -307,7 +319,7 @@ export class PostprocessingPass {
    }

    constructor(private webgl: WebGLContext, private drawPass: DrawPass) {
-        const { colorTarget, depthTexture } = drawPass;
+        const { colorTarget, depthTextureTransparent, depthTextureOpaque } = drawPass;
        const width = colorTarget.getWidth();
        const height = colorTarget.getHeight();

@@ -320,7 +332,7 @@ export class PostprocessingPass {
        this.target = webgl.createRenderTarget(width, height, false, 'uint8', 'linear');

        this.outlinesTarget = webgl.createRenderTarget(width, height, false);
-        this.outlinesRenderable = getOutlinesRenderable(webgl, depthTexture);
+        this.outlinesRenderable = getOutlinesRenderable(webgl, depthTextureOpaque, depthTextureTransparent);

        this.randomHemisphereVector = [];
        for (let i = 0; i < 256; i++) {
@@ -340,7 +352,7 @@ export class PostprocessingPass {
        const sh = Math.floor(height * this.ssaoScale);

        this.downsampledDepthTarget = webgl.createRenderTarget(sw, sh, false, 'uint8', 'linear');
-        this.downsampleDepthRenderable = createCopyRenderable(webgl, depthTexture);
+        this.downsampleDepthRenderable = createCopyRenderable(webgl, depthTextureOpaque);

        this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
        this.ssaoDepthTexture.define(sw, sh);
@@ -352,10 +364,10 @@ export class PostprocessingPass {

        this.ssaoDepthTexture.attachFramebuffer(this.ssaoBlurSecondPassFramebuffer, 'color0');

-        this.ssaoRenderable = getSsaoRenderable(webgl, this.downsampleFactor === 1 ? depthTexture : this.downsampledDepthTarget.texture);
+        this.ssaoRenderable = getSsaoRenderable(webgl, this.downsampleFactor === 1 ? depthTextureOpaque : this.downsampledDepthTarget.texture);
        this.ssaoBlurFirstPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthTexture, 'horizontal');
        this.ssaoBlurSecondPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthBlurProxyTexture, 'vertical');
-        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture, this.outlinesTarget.texture, this.ssaoDepthTexture);
+        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTextureOpaque, depthTextureTransparent, this.outlinesTarget.texture, this.ssaoDepthTexture);
    }

    setSize(width: number, height: number) {
@@ -460,7 +472,7 @@ export class PostprocessingPass {
                this.ssaoDepthBlurProxyTexture.define(sw, sh);

                if (this.ssaoScale === 1) {
-                    ValueCell.update(this.ssaoRenderable.values.tDepth, this.drawPass.depthTexture);
+                    ValueCell.update(this.ssaoRenderable.values.tDepth, this.drawPass.depthTextureTransparent);
                } else {
                    ValueCell.update(this.ssaoRenderable.values.tDepth, this.downsampledDepthTarget.texture);
                }
@@ -538,6 +550,7 @@ export class PostprocessingPass {
    }

    render(camera: ICamera, toDrawingBuffer: boolean, transparentBackground: boolean, backgroundColor: Color, props: PostprocessingProps) {
+        if (isTimingMode) this.webgl.timer.mark('PostprocessingPass.render');
        this.updateState(camera, transparentBackground, backgroundColor, props);

        if (props.outline.name === 'on') {
@@ -574,6 +587,7 @@ export class PostprocessingPass {
        gl.clear(gl.COLOR_BUFFER_BIT);

        this.renderable.render();
+        if (isTimingMode) this.webgl.timer.markEnd('PostprocessingPass.render');
    }
 }

--- a/src/mol-canvas3d/passes/smaa.ts
+++ b/src/mol-canvas3d/passes/smaa.ts
@@ -22,7 +22,7 @@ import { weights_frag } from '../../mol-gl/shader/smaa/weights.frag';
 import { edges_vert } from '../../mol-gl/shader/smaa/edges.vert';
 import { edges_frag } from '../../mol-gl/shader/smaa/edges.frag';
 import { Viewport } from '../camera/util';
-import { isDebugMode } from '../../mol-util/debug';
+import { isDebugMode, isTimingMode } from '../../mol-util/debug';

 export const SmaaParams = {
    edgeThreshold: PD.Numeric(0.1, { min: 0.05, max: 0.15, step: 0.01 }),
@@ -120,6 +120,7 @@ export class SmaaPass {
    }

    render(viewport: Viewport, target: RenderTarget | undefined) {
+        if (isTimingMode) this.webgl.timer.mark('SmaaPass.render');
        this.edgesTarget.bind();
        this.updateState(viewport);
        this.edgesRenderable.render();
@@ -135,8 +136,8 @@ export class SmaaPass {
        }
        this.updateState(viewport);
        this.blendRenderable.render();
+        if (isTimingMode) this.webgl.timer.markEnd('SmaaPass.render');
    }
-
 }

 //
--- a/src/mol-canvas3d/passes/wboit.ts
+++ b/src/mol-canvas3d/passes/wboit.ts
@@ -17,7 +17,7 @@ import { quad_vert } from '../../mol-gl/shader/quad.vert';
 import { evaluateWboit_frag } from '../../mol-gl/shader/evaluate-wboit.frag';
 import { Framebuffer } from '../../mol-gl/webgl/framebuffer';
 import { Vec2 } from '../../mol-math/linear-algebra';
-import { isDebugMode } from '../../mol-util/debug';
+import { isDebugMode, isTimingMode } from '../../mol-util/debug';

 const EvaluateWboitSchema = {
    ...QuadSchema,
@@ -71,6 +71,7 @@ export class WboitPass {
    }

    render() {
+        if (isTimingMode) this.webgl.timer.mark('WboitPass.render');
        const { state, gl } = this.webgl;

        state.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@@ -78,6 +79,7 @@ export class WboitPass {

        this.renderable.update();
        this.renderable.render();
+        if (isTimingMode) this.webgl.timer.markEnd('WboitPass.render');
    }

    setSize(width: number, height: number) {
--- a/src/mol-geo/geometry/base.ts
+++ b/src/mol-geo/geometry/base.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -83,6 +83,7 @@ export namespace BaseGeometry {
        quality: PD.Select<VisualQuality>('auto', VisualQualityOptions, { isEssential: true, description: 'Visual/rendering quality of the representation.' }),
        material: Material.getParam(),
        clip: PD.Group(Clip.Params),
+        instanceGranularity: PD.Boolean(false, { description: 'Use instance granularity for marker, transparency, clipping, overpaint, substance data to save memory.' }),
    };
    export type Params = typeof Params

@@ -110,6 +111,7 @@ export namespace BaseGeometry {
            uRoughness: ValueCell.create(props.material.roughness),
            uBumpiness: ValueCell.create(props.material.bumpiness),
            dLightCount: ValueCell.create(1),
+            dColorMarker: ValueCell.create(true),

            dClipObjectCount: ValueCell.create(clip.objects.count),
            dClipVariant: ValueCell.create(clip.variant),
@@ -118,6 +120,8 @@ export namespace BaseGeometry {
            uClipObjectPosition: ValueCell.create(clip.objects.position),
            uClipObjectRotation: ValueCell.create(clip.objects.rotation),
            uClipObjectScale: ValueCell.create(clip.objects.scale),
+
+            instanceGranularity: ValueCell.create(props.instanceGranularity),
        };
    }

@@ -135,6 +139,8 @@ export namespace BaseGeometry {
        ValueCell.update(values.uClipObjectPosition, clip.objects.position);
        ValueCell.update(values.uClipObjectRotation, clip.objects.rotation);
        ValueCell.update(values.uClipObjectScale, clip.objects.scale);
+
+        ValueCell.updateIfChanged(values.instanceGranularity, props.instanceGranularity);
    }

    export function createRenderableState(props: Partial<PD.Values<Params>> = {}): RenderableState {
--- a/src/mol-geo/geometry/clipping-data.ts
+++ b/src/mol-geo/geometry/clipping-data.ts
@@ -9,10 +9,13 @@ import { Vec2 } from '../../mol-math/linear-algebra';
 import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';
 import { Clipping } from '../../mol-theme/clipping';

+export type ClippingType = 'instance' | 'groupInstance';
+
 export type ClippingData = {
    tClipping: ValueCell<TextureImage<Uint8Array>>
    uClippingTexDim: ValueCell<Vec2>
-    dClipping: ValueCell<boolean>,
+    dClipping: ValueCell<boolean>
+    dClippingType: ValueCell<string>
 }

 export function applyClippingGroups(array: Uint8Array, start: number, end: number, groups: Clipping.Groups) {
@@ -24,18 +27,20 @@ export function clearClipping(array: Uint8Array, start: number, end: number) {
    array.fill(0, start, end);
 }

-export function createClipping(count: number, clippingData?: ClippingData): ClippingData {
+export function createClipping(count: number, type: ClippingType, clippingData?: ClippingData): ClippingData {
    const clipping = createTextureImage(Math.max(1, count), 1, Uint8Array, clippingData && clippingData.tClipping.ref.value.array);
    if (clippingData) {
        ValueCell.update(clippingData.tClipping, clipping);
        ValueCell.update(clippingData.uClippingTexDim, Vec2.create(clipping.width, clipping.height));
        ValueCell.updateIfChanged(clippingData.dClipping, count > 0);
+        ValueCell.updateIfChanged(clippingData.dClippingType, type);
        return clippingData;
    } else {
        return {
            tClipping: ValueCell.create(clipping),
            uClippingTexDim: ValueCell.create(Vec2.create(clipping.width, clipping.height)),
            dClipping: ValueCell.create(count > 0),
+            dClippingType: ValueCell.create(type),
        };
    }
 }
@@ -52,6 +57,7 @@ export function createEmptyClipping(clippingData?: ClippingData): ClippingData {
            tClipping: ValueCell.create(emptyClippingTexture),
            uClippingTexDim: ValueCell.create(Vec2.create(1, 1)),
            dClipping: ValueCell.create(false),
+            dClippingType: ValueCell.create('groupInstance'),
        };
    }
 }
--- a/src/mol-geo/geometry/color-data.ts
+++ b/src/mol-geo/geometry/color-data.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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>
@@ -11,11 +11,13 @@ import { Color } from '../../mol-util/color';
 import { Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 import { LocationIterator } from '../util/location-iterator';
 import { NullLocation } from '../../mol-model/location';
-import { LocationColor, ColorTheme } from '../../mol-theme/color';
-import { Geometry } from './geometry';
+import { LocationColor, ColorTheme, ColorVolume } from '../../mol-theme/color';
 import { createNullTexture, Texture } from '../../mol-gl/webgl/texture';

-export type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance' | 'volume' | 'volumeInstance' | 'direct'
+export type ColorTypeLocation = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance';
+export type ColorTypeGrid = 'volume' | 'volumeInstance';
+export type ColorTypeDirect = 'direct';
+export type ColorType = ColorTypeLocation | ColorTypeGrid | ColorTypeDirect;

 export type ColorData = {
    uColor: ValueCell<Vec3>,
@@ -29,7 +31,7 @@ export type ColorData = {
    dUsePalette: ValueCell<boolean>,
 }

-export function createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData {
+export function createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any, any>, colorData?: ColorData): ColorData {
    const data = _createColors(locationIt, positionIt, colorTheme, colorData);
    if (colorTheme.palette) {
        ValueCell.updateIfChanged(data.dUsePalette, true);
@@ -40,16 +42,19 @@ export function createColors(locationIt: LocationIterator, positionIt: LocationI
    return data;
 }

-function _createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData {
-    switch (Geometry.getGranularity(locationIt, colorTheme.granularity)) {
+function _createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any, any>, colorData?: ColorData): ColorData {
+    switch (colorTheme.granularity) {
        case 'uniform': return createUniformColor(locationIt, colorTheme.color, colorData);
-        case 'instance': return createInstanceColor(locationIt, colorTheme.color, colorData);
+        case 'instance':
+            return locationIt.nonInstanceable
+                ? createGroupColor(locationIt, colorTheme.color, colorData)
+                : createInstanceColor(locationIt, colorTheme.color, colorData);
        case 'group': return createGroupColor(locationIt, colorTheme.color, colorData);
        case 'groupInstance': return createGroupInstanceColor(locationIt, colorTheme.color, colorData);
        case 'vertex': return createVertexColor(positionIt, colorTheme.color, colorData);
        case 'vertexInstance': return createVertexInstanceColor(positionIt, colorTheme.color, colorData);
-        case 'volume': return createGridColor((colorTheme as any).grid, 'volume', colorData);
-        case 'volumeInstance': return createGridColor((colorTheme as any).grid, 'volumeInstance', colorData);
+        case 'volume': return createGridColor(colorTheme.grid, 'volume', colorData);
+        case 'volumeInstance': return createGridColor(colorTheme.grid, 'volumeInstance', colorData);
        case 'direct': return createDirectColor(colorData);
    }
 }
@@ -207,12 +212,6 @@ function createVertexInstanceColor(locationIt: LocationIterator, color: Location

 //

-interface ColorVolume {
-    colors: Texture
-    dimension: Vec3
-    transform: Vec4
-}
-
 export function createGridColor(grid: ColorVolume, type: ColorType, colorData?: ColorData): ColorData {
    const { colors, dimension, transform } = grid;
    const width = colors.getWidth();
--- a/src/mol-geo/geometry/cylinders/cylinders.ts
+++ b/src/mol-geo/geometry/cylinders/cylinders.ts
@@ -157,7 +157,7 @@ export namespace Cylinders {
        doubleSided: PD.Boolean(false, BaseGeometry.CustomQualityParamInfo),
        ignoreLight: PD.Boolean(false, BaseGeometry.ShadingCategory),
        xrayShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
-        allowTransparentBackfaces: PD.Boolean(false, BaseGeometry.ShadingCategory),
+        transparentBackfaces: PD.Select('off', PD.arrayToOptions(['off', 'on', 'opaque']), BaseGeometry.ShadingCategory),
        bumpFrequency: PD.Numeric(0, { min: 0, max: 10, step: 0.1 }, BaseGeometry.ShadingCategory),
        bumpAmplitude: PD.Numeric(1, { min: 0, max: 5, step: 0.1 }, BaseGeometry.ShadingCategory),
    };
@@ -201,7 +201,9 @@ export namespace Cylinders {

        const color = createColors(locationIt, positionIt, theme.color);
        const size = createSizes(locationIt, theme.size);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const material = createEmptySubstance();
@@ -242,6 +244,7 @@ export namespace Cylinders {
            uDoubleSided: ValueCell.create(props.doubleSided),
            dIgnoreLight: ValueCell.create(props.ignoreLight),
            dXrayShaded: ValueCell.create(props.xrayShaded),
+            dTransparentBackfaces: ValueCell.create(props.transparentBackfaces),
            uBumpFrequency: ValueCell.create(props.bumpFrequency),
            uBumpAmplitude: ValueCell.create(props.bumpAmplitude),
        };
@@ -259,6 +262,7 @@ export namespace Cylinders {
        ValueCell.updateIfChanged(values.uDoubleSided, props.doubleSided);
        ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
        ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
+        ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
        ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
        ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
    }
--- a/src/mol-geo/geometry/direct-volume/direct-volume.ts
+++ b/src/mol-geo/geometry/direct-volume/direct-volume.ts
@@ -211,7 +211,9 @@ export namespace DirectVolume {
        const positionIt = Utils.createPositionIterator(directVolume, transform);

        const color = createColors(locationIt, positionIt, theme.color);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const material = createEmptySubstance();
--- a/src/mol-geo/geometry/image/image.ts
+++ b/src/mol-geo/geometry/image/image.ts
@@ -143,7 +143,9 @@ namespace Image {
        const positionIt = Utils.createPositionIterator(image, transform);

        const color = createColors(locationIt, positionIt, theme.color);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const material = createEmptySubstance();
--- a/src/mol-geo/geometry/lines/lines.ts
+++ b/src/mol-geo/geometry/lines/lines.ts
@@ -208,7 +208,9 @@ export namespace Lines {

        const color = createColors(locationIt, positionIt, theme.color);
        const size = createSizes(locationIt, theme.size);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const material = createEmptySubstance();
--- a/src/mol-geo/geometry/marker-data.ts
+++ b/src/mol-geo/geometry/marker-data.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -8,12 +8,15 @@ import { ValueCell } from '../../mol-util/value-cell';
 import { Vec2 } from '../../mol-math/linear-algebra';
 import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';

+export type MarkerType = 'instance' | 'groupInstance';
+
 export type MarkerData = {
-    uMarker: ValueCell<number>,
+    uMarker: ValueCell<number>
    tMarker: ValueCell<TextureImage<Uint8Array>>
    uMarkerTexDim: ValueCell<Vec2>
    markerAverage: ValueCell<number>
    markerStatus: ValueCell<number>
+    dMarkerType: ValueCell<string>
 }

 const MarkerCountLut = new Uint8Array(0x0303 + 1);
@@ -64,7 +67,7 @@ export function getMarkersAverage(array: Uint8Array, count: number): number {
    return sum / count;
 }

-export function createMarkers(count: number, markerData?: MarkerData): MarkerData {
+export function createMarkers(count: number, type: MarkerType, markerData?: MarkerData): MarkerData {
    const markers = createTextureImage(Math.max(1, count), 1, Uint8Array, markerData && markerData.tMarker.ref.value.array);
    const average = getMarkersAverage(markers.array, count);
    const status = average === 0 ? 0 : -1;
@@ -74,6 +77,7 @@ export function createMarkers(count: number, markerData?: MarkerData): MarkerDat
        ValueCell.update(markerData.uMarkerTexDim, Vec2.create(markers.width, markers.height));
        ValueCell.updateIfChanged(markerData.markerAverage, average);
        ValueCell.updateIfChanged(markerData.markerStatus, status);
+        ValueCell.updateIfChanged(markerData.dMarkerType, type);
        return markerData;
    } else {
        return {
@@ -82,6 +86,7 @@ export function createMarkers(count: number, markerData?: MarkerData): MarkerDat
            uMarkerTexDim: ValueCell.create(Vec2.create(markers.width, markers.height)),
            markerAverage: ValueCell.create(average),
            markerStatus: ValueCell.create(status),
+            dMarkerType: ValueCell.create(type),
        };
    }
 }
@@ -102,6 +107,7 @@ export function createEmptyMarkers(markerData?: MarkerData): MarkerData {
            uMarkerTexDim: ValueCell.create(Vec2.create(1, 1)),
            markerAverage: ValueCell.create(0),
            markerStatus: ValueCell.create(0),
+            dMarkerType: ValueCell.create('groupInstance'),
        };
    }
 }
--- a/src/mol-geo/geometry/mesh/mesh.ts
+++ b/src/mol-geo/geometry/mesh/mesh.ts
@@ -625,7 +625,7 @@ export namespace Mesh {
        flatShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
        ignoreLight: PD.Boolean(false, BaseGeometry.ShadingCategory),
        xrayShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
-        allowTransparentBackfaces: PD.Boolean(false, BaseGeometry.ShadingCategory),
+        transparentBackfaces: PD.Select('off', PD.arrayToOptions(['off', 'on', 'opaque']), BaseGeometry.ShadingCategory),
        bumpFrequency: PD.Numeric(0, { min: 0, max: 10, step: 0.1 }, BaseGeometry.ShadingCategory),
        bumpAmplitude: PD.Numeric(1, { min: 0, max: 5, step: 0.1 }, BaseGeometry.ShadingCategory),
    };
@@ -666,7 +666,9 @@ export namespace Mesh {
        const positionIt = createPositionIterator(mesh, transform);

        const color = createColors(locationIt, positionIt, theme.color);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const material = createEmptySubstance();
@@ -701,6 +703,7 @@ export namespace Mesh {
            dFlipSided: ValueCell.create(props.flipSided),
            dIgnoreLight: ValueCell.create(props.ignoreLight),
            dXrayShaded: ValueCell.create(props.xrayShaded),
+            dTransparentBackfaces: ValueCell.create(props.transparentBackfaces),
            uBumpFrequency: ValueCell.create(props.bumpFrequency),
            uBumpAmplitude: ValueCell.create(props.bumpAmplitude),

@@ -721,6 +724,7 @@ export namespace Mesh {
        ValueCell.updateIfChanged(values.dFlipSided, props.flipSided);
        ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
        ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
+        ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
        ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
        ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
    }
--- a/src/mol-geo/geometry/overpaint-data.ts
+++ b/src/mol-geo/geometry/overpaint-data.ts
@@ -10,6 +10,8 @@ import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';
 import { Color } from '../../mol-util/color';
 import { createNullTexture, Texture } from '../../mol-gl/webgl/texture';

+export type OverpaintType = 'instance' | 'groupInstance' | 'volumeInstance';
+
 export type OverpaintData = {
    tOverpaint: ValueCell<TextureImage<Uint8Array>>
    uOverpaintTexDim: ValueCell<Vec2>
@@ -34,12 +36,13 @@ export function clearOverpaint(array: Uint8Array, start: number, end: number) {
    return true;
 }

-export function createOverpaint(count: number, overpaintData?: OverpaintData): OverpaintData {
+export function createOverpaint(count: number, type: OverpaintType, overpaintData?: OverpaintData): OverpaintData {
    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));
        ValueCell.updateIfChanged(overpaintData.dOverpaint, count > 0);
+        ValueCell.updateIfChanged(overpaintData.dOverpaintType, type);
        return overpaintData;
    } else {
        return {
@@ -50,7 +53,7 @@ export function createOverpaint(count: number, overpaintData?: OverpaintData): O
            tOverpaintGrid: ValueCell.create(createNullTexture()),
            uOverpaintGridDim: ValueCell.create(Vec3.create(1, 1, 1)),
            uOverpaintGridTransform: ValueCell.create(Vec4.create(0, 0, 0, 1)),
-            dOverpaintType: ValueCell.create('groupInstance'),
+            dOverpaintType: ValueCell.create(type),
        };
    }
 }
--- a/src/mol-geo/geometry/points/points.ts
+++ b/src/mol-geo/geometry/points/points.ts
@@ -170,7 +170,9 @@ export namespace Points {

        const color = createColors(locationIt, positionIt, theme.color);
        const size = createSizes(locationIt, theme.size);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const material = createEmptySubstance();
--- a/src/mol-geo/geometry/spheres/spheres.ts
+++ b/src/mol-geo/geometry/spheres/spheres.ts
@@ -129,7 +129,7 @@ export namespace Spheres {
        doubleSided: PD.Boolean(false, BaseGeometry.CustomQualityParamInfo),
        ignoreLight: PD.Boolean(false, BaseGeometry.ShadingCategory),
        xrayShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
-        allowTransparentBackfaces: PD.Boolean(false, BaseGeometry.ShadingCategory),
+        transparentBackfaces: PD.Select('off', PD.arrayToOptions(['off', 'on', 'opaque']), BaseGeometry.ShadingCategory),
        bumpFrequency: PD.Numeric(0, { min: 0, max: 10, step: 0.1 }, BaseGeometry.ShadingCategory),
        bumpAmplitude: PD.Numeric(1, { min: 0, max: 5, step: 0.1 }, BaseGeometry.ShadingCategory),
    };
@@ -171,7 +171,9 @@ export namespace Spheres {

        const color = createColors(locationIt, positionIt, theme.color);
        const size = createSizes(locationIt, theme.size);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const material = createEmptySubstance();
@@ -209,6 +211,7 @@ export namespace Spheres {
            uDoubleSided: ValueCell.create(props.doubleSided),
            dIgnoreLight: ValueCell.create(props.ignoreLight),
            dXrayShaded: ValueCell.create(props.xrayShaded),
+            dTransparentBackfaces: ValueCell.create(props.transparentBackfaces),
            uBumpFrequency: ValueCell.create(props.bumpFrequency),
            uBumpAmplitude: ValueCell.create(props.bumpAmplitude),
        };
@@ -226,6 +229,7 @@ export namespace Spheres {
        ValueCell.updateIfChanged(values.uDoubleSided, props.doubleSided);
        ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
        ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
+        ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
        ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
        ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
    }
--- a/src/mol-geo/geometry/substance-data.ts
+++ b/src/mol-geo/geometry/substance-data.ts
@@ -10,6 +10,8 @@ import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';
 import { createNullTexture, Texture } from '../../mol-gl/webgl/texture';
 import { Material } from '../../mol-util/material';

+export type SubstanceType = 'instance' | 'groupInstance' | 'volumeInstance';
+
 export type SubstanceData = {
    tSubstance: ValueCell<TextureImage<Uint8Array>>
    uSubstanceTexDim: ValueCell<Vec2>
@@ -34,12 +36,13 @@ export function clearSubstance(array: Uint8Array, start: number, end: number) {
    return true;
 }

-export function createSubstance(count: number, substanceData?: SubstanceData): SubstanceData {
+export function createSubstance(count: number, type: SubstanceType, substanceData?: SubstanceData): SubstanceData {
    const substance = createTextureImage(Math.max(1, count), 4, Uint8Array, substanceData && substanceData.tSubstance.ref.value.array);
    if (substanceData) {
        ValueCell.update(substanceData.tSubstance, substance);
        ValueCell.update(substanceData.uSubstanceTexDim, Vec2.create(substance.width, substance.height));
        ValueCell.updateIfChanged(substanceData.dSubstance, count > 0);
+        ValueCell.updateIfChanged(substanceData.dSubstanceType, type);
        return substanceData;
    } else {
        return {
@@ -50,7 +53,7 @@ export function createSubstance(count: number, substanceData?: SubstanceData): S
            tSubstanceGrid: ValueCell.create(createNullTexture()),
            uSubstanceGridDim: ValueCell.create(Vec3.create(1, 1, 1)),
            uSubstanceGridTransform: ValueCell.create(Vec4.create(0, 0, 0, 1)),
-            dSubstanceType: ValueCell.create('groupInstance'),
+            dSubstanceType: ValueCell.create(type),
        };
    }
 }
--- a/src/mol-geo/geometry/text/text.ts
+++ b/src/mol-geo/geometry/text/text.ts
@@ -211,7 +211,9 @@ export namespace Text {

        const color = createColors(locationIt, positionIt, theme.color);
        const size = createSizes(locationIt, theme.size);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const substance = createEmptySubstance();
--- a/src/mol-geo/geometry/texture-mesh/color-smoothing.ts
+++ b/src/mol-geo/geometry/texture-mesh/color-smoothing.ts
@@ -20,6 +20,7 @@ import { accumulate_frag } from '../../../mol-gl/shader/compute/color-smoothing/
 import { accumulate_vert } from '../../../mol-gl/shader/compute/color-smoothing/accumulate.vert';
 import { isWebGL2 } from '../../../mol-gl/webgl/compat';
 import { TextureMeshValues } from '../../../mol-gl/renderable/texture-mesh';
+import { isTimingMode } from '../../../mol-util/debug';

 export const ColorAccumulateSchema = {
    drawCount: ValueSpec('number'),
@@ -255,6 +256,7 @@ export function calcTextureMeshColorSmoothing(input: ColorSmoothingInput, resolu
    const { drawBuffers } = webgl.extensions;
    if (!drawBuffers) throw new Error('need WebGL draw buffers');

+    if (isTimingMode) webgl.timer.mark('calcTextureMeshColorSmoothing');
    const { gl, resources, state, extensions: { colorBufferHalfFloat, textureHalfFloat } } = webgl;

    const isInstanceType = input.colorType.endsWith('Instance');
@@ -321,6 +323,7 @@ export function calcTextureMeshColorSmoothing(input: ColorSmoothingInput, resolu

    const { uCurrentSlice, uCurrentX, uCurrentY } = accumulateRenderable.values;

+    if (isTimingMode) webgl.timer.mark('ColorAccumulate.render');
    setAccumulateDefaults(webgl);
    gl.viewport(0, 0, width, height);
    gl.scissor(0, 0, width, height);
@@ -349,6 +352,7 @@ export function calcTextureMeshColorSmoothing(input: ColorSmoothingInput, resolu
    accumulateTexture.detachFramebuffer(framebuffer, 0);
    countTexture.detachFramebuffer(framebuffer, 1);
    drawBuffers.drawBuffers([gl.COLOR_ATTACHMENT0, gl.NONE]);
+    if (isTimingMode) webgl.timer.markEnd('ColorAccumulate.render');

    // const accImage = new Float32Array(width * height * 4);
    // accumulateTexture.attachFramebuffer(framebuffer, 0);
@@ -364,6 +368,7 @@ export function calcTextureMeshColorSmoothing(input: ColorSmoothingInput, resolu

    // normalize

+    if (isTimingMode) webgl.timer.mark('ColorNormalize.render');
    if (!texture) texture = resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
    texture.define(width, height);

@@ -376,6 +381,7 @@ export function calcTextureMeshColorSmoothing(input: ColorSmoothingInput, resolu
    gl.scissor(0, 0, width, height);
    gl.clear(gl.COLOR_BUFFER_BIT);
    normalizeRenderable.render();
+    if (isTimingMode) webgl.timer.markEnd('ColorNormalize.render');

    // const normImage = new Uint8Array(width * height * 4);
    // texture.attachFramebuffer(framebuffer, 0);
@@ -385,6 +391,7 @@ export function calcTextureMeshColorSmoothing(input: ColorSmoothingInput, resolu

    const gridTransform = Vec4.create(min[0], min[1], min[2], scaleFactor);
    const type = isInstanceType ? 'volumeInstance' : 'volume';
+    if (isTimingMode) webgl.timer.markEnd('calcTextureMeshColorSmoothing');

    return { texture, gridDim, gridTexDim: Vec2.create(width, height), gridTransform, type };
 }
--- a/src/mol-geo/geometry/texture-mesh/texture-mesh.ts
+++ b/src/mol-geo/geometry/texture-mesh/texture-mesh.ts
@@ -24,6 +24,7 @@ import { Vec2, Vec4 } from '../../../mol-math/linear-algebra';
 import { createEmptyClipping } from '../clipping-data';
 import { NullLocation } from '../../../mol-model/location';
 import { createEmptySubstance } from '../substance-data';
+import { RenderableState } from '../../../mol-gl/renderable';

 export interface TextureMesh {
    readonly kind: 'texture-mesh',
@@ -113,7 +114,7 @@ export namespace TextureMesh {
        flatShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
        ignoreLight: PD.Boolean(false, BaseGeometry.ShadingCategory),
        xrayShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
-        allowTransparentBackfaces: PD.Boolean(false, BaseGeometry.ShadingCategory),
+        transparentBackfaces: PD.Select('off', PD.arrayToOptions(['off', 'on', 'opaque']), BaseGeometry.ShadingCategory),
        bumpFrequency: PD.Numeric(0, { min: 0, max: 10, step: 0.1 }, BaseGeometry.ShadingCategory),
        bumpAmplitude: PD.Numeric(1, { min: 0, max: 5, step: 0.1 }, BaseGeometry.ShadingCategory),
    };
@@ -126,8 +127,8 @@ export namespace TextureMesh {
        createValuesSimple,
        updateValues,
        updateBoundingSphere,
-        createRenderableState: BaseGeometry.createRenderableState,
-        updateRenderableState: BaseGeometry.updateRenderableState,
+        createRenderableState,
+        updateRenderableState,
        createPositionIterator: () => LocationIterator(1, 1, 1, () => NullLocation)
    };

@@ -136,7 +137,9 @@ export namespace TextureMesh {
        const positionIt = Utils.createPositionIterator(textureMesh, transform);

        const color = createColors(locationIt, positionIt, theme.color);
-        const marker = createMarkers(instanceCount * groupCount);
+        const marker = props.instanceGranularity
+            ? createMarkers(instanceCount, 'instance')
+            : createMarkers(instanceCount * groupCount, 'groupInstance');
        const overpaint = createEmptyOverpaint();
        const transparency = createEmptyTransparency();
        const substance = createEmptySubstance();
@@ -173,6 +176,7 @@ export namespace TextureMesh {
            dFlipSided: ValueCell.create(props.flipSided),
            dIgnoreLight: ValueCell.create(props.ignoreLight),
            dXrayShaded: ValueCell.create(props.xrayShaded),
+            dTransparentBackfaces: ValueCell.create(props.transparentBackfaces),
            uBumpFrequency: ValueCell.create(props.bumpFrequency),
            uBumpAmplitude: ValueCell.create(props.bumpAmplitude),

@@ -193,6 +197,7 @@ export namespace TextureMesh {
        ValueCell.updateIfChanged(values.dFlipSided, props.flipSided);
        ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
        ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
+        ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
        ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
        ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
    }
@@ -209,4 +214,16 @@ export namespace TextureMesh {
            ValueCell.update(values.uInvariantBoundingSphere, Vec4.fromSphere(values.uInvariantBoundingSphere.ref.value, invariantBoundingSphere));
        }
    }
+
+    function createRenderableState(props: PD.Values<Params>): RenderableState {
+        const state = BaseGeometry.createRenderableState(props);
+        updateRenderableState(state, props);
+        return state;
+    }
+
+    function updateRenderableState(state: RenderableState, props: PD.Values<Params>) {
+        BaseGeometry.updateRenderableState(state, props);
+        state.opaque = state.opaque && !props.xrayShaded;
+        state.writeDepth = state.opaque;
+    }
 }
--- a/src/mol-geo/geometry/transparency-data.ts
+++ b/src/mol-geo/geometry/transparency-data.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -9,6 +9,8 @@ import { Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';
 import { createNullTexture, Texture } from '../../mol-gl/webgl/texture';

+export type TransparencyType = 'instance' | 'groupInstance' | 'volumeInstance';
+
 export type TransparencyData = {
    tTransparency: ValueCell<TextureImage<Uint8Array>>
    uTransparencyTexDim: ValueCell<Vec2>
@@ -29,6 +31,7 @@ export function applyTransparencyValue(array: Uint8Array, start: number, end: nu
 }

 export function getTransparencyAverage(array: Uint8Array, count: number): number {
+    if (count === 0 || array.length < count) return 0;
    let sum = 0;
    for (let i = 0; i < count; ++i) {
        sum += array[i];
@@ -40,13 +43,14 @@ export function clearTransparency(array: Uint8Array, start: number, end: number)
    array.fill(0, start, end);
 }

-export function createTransparency(count: number, transparencyData?: TransparencyData): TransparencyData {
+export function createTransparency(count: number, type: TransparencyType, 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.updateIfChanged(transparencyData.dTransparency, count > 0);
        ValueCell.updateIfChanged(transparencyData.transparencyAverage, getTransparencyAverage(transparency.array, count));
+        ValueCell.updateIfChanged(transparencyData.dTransparencyType, type);
        return transparencyData;
    } else {
        return {
@@ -58,7 +62,7 @@ export function createTransparency(count: number, transparencyData?: Transparenc
            tTransparencyGrid: ValueCell.create(createNullTexture()),
            uTransparencyGridDim: ValueCell.create(Vec3.create(1, 1, 1)),
            uTransparencyGridTransform: ValueCell.create(Vec4.create(0, 0, 0, 1)),
-            dTransparencyType: ValueCell.create('groupInstance'),
+            dTransparencyType: ValueCell.create(type),
        };
    }
 }
--- a/src/mol-gl/compute/grid3d.ts
+++ b/src/mol-gl/compute/grid3d.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -18,8 +18,9 @@ import { createComputeRenderItem } from '../webgl/render-item';
 import { createComputeRenderable } from '../renderable';
 import { isLittleEndian } from '../../mol-util/is-little-endian';
 import { RuntimeContext } from '../../mol-task';
+import { isTimingMode } from '../../mol-util/debug';

-export function canComputeGrid3dOnGPU(webgl?: WebGLContext) {
+export function canComputeGrid3dOnGPU(webgl?: WebGLContext): webgl is WebGLContext {
    return !!webgl?.extensions.textureFloat;
 }

@@ -159,7 +160,8 @@ export function createGrid3dComputeRenderable<S extends RenderableSchema, P, CS>

        const array = new Uint8Array(uWidth * uWidth * 4);
        if (spec.cumulative) {
-            const { gl } = webgl;
+            const { gl, state } = webgl;
+            if (isTimingMode) webgl.timer.mark('Grid3dCompute.renderCumulative');

            const states = spec.cumulative.states(params);

@@ -167,7 +169,7 @@ export function createGrid3dComputeRenderable<S extends RenderableSchema, P, CS>
            tex[1].define(uWidth, uWidth);

            resetGl(webgl, uWidth);
-            gl.clearColor(0, 0, 0, 0);
+            state.clearColor(0, 0, 0, 0);

            tex[0].attachFramebuffer(framebuffer, 'color0');
            gl.clear(gl.COLOR_BUFFER_BIT);
@@ -175,12 +177,13 @@ export function createGrid3dComputeRenderable<S extends RenderableSchema, P, CS>
            tex[1].attachFramebuffer(framebuffer, 'color0');
            gl.clear(gl.COLOR_BUFFER_BIT);

-            if (spec.cumulative.yieldPeriod) {
+            if (spec.cumulative.yieldPeriod && !isTimingMode) {
                await ctx.update({ message: 'Computing...', isIndeterminate: false, current: 0, max: states.length });
            }

            const yieldPeriod = Math.max(1, spec.cumulative.yieldPeriod ?? 1 | 0);

+            if (isTimingMode) webgl.timer.mark('Grid3dCompute.renderBatch');
            for (let i = 0; i < states.length; i++) {
                ValueCell.update(cells.tCumulativeSum, tex[(i + 1) % 2]);
                tex[i % 2].attachFramebuffer(framebuffer, 'color0');
@@ -191,23 +194,31 @@ export function createGrid3dComputeRenderable<S extends RenderableSchema, P, CS>

                if (spec.cumulative.yieldPeriod && i !== states.length - 1) {
                    if (i % yieldPeriod === yieldPeriod - 1) {
-                        webgl.readPixels(0, 0, 1, 1, array);
+                        webgl.waitForGpuCommandsCompleteSync();
+                        if (isTimingMode) webgl.timer.markEnd('Grid3dCompute.renderBatch');
+                        if (isTimingMode) webgl.timer.mark('Grid3dCompute.renderBatch');
                    }
-                    if (ctx.shouldUpdate) {
+                    if (ctx.shouldUpdate && !isTimingMode) {
                        await ctx.update({ current: i + 1 });
                    }
                }
            }
+            if (isTimingMode) webgl.timer.markEnd('Grid3dCompute.renderBatch');
+            if (isTimingMode) webgl.timer.markEnd('Grid3dCompute.renderCumulative');
        } else {
+            if (isTimingMode) webgl.timer.mark('Grid3dCompute.render');
            tex[0].define(uWidth, uWidth);
            tex[0].attachFramebuffer(framebuffer, 'color0');
            framebuffer.bind();
            resetGl(webgl, uWidth);
            renderable.update();
            renderable.render();
+            if (isTimingMode) webgl.timer.markEnd('Grid3dCompute.render');
        }

+        if (isTimingMode) webgl.timer.mark('Grid3dCompute.readPixels');
        webgl.readPixels(0, 0, uWidth, uWidth, array);
+        if (isTimingMode) webgl.timer.markEnd('Grid3dCompute.readPixels');
        return new Float32Array(array.buffer, array.byteOffset, nx * ny * nz);
    };
 }
--- a/src/mol-gl/compute/histogram-pyramid/reduction.ts
+++ b/src/mol-gl/compute/histogram-pyramid/reduction.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -19,6 +19,7 @@ import { isPowerOfTwo } from '../../../mol-math/misc';
 import { quad_vert } from '../../../mol-gl/shader/quad.vert';
 import { reduction_frag } from '../../../mol-gl/shader/histogram-pyramid/reduction.frag';
 import { isWebGL2 } from '../../webgl/compat';
+import { isTimingMode } from '../../../mol-util/debug';

 const HistopyramidReductionSchema = {
    ...QuadSchema,
@@ -120,6 +121,7 @@ export interface HistogramPyramid {
 }

 export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture, scale: Vec2, gridTexDim: Vec3): HistogramPyramid {
+    if (isTimingMode) ctx.timer.mark('createHistogramPyramid');
    const { gl } = ctx;
    const w = inputTexture.getWidth();
    const h = inputTexture.getHeight();
@@ -193,6 +195,7 @@ export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture,
    }

    gl.finish();
+    if (isTimingMode) ctx.timer.markEnd('createHistogramPyramid');

    // printTexture(ctx, pyramidTex, 2)

--- a/src/mol-gl/compute/histogram-pyramid/sum.ts
+++ b/src/mol-gl/compute/histogram-pyramid/sum.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -16,6 +16,7 @@ import { QuadSchema, QuadValues } from '../util';
 import { quad_vert } from '../../../mol-gl/shader/quad.vert';
 import { sum_frag } from '../../../mol-gl/shader/histogram-pyramid/sum.frag';
 import { isWebGL2 } from '../../webgl/compat';
+import { isTimingMode } from '../../../mol-util/debug';

 const HistopyramidSumSchema = {
    ...QuadSchema,
@@ -66,6 +67,7 @@ const sumBytes = new Uint8Array(4);
 const sumInts = new Int32Array(4);

 export function getHistopyramidSum(ctx: WebGLContext, pyramidTopTexture: Texture) {
+    if (isTimingMode) ctx.timer.mark('getHistopyramidSum');
    const { gl, resources } = ctx;

    const renderable = getHistopyramidSumRenderable(ctx, pyramidTopTexture);
@@ -93,6 +95,7 @@ export function getHistopyramidSum(ctx: WebGLContext, pyramidTopTexture: Texture

    ctx.readPixels(0, 0, 1, 1, isWebGL2(gl) ? sumInts : sumBytes);
    ctx.unbindFramebuffer();
+    if (isTimingMode) ctx.timer.markEnd('getHistopyramidSum');

    return isWebGL2(gl)
        ? sumInts[0]
--- a/src/mol-gl/compute/marching-cubes/active-voxels.ts
+++ b/src/mol-gl/compute/marching-cubes/active-voxels.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -16,6 +16,7 @@ import { QuadSchema, QuadValues } from '../util';
 import { getTriCount } from './tables';
 import { quad_vert } from '../../../mol-gl/shader/quad.vert';
 import { activeVoxels_frag } from '../../../mol-gl/shader/marching-cubes/active-voxels.frag';
+import { isTimingMode } from '../../../mol-util/debug';

 const ActiveVoxelsSchema = {
    ...QuadSchema,
@@ -83,6 +84,7 @@ function setRenderingDefaults(ctx: WebGLContext) {
 }

 export function calcActiveVoxels(ctx: WebGLContext, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, isoValue: number, gridScale: Vec2) {
+    if (isTimingMode) ctx.timer.mark('calcActiveVoxels');
    const { gl, resources } = ctx;
    const width = volumeData.getWidth();
    const height = volumeData.getHeight();
@@ -115,6 +117,7 @@ export function calcActiveVoxels(ctx: WebGLContext, volumeData: Texture, gridDim
    // console.log('at', readTexture(ctx, activeVoxelsTex));

    gl.finish();
+    if (isTimingMode) ctx.timer.markEnd('calcActiveVoxels');

    return activeVoxelsTex;
 }
--- a/src/mol-gl/compute/marching-cubes/isosurface.ts
+++ b/src/mol-gl/compute/marching-cubes/isosurface.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -19,6 +19,7 @@ import { quad_vert } from '../../../mol-gl/shader/quad.vert';
 import { isosurface_frag } from '../../../mol-gl/shader/marching-cubes/isosurface.frag';
 import { calcActiveVoxels } from './active-voxels';
 import { isWebGL2 } from '../../webgl/compat';
+import { isTimingMode } from '../../../mol-util/debug';

 const IsosurfaceSchema = {
    ...QuadSchema,
@@ -122,6 +123,7 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
    const { drawBuffers } = ctx.extensions;
    if (!drawBuffers) throw new Error('need WebGL draw buffers');

+    if (isTimingMode) ctx.timer.mark('createIsosurfaceBuffers');
    const { gl, resources, extensions } = ctx;
    const { pyramidTex, height, levels, scale, count } = histogramPyramid;
    const width = pyramidTex.getWidth();
@@ -192,6 +194,7 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
    renderable.render();

    gl.finish();
+    if (isTimingMode) ctx.timer.markEnd('createIsosurfaceBuffers');

    return { vertexTexture, groupTexture, normalTexture, vertexCount: count };
 }
@@ -208,20 +211,11 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
 * Implementation based on http://www.miaumiau.cat/2016/10/stream-compaction-in-webgl/
 */
 export function extractIsosurface(ctx: WebGLContext, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, gridTexScale: Vec2, transform: Mat4, isoValue: number, invert: boolean, packedGroup: boolean, axisOrder: Vec3, vertexTexture?: Texture, groupTexture?: Texture, normalTexture?: Texture) {
-    // console.time('calcActiveVoxels');
+    if (isTimingMode) ctx.timer.mark('extractIsosurface');
    const activeVoxelsTex = calcActiveVoxels(ctx, volumeData, gridDim, gridTexDim, isoValue, gridTexScale);
-    // ctx.waitForGpuCommandsCompleteSync();
-    // console.timeEnd('calcActiveVoxels');
-
-    // console.time('createHistogramPyramid');
    const compacted = createHistogramPyramid(ctx, activeVoxelsTex, gridTexScale, gridTexDim);
-    // ctx.waitForGpuCommandsCompleteSync();
-    // console.timeEnd('createHistogramPyramid');
-
-    // console.time('createIsosurfaceBuffers');
    const gv = createIsosurfaceBuffers(ctx, activeVoxelsTex, volumeData, compacted, gridDim, gridTexDim, transform, isoValue, invert, packedGroup, axisOrder, vertexTexture, groupTexture, normalTexture);
-    // ctx.waitForGpuCommandsCompleteSync();
-    // console.timeEnd('createIsosurfaceBuffers');
+    if (isTimingMode) ctx.timer.markEnd('extractIsosurface');

    return gv;
 }
--- a/src/mol-gl/renderable.ts
+++ b/src/mol-gl/renderable.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -10,7 +10,6 @@ import { GraphicsRenderItem, ComputeRenderItem, GraphicsRenderVariant } from './
 import { ValueCell } from '../mol-util';
 import { idFactory } from '../mol-util/id-factory';
 import { clamp } from '../mol-math/interpolate';
-import { Textures } from './webgl/texture';

 const getNextRenderableId = idFactory();

@@ -30,7 +29,7 @@ export interface Renderable<T extends RenderableValues> {
    readonly values: T
    readonly state: RenderableState

-    render: (variant: GraphicsRenderVariant, sharedTexturesList?: Textures) => void
+    render: (variant: GraphicsRenderVariant, sharedTexturesCount: number) => void
    getProgram: (variant: GraphicsRenderVariant) => Program
    update: () => void
    dispose: () => void
@@ -43,11 +42,11 @@ export function createRenderable<T extends Values<RenderableSchema>>(renderItem:
        values,
        state,

-        render: (variant: GraphicsRenderVariant, sharedTexturesList?: Textures) => {
+        render: (variant: GraphicsRenderVariant, sharedTexturesCount: number) => {
            if (values.uAlpha && values.alpha) {
                ValueCell.updateIfChanged(values.uAlpha, clamp(values.alpha.ref.value * state.alphaFactor, 0, 1));
            }
-            renderItem.render(variant, sharedTexturesList);
+            renderItem.render(variant, sharedTexturesCount);
        },
        getProgram: (variant: GraphicsRenderVariant) => renderItem.getProgram(variant),
        update: () => renderItem.update(),
@@ -73,7 +72,7 @@ export function createComputeRenderable<T extends Values<RenderableSchema>>(rend
        id: getNextRenderableId(),
        values,

-        render: () => renderItem.render('compute'),
+        render: () => renderItem.render('compute', 0),
        update: () => renderItem.update(),
        dispose: () => renderItem.destroy()
    };
--- a/src/mol-gl/renderable/cylinders.ts
+++ b/src/mol-gl/renderable/cylinders.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -23,11 +23,12 @@ export const CylindersSchema = {
    elements: ElementsSpec('uint32'),

    padding: ValueSpec('number'),
-    uDoubleSided: UniformSpec('b'),
+    uDoubleSided: UniformSpec('b', 'material'),
    dIgnoreLight: DefineSpec('boolean'),
    dXrayShaded: DefineSpec('boolean'),
-    uBumpFrequency: UniformSpec('f'),
-    uBumpAmplitude: UniformSpec('f'),
+    dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']),
+    uBumpFrequency: UniformSpec('f', 'material'),
+    uBumpAmplitude: UniformSpec('f', 'material'),
 };
 export type CylindersSchema = typeof CylindersSchema
 export type CylindersValues = Values<CylindersSchema>
--- a/src/mol-gl/renderable/direct-volume.ts
+++ b/src/mol-gl/renderable/direct-volume.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -26,7 +26,7 @@ export const DirectVolumeSchema = {
    uTransform: UniformSpec('m4'),
    uGridDim: UniformSpec('v3'),
    tTransferTex: TextureSpec('image-uint8', 'alpha', 'ubyte', 'linear'),
-    uTransferScale: UniformSpec('f'),
+    uTransferScale: UniformSpec('f', 'material'),

    dGridTexType: DefineSpec('string', ['2d', '3d']),
    uGridTexDim: UniformSpec('v3'),
--- a/src/mol-gl/renderable/lines.ts
+++ b/src/mol-gl/renderable/lines.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -20,7 +20,7 @@ export const LinesSchema = {
    aEnd: AttributeSpec('float32', 3, 0),
    elements: ElementsSpec('uint32'),
    dLineSizeAttenuation: DefineSpec('boolean'),
-    uDoubleSided: UniformSpec('b'),
+    uDoubleSided: UniformSpec('b', 'material'),
    dFlipSided: DefineSpec('boolean'),
 };
 export type LinesSchema = typeof LinesSchema
--- a/src/mol-gl/renderable/mesh.ts
+++ b/src/mol-gl/renderable/mesh.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -18,12 +18,13 @@ export const MeshSchema = {
    aNormal: AttributeSpec('float32', 3, 0),
    elements: ElementsSpec('uint32'),
    dFlatShaded: DefineSpec('boolean'),
-    uDoubleSided: UniformSpec('b'),
+    uDoubleSided: UniformSpec('b', 'material'),
    dFlipSided: DefineSpec('boolean'),
    dIgnoreLight: DefineSpec('boolean'),
    dXrayShaded: DefineSpec('boolean'),
-    uBumpFrequency: UniformSpec('f'),
-    uBumpAmplitude: UniformSpec('f'),
+    dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']),
+    uBumpFrequency: UniformSpec('f', 'material'),
+    uBumpAmplitude: UniformSpec('f', 'material'),
    meta: ValueSpec('unknown')
 } as const;
 export type MeshSchema = typeof MeshSchema
--- a/src/mol-gl/renderable/schema.ts
+++ b/src/mol-gl/renderable/schema.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -153,7 +153,7 @@ export const GlobalUniformSchema = {

    uXrayEdgeFalloff: UniformSpec('f'),

-    uRenderWboit: UniformSpec('b'),
+    uRenderMask: UniformSpec('i'),
    uMarkingDepthTest: UniformSpec('b'),
    uMarkingType: UniformSpec('i'),
    uPickType: UniformSpec('i'),
@@ -194,7 +194,7 @@ export const SizeSchema = {
    uSizeTexDim: UniformSpec('v2'),
    tSize: TextureSpec('image-uint8', 'rgb', 'ubyte', 'nearest'),
    dSizeType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'groupInstance']),
-    uSizeFactor: UniformSpec('f'),
+    uSizeFactor: UniformSpec('f', 'material'),
 } as const;
 export type SizeSchema = typeof SizeSchema
 export type SizeValues = Values<SizeSchema>
@@ -205,6 +205,7 @@ export const MarkerSchema = {
    tMarker: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
    markerAverage: ValueSpec('number'),
    markerStatus: ValueSpec('number'),
+    dMarkerType: DefineSpec('string', ['instance', 'groupInstance']),
 } as const;
 export type MarkerSchema = typeof MarkerSchema
 export type MarkerValues = Values<MarkerSchema>
@@ -217,7 +218,7 @@ export const OverpaintSchema = {
    uOverpaintGridDim: UniformSpec('v3'),
    uOverpaintGridTransform: UniformSpec('v4'),
    tOverpaintGrid: TextureSpec('texture', 'rgba', 'ubyte', 'linear'),
-    dOverpaintType: DefineSpec('string', ['groupInstance', 'volumeInstance']),
+    dOverpaintType: DefineSpec('string', ['instance', 'groupInstance', 'volumeInstance']),
 } as const;
 export type OverpaintSchema = typeof OverpaintSchema
 export type OverpaintValues = Values<OverpaintSchema>
@@ -231,7 +232,7 @@ export const TransparencySchema = {
    uTransparencyGridDim: UniformSpec('v3'),
    uTransparencyGridTransform: UniformSpec('v4'),
    tTransparencyGrid: TextureSpec('texture', 'alpha', 'ubyte', 'linear'),
-    dTransparencyType: DefineSpec('string', ['groupInstance', 'volumeInstance']),
+    dTransparencyType: DefineSpec('string', ['instance', 'groupInstance', 'volumeInstance']),
 } as const;
 export type TransparencySchema = typeof TransparencySchema
 export type TransparencyValues = Values<TransparencySchema>
@@ -244,7 +245,7 @@ export const SubstanceSchema = {
    uSubstanceGridDim: UniformSpec('v3'),
    uSubstanceGridTransform: UniformSpec('v4'),
    tSubstanceGrid: TextureSpec('texture', 'rgba', 'ubyte', 'linear'),
-    dSubstanceType: DefineSpec('string', ['groupInstance', 'volumeInstance']),
+    dSubstanceType: DefineSpec('string', ['instance', 'groupInstance', 'volumeInstance']),
 } as const;
 export type SubstanceSchema = typeof SubstanceSchema
 export type SubstanceValues = Values<SubstanceSchema>
@@ -253,6 +254,7 @@ export const ClippingSchema = {
    uClippingTexDim: UniformSpec('v2'),
    tClipping: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
    dClipping: DefineSpec('boolean'),
+    dClippingType: DefineSpec('string', ['instance', 'groupInstance']),
 } as const;
 export type ClippingSchema = typeof ClippingSchema
 export type ClippingValues = Values<ClippingSchema>
@@ -268,14 +270,15 @@ export const BaseSchema = {
    ...ClippingSchema,

    dLightCount: DefineSpec('number'),
+    dColorMarker: DefineSpec('boolean'),

    dClipObjectCount: DefineSpec('number'),
    dClipVariant: DefineSpec('string', ['instance', 'pixel']),
-    uClipObjectType: UniformSpec('i[]'),
-    uClipObjectInvert: UniformSpec('b[]'),
-    uClipObjectPosition: UniformSpec('v3[]'),
-    uClipObjectRotation: UniformSpec('v4[]'),
-    uClipObjectScale: UniformSpec('v3[]'),
+    uClipObjectType: UniformSpec('i[]', 'material'),
+    uClipObjectInvert: UniformSpec('b[]', 'material'),
+    uClipObjectPosition: UniformSpec('v3[]', 'material'),
+    uClipObjectRotation: UniformSpec('v4[]', 'material'),
+    uClipObjectScale: UniformSpec('v3[]', 'material'),

    aInstance: AttributeSpec('float32', 1, 1),
    /**
@@ -311,6 +314,8 @@ export const BaseSchema = {
    extraTransform: ValueSpec('float32'),
    /** denotes reflection in transform */
    hasReflection: ValueSpec('boolean'),
+    /** use instance granularity for marker, transparency, clipping, overpaint, substance */
+    instanceGranularity: ValueSpec('boolean'),

    /** bounding sphere taking aTransform into account and encompases all instances */
    boundingSphere: ValueSpec('sphere'),
--- a/src/mol-gl/renderable/spheres.ts
+++ b/src/mol-gl/renderable/spheres.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -20,11 +20,12 @@ export const SpheresSchema = {
    elements: ElementsSpec('uint32'),

    padding: ValueSpec('number'),
-    uDoubleSided: UniformSpec('b'),
+    uDoubleSided: UniformSpec('b', 'material'),
    dIgnoreLight: DefineSpec('boolean'),
    dXrayShaded: DefineSpec('boolean'),
-    uBumpFrequency: UniformSpec('f'),
-    uBumpAmplitude: UniformSpec('f'),
+    dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']),
+    uBumpFrequency: UniformSpec('f', 'material'),
+    uBumpAmplitude: UniformSpec('f', 'material'),
 };
 export type SpheresSchema = typeof SpheresSchema
 export type SpheresValues = Values<SpheresSchema>
--- a/src/mol-gl/renderable/text.ts
+++ b/src/mol-gl/renderable/text.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -24,13 +24,13 @@ export const TextSchema = {
    tFont: TextureSpec('image-uint8', 'alpha', 'ubyte', 'linear'),
    padding: ValueSpec('number'),

-    uBorderWidth: UniformSpec('f'),
-    uBorderColor: UniformSpec('v3'),
-    uOffsetX: UniformSpec('f'),
-    uOffsetY: UniformSpec('f'),
-    uOffsetZ: UniformSpec('f'),
-    uBackgroundColor: UniformSpec('v3'),
-    uBackgroundOpacity: UniformSpec('f'),
+    uBorderWidth: UniformSpec('f', 'material'),
+    uBorderColor: UniformSpec('v3', 'material'),
+    uOffsetX: UniformSpec('f', 'material'),
+    uOffsetY: UniformSpec('f', 'material'),
+    uOffsetZ: UniformSpec('f', 'material'),
+    uBackgroundColor: UniformSpec('v3', 'material'),
+    uBackgroundOpacity: UniformSpec('f', 'material'),
 };
 export type TextSchema = typeof TextSchema
 export type TextValues = Values<TextSchema>
--- a/src/mol-gl/renderable/texture-mesh.ts
+++ b/src/mol-gl/renderable/texture-mesh.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -19,12 +19,13 @@ export const TextureMeshSchema = {
    tNormal: TextureSpec('texture', 'rgb', 'float', 'nearest'),

    dFlatShaded: DefineSpec('boolean'),
-    uDoubleSided: UniformSpec('b'),
+    uDoubleSided: UniformSpec('b', 'material'),
    dFlipSided: DefineSpec('boolean'),
    dIgnoreLight: DefineSpec('boolean'),
    dXrayShaded: DefineSpec('boolean'),
-    uBumpFrequency: UniformSpec('f'),
-    uBumpAmplitude: UniformSpec('f'),
+    dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']),
+    uBumpFrequency: UniformSpec('f', 'material'),
+    uBumpAmplitude: UniformSpec('f', 'material'),
    meta: ValueSpec('unknown')
 };
 export type TextureMeshSchema = typeof TextureMeshSchema
--- a/src/mol-gl/renderer.ts
+++ b/src/mol-gl/renderer.ts
@@ -19,6 +19,7 @@ import { degToRad } from '../mol-math/misc';
 import { Texture, Textures } from './webgl/texture';
 import { arrayMapUpsert } from '../mol-util/array';
 import { clamp } from '../mol-math/interpolate';
+import { isTimingMode } from '../mol-util/debug';

 export interface RendererStats {
    programCount: number
@@ -54,18 +55,19 @@ interface Renderer {
    readonly props: Readonly<RendererProps>

    clear: (toBackgroundColor: boolean, ignoreTransparentBackground?: boolean) => void
-    clearDepth: () => void
+    clearDepth: (packed?: boolean) => void
    update: (camera: ICamera) => void

-    renderPick: (group: Scene.Group, camera: ICamera, variant: GraphicsRenderVariant, depthTexture: Texture | null, pickType: PickType) => void
+    renderPick: (group: Scene.Group, camera: ICamera, variant: 'pick' | 'depth', depthTexture: Texture | null, pickType: PickType) => void
    renderDepth: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
+    renderDepthOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
+    renderDepthTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
    renderMarkingDepth: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
    renderMarkingMask: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
    renderBlended: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
    renderBlendedOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
    renderBlendedTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
-    renderBlendedVolumeOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
-    renderBlendedVolumeTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
+    renderBlendedVolume: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
    renderWboitOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
    renderWboitTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void

@@ -87,6 +89,7 @@ export const RendererParams = {
    interiorColorFlag: PD.Boolean(true, { label: 'Use Interior Color' }),
    interiorColor: PD.Color(Color.fromNormalizedRgb(0.3, 0.3, 0.3)),

+    colorMarker: PD.Boolean(true, { description: 'Enable color marker' }),
    highlightColor: PD.Color(Color.fromNormalizedRgb(1.0, 0.4, 0.6)),
    selectColor: PD.Color(Color.fromNormalizedRgb(0.2, 1.0, 0.1)),
    highlightStrength: PD.Numeric(0.3, { min: 0.0, max: 1.0, step: 0.1 }),
@@ -135,6 +138,18 @@ function getLight(props: RendererProps['light'], light?: Light): Light {
 }

 namespace Renderer {
+    const enum Flag {
+        None = 0,
+        BlendedFront = 1,
+        BlendedBack = 2
+    }
+
+    const enum Mask {
+        All = 0,
+        Opaque = 1,
+        Transparent = 2,
+    }
+
    export function create(ctx: WebGLContext, props: Partial<RendererProps> = {}): Renderer {
        const { gl, state, stats } = ctx;
        const p = PD.merge(RendererParams, PD.getDefaultValues(RendererParams), props);
@@ -146,7 +161,9 @@ namespace Renderer {

        let transparentBackground = false;

-        const emptyDepthTexture = ctx.resources.texture('image-depth', 'depth', 'ushort', 'nearest');
+        const emptyDepthTexture = ctx.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+        emptyDepthTexture.define(1, 1);
+        emptyDepthTexture.load({ array: new Uint8Array([255, 255, 255, 255]), width: 1, height: 1 });
        const sharedTexturesList: Textures = [
            ['tDepth', emptyDepthTexture]
        ];
@@ -191,7 +208,7 @@ namespace Renderer {
            uFogFar: ValueCell.create(10000),
            uFogColor: ValueCell.create(bgColor),

-            uRenderWboit: ValueCell.create(false),
+            uRenderMask: ValueCell.create(0),
            uMarkingDepthTest: ValueCell.create(false),
            uPickType: ValueCell.create(PickType.None),
            uMarkingType: ValueCell.create(MarkingType.None),
@@ -220,7 +237,7 @@ namespace Renderer {

        let globalUniformsNeedUpdate = true;

-        const renderObject = (r: GraphicsRenderable, variant: GraphicsRenderVariant) => {
+        const renderObject = (r: GraphicsRenderable, variant: GraphicsRenderVariant, flag: Flag) => {
            if (r.state.disposed || !r.state.visible || (!r.state.pickable && variant === 'pick')) {
                return;
            }
@@ -230,6 +247,10 @@ namespace Renderer {
                ValueCell.update(r.values.dLightCount, light.count);
                definesNeedUpdate = true;
            }
+            if (r.values.dColorMarker.ref.value !== p.colorMarker) {
+                ValueCell.update(r.values.dColorMarker, p.colorMarker);
+                definesNeedUpdate = true;
+            }
            if (definesNeedUpdate) r.update();

            const program = r.getProgram(variant);
@@ -242,6 +263,7 @@ namespace Renderer {
            if (globalUniformsNeedUpdate) {
                // console.log('globalUniformsNeedUpdate')
                program.setUniforms(globalUniformList);
+                program.bindTextures(sharedTexturesList, 0);
                globalUniformsNeedUpdate = false;
            }

@@ -259,6 +281,24 @@ namespace Renderer {
                    state.disable(gl.DEPTH_TEST);
                    state.depthMask(false);
                }
+            } else if (flag === Flag.BlendedFront) {
+                state.enable(gl.CULL_FACE);
+                if (r.values.dFlipSided?.ref.value) {
+                    state.frontFace(gl.CW);
+                    state.cullFace(gl.FRONT);
+                } else {
+                    state.frontFace(gl.CCW);
+                    state.cullFace(gl.BACK);
+                }
+            } else if (flag === Flag.BlendedBack) {
+                state.enable(gl.CULL_FACE);
+                if (r.values.dFlipSided?.ref.value) {
+                    state.frontFace(gl.CW);
+                    state.cullFace(gl.BACK);
+                } else {
+                    state.frontFace(gl.CCW);
+                    state.cullFace(gl.FRONT);
+                }
            } else {
                if (r.values.uDoubleSided) {
                    if (r.values.uDoubleSided.ref.value || r.values.hasReflection.ref.value) {
@@ -271,14 +311,9 @@ namespace Renderer {
                    state.disable(gl.CULL_FACE);
                }

-                if (r.values.dFlipSided) {
-                    if (r.values.dFlipSided.ref.value) {
-                        state.frontFace(gl.CW);
-                        state.cullFace(gl.FRONT);
-                    } else {
-                        state.frontFace(gl.CCW);
-                        state.cullFace(gl.BACK);
-                    }
+                if (r.values.dFlipSided?.ref.value) {
+                    state.frontFace(gl.CW);
+                    state.cullFace(gl.FRONT);
                } else {
                    // webgl default
                    state.frontFace(gl.CCW);
@@ -286,7 +321,7 @@ namespace Renderer {
                }
            }

-            r.render(variant, sharedTexturesList);
+            r.render(variant, sharedTexturesList.length);
        };

        const update = (camera: ICamera) => {
@@ -308,7 +343,7 @@ namespace Renderer {
            ValueCell.updateIfChanged(globalUniforms.uTransparentBackground, transparentBackground);
        };

-        const updateInternal = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null, renderWboit: boolean, markingDepthTest: boolean) => {
+        const updateInternal = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null, renderMask: Mask, markingDepthTest: boolean) => {
            arrayMapUpsert(sharedTexturesList, 'tDepth', depthTexture || emptyDepthTexture);

            ValueCell.update(globalUniforms.uModel, group.view);
@@ -317,7 +352,7 @@ namespace Renderer {
            ValueCell.update(globalUniforms.uModelViewProjection, Mat4.mul(modelViewProjection, modelView, camera.projection));
            ValueCell.update(globalUniforms.uInvModelViewProjection, Mat4.invert(invModelViewProjection, modelViewProjection));

-            ValueCell.updateIfChanged(globalUniforms.uRenderWboit, renderWboit);
+            ValueCell.updateIfChanged(globalUniforms.uRenderMask, renderMask);
            ValueCell.updateIfChanged(globalUniforms.uMarkingDepthTest, markingDepthTest);

            state.enable(gl.SCISSOR_TEST);
@@ -332,40 +367,81 @@ namespace Renderer {
        };

        const renderPick = (group: Scene.Group, camera: ICamera, variant: GraphicsRenderVariant, depthTexture: Texture | null, pickType: PickType) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderPick');
            state.disable(gl.BLEND);
            state.enable(gl.DEPTH_TEST);
            state.depthMask(true);

-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, Mask.All, false);
            ValueCell.updateIfChanged(globalUniforms.uPickType, pickType);

            const { renderables } = group;
            for (let i = 0, il = renderables.length; i < il; ++i) {
                if (!renderables[i].state.colorOnly) {
-                    renderObject(renderables[i], variant);
+                    renderObject(renderables[i], variant, Flag.None);
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderPick');
        };

        const renderDepth = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderDepth');
            state.disable(gl.BLEND);
            state.enable(gl.DEPTH_TEST);
            state.depthMask(true);

-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, Mask.All, false);

            const { renderables } = group;
            for (let i = 0, il = renderables.length; i < il; ++i) {
-                renderObject(renderables[i], 'depth');
+                renderObject(renderables[i], 'depth', Flag.None);
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderDepth');
        };

-        const renderMarkingDepth = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+        const renderDepthOpaque = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderDepthOpaque');
            state.disable(gl.BLEND);
            state.enable(gl.DEPTH_TEST);
            state.depthMask(true);

-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, Mask.Opaque, false);
+
+            const { renderables } = group;
+            for (let i = 0, il = renderables.length; i < il; ++i) {
+                const r = renderables[i];
+                if (r.state.opaque && r.values.transparencyAverage.ref.value !== 1 && !r.values.dXrayShaded?.ref.value) {
+                    renderObject(r, 'depth', Flag.None);
+                }
+            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderDepthOpaque');
+        };
+
+        const renderDepthTransparent = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderDepthTransparent');
+            state.disable(gl.BLEND);
+            state.enable(gl.DEPTH_TEST);
+            state.depthMask(true);
+
+            updateInternal(group, camera, depthTexture, Mask.Transparent, false);
+
+            const { renderables } = group;
+            for (let i = 0, il = renderables.length; i < il; ++i) {
+                const r = renderables[i];
+                if (!r.state.opaque || r.values.transparencyAverage.ref.value > 0 || r.values.dXrayShaded?.ref.value) {
+                    renderObject(r, 'depth', Flag.None);
+                }
+            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderDepthTransparent');
+        };
+
+        const renderMarkingDepth = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderMarkingDepth');
+            state.disable(gl.BLEND);
+            state.enable(gl.DEPTH_TEST);
+            state.depthMask(true);
+
+            updateInternal(group, camera, depthTexture, Mask.All, false);
            ValueCell.updateIfChanged(globalUniforms.uMarkingType, MarkingType.Depth);

            const { renderables } = group;
@@ -373,17 +449,19 @@ namespace Renderer {
                const r = renderables[i];

                if (r.values.markerAverage.ref.value !== 1) {
-                    renderObject(renderables[i], 'marking');
+                    renderObject(renderables[i], 'marking', Flag.None);
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderMarkingDepth');
        };

        const renderMarkingMask = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderMarkingMask');
            state.disable(gl.BLEND);
            state.enable(gl.DEPTH_TEST);
            state.depthMask(true);

-            updateInternal(group, camera, depthTexture, false, !!depthTexture);
+            updateInternal(group, camera, depthTexture, Mask.All, !!depthTexture);
            ValueCell.updateIfChanged(globalUniforms.uMarkingType, MarkingType.Mask);

            const { renderables } = group;
@@ -391,9 +469,10 @@ namespace Renderer {
                const r = renderables[i];

                if (r.values.markerAverage.ref.value > 0) {
-                    renderObject(renderables[i], 'marking');
+                    renderObject(renderables[i], 'marking', Flag.None);
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderMarkingMask');
        };

        const renderBlended = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
@@ -402,25 +481,30 @@ namespace Renderer {
        };

        const renderBlendedOpaque = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderBlendedOpaque');
            state.disable(gl.BLEND);
            state.enable(gl.DEPTH_TEST);
            state.depthMask(true);

-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, Mask.Opaque, false);

            const { renderables } = group;
            for (let i = 0, il = renderables.length; i < il; ++i) {
                const r = renderables[i];
                if (r.state.opaque) {
-                    renderObject(r, 'colorBlended');
+                    renderObject(r, 'colorBlended', Flag.None);
+                } else if (r.values.uDoubleSided?.ref.value && r.values.dTransparentBackfaces?.ref.value === 'opaque') {
+                    renderObject(r, 'colorBlended', Flag.BlendedBack);
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderBlendedOpaque');
        };

        const renderBlendedTransparent = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderBlendedTransparent');
            state.enable(gl.DEPTH_TEST);

-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, Mask.Transparent, false);

            const { renderables } = group;

@@ -435,63 +519,52 @@ namespace Renderer {
            for (let i = 0, il = renderables.length; i < il; ++i) {
                const r = renderables[i];
                if (!r.state.opaque && r.state.writeDepth) {
-                    renderObject(r, 'colorBlended');
+                    renderObject(r, 'colorBlended', Flag.None);
                }
            }

            state.depthMask(false);
            for (let i = 0, il = renderables.length; i < il; ++i) {
                const r = renderables[i];
-                if (!r.state.opaque && !r.state.writeDepth) {
-                    renderObject(r, 'colorBlended');
+                if ((!r.state.opaque && !r.state.writeDepth) || r.values.transparencyAverage.ref.value > 0) {
+                    if (r.values.uDoubleSided?.ref.value) {
+                        // render frontfaces and backfaces separately to avoid artefacts
+                        if (r.values.dTransparentBackfaces?.ref.value !== 'opaque') {
+                            renderObject(r, 'colorBlended', Flag.BlendedBack);
+                        }
+                        renderObject(r, 'colorBlended', Flag.BlendedFront);
+                    } else {
+                        renderObject(r, 'colorBlended', Flag.None);
+                    }
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderBlendedTransparent');
        };

-        const renderBlendedVolumeOpaque = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+        const renderBlendedVolume = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderBlendedVolume');
            state.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
            state.enable(gl.BLEND);

-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, Mask.Transparent, false);

            const { renderables } = group;
            for (let i = 0, il = renderables.length; i < il; ++i) {
                const r = renderables[i];
-
-                // TODO: simplify, handle in renderable.state???
-                // uAlpha is updated in "render" so we need to recompute it here
-                const alpha = clamp(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
-                if (alpha === 1 && r.values.transparencyAverage.ref.value !== 1 && !r.values.dXrayShaded?.ref.value) {
-                    renderObject(r, 'colorBlended');
-                }
-            }
-        };
-
-        const renderBlendedVolumeTransparent = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
-            state.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-            state.enable(gl.BLEND);
-
-            updateInternal(group, camera, depthTexture, false, false);
-
-            const { renderables } = group;
-            for (let i = 0, il = renderables.length; i < il; ++i) {
-                const r = renderables[i];
-
-                // TODO: simplify, handle in renderable.state???
-                // uAlpha is updated in "render" so we need to recompute it here
-                const alpha = clamp(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
-                if (alpha < 1 || r.values.transparencyAverage.ref.value > 0 || r.values.dXrayShaded?.ref.value) {
-                    renderObject(r, 'colorBlended');
+                if (r.values.dGeometryType.ref.value === 'directVolume') {
+                    renderObject(r, 'colorBlended', Flag.None);
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderBlendedVolume');
        };

        const renderWboitOpaque = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
+            if (isTimingMode) ctx.timer.mark('Renderer.renderWboitOpaque');
            state.disable(gl.BLEND);
            state.enable(gl.DEPTH_TEST);
            state.depthMask(true);

-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, Mask.Opaque, false);

            const { renderables } = group;
            for (let i = 0, il = renderables.length; i < il; ++i) {
@@ -500,14 +573,16 @@ namespace Renderer {
                // TODO: simplify, handle in renderable.state???
                // uAlpha is updated in "render" so we need to recompute it here
                const alpha = clamp(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
-                if (alpha === 1 && r.values.transparencyAverage.ref.value !== 1 && r.values.dGeometryType.ref.value !== 'directVolume' && r.values.dPointStyle?.ref.value !== 'fuzzy' && !r.values.dXrayShaded?.ref.value) {
-                    renderObject(r, 'colorWboit');
+                if ((alpha === 1 && r.values.transparencyAverage.ref.value !== 1 && r.values.dGeometryType.ref.value !== 'directVolume' && r.values.dPointStyle?.ref.value !== 'fuzzy' && !r.values.dXrayShaded?.ref.value) || r.values.dTransparentBackfaces?.ref.value === 'opaque') {
+                    renderObject(r, 'colorWboit', Flag.None);
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderWboitOpaque');
        };

        const renderWboitTransparent = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
-            updateInternal(group, camera, depthTexture, true, false);
+            if (isTimingMode) ctx.timer.mark('Renderer.renderWboitTransparent');
+            updateInternal(group, camera, depthTexture, Mask.Transparent, false);

            const { renderables } = group;
            for (let i = 0, il = renderables.length; i < il; ++i) {
@@ -517,9 +592,10 @@ namespace Renderer {
                // uAlpha is updated in "render" so we need to recompute it here
                const alpha = clamp(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
                if (alpha < 1 || r.values.transparencyAverage.ref.value > 0 || r.values.dGeometryType.ref.value === 'directVolume' || r.values.dPointStyle?.ref.value === 'fuzzy' || !!r.values.uBackgroundColor || r.values.dXrayShaded?.ref.value) {
-                    renderObject(r, 'colorWboit');
+                    renderObject(r, 'colorWboit', Flag.None);
                }
            }
+            if (isTimingMode) ctx.timer.markEnd('Renderer.renderWboitTransparent');
        };

        return {
@@ -538,23 +614,31 @@ namespace Renderer {
                }
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            },
-            clearDepth: () => {
+            clearDepth: (packed = false) => {
                state.enable(gl.SCISSOR_TEST);
-                state.enable(gl.DEPTH_TEST);
-                state.depthMask(true);
-                gl.clear(gl.DEPTH_BUFFER_BIT);
+
+                if (packed) {
+                    state.colorMask(true, true, true, true);
+                    state.clearColor(1, 1, 1, 1);
+                    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+                } else {
+                    state.enable(gl.DEPTH_TEST);
+                    state.depthMask(true);
+                    gl.clear(gl.DEPTH_BUFFER_BIT);
+                }
            },
            update,

            renderPick,
            renderDepth,
+            renderDepthOpaque,
+            renderDepthTransparent,
            renderMarkingDepth,
            renderMarkingMask,
            renderBlended,
            renderBlendedOpaque,
            renderBlendedTransparent,
-            renderBlendedVolumeOpaque,
-            renderBlendedVolumeTransparent,
+            renderBlendedVolume,
            renderWboitOpaque,
            renderWboitTransparent,

@@ -583,6 +667,9 @@ namespace Renderer {
                    ValueCell.update(globalUniforms.uInteriorColor, Color.toVec3Normalized(globalUniforms.uInteriorColor.ref.value, p.interiorColor));
                }

+                if (props.colorMarker !== undefined && props.colorMarker !== p.colorMarker) {
+                    p.colorMarker = props.colorMarker;
+                }
                if (props.highlightColor !== undefined && props.highlightColor !== p.highlightColor) {
                    p.highlightColor = props.highlightColor;
                    ValueCell.update(globalUniforms.uHighlightColor, Color.toVec3Normalized(globalUniforms.uHighlightColor.ref.value, p.highlightColor));
--- a/src/mol-gl/scene.ts
+++ b/src/mol-gl/scene.ts
@@ -16,6 +16,7 @@ import { BoundaryHelper } from '../mol-math/geometry/boundary-helper';
 import { hash1 } from '../mol-data/util';
 import { GraphicsRenderable } from './renderable';
 import { GraphicsRenderVariants } from './webgl/render-item';
+import { clamp } from '../mol-math/interpolate';

 const boundaryHelper = new BoundaryHelper('98');

@@ -79,7 +80,8 @@ interface Scene extends Object3D {
    has: (o: GraphicsRenderObject) => boolean
    clear: () => void
    forEach: (callbackFn: (value: GraphicsRenderable, key: GraphicsRenderObject) => void) => void
-    getMarkerAverage: () => number
+    readonly markerAverage: number
+    readonly opacityAverage: number
 }

 namespace Scene {
@@ -99,6 +101,9 @@ namespace Scene {
        let boundingSphereDirty = true;
        let boundingSphereVisibleDirty = true;

+        let markerAverage = 0;
+        let opacityAverage = 0;
+
        const object3d = Object3D.create();
        const { view, position, direction, up } = object3d;

@@ -155,6 +160,7 @@ namespace Scene {
            }

            renderables.sort(renderableSort);
+            opacityAverage = calculateOpacityAverage();
            return true;
        }

@@ -176,12 +182,42 @@ namespace Scene {
            const newVisibleHash = computeVisibleHash();
            if (newVisibleHash !== visibleHash) {
                boundingSphereVisibleDirty = true;
+                opacityAverage = calculateOpacityAverage();
                return true;
            } else {
                return false;
            }
        }

+        function calculateMarkerAverage() {
+            if (primitives.length === 0) return 0;
+            let count = 0;
+            let markerAverage = 0;
+            for (let i = 0, il = primitives.length; i < il; ++i) {
+                if (!primitives[i].state.visible) continue;
+                markerAverage += primitives[i].values.markerAverage.ref.value;
+                count += 1;
+            }
+            return count > 0 ? markerAverage / count : 0;
+        }
+
+        function calculateOpacityAverage() {
+            if (primitives.length === 0) return 0;
+            let count = 0;
+            let opacityAverage = 0;
+            for (let i = 0, il = primitives.length; i < il; ++i) {
+                const p = primitives[i];
+                if (!p.state.visible) continue;
+                // TODO: simplify, handle in renderable.state???
+                // uAlpha is updated in "render" so we need to recompute it here
+                const alpha = clamp(p.values.alpha.ref.value * p.state.alphaFactor, 0, 1);
+                const xray = p.values.dXrayShaded?.ref.value ? 0.5 : 1;
+                opacityAverage += (1 - p.values.transparencyAverage.ref.value) * alpha * xray;
+                count += 1;
+            }
+            return count > 0 ? opacityAverage / count : 0;
+        }
+
        return {
            view, position, direction, up,

@@ -207,6 +243,8 @@ namespace Scene {
                } else {
                    syncVisibility();
                }
+                markerAverage = calculateMarkerAverage();
+                opacityAverage = calculateOpacityAverage();
            },
            add: (o: GraphicsRenderObject) => commitQueue.add(o),
            remove: (o: GraphicsRenderObject) => commitQueue.remove(o),
@@ -220,6 +258,8 @@ namespace Scene {
                    renderables[i].dispose();
                }
                renderables.length = 0;
+                primitives.length = 0;
+                volumes.length = 0;
                renderableMap.clear();
                boundingSphereDirty = true;
                boundingSphereVisibleDirty = true;
@@ -245,16 +285,11 @@ namespace Scene {
                }
                return boundingSphereVisible;
            },
-            getMarkerAverage() {
-                if (primitives.length === 0 && volumes.length === 0) return 0;
-                let markerAverage = 0;
-                for (let i = 0, il = primitives.length; i < il; ++i) {
-                    markerAverage += primitives[i].values.markerAverage.ref.value;
-                }
-                for (let i = 0, il = volumes.length; i < il; ++i) {
-                    markerAverage += volumes[i].values.markerAverage.ref.value;
-                }
-                return markerAverage / (primitives.length + volumes.length);
+            get markerAverage() {
+                return markerAverage;
+            },
+            get opacityAverage() {
+                return opacityAverage;
            },
        };
    }
--- a/src/mol-gl/shader-code.ts
+++ b/src/mol-gl/shader-code.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -236,6 +236,18 @@ function getDefinesCode(defines: ShaderDefines, ignore?: IgnoreDefine) {
    return lines.join('\n') + '\n';
 }

+function getGlsl100VertPrefix(extensions: WebGLExtensions, shaderExtensions: ShaderExtensions) {
+    const prefix: string[] = [];
+    if (shaderExtensions.drawBuffers) {
+        if (extensions.drawBuffers) {
+            prefix.push('#define requiredDrawBuffers');
+        } else if (shaderExtensions.drawBuffers === 'required') {
+            throw new Error(`required 'GL_EXT_draw_buffers' extension not available`);
+        }
+    }
+    return prefix.join('\n') + '\n';
+}
+
 function getGlsl100FragPrefix(extensions: WebGLExtensions, shaderExtensions: ShaderExtensions) {
    const prefix: string[] = [
        '#extension GL_OES_standard_derivatives : enable'
@@ -271,7 +283,7 @@ function getGlsl100FragPrefix(extensions: WebGLExtensions, shaderExtensions: Sha
    return prefix.join('\n') + '\n';
 }

-const glsl300VertPrefix = `#version 300 es
+const glsl300VertPrefixCommon = `
 #define attribute in
 #define varying out
 #define texture2D texture
@@ -288,24 +300,45 @@ const glsl300FragPrefixCommon = `
 #define depthTextureSupport
 `;

+function getGlsl300VertPrefix(extensions: WebGLExtensions, shaderExtensions: ShaderExtensions) {
+    const prefix = [
+        '#version 300 es',
+    ];
+    if (shaderExtensions.drawBuffers) {
+        if (extensions.drawBuffers) {
+            prefix.push('#define requiredDrawBuffers');
+        }
+    }
+    if (extensions.noNonInstancedActiveAttribs) {
+        prefix.push('#define noNonInstancedActiveAttribs');
+    }
+    prefix.push(glsl300VertPrefixCommon);
+    return prefix.join('\n') + '\n';
+}
+
 function getGlsl300FragPrefix(gl: WebGL2RenderingContext, extensions: WebGLExtensions, shaderExtensions: ShaderExtensions, outTypes: FragOutTypes) {
    const prefix = [
        '#version 300 es',
        `layout(location = 0) out highp ${outTypes[0] || 'vec4'} out_FragData0;`
    ];
-
    if (shaderExtensions.fragDepth) {
-        prefix.push('#define enabledFragDepth');
+        if (extensions.fragDepth) {
+            prefix.push('#define enabledFragDepth');
+        }
    }
    if (shaderExtensions.drawBuffers) {
-        prefix.push('#define requiredDrawBuffers');
-        const maxDrawBuffers = gl.getParameter(gl.MAX_DRAW_BUFFERS) as number;
-        for (let i = 1, il = maxDrawBuffers; i < il; ++i) {
-            prefix.push(`layout(location = ${i}) out highp ${outTypes[i] || 'vec4'} out_FragData${i};`);
+        if (extensions.drawBuffers) {
+            prefix.push('#define requiredDrawBuffers');
+            const maxDrawBuffers = gl.getParameter(gl.MAX_DRAW_BUFFERS) as number;
+            for (let i = 1, il = maxDrawBuffers; i < il; ++i) {
+                prefix.push(`layout(location = ${i}) out highp ${outTypes[i] || 'vec4'} out_FragData${i};`);
+            }
        }
    }
    if (shaderExtensions.shaderTextureLod) {
-        prefix.push('#define enabledShaderTextureLod');
+        if (extensions.shaderTextureLod) {
+            prefix.push('#define enabledShaderTextureLod');
+        }
    }
    prefix.push(glsl300FragPrefixCommon);
    return prefix.join('\n') + '\n';
@@ -318,7 +351,9 @@ function transformGlsl300Frag(frag: string) {
 export function addShaderDefines(gl: GLRenderingContext, extensions: WebGLExtensions, defines: ShaderDefines, shaders: ShaderCode): ShaderCode {
    const vertHeader = getDefinesCode(defines, shaders.ignoreDefine);
    const fragHeader = getDefinesCode(defines, shaders.ignoreDefine);
-    const vertPrefix = isWebGL2(gl) ? glsl300VertPrefix : '';
+    const vertPrefix = isWebGL2(gl)
+        ? getGlsl300VertPrefix(extensions, shaders.extensions)
+        : getGlsl100VertPrefix(extensions, shaders.extensions);
    const fragPrefix = isWebGL2(gl)
        ? getGlsl300FragPrefix(gl, extensions, shaders.extensions, shaders.outTypes)
        : getGlsl100FragPrefix(extensions, shaders.extensions);
--- a/src/mol-gl/shader/chunks/apply-interior-color.glsl.ts
+++ b/src/mol-gl/shader/chunks/apply-interior-color.glsl.ts
@@ -5,5 +5,9 @@ if (interior) {
    } else {
        gl_FragColor.rgb *= 1.0 - uInteriorDarkening;
    }
+
+    #ifdef dTransparentBackfaces_opaque
+        gl_FragColor.a = 1.0;
+    #endif
 }
 `;
--- a/src/mol-gl/shader/chunks/apply-light-color.glsl.ts
+++ b/src/mol-gl/shader/chunks/apply-light-color.glsl.ts
@@ -13,14 +13,7 @@ export const apply_light_color = `
 #else
    #ifdef bumpEnabled
        if (uBumpFrequency > 0.0 && uBumpAmplitude > 0.0) {
-            vec3 bumpNormal = perturbNormal(-vViewPosition, normal, fbm(vModelPosition * uBumpFrequency), (uBumpAmplitude * bumpiness) / uBumpFrequency);
-            #ifdef enabledFragDepth
-                if (!isNaN(bumpNormal.x) && !isNaN(bumpNormal.y) && !isNaN(bumpNormal.z)) {
-                    normal = bumpNormal;
-                }
-            #else
-                normal = bumpNormal;
-            #endif
+            normal = perturbNormal(-vViewPosition, normal, fbm(vModelPosition * uBumpFrequency), (uBumpAmplitude * bumpiness) / uBumpFrequency);
        }
    #endif

--- a/src/mol-gl/shader/chunks/apply-marker-color.glsl.ts
+++ b/src/mol-gl/shader/chunks/apply-marker-color.glsl.ts
@@ -1,11 +1,13 @@
 export const apply_marker_color = `
-if (marker > 0.0) {
-    if ((uMarkerPriority == 1 && marker != 2.0) || (uMarkerPriority != 1 && marker == 1.0)) {
-        gl_FragColor.rgb = mix(gl_FragColor.rgb, uHighlightColor, uHighlightStrength);
-        gl_FragColor.a = max(gl_FragColor.a, uHighlightStrength * 0.002); // for direct-volume rendering
-    } else {
-        gl_FragColor.rgb = mix(gl_FragColor.rgb, uSelectColor, uSelectStrength);
-        gl_FragColor.a = max(gl_FragColor.a, uSelectStrength * 0.002); // for direct-volume rendering
+#if defined(dColorMarker)
+    if (marker > 0.0) {
+        if ((uMarkerPriority == 1 && marker != 2.0) || (uMarkerPriority != 1 && marker == 1.0)) {
+            gl_FragColor.rgb = mix(gl_FragColor.rgb, uHighlightColor, uHighlightStrength);
+            gl_FragColor.a = max(gl_FragColor.a, uHighlightStrength * 0.002); // for direct-volume rendering
+        } else {
+            gl_FragColor.rgb = mix(gl_FragColor.rgb, uSelectColor, uSelectStrength);
+            gl_FragColor.a = max(gl_FragColor.a, uSelectStrength * 0.002); // for direct-volume rendering
+        }
    }
-}
+#endif
 `;
--- a/src/mol-gl/shader/chunks/assign-clipping-varying.glsl.ts
+++ b/src/mol-gl/shader/chunks/assign-clipping-varying.glsl.ts
@@ -1,5 +1,9 @@
 export const assign_clipping_varying = `
 #if dClipObjectCount != 0 && defined(dClipping)
-    vClipping = readFromTexture(tClipping, aInstance * float(uGroupCount) + group, uClippingTexDim).a;
+    #if defined(dClippingType_instance)
+        vClipping = readFromTexture(tClipping, aInstance, uClippingTexDim).a;
+    #elif defined(dMarkerType_groupInstance)
+        vClipping = readFromTexture(tClipping, aInstance * float(uGroupCount) + group, uClippingTexDim).a;
+    #endif
 #endif
 `;
--- a/src/mol-gl/shader/chunks/assign-color-varying.glsl.ts
+++ b/src/mol-gl/shader/chunks/assign-color-varying.glsl.ts
@@ -25,7 +25,9 @@ export const assign_color_varying = `
    #endif

    #ifdef dOverpaint
-        #if defined(dOverpaintType_groupInstance)
+        #if defined(dOverpaintType_instance)
+            vOverpaint = readFromTexture(tOverpaint, aInstance, uOverpaintTexDim);
+        #elif defined(dOverpaintType_groupInstance)
            vOverpaint = readFromTexture(tOverpaint, aInstance * float(uGroupCount) + group, uOverpaintTexDim);
        #elif defined(dOverpaintType_vertexInstance)
            vOverpaint = readFromTexture(tOverpaint, int(aInstance) * uVertexCount + VertexID, uOverpaintTexDim);
@@ -43,7 +45,9 @@ export const assign_color_varying = `
    #endif

    #ifdef dSubstance
-        #if defined(dSubstanceType_groupInstance)
+        #if defined(dSubstanceType_instance)
+            vSubstance = readFromTexture(tSubstance, aInstance, uSubstanceTexDim);
+        #elif defined(dSubstanceType_groupInstance)
            vSubstance = readFromTexture(tSubstance, aInstance * float(uGroupCount) + group, uSubstanceTexDim);
        #elif defined(dSubstanceType_vertexInstance)
            vSubstance = readFromTexture(tSubstance, int(aInstance) * uVertexCount + VertexID, uSubstanceTexDim);
@@ -56,19 +60,25 @@ export const assign_color_varying = `
        vSubstance.rgb = mix(vec3(uMetalness, uRoughness, uBumpiness), vSubstance.rgb, vSubstance.a);
    #endif
 #elif defined(dRenderVariant_pick)
-    if (uPickType == 1) {
-        vColor = vec4(packIntToRGB(float(uObjectId)), 1.0);
-    } else if (uPickType == 2) {
-        vColor = vec4(packIntToRGB(aInstance), 1.0);
-    } else {
-        vColor = vec4(packIntToRGB(group), 1.0);
-    }
+    #ifdef requiredDrawBuffers
+        vObject = vec4(packIntToRGB(float(uObjectId)), 1.0);
+        vInstance = vec4(packIntToRGB(aInstance), 1.0);
+        vGroup = vec4(packIntToRGB(group), 1.0);
+    #else
+        if (uPickType == 1) {
+            vColor = vec4(packIntToRGB(float(uObjectId)), 1.0);
+        } else if (uPickType == 2) {
+            vColor = vec4(packIntToRGB(aInstance), 1.0);
+        } else {
+            vColor = vec4(packIntToRGB(group), 1.0);
+        }
+    #endif
 #endif

 #ifdef dTransparency
-    vGroup = group;
-
-    #if defined(dTransparencyType_groupInstance)
+    #if defined(dTransparencyType_instance)
+        vTransparency = readFromTexture(tTransparency, aInstance, uTransparencyTexDim).a;
+    #elif defined(dTransparencyType_groupInstance)
        vTransparency = readFromTexture(tTransparency, aInstance * float(uGroupCount) + group, uTransparencyTexDim).a;
    #elif defined(dTransparencyType_vertexInstance)
        vTransparency = readFromTexture(tTransparency, int(aInstance) * uVertexCount + VertexID, uTransparencyTexDim).a;
--- a/src/mol-gl/shader/chunks/assign-marker-varying.glsl.ts
+++ b/src/mol-gl/shader/chunks/assign-marker-varying.glsl.ts
@@ -1,5 +1,9 @@
 export const assign_marker_varying = `
-#if defined(dRenderVariant_color) || defined(dRenderVariant_marking)
-    vMarker = readFromTexture(tMarker, aInstance * float(uGroupCount) + group, uMarkerTexDim).a;
+#if defined(dNeedsMarker)
+    #if defined(dMarkerType_instance)
+        vMarker = readFromTexture(tMarker, aInstance, uMarkerTexDim).a;
+    #elif defined(dMarkerType_groupInstance)
+        vMarker = readFromTexture(tMarker, aInstance * float(uGroupCount) + group, uMarkerTexDim).a;
+    #endif
 #endif
 `;
--- a/src/mol-gl/shader/chunks/assign-material-color.glsl.ts
+++ b/src/mol-gl/shader/chunks/assign-material-color.glsl.ts
@@ -1,5 +1,5 @@
 export const assign_material_color = `
-#if defined(dRenderVariant_color) || defined(dRenderVariant_marking)
+#if defined(dNeedsMarker)
    float marker = uMarker;
    if (uMarker == -1.0) {
        marker = floor(vMarker * 255.0 + 0.5); // rounding required to work on some cards on win
@@ -28,14 +28,35 @@ export const assign_material_color = `
        roughness = mix(roughness, vSubstance.g, vSubstance.a);
        bumpiness = mix(bumpiness, vSubstance.b, vSubstance.a);
    #endif
-#elif defined(dRenderVariant_pick)
-    vec4 material = vColor;
 #elif defined(dRenderVariant_depth)
-    #ifdef enabledFragDepth
-        vec4 material = packDepthToRGBA(gl_FragDepthEXT);
+    if (fragmentDepth > getDepth(gl_FragCoord.xy / uDrawingBufferSize)) {
+        discard;
+    }
+
+    #ifndef dXrayShaded
+        #if defined(dTransparency)
+            float dta = 1.0 - vTransparency;
+            if (vTransparency < 0.2) dta = 1.0; // hard cutoff looks better
+
+            if (uRenderMask == MaskTransparent && uAlpha * dta == 1.0) {
+                discard;
+            } else if (uRenderMask == MaskOpaque && uAlpha * dta < 1.0) {
+                discard;
+            }
+        #else
+            if (uRenderMask == MaskTransparent && uAlpha == 1.0) {
+                discard;
+            } else if (uRenderMask == MaskOpaque && uAlpha < 1.0) {
+                discard;
+            }
+        #endif
    #else
-        vec4 material = packDepthToRGBA(gl_FragCoord.z);
+        if (uRenderMask == MaskOpaque) {
+            discard;
+        }
    #endif
+
+    vec4 material = packDepthToRGBA(fragmentDepth);
 #elif defined(dRenderVariant_marking)
    vec4 material;
    if(uMarkingType == 1) {
@@ -51,7 +72,7 @@ export const assign_material_color = `
            discard;
        float depthTest = 1.0;
        if (uMarkingDepthTest) {
-            depthTest = (fragmentDepth >= getDepth(gl_FragCoord.xy / uDrawingBufferSize)) ? 1.0 : 0.0;
+            depthTest = (fragmentDepth >= getDepthPacked(gl_FragCoord.xy / uDrawingBufferSize)) ? 1.0 : 0.0;
        }
        bool isHighlight = intMod(marker, 2.0) > 0.1;
        float viewZ = depthToViewZ(uIsOrtho, fragmentDepth, uNear, uFar);
@@ -62,47 +83,41 @@ export const assign_material_color = `
    }
 #endif

-// apply screendoor transparency
-#if defined(dTransparency)
+// apply per-group transparency
+#if defined(dTransparency) && (defined(dRenderVariant_pick) || defined(dRenderVariant_color))
    float ta = 1.0 - vTransparency;
-    #if defined(dRenderVariant_colorWboit)
-        if (vTransparency < 0.2) ta = 1.0; // hard cutoff looks better with wboit
-    #endif
+    if (vTransparency < 0.2) ta = 1.0; // hard cutoff looks better

    #if defined(dRenderVariant_pick)
        if (ta < uPickingAlphaThreshold)
            discard; // ignore so the element below can be picked
-    #else
+    #elif defined(dRenderVariant_color)
+        material.a *= ta;
+
        #if defined(dRenderVariant_colorBlended)
-            float at = 0.0;
-
-            // shift by view-offset during multi-sample rendering to allow for blending
-            vec2 coord = gl_FragCoord.xy + uViewOffset * 0.25;
-
-            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
-            );
-            int ci = int(intMod(coord.x, 4.0));
-            int ri = int(intMod(coord.y, 4.0));
-            #if __VERSION__ == 100
-                vec4 i = vec4(float(ci * 4 + ri));
-                vec4 v = thresholdMatrix[0] * vec4(equal(i, vec4(0.0, 1.0, 2.0, 3.0))) +
-                    thresholdMatrix[1] * vec4(equal(i, vec4(4.0, 5.0, 6.0, 7.0))) +
-                    thresholdMatrix[2] * vec4(equal(i, vec4(8.0, 9.0, 10.0, 11.0))) +
-                    thresholdMatrix[3] * vec4(equal(i, vec4(12.0, 13.0, 14.0, 15.0)));
-                at = v.x + v.y + v.z + v.w;
-            #else
-                at = thresholdMatrix[ci][ri];
+            #if defined(dTransparentBackfaces_off)
+                if ((uRenderMask == MaskOpaque && material.a < 1.0) ||
+                    (uRenderMask == MaskTransparent && material.a == 1.0) ||
+                    (interior && material.a < 1.0)
+                ) {
+                    discard;
+                }
+            #elif defined(dTransparentBackfaces_on)
+                if ((uRenderMask == MaskOpaque && material.a < 1.0) ||
+                    (uRenderMask == MaskTransparent && material.a == 1.0)
+                ) {
+                    discard;
+                }
+            #elif defined(dTransparentBackfaces_opaque)
+                if (interior) {
+                    material.a = 1.0;
+                } else if (
+                    (uRenderMask == MaskOpaque && material.a < 1.0) ||
+                    (uRenderMask == MaskTransparent && material.a == 1.0)
+                ) {
+                    discard;
+                }
            #endif
-
-            if (ta < 0.99 && (ta < 0.01 || ta < at)) {
-                discard;
-            }
-        #elif defined(dRenderVariant_colorWboit)
-            material.a *= ta;
        #endif
    #endif
 #endif
--- a/src/mol-gl/shader/chunks/check-picking-alpha.glsl.ts
+++ b/src/mol-gl/shader/chunks/check-picking-alpha.glsl.ts
@@ -2,6 +2,12 @@ export const check_picking_alpha = `
 float viewZ = depthToViewZ(uIsOrtho, fragmentDepth, uNear, uFar);
 float fogFactor = smoothstep(uFogNear, uFogFar, abs(viewZ));
 float alpha = (1.0 - fogFactor) * uAlpha;
-if (uAlpha < uPickingAlphaThreshold || alpha < 0.1)
-    discard; // ignore so the element below can be picked
+// if not opaque enough ignore so the element below can be picked
+if (uAlpha < uPickingAlphaThreshold || alpha < 0.1) {
+    #ifdef dTransparentBackfaces_opaque
+        if (!interior) discard;
+    #else
+        discard;
+    #endif
+}
 `;
--- a/src/mol-gl/shader/chunks/color-frag-params.glsl.ts
+++ b/src/mol-gl/shader/chunks/color-frag-params.glsl.ts
@@ -28,14 +28,25 @@ uniform float uBumpiness;
    #endif
 #elif defined(dRenderVariant_pick)
    #if __VERSION__ == 100
-        varying vec4 vColor;
+        #ifdef requiredDrawBuffers
+            varying vec4 vObject;
+            varying vec4 vInstance;
+            varying vec4 vGroup;
+        #else
+            varying vec4 vColor;
+        #endif
    #else
-        flat in vec4 vColor;
+        #ifdef requiredDrawBuffers
+            flat in vec4 vObject;
+            flat in vec4 vInstance;
+            flat in vec4 vGroup;
+        #else
+            flat in vec4 vColor;
+        #endif
    #endif
 #endif

 #ifdef dTransparency
-    varying float vGroup;
    varying float vTransparency;
 #endif
 `;
--- a/src/mol-gl/shader/chunks/color-vert-params.glsl.ts
+++ b/src/mol-gl/shader/chunks/color-vert-params.glsl.ts
@@ -19,6 +19,8 @@ uniform float uBumpiness;
        uniform vec3 uColorGridDim;
        uniform vec4 uColorGridTransform;
        uniform sampler2D tColorGrid;
+    #elif defined(dColorType_direct)
+        varying vec4 vColor;
    #endif

    #ifdef dUsePalette
@@ -26,7 +28,7 @@ uniform float uBumpiness;
    #endif

    #ifdef dOverpaint
-        #if defined(dOverpaintType_groupInstance) || defined(dOverpaintType_vertexInstance)
+        #if defined(dOverpaintType_instance) || defined(dOverpaintType_groupInstance) || defined(dOverpaintType_vertexInstance)
            varying vec4 vOverpaint;
            uniform vec2 uOverpaintTexDim;
            uniform sampler2D tOverpaint;
@@ -40,7 +42,7 @@ uniform float uBumpiness;
    #endif

    #ifdef dSubstance
-        #if defined(dSubstanceType_groupInstance) || defined(dSubstanceType_vertexInstance)
+        #if defined(dSubstanceType_instance) || defined(dSubstanceType_groupInstance) || defined(dSubstanceType_vertexInstance)
            varying vec4 vSubstance;
            uniform vec2 uSubstanceTexDim;
            uniform sampler2D tSubstance;
@@ -54,15 +56,26 @@ uniform float uBumpiness;
    #endif
 #elif defined(dRenderVariant_pick)
    #if __VERSION__ == 100
-        varying vec4 vColor;
+        #ifdef requiredDrawBuffers
+            varying vec4 vObject;
+            varying vec4 vInstance;
+            varying vec4 vGroup;
+        #else
+            varying vec4 vColor;
+        #endif
    #else
-        flat out vec4 vColor;
+        #ifdef requiredDrawBuffers
+            flat out vec4 vObject;
+            flat out vec4 vInstance;
+            flat out vec4 vGroup;
+        #else
+            flat out vec4 vColor;
+        #endif
    #endif
 #endif

 #ifdef dTransparency
-    varying float vGroup;
-    #if defined(dTransparencyType_groupInstance) || defined(dTransparencyType_vertexInstance)
+    #if defined(dTransparencyType_instance) || defined(dTransparencyType_groupInstance) || defined(dTransparencyType_vertexInstance)
        varying float vTransparency;
        uniform vec2 uTransparencyTexDim;
        uniform sampler2D tTransparency;
--- a/src/mol-gl/shader/chunks/common-frag-params.glsl.ts
+++ b/src/mol-gl/shader/chunks/common-frag-params.glsl.ts
@@ -14,26 +14,28 @@ uniform int uMarkingType;
    uniform vec3 uClipObjectScale[dClipObjectCount];

    #if defined(dClipping)
-        #if __VERSION__ == 100
+        #if __VERSION__ == 100 || defined(dClippingType_instance)
            varying float vClipping;
        #else
-            flat in float vClipping;
+            flat in float vClipping; // avoid if possible, causes slowdown, ASR
        #endif
    #endif
 #endif

-uniform vec3 uHighlightColor;
-uniform vec3 uSelectColor;
-uniform float uHighlightStrength;
-uniform float uSelectStrength;
-uniform int uMarkerPriority;
+#if defined(dColorMarker)
+    uniform vec3 uHighlightColor;
+    uniform vec3 uSelectColor;
+    uniform float uHighlightStrength;
+    uniform float uSelectStrength;
+    uniform int uMarkerPriority;
+#endif

-#if defined(dRenderVariant_color) || defined(dRenderVariant_marking)
+#if defined(dNeedsMarker)
    uniform float uMarker;
-    #if __VERSION__ == 100
+    #if __VERSION__ == 100 || defined(dMarkerType_instance)
        varying float vMarker;
    #else
-        flat in float vMarker;
+        flat in float vMarker; // avoid if possible, causes slowdown, ASR
    #endif
 #endif

@@ -64,17 +66,24 @@ uniform float uXrayEdgeFalloff;

 uniform mat4 uProjection;

-uniform bool uRenderWboit;
+uniform int uRenderMask;
 uniform bool uMarkingDepthTest;

 uniform sampler2D tDepth;
 uniform vec2 uDrawingBufferSize;

-float getDepth(const in vec2 coords) {
-    // always packed due to merged depth from primitives and volumes
+float getDepthPacked(const in vec2 coords) {
    return unpackRGBAToDepth(texture2D(tDepth, coords));
 }

+float getDepth(const in vec2 coords) {
+    #ifdef depthTextureSupport
+        return texture2D(tDepth, coords).r;
+    #else
+        return unpackRGBAToDepth(texture2D(tDepth, coords));
+    #endif
+}
+
 float calcDepth(const in vec3 pos) {
    vec2 clipZW = pos.z * uProjection[2].zw + uProjection[3].zw;
    return 0.5 + 0.5 * clipZW.x / clipZW.y;
--- a/src/mol-gl/shader/chunks/common-vert-params.glsl.ts
+++ b/src/mol-gl/shader/chunks/common-vert-params.glsl.ts
@@ -21,38 +21,32 @@ uniform int uPickType;
    #if defined(dClipping)
        uniform vec2 uClippingTexDim;
        uniform sampler2D tClipping;
-        #if __VERSION__ == 100
+        #if __VERSION__ == 100 || defined(dClippingType_instance)
            varying float vClipping;
        #else
-            flat out float vClipping;
+            flat out float vClipping; // avoid if possible, causes slowdown, ASR
        #endif
    #endif
 #endif

-#if defined(dRenderVariant_color) || defined(dRenderVariant_marking)
+#if defined(dNeedsMarker)
    uniform float uMarker;
    uniform vec2 uMarkerTexDim;
    uniform sampler2D tMarker;
-    #if __VERSION__ == 100
+    #if __VERSION__ == 100 || defined(dMarkerType_instance)
        varying float vMarker;
    #else
-        flat out float vMarker;
+        flat out float vMarker; // avoid if possible, causes slowdown, ASR
    #endif
 #endif

 varying vec3 vModelPosition;
 varying vec3 vViewPosition;

-#if __VERSION__ == 100
-    attribute float aVertex;
-    #define VertexID int(aVertex)
+#if defined(noNonInstancedActiveAttribs)
+    #define VertexID gl_VertexID
 #else
-    // not using gl_VertexID but aVertex to ensure there is an active attribute with divisor 0
-    // since FF 85 this is not needed anymore but lets keep it for backwards compatibility
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1679693
-    // see also note in src/mol-gl/webgl/render-item.ts
    attribute float aVertex;
    #define VertexID int(aVertex)
-    // #define VertexID gl_VertexID
 #endif
 `;
--- a/src/mol-gl/shader/chunks/common.glsl.ts
+++ b/src/mol-gl/shader/chunks/common.glsl.ts
@@ -17,6 +17,14 @@ export const common = `
    #define dColorType_varying
 #endif

+#if (defined(dRenderVariant_color) && defined(dColorMarker)) || defined(dRenderVariant_marking)
+    #define dNeedsMarker
+#endif
+
+#define MaskAll 0
+#define MaskOpaque 1
+#define MaskTransparent 2
+
 //

 #define PI 3.14159265
--- a/src/mol-gl/shader/chunks/wboit-write.glsl.ts
+++ b/src/mol-gl/shader/chunks/wboit-write.glsl.ts
@@ -7,13 +7,16 @@

 export const wboit_write = `
 #if defined(dRenderVariant_colorWboit)
-    if (!uRenderWboit) {
+    if (uRenderMask == MaskOpaque) {
        if (preFogAlpha < 1.0) {
            discard;
        }
-    } else if (uRenderWboit) {
+    } else if (uRenderMask == MaskTransparent) {
        // the 'fragmentDepth > 0.99' check is to handle precision issues with packed depth
        if (preFogAlpha != 1.0 && (fragmentDepth < getDepth(gl_FragCoord.xy / uDrawingBufferSize) || fragmentDepth > 0.99)) {
+            #ifdef dTransparentBackfaces_off
+                if (interior) discard;
+            #endif
            float alpha = gl_FragColor.a;
            float wboitWeight = alpha * clamp(pow(1.0 - fragmentDepth, 2.0), 0.01, 1.0);
            gl_FragColor = vec4(gl_FragColor.rgb * alpha * wboitWeight, alpha);
--- a/src/mol-gl/shader/cylinders.frag.ts
+++ b/src/mol-gl/shader/cylinders.frag.ts
@@ -121,7 +121,14 @@ void main() {

    #if defined(dRenderVariant_pick)
        #include check_picking_alpha
-        gl_FragColor = material;
+        #ifdef requiredDrawBuffers
+            gl_FragColor = vObject;
+            gl_FragData[1] = vInstance;
+            gl_FragData[2] = vGroup;
+            gl_FragData[3] = packDepthToRGBA(fragmentDepth);
+        #else
+            gl_FragColor = vColor;
+        #endif
    #elif defined(dRenderVariant_depth)
        gl_FragColor = material;
    #elif defined(dRenderVariant_marking)
--- a/src/mol-gl/shader/direct-volume.frag.ts
+++ b/src/mol-gl/shader/direct-volume.frag.ts
@@ -50,15 +50,17 @@ uniform int uVertexCount;
 uniform int uInstanceCount;
 uniform int uGroupCount;

-uniform vec3 uHighlightColor;
-uniform vec3 uSelectColor;
-uniform float uHighlightStrength;
-uniform float uSelectStrength;
-uniform int uMarkerPriority;
+#if defined(dColorMarker)
+    uniform vec3 uHighlightColor;
+    uniform vec3 uSelectColor;
+    uniform float uHighlightStrength;
+    uniform float uSelectStrength;
+    uniform int uMarkerPriority;

-uniform float uMarker;
-uniform vec2 uMarkerTexDim;
-uniform sampler2D tMarker;
+    uniform float uMarker;
+    uniform vec2 uMarkerTexDim;
+    uniform sampler2D tMarker;
+#endif

 uniform float uMetalness;
 uniform float uRoughness;
@@ -68,11 +70,10 @@ uniform float uFogFar;
 uniform vec3 uFogColor;

 uniform float uAlpha;
-uniform float uPickingAlphaThreshold;
 uniform bool uTransparentBackground;
 uniform float uXrayEdgeFalloff;

-uniform bool uRenderWboit;
+uniform int uRenderMask;

 uniform float uNear;
 uniform float uFar;
@@ -141,12 +142,7 @@ float transferFunction(float value) {

 float getDepth(const in vec2 coords) {
    #ifdef depthTextureSupport
-        if (!uRenderWboit) {
-            // in case of opaque volumes (and depth texture support)
-            return texture2D(tDepth, coords).r;
-        } else {
-            return unpackRGBAToDepth(texture2D(tDepth, coords));
-        }
+        return texture2D(tDepth, coords).r;
    #else
        return unpackRGBAToDepth(texture2D(tDepth, coords));
    #endif
@@ -289,28 +285,34 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
            material.rgb = mix(material.rgb, overpaint.rgb, overpaint.a);
        #endif

-        if (material.a >= 0.01) {
-            #ifdef dPackedGroup
-                // compute gradient by central differences
-                gradient.x = textureVal(unitPos - dx).a - textureVal(unitPos + dx).a;
-                gradient.y = textureVal(unitPos - dy).a - textureVal(unitPos + dy).a;
-                gradient.z = textureVal(unitPos - dz).a - textureVal(unitPos + dz).a;
-            #else
-                gradient = cell.xyz * 2.0 - 1.0;
-            #endif
-            vec3 normal = -normalize(normalMatrix * normalize(gradient));
-            #include apply_light_color
-        } else {
+        #ifdef dIgnoreLight
            gl_FragColor.rgb = material.rgb;
-        }
+        #else
+            if (material.a >= 0.01) {
+                #ifdef dPackedGroup
+                    // compute gradient by central differences
+                    gradient.x = textureVal(unitPos - dx).a - textureVal(unitPos + dx).a;
+                    gradient.y = textureVal(unitPos - dy).a - textureVal(unitPos + dy).a;
+                    gradient.z = textureVal(unitPos - dz).a - textureVal(unitPos + dz).a;
+                #else
+                    gradient = cell.xyz * 2.0 - 1.0;
+                #endif
+                vec3 normal = -normalize(normalMatrix * normalize(gradient));
+                #include apply_light_color
+            } else {
+                gl_FragColor.rgb = material.rgb;
+            }
+        #endif

        gl_FragColor.a = material.a * uAlpha * uTransferScale;

-        float marker = uMarker;
-        if (uMarker == -1.0) {
-            marker = readFromTexture(tMarker, vInstance * float(uGroupCount) + group, uMarkerTexDim).a;
-            marker = floor(marker * 255.0 + 0.5); // rounding required to work on some cards on win
-        }
+        #if defined(dColorMarker)
+            float marker = uMarker;
+            if (uMarker == -1.0) {
+                marker = readFromTexture(tMarker, vInstance * float(uGroupCount) + group, uMarkerTexDim).a;
+                marker = floor(marker * 255.0 + 0.5); // rounding required to work on some cards on win
+            }
+        #endif
        #include apply_marker_color

        preFogAlphaBlended = (1.0 - preFogAlphaBlended) * gl_FragColor.a + preFogAlphaBlended;
--- a/src/mol-gl/shader/image.frag.ts
+++ b/src/mol-gl/shader/image.frag.ts
@@ -103,13 +103,21 @@ void main() {
    #if defined(dRenderVariant_pick)
        if (imageData.a < 0.3)
            discard;
-        if (uPickType == 1) {
+        #ifdef requiredDrawBuffers
            gl_FragColor = vec4(packIntToRGB(float(uObjectId)), 1.0);
-        } else if (uPickType == 2) {
-            gl_FragColor = vec4(packIntToRGB(vInstance), 1.0);
-        } else {
-            gl_FragColor = vec4(texture2D(tGroupTex, vUv).rgb, 1.0);
-        }
+            gl_FragData[1] = vec4(packIntToRGB(vInstance), 1.0);
+            gl_FragData[2] = vec4(texture2D(tGroupTex, vUv).rgb, 1.0);
+            gl_FragData[3] = packDepthToRGBA(gl_FragCoord.z);
+        #else
+            gl_FragColor = vColor;
+            if (uPickType == 1) {
+                gl_FragColor = vec4(packIntToRGB(float(uObjectId)), 1.0);
+            } else if (uPickType == 2) {
+                gl_FragColor = vec4(packIntToRGB(vInstance), 1.0);
+            } else {
+                gl_FragColor = vec4(texture2D(tGroupTex, vUv).rgb, 1.0);
+            }
+        #endif
    #elif defined(dRenderVariant_depth)
        if (imageData.a < 0.05)
            discard;
@@ -130,7 +138,7 @@ void main() {
                discard;
            float depthTest = 1.0;
            if (uMarkingDepthTest) {
-                depthTest = (fragmentDepth >= getDepth(gl_FragCoord.xy / uDrawingBufferSize)) ? 1.0 : 0.0;
+                depthTest = (fragmentDepth >= getDepthPacked(gl_FragCoord.xy / uDrawingBufferSize)) ? 1.0 : 0.0;
            }
            bool isHighlight = intMod(marker, 2.0) > 0.1;
            gl_FragColor = vec4(0.0, depthTest, isHighlight ? 1.0 : 0.0, 1.0);
--- a/src/mol-gl/shader/lines.frag.ts
+++ b/src/mol-gl/shader/lines.frag.ts
@@ -21,7 +21,14 @@ void main(){

    #if defined(dRenderVariant_pick)
        #include check_picking_alpha
-        gl_FragColor = material;
+        #ifdef requiredDrawBuffers
+            gl_FragColor = vObject;
+            gl_FragData[1] = vInstance;
+            gl_FragData[2] = vGroup;
+            gl_FragData[3] = packDepthToRGBA(fragmentDepth);
+        #else
+            gl_FragColor = vColor;
+        #endif
    #elif defined(dRenderVariant_depth)
        gl_FragColor = material;
    #elif defined(dRenderVariant_marking)
--- a/src/mol-gl/shader/mesh.frag.ts
+++ b/src/mol-gl/shader/mesh.frag.ts
@@ -37,7 +37,14 @@ void main() {

    #if defined(dRenderVariant_pick)
        #include check_picking_alpha
-        gl_FragColor = material;
+        #ifdef requiredDrawBuffers
+            gl_FragColor = vObject;
+            gl_FragData[1] = vInstance;
+            gl_FragData[2] = vGroup;
+            gl_FragData[3] = packDepthToRGBA(fragmentDepth);
+        #else
+            gl_FragColor = vColor;
+        #endif
    #elif defined(dRenderVariant_depth)
        gl_FragColor = material;
    #elif defined(dRenderVariant_marking)
--- a/src/mol-gl/shader/outlines.frag.ts
+++ b/src/mol-gl/shader/outlines.frag.ts
@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
+ @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 export const outlines_frag = `
@@ -9,7 +10,8 @@ precision highp float;
 precision highp int;
 precision highp sampler2D;

-uniform sampler2D tDepth;
+uniform sampler2D tDepthOpaque;
+uniform sampler2D tDepthTransparent;
 uniform vec2 uTexSize;

 uniform float uNear;
@@ -27,8 +29,16 @@ float getViewZ(const in float depth) {
    #endif
 }

-float getDepth(const in vec2 coords) {
-    return unpackRGBAToDepth(texture2D(tDepth, coords));
+float getDepthOpaque(const in vec2 coords) {
+    #ifdef depthTextureSupport
+        return texture2D(tDepthOpaque, coords).r;
+    #else
+        return unpackRGBAToDepth(texture2D(tDepthOpaque, coords));
+    #endif
+}
+
+float getDepthTransparent(const in vec2 coords) {
+    return unpackRGBAToDepth(texture2D(tDepthTransparent, coords));
 }

 bool isBackground(const in float depth) {
@@ -41,8 +51,11 @@ void main(void) {
    vec2 coords = gl_FragCoord.xy / uTexSize;
    vec2 invTexSize = 1.0 / uTexSize;

-    float selfDepth = getDepth(coords);
-    float selfViewZ = isBackground(selfDepth) ? backgroundViewZ : getViewZ(getDepth(coords));
+    float selfDepthOpaque = getDepthOpaque(coords);
+    float selfViewZOpaque = isBackground(selfDepthOpaque) ? backgroundViewZ : getViewZ(selfDepthOpaque);
+
+    float selfDepthTransparent = getDepthTransparent(coords);
+    float selfViewZTransparent = isBackground(selfDepthTransparent) ? backgroundViewZ : getViewZ(selfDepthTransparent);

    float outline = 1.0;
    float bestDepth = 1.0;
@@ -50,12 +63,22 @@ void main(void) {
    for (int y = -1; y <= 1; y++) {
        for (int x = -1; x <= 1; x++) {
            vec2 sampleCoords = coords + vec2(float(x), float(y)) * invTexSize;
-            float sampleDepth = getDepth(sampleCoords);
-            float sampleViewZ = isBackground(sampleDepth) ? backgroundViewZ : getViewZ(sampleDepth);

-            if (abs(selfViewZ - sampleViewZ) > uMaxPossibleViewZDiff && selfDepth > sampleDepth && sampleDepth <= bestDepth) {
+            float sampleDepthOpaque = getDepthOpaque(sampleCoords);
+            float sampleDepthTransparent = getDepthTransparent(sampleCoords);
+
+            float sampleViewZOpaque = isBackground(sampleDepthOpaque) ? backgroundViewZ : getViewZ(sampleDepthOpaque);
+            if (abs(selfViewZOpaque - sampleViewZOpaque) > uMaxPossibleViewZDiff && selfDepthOpaque > sampleDepthOpaque && sampleDepthOpaque <= bestDepth) {
                outline = 0.0;
-                bestDepth = sampleDepth;
+                bestDepth = sampleDepthOpaque;
+            }
+
+            if (sampleDepthTransparent < sampleDepthOpaque) {
+                float sampleViewZTransparent = isBackground(sampleDepthTransparent) ? backgroundViewZ : getViewZ(sampleDepthTransparent);
+                if (abs(selfViewZTransparent - sampleViewZTransparent) > uMaxPossibleViewZDiff && selfDepthTransparent > sampleDepthTransparent && sampleDepthTransparent <= bestDepth) {
+                    outline = 0.0;
+                    bestDepth = sampleDepthTransparent;
+                }
            }
        }
    }
--- a/src/mol-gl/shader/points.frag.ts
+++ b/src/mol-gl/shader/points.frag.ts
@@ -33,7 +33,14 @@ void main(){

    #if defined(dRenderVariant_pick)
        #include check_picking_alpha
-        gl_FragColor = material;
+        #ifdef requiredDrawBuffers
+            gl_FragColor = vObject;
+            gl_FragData[1] = vInstance;
+            gl_FragData[2] = vGroup;
+            gl_FragData[3] = packDepthToRGBA(fragmentDepth);
+        #else
+            gl_FragColor = vColor;
+        #endif
    #elif defined(dRenderVariant_depth)
        gl_FragColor = material;
    #elif defined(dRenderVariant_marking)
--- a/src/mol-gl/shader/postprocessing.frag.ts
+++ b/src/mol-gl/shader/postprocessing.frag.ts
@@ -12,7 +12,8 @@ precision highp sampler2D;

 uniform sampler2D tSsaoDepth;
 uniform sampler2D tColor;
-uniform sampler2D tDepth;
+uniform sampler2D tDepthOpaque;
+uniform sampler2D tDepthTransparent;
 uniform sampler2D tOutlines;
 uniform vec2 uTexSize;

@@ -40,19 +41,27 @@ float getViewZ(const in float depth) {
    #endif
 }

-float getDepth(const in vec2 coords) {
-    return unpackRGBAToDepth(texture2D(tDepth, coords));
+float getDepthOpaque(const in vec2 coords) {
+    #ifdef depthTextureSupport
+        return texture2D(tDepthOpaque, coords).r;
+    #else
+        return unpackRGBAToDepth(texture2D(tDepthOpaque, coords));
+    #endif
+}
+
+float getDepthTransparent(const in vec2 coords) {
+    return unpackRGBAToDepth(texture2D(tDepthTransparent, coords));
 }

 bool isBackground(const in float depth) {
    return depth == 1.0;
 }

-float getOutline(const in vec2 coords, out float closestTexel) {
+float getOutline(const in vec2 coords, const in float opaqueDepth, out float closestTexel) {
    float backgroundViewZ = uFar + 3.0 * uMaxPossibleViewZDiff;
    vec2 invTexSize = 1.0 / uTexSize;

-    float selfDepth = getDepth(coords);
+    float selfDepth = min(opaqueDepth, getDepthTransparent(coords));
    float selfViewZ = isBackground(selfDepth) ? backgroundViewZ : getViewZ(selfDepth);

    float outline = 1.0;
@@ -68,14 +77,15 @@ float getOutline(const in vec2 coords, out float closestTexel) {
            vec4 sampleOutlineCombined = texture2D(tOutlines, sampleCoords);
            float sampleOutline = sampleOutlineCombined.r;
            float sampleOutlineDepth = unpackRGToUnitInterval(sampleOutlineCombined.gb);
+            float sampleOutlineViewZ = isBackground(sampleOutlineDepth) ? backgroundViewZ : getViewZ(sampleOutlineDepth);

-            if (sampleOutline == 0.0 && sampleOutlineDepth < closestTexel && abs(selfViewZ - sampleOutlineDepth) > uMaxPossibleViewZDiff) {
+            if (sampleOutline == 0.0 && sampleOutlineDepth < closestTexel && abs(selfViewZ - sampleOutlineViewZ) > uMaxPossibleViewZDiff) {
                outline = 0.0;
                closestTexel = sampleOutlineDepth;
            }
        }
    }
-    return outline;
+    return closestTexel < opaqueDepth ? outline : 1.0;
 }

 float getSsao(vec2 coords) {
@@ -95,11 +105,11 @@ void main(void) {

    float viewDist;
    float fogFactor;
+    float opaqueDepth = getDepthOpaque(coords);

    #ifdef dOcclusionEnable
-        float depth = getDepth(coords);
-        if (!isBackground(depth)) {
-            viewDist = abs(getViewZ(depth));
+        if (!isBackground(opaqueDepth)) {
+            viewDist = abs(getViewZ(opaqueDepth));
            fogFactor = smoothstep(uFogNear, uFogFar, viewDist);
            float occlusionFactor = getSsao(coords + uOcclusionOffset);
            if (!uTransparentBackground) {
@@ -113,16 +123,15 @@ void main(void) {
    // outline needs to be handled after occlusion to keep them clean
    #ifdef dOutlineEnable
        float closestTexel;
-        float outline = getOutline(coords, closestTexel);
-
+        float outline = getOutline(coords, opaqueDepth, closestTexel);
        if (outline == 0.0) {
-            color.rgb = mix(uOutlineColor, color.rgb, outline);
            viewDist = abs(getViewZ(closestTexel));
            fogFactor = smoothstep(uFogNear, uFogFar, viewDist);
            if (!uTransparentBackground) {
-                color.rgb = mix(color.rgb, uFogColor, fogFactor);
+                color.rgb = mix(uOutlineColor, uFogColor, fogFactor);
            } else {
                color.a = 1.0 - fogFactor;
+                color.rgb = mix(uOutlineColor, color.rgb, fogFactor);
            }
        }
    #endif
--- a/src/mol-gl/shader/spheres.frag.ts
+++ b/src/mol-gl/shader/spheres.frag.ts
@@ -48,7 +48,6 @@ bool Impostor(out vec3 cameraPos, out vec3 cameraNormal){

    cameraPos = rayDirection * negT + rayOrigin;

-
    if (calcDepth(cameraPos) <= 0.0) {
        cameraPos = rayDirection * posT + rayOrigin;
        interior = true;
@@ -86,7 +85,14 @@ void main(void){

    #if defined(dRenderVariant_pick)
        #include check_picking_alpha
-        gl_FragColor = material;
+        #ifdef requiredDrawBuffers
+            gl_FragColor = vObject;
+            gl_FragData[1] = vInstance;
+            gl_FragData[2] = vGroup;
+            gl_FragData[3] = packDepthToRGBA(fragmentDepth);
+        #else
+            gl_FragColor = vColor;
+        #endif
    #elif defined(dRenderVariant_depth)
        gl_FragColor = material;
    #elif defined(dRenderVariant_marking)
--- a/src/mol-gl/shader/ssao.frag.ts
+++ b/src/mol-gl/shader/ssao.frag.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 * @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
@@ -51,7 +51,15 @@ bool outsideBounds(const in vec2 p) {
 }

 float getDepth(const in vec2 coords) {
-    return outsideBounds(coords) ? 1.0 : unpackRGBAToDepth(texture2D(tDepth, coords));
+    if (outsideBounds(coords)) {
+        return 1.0;
+    } else {
+        #ifdef depthTextureSupport
+            return texture2D(tDepth, coords).r;
+        #else
+            return unpackRGBAToDepth(texture2D(tDepth, coords));
+        #endif
+    }
 }

 vec3 normalFromDepth(const in float depth, const in float depth1, const in float depth2, vec2 offset1, vec2 offset2) {
--- a/src/mol-gl/shader/text.frag.ts
+++ b/src/mol-gl/shader/text.frag.ts
@@ -36,7 +36,9 @@ void main(){
    #include assign_material_color

    if (vTexCoord.x > 1.0) {
-        gl_FragColor = vec4(uBackgroundColor, uBackgroundOpacity * material.a);
+        #if defined(dRenderVariant_color)
+            material = vec4(uBackgroundColor, uBackgroundOpacity * material.a);
+        #endif
    } else {
        // retrieve signed distance
        float sdf = texture2D(tFont, vTexCoord).a + uBorderWidth;
@@ -49,24 +51,35 @@ void main(){
        a = pow(a, 1.0 / gamma);

        if (a < 0.5) discard;
-        material.a *= a;

-        // add border
-        float t = 0.5 + uBorderWidth;
-        if (uBorderWidth > 0.0 && sdf < t) {
-            material.xyz = mix(uBorderColor, material.xyz, smoothstep(t - w, t, sdf));
-        }
+        #if defined(dRenderVariant_color)
+            material.a *= a;

-        gl_FragColor = material;
+            // add border
+            float t = 0.5 + uBorderWidth;
+            if (uBorderWidth > 0.0 && sdf < t) {
+                material.xyz = mix(uBorderColor, material.xyz, smoothstep(t - w, t, sdf));
+            }
+        #endif
    }

    #if defined(dRenderVariant_pick)
        #include check_picking_alpha
+        #ifdef requiredDrawBuffers
+            gl_FragColor = vObject;
+            gl_FragData[1] = vInstance;
+            gl_FragData[2] = vGroup;
+            gl_FragData[3] = packDepthToRGBA(fragmentDepth);
+        #else
+            gl_FragColor = vColor;
+        #endif
    #elif defined(dRenderVariant_depth)
        gl_FragColor = material;
    #elif defined(dRenderVariant_marking)
        gl_FragColor = material;
    #elif defined(dRenderVariant_color)
+        gl_FragColor = material;
+
        #include apply_marker_color
        #include apply_fog
        #include wboit_write
--- a/src/mol-gl/webgl/compat.ts
+++ b/src/mol-gl/webgl/compat.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -320,6 +320,101 @@ export function getSRGB(gl: GLRenderingContext): COMPAT_sRGB | null {
    }
 }

+export interface COMPAT_disjoint_timer_query {
+    /** A GLint indicating the number of bits used to hold the query result for the given target. */
+    QUERY_COUNTER_BITS: number
+    /** A WebGLQuery object, which is the currently active query for the given target. */
+    CURRENT_QUERY: number
+    /** A GLuint64EXT containing the query result. */
+    QUERY_RESULT: number
+    /** A GLboolean indicating whether or not a query result is available. */
+    QUERY_RESULT_AVAILABLE: number
+    /** Elapsed time (in nanoseconds). */
+    TIME_ELAPSED: number
+    /** The current time. */
+    TIMESTAMP: number
+    /** A GLboolean indicating whether or not the GPU performed any disjoint operation. */
+    GPU_DISJOINT: number
+
+    /** Creates a new WebGLTimerQueryEXT. */
+    createQuery: () => WebGLQuery
+    /** Deletes a given WebGLTimerQueryEXT. */
+    deleteQuery: (query: WebGLQuery) => void
+    /** Returns true if a given object is a valid WebGLTimerQueryEXT. */
+    isQuery: (query: WebGLQuery) => boolean
+    /** The timer starts when all commands prior to beginQueryEXT have been fully executed. */
+    beginQuery: (target: number, query: WebGLQuery) => void
+    /** The timer stops when all commands prior to endQueryEXT have been fully executed. */
+    endQuery: (target: number) => void
+    /** Records the current time into the corresponding query object. */
+    queryCounter: (query: WebGLQuery, target: number) => void
+    /** Returns information about a query target. */
+    getQuery: (target: number, pname: number) => WebGLQuery | number
+    /** Return the state of a query object. */
+    getQueryParameter: (query: WebGLQuery, pname: number) => number | boolean
+}
+
+export function getDisjointTimerQuery(gl: GLRenderingContext): COMPAT_disjoint_timer_query | null {
+    if (isWebGL2(gl)) {
+        // Firefox has EXT_disjoint_timer_query in webgl2
+        const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2') || gl.getExtension('EXT_disjoint_timer_query');
+        if (ext === null) return null;
+        return {
+            QUERY_COUNTER_BITS: ext.QUERY_COUNTER_BITS_EXT,
+            CURRENT_QUERY: gl.CURRENT_QUERY,
+            QUERY_RESULT: gl.QUERY_RESULT,
+            QUERY_RESULT_AVAILABLE: gl.QUERY_RESULT_AVAILABLE,
+            TIME_ELAPSED: ext.TIME_ELAPSED_EXT,
+            TIMESTAMP: ext.TIMESTAMP_EXT,
+            GPU_DISJOINT: ext.GPU_DISJOINT_EXT,
+
+            createQuery: gl.createQuery.bind(gl),
+            deleteQuery: gl.deleteQuery.bind(gl),
+            isQuery: gl.isQuery.bind(gl),
+            beginQuery: gl.beginQuery.bind(gl),
+            endQuery: gl.endQuery.bind(gl),
+            queryCounter: ext.queryCounterEXT.bind(ext),
+            getQuery: gl.getQuery.bind(gl),
+            getQueryParameter: gl.getQueryParameter.bind(gl),
+        };
+    } else {
+        const ext = gl.getExtension('EXT_disjoint_timer_query');
+        if (ext === null) return null;
+        return {
+            QUERY_COUNTER_BITS: ext.QUERY_COUNTER_BITS_EXT,
+            CURRENT_QUERY: ext.CURRENT_QUERY_EXT,
+            QUERY_RESULT: ext.QUERY_RESULT_EXT,
+            QUERY_RESULT_AVAILABLE: ext.QUERY_RESULT_AVAILABLE_EXT,
+            TIME_ELAPSED: ext.TIME_ELAPSED_EXT,
+            TIMESTAMP: ext.TIMESTAMP_EXT,
+            GPU_DISJOINT: ext.GPU_DISJOINT_EXT,
+
+            createQuery: ext.createQueryEXT.bind(ext),
+            deleteQuery: ext.deleteQueryEXT.bind(ext),
+            isQuery: ext.isQueryEXT.bind(ext),
+            beginQuery: ext.beginQueryEXT.bind(ext),
+            endQuery: ext.endQueryEXT.bind(ext),
+            queryCounter: ext.queryCounterEXT.bind(ext),
+            getQuery: ext.getQueryEXT.bind(ext),
+            getQueryParameter: ext.getQueryObjectEXT.bind(ext),
+        };
+    }
+}
+
+export function getNoNonInstancedActiveAttribs(gl: GLRenderingContext): boolean {
+    if (!isWebGL2(gl)) return false;
+
+    if (typeof navigator !== 'undefined') {
+        const ffMatch = window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
+        if (!ffMatch) return true;
+
+        const ffVersion = parseInt(ffMatch[1]);
+        // supported since FF 85 (https://bugzilla.mozilla.org/show_bug.cgi?id=1679693)
+        return ffVersion >= 85;
+    }
+    return false;
+}
+
 //

 const TextureTestVertShader = `
--- a/src/mol-gl/webgl/context.ts
+++ b/src/mol-gl/webgl/context.ts
@@ -17,6 +17,7 @@ import { BehaviorSubject } from 'rxjs';
 import { now } from '../../mol-util/now';
 import { Texture, TextureFilter } from './texture';
 import { ComputeRenderable } from '../renderable';
+import { createTimer, WebGLTimer } from './timer';

 export function getGLContext(canvas: HTMLCanvasElement, attribs?: WebGLContextAttributes & { preferWebGl1?: boolean }): GLRenderingContext | null {
    function get(id: 'webgl' | 'experimental-webgl' | 'webgl2') {
@@ -186,6 +187,7 @@ export interface WebGLContext {
    readonly state: WebGLState
    readonly stats: WebGLStats
    readonly resources: WebGLResources
+    readonly timer: WebGLTimer

    readonly maxTextureSize: number
    readonly max3dTextureSize: number
@@ -221,6 +223,7 @@ export function createContext(gl: GLRenderingContext, props: Partial<{ pixelScal
    const state = createState(gl);
    const stats = createStats();
    const resources = createResources(gl, state, stats, extensions);
+    const timer = createTimer(gl, extensions);

    const parameters = {
        maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE) as number,
@@ -289,6 +292,7 @@ export function createContext(gl: GLRenderingContext, props: Partial<{ pixelScal
        state,
        stats,
        resources,
+        timer,

        get maxTextureSize() { return parameters.maxTextureSize; },
        get max3dTextureSize() { return parameters.max3dTextureSize; },
--- a/src/mol-gl/webgl/extensions.ts
+++ b/src/mol-gl/webgl/extensions.ts
@@ -1,10 +1,10 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

-import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, 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, getDepthTexture, COMPAT_depth_texture, COMPAT_sRGB, getSRGB, getTextureHalfFloat, getTextureHalfFloatLinear, COMPAT_texture_half_float, COMPAT_texture_half_float_linear, COMPAT_color_buffer_half_float, getColorBufferHalfFloat, getVertexArrayObject } from './compat';
+import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, 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, getDepthTexture, COMPAT_depth_texture, COMPAT_sRGB, getSRGB, getTextureHalfFloat, getTextureHalfFloatLinear, COMPAT_texture_half_float, COMPAT_texture_half_float_linear, COMPAT_color_buffer_half_float, getColorBufferHalfFloat, getVertexArrayObject, getDisjointTimerQuery, COMPAT_disjoint_timer_query, getNoNonInstancedActiveAttribs } from './compat';
 import { isDebugMode } from '../../mol-util/debug';

 export type WebGLExtensions = {
@@ -25,6 +25,9 @@ export type WebGLExtensions = {
    drawBuffers: COMPAT_draw_buffers | null
    shaderTextureLod: COMPAT_shader_texture_lod | null
    sRGB: COMPAT_sRGB | null
+    disjointTimerQuery: COMPAT_disjoint_timer_query | null
+
+    noNonInstancedActiveAttribs: boolean
 }

 export function createExtensions(gl: GLRenderingContext): WebGLExtensions {
@@ -99,6 +102,12 @@ export function createExtensions(gl: GLRenderingContext): WebGLExtensions {
    if (isDebugMode && sRGB === null) {
        console.log('Could not find support for "sRGB"');
    }
+    const disjointTimerQuery = getDisjointTimerQuery(gl);
+    if (isDebugMode && disjointTimerQuery === null) {
+        console.log('Could not find support for "disjoint_timer_query"');
+    }
+
+    const noNonInstancedActiveAttribs = getNoNonInstancedActiveAttribs(gl);

    return {
        instancedArrays,
@@ -118,5 +127,8 @@ export function createExtensions(gl: GLRenderingContext): WebGLExtensions {
        drawBuffers,
        shaderTextureLod,
        sRGB,
+        disjointTimerQuery,
+
+        noNonInstancedActiveAttribs,
    };
 }
--- a/src/mol-gl/webgl/program.ts
+++ b/src/mol-gl/webgl/program.ts
@@ -7,7 +7,7 @@
 import { ShaderCode, DefineValues, addShaderDefines } from '../shader-code';
 import { WebGLState } from './state';
 import { WebGLExtensions } from './extensions';
-import { getUniformSetters, UniformsList, getUniformType, UniformSetters } from './uniform';
+import { getUniformSetters, UniformsList, getUniformType, UniformSetters, isArrayUniform } from './uniform';
 import { AttributeBuffers, getAttribType } from './buffer';
 import { TextureId, Textures } from './texture';
 import { idFactory } from '../../mol-util/id-factory';
@@ -41,7 +41,14 @@ function getLocations(gl: GLRenderingContext, program: WebGLProgram, schema: Ren
            // unused attributes will result in a `-1` location which is usually fine
            // if (loc === -1) console.info(`Could not get attribute location for '${k}'`);
            locations[k] = loc;
-        } else if (spec.type === 'uniform' || spec.type === 'texture') {
+        } else if (spec.type === 'uniform') {
+            let loc = gl.getUniformLocation(program, k);
+            // headless-gl requires a '[0]' suffix for array uniforms (https://github.com/stackgl/headless-gl/issues/170)
+            if (loc === null && isArrayUniform(spec.kind)) loc = gl.getUniformLocation(program, k + '[0]');
+            // unused uniforms will result in a `null` location which is usually fine
+            // if (loc === null) console.info(`Could not get uniform location for '${k}'`);
+            locations[k] = loc as number;
+        } else if (spec.type === 'texture') {
            const loc = gl.getUniformLocation(program, k);
            // unused uniforms will result in a `null` location which is usually fine
            // if (loc === null) console.info(`Could not get uniform location for '${k}'`);
--- a/src/mol-gl/webgl/render-item.ts
+++ b/src/mol-gl/webgl/render-item.ts
@@ -1,11 +1,11 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { createAttributeBuffers, ElementsBuffer, AttributeKind } from './buffer';
-import { createTextures, Texture, Textures } from './texture';
+import { createTextures, Texture } from './texture';
 import { WebGLContext, checkError } from './context';
 import { ShaderCode, DefineValues } from '../shader-code';
 import { Program } from './program';
@@ -42,7 +42,7 @@ export interface RenderItem<T extends string> {
    readonly materialId: number
    getProgram: (variant: T) => Program

-    render: (variant: T, sharedTexturesList?: Textures) => void
+    render: (variant: T, sharedTexturesCount: number) => void
    update: () => Readonly<ValueChanges>
    destroy: () => void
 }
@@ -112,12 +112,7 @@ export function createRenderItem<T extends string>(ctx: WebGLContext, drawMode:
    const { instancedArrays, vertexArrayObject } = ctx.extensions;

    // emulate gl_VertexID when needed
-    // if (!ctx.isWebGL2 && values.uVertexCount) {
-    // not using gl_VertexID in WebGL2 but aVertex to ensure there is an active attribute with divisor 0
-    // since FF 85 this is not needed anymore but lets keep it for backwards compatibility
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1679693
-    // see also note in src/mol-gl/shader/chunks/common-vert-params.glsl.ts
-    if (values.uVertexCount) {
+    if (values.uVertexCount && !ctx.extensions.noNonInstancedActiveAttribs) {
        const vertexCount = values.uVertexCount.ref.value;
        (values as any).aVertex = ValueCell.create(fillSerial(new Float32Array(vertexCount)));
        (schema as any).aVertex = AttributeSpec('float32', 1, 0);
@@ -171,17 +166,12 @@ export function createRenderItem<T extends string>(ctx: WebGLContext, drawMode:
        materialId,
        getProgram: (variant: T) => programs[variant],

-        render: (variant: T, sharedTexturesList?: Textures) => {
+        render: (variant: T, sharedTexturesCount: number) => {
            if (drawCount === 0 || instanceCount === 0 || ctx.isContextLost) return;
            const program = programs[variant];
            if (program.id === currentProgramId && state.currentRenderItemId === id) {
                program.setUniforms(uniformValueEntries);
-                if (sharedTexturesList && sharedTexturesList.length > 0) {
-                    program.bindTextures(sharedTexturesList, 0);
-                    program.bindTextures(textures, sharedTexturesList.length);
-                } else {
-                    program.bindTextures(textures, 0);
-                }
+                program.bindTextures(textures, sharedTexturesCount);
            } else {
                const vertexArray = vertexArrays[variant];
                if (program.id !== state.currentProgramId || program.id !== currentProgramId ||
@@ -195,12 +185,7 @@ export function createRenderItem<T extends string>(ctx: WebGLContext, drawMode:
                }
                program.setUniforms(uniformValueEntries);
                program.setUniforms(frontBufferUniformValueEntries);
-                if (sharedTexturesList && sharedTexturesList.length > 0) {
-                    program.bindTextures(sharedTexturesList, 0);
-                    program.bindTextures(textures, sharedTexturesList.length);
-                } else {
-                    program.bindTextures(textures, 0);
-                }
+                program.bindTextures(textures, sharedTexturesCount);
                if (vertexArray) {
                    vertexArray.bind();
                    // need to bind elements buffer explicitly since it is not always recorded in the VAO
--- a/src/mol-gl/webgl/render-target.ts
+++ b/src/mol-gl/webgl/render-target.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -9,6 +9,7 @@ import { createNullTexture, Texture, TextureFilter } from './texture';
 import { createNullFramebuffer, Framebuffer } from './framebuffer';
 import { WebGLResources } from './resources';
 import { GLRenderingContext, isWebGL2 } from './compat';
+import { Renderbuffer } from './renderbuffer';

 const getNextRenderTargetId = idFactory();

@@ -16,6 +17,7 @@ export interface RenderTarget {
    readonly id: number
    readonly texture: Texture
    readonly framebuffer: Framebuffer
+    readonly depthRenderbuffer: Renderbuffer | null

    getWidth: () => number
    getHeight: () => number
@@ -54,6 +56,7 @@ export function createRenderTarget(gl: GLRenderingContext, resources: WebGLResou
        id: getNextRenderTargetId(),
        texture: targetTexture,
        framebuffer,
+        depthRenderbuffer,

        getWidth: () => _width,
        getHeight: () => _height,
@@ -90,6 +93,7 @@ export function createNullRenderTarget(gl: GLRenderingContext): RenderTarget {
        id: getNextRenderTargetId(),
        texture: createNullTexture(gl),
        framebuffer: createNullFramebuffer(),
+        depthRenderbuffer: null,

        getWidth: () => 0,
        getHeight: () => 0,
--- a/src/mol-gl/webgl/renderbuffer.ts
+++ b/src/mol-gl/webgl/renderbuffer.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -40,6 +40,7 @@ export interface Renderbuffer {

    bind: () => void
    attachFramebuffer: (framebuffer: Framebuffer) => void
+    detachFramebuffer: (framebuffer: Framebuffer) => void
    setSize: (width: number, height: number) => void
    reset: () => void
    destroy: () => void
@@ -78,6 +79,12 @@ export function createRenderbuffer(gl: GLRenderingContext, format: RenderbufferF
            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, _attachment, gl.RENDERBUFFER, _renderbuffer);
            if (isDebugMode) checkFramebufferStatus(gl);
        },
+        detachFramebuffer: (framebuffer: Framebuffer) => {
+            framebuffer.bind();
+            bind();
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, _attachment, gl.RENDERBUFFER, null);
+            if (isDebugMode) checkFramebufferStatus(gl);
+        },
        setSize: (width: number, height: number) => {
            _width = width;
            _height = height;
--- a/src/mol-gl/webgl/state.ts
+++ b/src/mol-gl/webgl/state.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -44,6 +44,10 @@ export type WebGLState = {
    cullFace: (mode: number) => void
    /** sets whether writing into the depth buffer is enabled or disabled */
    depthMask: (flag: boolean) => void
+    /** specifies the depth value used when clearing depth buffer, used when calling `gl.clear` */
+    clearDepth: (depth: number) => void
+    /** sets the depth comparison function */
+    depthFunc: (func: number) => void
    /** sets which color components to enable or to disable */
    colorMask: (red: boolean, green: boolean, blue: boolean, alpha: boolean) => void
    /** specifies the color values used when clearing color buffers, used when calling `gl.clear`, clamped to [0, 1] */
@@ -58,6 +62,8 @@ export type WebGLState = {
    blendEquation: (mode: number) => void
    /** set the RGB blend equation and alpha blend equation separately, determines how a new pixel is combined with an existing */
    blendEquationSeparate: (modeRGB: number, modeAlpha: number) => void
+    /** specifies the source and destination blending factors, clamped to [0, 1] */
+    blendColor: (red: number, green: number, blue: number, alpha: number) => void

    enableVertexAttrib: (index: number) => void
    clearVertexAttribsState: () => void
@@ -72,6 +78,8 @@ export function createState(gl: GLRenderingContext): WebGLState {
    let currentFrontFace = gl.getParameter(gl.FRONT_FACE);
    let currentCullFace = gl.getParameter(gl.CULL_FACE_MODE);
    let currentDepthMask = gl.getParameter(gl.DEPTH_WRITEMASK);
+    let currentClearDepth = gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+    let currentDepthFunc = gl.getParameter(gl.DEPTH_FUNC);
    let currentColorMask = gl.getParameter(gl.COLOR_WRITEMASK);
    let currentClearColor = gl.getParameter(gl.COLOR_CLEAR_VALUE);

@@ -79,6 +87,7 @@ export function createState(gl: GLRenderingContext): WebGLState {
    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 currentBlendColor = gl.getParameter(gl.BLEND_COLOR);

    let currentBlendEqRGB = gl.getParameter(gl.BLEND_EQUATION_RGB);
    let currentBlendEqAlpha = gl.getParameter(gl.BLEND_EQUATION_ALPHA);
@@ -129,6 +138,18 @@ export function createState(gl: GLRenderingContext): WebGLState {
                currentDepthMask = flag;
            }
        },
+        clearDepth: (depth: number) => {
+            if (depth !== currentClearDepth) {
+                gl.clearDepth(depth);
+                currentClearDepth = depth;
+            }
+        },
+        depthFunc: (func: number) => {
+            if (func !== currentDepthFunc) {
+                gl.depthFunc(func);
+                currentDepthFunc = func;
+            }
+        },
        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);
@@ -166,7 +187,6 @@ export function createState(gl: GLRenderingContext): WebGLState {
                currentBlendDstAlpha = dstAlpha;
            }
        },
-
        blendEquation: (mode: number) => {
            if (mode !== currentBlendEqRGB || mode !== currentBlendEqAlpha) {
                gl.blendEquation(mode);
@@ -181,6 +201,15 @@ export function createState(gl: GLRenderingContext): WebGLState {
                currentBlendEqAlpha = modeAlpha;
            }
        },
+        blendColor: (red: number, green: number, blue: number, alpha: number) => {
+            if (red !== currentBlendColor[0] || green !== currentBlendColor[1] || blue !== currentBlendColor[2] || alpha !== currentBlendColor[3]) {
+                gl.blendColor(red, green, blue, alpha);
+                currentBlendColor[0] = red;
+                currentBlendColor[1] = green;
+                currentBlendColor[2] = blue;
+                currentBlendColor[3] = alpha;
+            }
+        },

        enableVertexAttrib: (index: number) => {
            gl.enableVertexAttribArray(index);
@@ -199,6 +228,8 @@ export function createState(gl: GLRenderingContext): WebGLState {
            currentFrontFace = gl.getParameter(gl.FRONT_FACE);
            currentCullFace = gl.getParameter(gl.CULL_FACE_MODE);
            currentDepthMask = gl.getParameter(gl.DEPTH_WRITEMASK);
+            currentClearDepth = gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+            currentDepthFunc = gl.getParameter(gl.DEPTH_FUNC);
            currentColorMask = gl.getParameter(gl.COLOR_WRITEMASK);
            currentClearColor = gl.getParameter(gl.COLOR_CLEAR_VALUE);

@@ -206,6 +237,7 @@ export function createState(gl: GLRenderingContext): WebGLState {
            currentBlendDstRGB = gl.getParameter(gl.BLEND_DST_RGB);
            currentBlendSrcAlpha = gl.getParameter(gl.BLEND_SRC_ALPHA);
            currentBlendDstAlpha = gl.getParameter(gl.BLEND_DST_ALPHA);
+            currentBlendColor = gl.getParameter(gl.BLEND_COLOR);

            currentBlendEqRGB = gl.getParameter(gl.BLEND_EQUATION_RGB);
            currentBlendEqAlpha = gl.getParameter(gl.BLEND_EQUATION_ALPHA);
--- a/src/mol-gl/webgl/texture.ts
+++ b/src/mol-gl/webgl/texture.ts
@@ -238,6 +238,10 @@ export function createTexture(gl: GLRenderingContext, extensions: WebGLExtension
        throw new Error(`texture kind '${kind}' and type '${_type}' are incompatible`);
    }

+    if (!extensions.depthTexture && _format === 'depth') {
+        throw new Error(`extension 'WEBGL_depth_texture' needed for 'depth' texture format`);
+    }
+
    const target = getTarget(gl, kind);
    const filter = getFilter(gl, _filter);
    const format = getFormat(gl, _format, _type);
--- a/src/mol-gl/webgl/timer.ts
+++ b/src/mol-gl/webgl/timer.ts
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { GLRenderingContext } from './compat';
+import { WebGLExtensions } from './extensions';
+
+export type TimerResult = {
+    readonly label: string
+    readonly timeElapsed: number
+    readonly children: TimerResult[]
+}
+
+function getQuery(extensions: WebGLExtensions) {
+    return extensions.disjointTimerQuery ? extensions.disjointTimerQuery.createQuery() : null;
+}
+
+export type WebGLTimer = {
+    /** Check with GPU for finished timers. */
+    resolve: () => TimerResult[]
+    mark: (label: string) => void
+    markEnd: (label: string) => void
+    clear: () => void
+    destroy: () => void
+}
+
+type Measure = { label: string, queries: WebGLQuery[], children: Measure[], root: boolean, timeElapsed?: number };
+type QueryResult = { timeElapsed?: number, refCount: number };
+
+export function createTimer(gl: GLRenderingContext, extensions: WebGLExtensions): WebGLTimer {
+    const dtq = extensions.disjointTimerQuery;
+
+    const queries = new Map<WebGLQuery, QueryResult>();
+    const pending = new Map<string, Measure>();
+    const stack: Measure[] = [];
+
+    let measures: Measure[] = [];
+    let current: WebGLQuery | null = null;
+
+    const clear = () => {
+        if (!dtq) return;
+
+        queries.forEach((_, query) => {
+            dtq.deleteQuery(query);
+        });
+        pending.clear();
+        measures = [];
+        current = null;
+    };
+
+    const add = () => {
+        if (!dtq) return;
+
+        const query = getQuery(extensions);
+        if (!query) return;
+
+        dtq.beginQuery(dtq.TIME_ELAPSED, query);
+        pending.forEach((measure, _) => {
+            measure.queries.push(query);
+        });
+        queries.set(query, { refCount: pending.size });
+        current = query;
+    };
+
+    return {
+        resolve: () => {
+            const results: TimerResult[] = [];
+            if (!dtq || !measures.length) return results;
+            // console.log('resolve');
+            queries.forEach((result, query) => {
+                if (result.timeElapsed !== undefined) return;
+
+                const available = dtq.getQueryParameter(query, dtq.QUERY_RESULT_AVAILABLE);
+                const disjoint = gl.getParameter(dtq.GPU_DISJOINT);
+
+                if (available && !disjoint) {
+                    const timeElapsed = dtq.getQueryParameter(query, dtq.QUERY_RESULT) as number;
+                    result.timeElapsed = timeElapsed;
+                    // console.log('timeElapsed', result.timeElapsed);
+                }
+
+                if (available || disjoint) {
+                    dtq.deleteQuery(query);
+                }
+            });
+
+            const unresolved: Measure[] = [];
+            for (const measure of measures) {
+                if (measure.queries.every(q => queries.get(q)?.timeElapsed !== undefined)) {
+                    let timeElapsed = 0;
+                    for (const query of measure.queries) {
+                        const result = queries.get(query)!;
+                        timeElapsed += result.timeElapsed!;
+                        result.refCount -= 1;
+                    }
+                    measure.timeElapsed = timeElapsed;
+                    if (measure.root) {
+                        const children: TimerResult[] = [];
+                        const add = (measures: Measure[], children: TimerResult[]) => {
+                            for (const measure of measures) {
+                                const result: TimerResult = {
+                                    label: measure.label,
+                                    timeElapsed: measure.timeElapsed!,
+                                    children: []
+                                };
+                                children.push(result);
+                                add(measure.children, result.children);
+                            }
+                        };
+                        add(measure.children, children);
+                        results.push({ label: measure.label, timeElapsed, children });
+                    }
+                } else {
+                    unresolved.push(measure);
+                }
+            }
+            measures = unresolved;
+
+            queries.forEach((result, query) => {
+                if (result.refCount === 0) {
+                    queries.delete(query);
+                }
+            });
+
+            return results;
+        },
+        mark: (label: string) => {
+            if (!dtq) return;
+
+            if (pending.has(label)) {
+                throw new Error(`Timer mark for '${label}' already exists`);
+            }
+
+            if (current !== null) {
+                dtq.endQuery(dtq.TIME_ELAPSED);
+            }
+            const measure: Measure = { label, queries: [], children: [], root: current === null };
+            pending.set(label, measure);
+
+            if (stack.length) {
+                stack[stack.length - 1].children.push(measure);
+            }
+            stack.push(measure);
+
+            add();
+        },
+        markEnd: (label: string) => {
+            if (!dtq) return;
+
+            const measure = pending.get(label);
+            if (!measure) {
+                throw new Error(`Timer mark for '${label}' does not exist`);
+            }
+
+            if (stack.pop()?.label !== label) {
+                throw new Error(`Timer mark for '${label}' has pending nested mark`);
+            }
+
+            dtq.endQuery(dtq.TIME_ELAPSED);
+            pending.delete(label);
+            measures.push(measure);
+
+            if (pending.size > 0) {
+                add();
+            } else {
+                current = null;
+            }
+        },
+        clear,
+        destroy: () => {
+            clear();
+        }
+    };
+}
+
+function formatTimerResult(result: TimerResult) {
+    const timeElapsed = result.timeElapsed / 1000 / 1000;
+    return `${result.label} ${timeElapsed.toFixed(2)}ms`;
+}
+
+export function printTimerResults(results: TimerResult[]) {
+    return results.map(r => {
+        const f = formatTimerResult(r);
+        if (r.children.length) {
+            console.groupCollapsed(f);
+            printTimerResults(r.children);
+            console.groupEnd();
+        } else {
+            console.log(f);
+        }
+    });
+}
--- a/src/mol-gl/webgl/uniform.ts
+++ b/src/mol-gl/webgl/uniform.ts
@@ -42,6 +42,10 @@ export function getUniformType(gl: GLRenderingContext, kind: UniformKind) {
    }
 }

+export function isArrayUniform(kind: UniformKind) {
+    return kind.endsWith('[]');
+}
+
 export type UniformSetter = (gl: GLRenderingContext, location: number, value: any) => void
 export type UniformSetters = { [k: string]: UniformSetter }

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alexander Rose	6417fd49d6	3.12.0	2022-07-17 16:28:26 -07:00
Alexander Rose	374fd4db65	changelog	2022-07-17 16:23:08 -07:00
Alexander Rose	0b70dd9e38	Merge pull request #487 from molstar/fix/struct_conn-parsing struct_conn parsing fix	2022-07-17 16:20:45 -07:00
dsehnal	55b19a7922	changelog	2022-07-17 18:01:28 +02:00
dsehnal	beb1b2655e	scan all entities when looking for struct_conn etries - solves PDB loading issue	2022-07-17 17:58:57 +02:00
Alexander Rose	6a81e48c3a	package updates	2022-07-16 13:20:19 -07:00
Alexander Rose	f9841dd3df	improve CellPack's adjustStyle option - disable colorMarker - set component options - enable marking w/o ghost	2022-07-16 13:02:04 -07:00
Alexander Rose	b563c773c1	avoid using flat qualifier in shaders - causing slowdown	2022-07-16 13:01:33 -07:00
Alexander Rose	dcda649d9d	add colorMarker option to Renderer - disables the highlight and select marker at a shader level - faster rendering of large scenes in some cases.	2022-07-16 12:58:49 -07:00
Alexander Rose	d6cfd23ae5	fix missing material annotation for some uniforms - causing unnecessary uniform updates	2022-07-16 12:31:38 -07:00
Alexander Rose	b69f62c9a4	remove use of isnan in impostor shaders - not needed and causing slowdown	2022-07-16 12:28:40 -07:00
Alexander Rose	582ee7d623	bind shared textures only once per pass	2022-07-16 12:27:16 -07:00
dsehnal	7c4202186d	3.11.0	2022-07-04 16:30:54 +02:00
dsehnal	7c56e4c09d	fix unused import	2022-07-04 16:28:24 +02:00
dsehnal	b10b466c61	changelog	2022-07-04 16:25:23 +02:00
David Sehnal	80d1986c61	Merge pull request #474 from molstar/composable-superposition coordinate system support for superposition	2022-07-04 16:24:45 +02:00
dsehnal	7f9e413604	coordinate system support for superposition	2022-07-04 16:23:51 +02:00
Alexander Rose	4dfbc3830f	Merge pull request #466 from molstar/cellpack-tweaks Cellpack tweaks	2022-07-03 14:18:26 -07:00
Alexander Rose	46cdefa9ee	add adjustStyle option to LoadCellPackModel	2022-07-02 12:48:05 -07:00
Alexander Rose	f857ea6095	fix missing rename - forceInstanceTheme -> instanceGranularity	2022-07-01 06:34:27 -07:00
Alexander Rose	994920f99f	fix shader compilation - support instance texture params for overpaint, substance, transparency	2022-06-29 22:28:10 -07:00
Alexander Rose	130d4096d5	Merge branch 'master' of https://github.com/molstar/molstar into cellpack-tweaks	2022-06-26 17:50:14 -07:00
Alexander Rose	d5659529d7	3.10.2	2022-06-26 17:34:46 -07:00
Alexander Rose	f6e06ab16e	changelog	2022-06-26 17:29:48 -07:00
Alexander Rose	4245eaf1b2	improve use of gl_VertexID when possible	2022-06-26 17:29:21 -07:00
Alexander Rose	c41bd702e2	remove superfluous shader varying	2022-06-26 17:25:14 -07:00
Alexander Rose	3911145f87	Merge branch 'master' of https://github.com/molstar/molstar into cellpack-tweaks	2022-06-26 14:54:15 -07:00
Alexander Rose	350f5c4266	3.10.1	2022-06-26 14:17:31 -07:00
Alexander Rose	ed4056bc8b	changelog	2022-06-26 14:04:20 -07:00
Alexander Rose	0d96fa21b7	schema updates	2022-06-26 14:03:09 -07:00
Alexander Rose	0ee8d33d36	package updates	2022-06-26 13:30:44 -07:00
Alexander Rose	64cedec12b	fix groupCount updating TextureMesh-based visuals	2022-06-26 12:42:26 -07:00
Alexander Rose	a16eaca42e	finalize instanceGranularity	2022-06-26 12:27:02 -07:00
dsehnal	366b3b1b75	3.10.0	2022-06-24 15:59:45 +02:00
dsehnal	33963c085a	ShowTrajectoryControls option	2022-06-24 15:56:39 +02:00
Alexander Rose	f3b18ef518	fix & simplify lociApply for instanceGranularity	2022-06-20 22:33:24 -07:00
Alexander Rose	bca1b45fd4	tweak name - useInstanceGranularity -> instanceGranularity	2022-06-20 22:00:21 -07:00
Alexander Rose	3448d5ef03	Merge branch 'master' of https://github.com/molstar/molstar into cellpack-tweaks	2022-06-20 21:23:32 -07:00
David Sehnal	0f5a6194ff	Merge pull request #455 from molstar/support-glycam-names Support glycam names	2022-06-20 13:37:16 +02:00
David Sehnal	9266faec59	Merge branch 'master' into support-glycam-names	2022-06-20 13:37:10 +02:00
Alexander Rose	94347c6dde	cleanup app.ts (#450 )	2022-06-19 19:38:43 -07:00
Alexander Rose	7a07701be0	3.9.1	2022-06-19 19:21:25 -07:00
Alexander Rose	42519a4f75	changelog	2022-06-19 19:16:15 -07:00
Alexander Rose	c898c16430	package updates	2022-06-19 19:15:06 -07:00
Alexander Rose	318863bd18	fix missing aromatic bond display - simplify code to always show when aromatic	2022-06-19 19:05:58 -07:00
Alexander Rose	ce94760d02	fix missing uGroupCount update for visuals	2022-06-19 18:51:16 -07:00
Alexander Rose	99759b5282	add useInstanceGranularity option - for marker, transparency, clipping, overpaint, substance data - saves memory	2022-06-19 18:45:31 -07:00
dsehnal	d9d8562ed9	changelog	2022-06-13 19:52:44 +02:00
dsehnal	dee55ea874	support glycam names	2022-06-13 19:52:14 +02:00
dsehnal	da413cc9e6	added missing super.componentWillUnmount	2022-06-10 14:53:26 +02:00
David Sehnal	c72e93a13d	Merge pull request #452 from simeonborko/sborko/screenshot-unmount DownloadScreenshotControls: componentWillUnmount	2022-06-10 14:46:19 +02:00
Simeon Borko	21f910a3ca	DownloadScreenshotControls: componentWillUnmount This should solve the error: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.	2022-06-10 10:04:31 +02:00
Alexander Rose	2c51edb4c2	changelog	2022-05-30 19:20:41 -07:00
Alexander Rose	da2c893721	Merge branch 'master' of https://github.com/molstar/molstar into cellpack-tweaks	2022-05-30 19:18:49 -07:00
Alexander Rose	e7ce693e50	3.9.0	2022-05-30 11:46:42 -07:00
Alexander Rose	29e8fe7904	fix types	2022-05-30 11:41:40 -07:00
Alexander Rose	baf3a6077e	package updates	2022-05-30 11:32:05 -07:00
Alexander Rose	e030e7a32d	changelog	2022-05-30 11:29:23 -07:00
Alexander Rose	125566ed75	only call renderBlendedTransparent when needed	2022-05-30 11:27:58 -07:00
Alexander Rose	c51cb67519	Merge pull request #447 from molstar/pick-drawbuffers use drawbuffers for picking	2022-05-29 23:35:53 -07:00
Alexander Rose	57f086b530	Merge branch 'master' into pick-drawbuffers	2022-05-29 23:32:57 -07:00
Alexander Rose	d1e17785b8	Merge pull request #446 from molstar/webgl-timer Webgl timing support	2022-05-29 23:32:29 -07:00
Alexander Rose	774328a1d8	Merge branch 'master' into webgl-timer	2022-05-29 23:31:13 -07:00
Alexander Rose	175a0f48fa	lint fix	2022-05-29 23:30:36 -07:00
Alexander Rose	60b91ff032	Merge branch 'master' into pick-drawbuffers	2022-05-29 11:11:29 -07:00
David Sehnal	2b003bc5b0	Merge pull request #445 from aliaksei-chareshneu/fix_bad_axis_order Add check that a data block contains volume data before parsing	2022-05-29 16:00:10 +02:00
David Sehnal	029a2fcab1	Merge branch 'master' into fix_bad_axis_order	2022-05-29 15:59:52 +02:00
Alexander Rose	aa47f7fe4a	use instances to create dna/rna curves - much less memory use (but can't show as single cartoon)	2022-05-28 19:49:56 -07:00
Alexander Rose	a828113d9b	use drawbuffers for picking	2022-05-28 13:17:35 -07:00
Alexander Rose	ab4d509eda	fix rendering volumes - when wboit is switched off and postprocessing is enabled	2022-05-28 13:13:35 -07:00
Alexander Rose	1296f32fa8	tweak alpha-orbitals example	2022-05-28 11:54:33 -07:00
Alexander Rose	5aa1ec9876	add timing mode	2022-05-28 11:43:13 -07:00
Alexander Rose	f2cf1ab226	add support for GPU timer queries	2022-05-28 11:20:22 -07:00
Alexander Rose	2d34c2a40b	fix Scene.clear not clearing primitives/volumes	2022-05-28 11:07:03 -07:00
Aliaksei	a7181e865c	Skipping server data block Co-authored-by: David Sehnal <dsehnal@users.noreply.github.com>	2022-05-28 08:16:58 +02:00
Aliaksei	0a71b788b3	Apply suggestions from code review fix bugs and optimizing the code related to iteration over data blocks Co-authored-by: David Sehnal <dsehnal@users.noreply.github.com>	2022-05-27 18:22:00 +02:00
aliaksei-chareshneu	1ed3d84043	fix to skip block with header SERVER	2022-05-27 14:26:42 +02:00
aliaksei-chareshneu	f472b75d0d	iterate over all blocks as even 0th can contain data	2022-05-27 13:53:08 +02:00
aliaksei-chareshneu	072a9d1ccd	add name and email to header; add changelog entry	2022-05-27 12:19:51 +02:00
aliaksei-chareshneu	8e26d1be68	fix bad axis ordering bug	2022-05-27 10:34:48 +02:00
Alexander Rose	c5871e9025	3.8.2	2022-05-22 08:36:50 -07:00
Alexander Rose	f26911b358	changelog	2022-05-22 08:31:57 -07:00
Alexander Rose	3a595b80b5	package updates	2022-05-22 08:30:15 -07:00
Alexander Rose	45760ddd41	fix Scene.opacityAverage not handling xray shaded	2022-05-22 08:22:39 -07:00
Alexander Rose	447d068bf1	3.8.1	2022-05-14 11:59:03 -07:00
Alexander Rose	7e1642a4a3	changelog	2022-05-14 11:53:55 -07:00
Alexander Rose	7781267e78	package updates	2022-05-14 11:53:18 -07:00
Alexander Rose	f824fdcfed	improve scene marker/opacity average calculation	2022-05-14 11:43:24 -07:00
Alexander Rose	79dd441967	Merge pull request #436 from JonStargaryen/master Fix Polymer Chain Instance Coloring	2022-05-09 22:41:33 -07:00
Sebastian Bittrich	9dcf9c0785	CHANGELOG	2022-05-09 15:58:22 -07:00
Sebastian Bittrich	83569462c6	fix instance coloring	2022-05-09 15:53:26 -07:00
Alexander Rose	947e169c3a	Merge pull request #434 from JonStargaryen/master proposed fix for headless-gl issues	2022-05-06 22:29:40 -07:00
Sebastian Bittrich	e6b36c52d1	CHANGELOG	2022-05-06 09:11:40 -07:00
Sebastian Bittrich	7fed3b84fa	Merge remote-tracking branch 'upstream/master'	2022-05-06 09:08:53 -07:00
Sebastian Bittrich	cbc941f193	simplify array uniform check	2022-05-06 09:08:22 -07:00
Alexander Rose	a7ef0fb85f	add interesting pdb entry	2022-05-05 22:41:16 -07:00
Alexander Rose	d10c36eaf5	fix issues with marking camera/handle helper	2022-05-05 22:40:52 -07:00
Sebastian Bittrich	e4c3a66753	proposed fix for headless-gl issues	2022-05-04 11:50:42 -07:00
Alexander Rose	f58f2cdc90	3.8.0	2022-04-30 16:11:07 -07:00
Alexander Rose	8f2676e91e	schema updates	2022-04-30 16:05:30 -07:00
Alexander Rose	89d397898e	changelog	2022-04-30 15:24:26 -07:00
Alexander Rose	2dc32be9ee	Merge pull request #427 from molstar/transparent-object-outline Transparent object outline	2022-04-30 15:08:46 -07:00
Alexander Rose	769220bd82	Merge pull request #421 from molstar/color-theme-typing better color theme typing	2022-04-30 15:06:06 -07:00
Alexander Rose	c75aa5dd52	improve transparency & outlines - proper per-group transparency with wboit off - fixed outlines with transparent backgound	2022-04-30 12:53:14 -07:00
Alexander Rose	88f1cfd8c4	fix ignoreLight for direct-volume with webgl1	2022-04-30 09:24:39 -07:00
Alexander Rose	108279c1aa	add clearDepth & blendColor to WebGLState	2022-04-30 08:42:01 -07:00
Alexander Rose	8150490aac	Merge branch 'master' of https://github.com/molstar/molstar into transparent-object-outline	2022-04-30 08:39:16 -07:00
Alexander Rose	9497aa6362	package updates	2022-04-30 08:38:07 -07:00
Alexander Rose	3769da48a1	handle building GridLookup3D with zero cell size	2022-04-29 20:18:40 -07:00
Alexander Rose	3c21fcd53a	fix FormatRegistry.isApplicable - was returning true for unregistered formats	2022-04-29 20:16:09 -07:00
Alexander Rose	102ef2795d	handle outlines for per-group transparency - fix allowTransparentBackfaces for per-group transparency	2022-04-23 23:02:11 -07:00
Alexander Rose	0befa253c2	add WebGLState.depthFunc	2022-04-23 20:07:41 -07:00
Alexander Rose	87189cee58	support outlines for transparent objects - cleanup of renderer and draw pass	2022-04-23 15:19:01 -07:00
Alexander Rose	3284f13fc6	fix spec of emptyDepthTexture in Renderer	2022-04-23 15:17:20 -07:00
Alexander Rose	70d219b120	improve Renderer.renderPick typing	2022-04-23 15:13:38 -07:00
Alexander Rose	a5ed3a08ea	add Scene.getOpacityAverage	2022-04-23 15:12:16 -07:00
Alexander Rose	3665e7e999	expose RenderTarget.depthRenderbuffer	2022-04-23 15:10:40 -07:00
Alexander Rose	9b583b23ae	add Renderbuffer.detachFramebuffer	2022-04-23 15:10:16 -07:00
Alexander Rose	d602415e98	check if WEBGL_depth_texture is supported	2022-04-23 15:09:44 -07:00
Alexander Rose	2c49a423e2	type assertion	2022-04-21 19:47:13 -07:00
Alexander Rose	8a266e70c8	fix handling of struct_conf mmCIF field (#425 )	2022-04-21 19:46:50 -07:00
Alexander Rose	0df3bcd65d	document supported file formats	2022-04-19 17:43:33 -07:00
dsehnal	f5ecf5648e	3.7.0	2022-04-13 20:04:01 +02:00
dsehnal	821f82fc3f	changelog	2022-04-13 20:01:04 +02:00
David Sehnal	92305fe628	Merge pull request #420 from molstar/transparentBackfaces improve transparentBackfaces handling	2022-04-13 19:57:29 +02:00
David Sehnal	17fe57b8a5	Merge pull request #423 from jpattle/option-to-disable-drag-overlay Added an option to disable the drag overlay	2022-04-13 16:31:21 +02:00
Jason Pattle	47433a51d3	Added an option to the components spec to allow disabling of the drag-and-drop overlap for Molstar that loads files into the viewer. By default the drag overlay is enabled, just as it was before	2022-04-13 15:00:03 +01:00
Alexander Rose	e090827ced	Merge branch 'master' of https://github.com/molstar/molstar into transparentBackfaces	2022-04-10 13:20:22 -07:00
Alexander Rose	856e6a8b74	use ColorTypeLocation as default - for backwards compatibility - most used	2022-04-09 19:27:06 -07:00
Alexander Rose	a813b4d40e	Merge branch 'master' of https://github.com/molstar/molstar into color-theme-typing	2022-04-09 16:53:17 -07:00
dsehnal	98afc27442	fix react typing	2022-04-09 21:24:14 +02:00
Alexander Rose	9d4f28a395	fix type deps	2022-04-09 11:36:17 -07:00
Alexander Rose	50266d9a56	package updates	2022-04-09 11:20:28 -07:00
Alexander Rose	602a532cf2	better color theme typing	2022-04-09 10:38:03 -07:00
Alexander Rose	b23d610c94	improve transparentBackfaces handling - off: don't show (default) - on: show with transparency - opaque: show fully opaque	2022-04-09 10:17:41 -07:00
Alexander Rose	119c43d527	fix xrayShaded for texture-mesh geometries	2022-04-09 10:04:06 -07:00
Alexander Rose	124feeb790	color theme tweaks - add optional grid property - handle dColorType_direct for non direct-volume shaders	2022-04-09 09:57:31 -07:00