2.2.1

Input observer improvements

.gitignore

@@ -9,3 +9,5 @@ tsconfig.commonjs.tsbuildinfo
 
 *.sublime-workspace
 .idea
+
+.DS_Store

.npmignore

@@ -1 +1 @@
-tsconfig.commonjs.buildinfo
+tsconfig.commonjs.tsbuildinfo

CHANGELOG.md

@@ -0,0 +1,113 @@
+# Change Log
+All notable changes to this project will be documented in this file, following the suggestions of [Keep a CHANGELOG](http://keepachangelog.com/). This project adheres to [Semantic Versioning](http://semver.org/) for its most widely used - and defacto - public interfaces.
+
+Note that since we don't clearly distinguish between a public and private interfaces there will be changes in non-major versions that are potentially breaking. If we make breaking changes to less used interfaces we will highlight it in here.
+
+
+## [Unreleased]
+
+
+## [v2.2.1] - 2021-08-02
+
+- Add surrounding atoms (5 Angstrom) structure selection query
+- [Breaking] Add maxDistance prop to ``IndexPairBonds``
+- Fix coordinateSystem not handled in ``Structure.asParent``
+- Add ``dynamicBonds`` to ``Structure`` props (force re-calc on model change)
+    - Expose as optional param in root structure transform helper
+- Add overpaint support to geometry exporters
+- ``InputObserver`` improvements
+  - normalize wheel speed across browsers/platforms
+  - support Safari gestures (used by ``TrackballControls``)
+  - ``PinchInput.fractionDelta`` and use it in ``TrackballControls``
+
+## [v2.2.0] - 2021-07-31
+
+- Add ``tubularHelices`` parameter to Cartoon representation
+- Add ``SdfFormat`` and update SDF parser to be able to parse data headers according to spec (hopefully :)) #230
+- Fix mononucleotides detected as polymer components (#229)
+- Set default outline scale back to 1
+- Improved DCD reader cell angle handling (interpret near 0 angles as 90 deg)
+- Handle more residue/atom names commonly used in force-fields
+- Add USDZ support to ``geo-export`` extension.
+- Fix ``includeParent`` support for multi-instance bond visuals.
+- Add ``operator`` Loci granularity, selecting everything with the same operator name.
+- Prefer ``_label_seq_id`` fields in secondary structure assignment.
+- Support new EMDB API (https://www.ebi.ac.uk/emdb/api/entry/map/[EMBD-ID]) for EM volume contour levels.
+- ``Canvas3D`` tweaks:
+    - Update ``forceDraw`` logic.
+    - Ensure the scene is re-rendered when viewport size changes.
+    - Support ``noDraw`` mode in ``PluginAnimationLoop``.
+
+## [v2.1.0] - 2021-07-05
+
+- Add parameter for to display aromatic bonds as dashes next to solid cylinder/line.
+- Add backbone representation
+- Fix outline in orthographic mode and set default scale to 2.
+
+## [v2.0.7] - 2021-06-23
+
+- Add ability to specify ``volumeIndex`` in ``Viewer.loadVolumeFromUrl`` to better support Volume Server inputs.
+- Support in-place reordering for trajectory ``Frame.x/y/z`` arrays for better memory efficiency.
+- Fixed text CIF encoder edge cases (most notably single whitespace not being escaped).
+
+## [v2.0.6] - 2021-06-01
+
+- Add glTF (GLB) and STL support to ``geo-export`` extension.
+- Protein crosslink improvements
+    - Change O-S bond distance to allow for NOS bridges (doi:10.1038/s41586-021-03513-3)
+    - Added NOS-bridges query & improved disulfide-bridges query
+- Fix #178: ``IndexPairBonds`` for non-single residue structures (bug due to atom reordering).
+- Add volumetric color smoothing for MolecularSurface and GaussianSurface representations (#173)
+- Fix nested 3d grid lookup that caused results being overwritten in non-covalent interactions computation.
+- Basic implementation of ``BestDatabaseSequenceMapping`` (parse from CIF, color theme, superposition).
+- Add atom id ranges support to Selection UI.
+
+## [v2.0.5] - 2021-04-26
+
+- Ability to pass ``Canvas3DContext`` to ``PluginContext.fromCanvas``.
+- Relative frame support for ``Canvas3D`` viewport.
+- Fix bug in screenshot copy UI.
+- Add ability to select residues from a list of identifiers to the Selection UI.
+- Fix SSAO bugs when used with ``Canvas3D`` viewport.
+- Support for  full pausing (no draw) rendering: ``Canvas3D.pause(true)``.
+- Add ``MeshBuilder.addMesh``.
+- Add ``Torus`` primitive.
+- Lazy volume loading support.
+- [Breaking] ``Viewer.loadVolumeFromUrl`` signature change.
+    - ``loadVolumeFromUrl(url, format, isBinary, isovalues, entryId)`` => ``loadVolumeFromUrl({ url, format, isBinary }, isovalues, { entryId, isLazy })``
+- Add ``TextureMesh`` support to ``geo-export`` extension.
+
+## [v2.0.4] - 2021-04-20
+
+- [WIP] Mesh export extension
+- ``Structure.eachAtomicHierarchyElement`` (#161)
+- Fixed reading multi-line values in SDF format
+- Fixed Measurements UI labels (#166)
+
+## [v2.0.3] - 2021-04-09
+### Added
+- Support for ``ColorTheme.palette`` designed for providing gradient-like coloring.
+
+### Changed
+- [Breaking] The ``zip`` function is now asynchronous and expects a ``RuntimeContext``. Also added ``Zip()`` returning a ``Task``.
+- [Breaking] Add ``CubeGridFormat`` in ``alpha-orbitals`` extension.
+
+## [v2.0.2] - 2021-03-29
+### Added
+- ``Canvas3D.getRenderObjects``.
+- [WIP] Animate state interpolating, including model trajectories
+
+### Changed
+- Recognise MSE, SEP, TPO, PTR and PCA as non-standard amino-acids.
+
+### Fixed
+- VolumeFromDensityServerCif transform label
+
+
+## [v2.0.1] - 2021-03-23
+### Fixed
+- Exclude tsconfig.commonjs.tsbuildinfo from npm bundle
+
+
+## [v2.0.0] - 2021-03-23
+Too many changes to list as this is the start of the changelog... Notably, default exports are now forbidden.

README.md

@@ -5,15 +5,15 @@
 
 # Mol*
 
-The goal of **Mol\*** (*/'mol-star/*) is to provide a technology stack that will serve as a basis for the next-generation data delivery and analysis tools for macromolecular structure data. This is a collaboration between PDBe and RCSB PDB teams and the development will be open-source and available to anyone who wants to use it for developing visualization tools for macromolecular structure data available from [PDB](https://www.wwpdb.org/) and other institutions.
+The goal of **Mol\*** (*/'mol-star/*) is to provide a technology stack that serves as a basis for the next-generation data delivery and analysis tools for (not only) macromolecular structure data. Mol* development was jointly initiated by PDBe and RCSB PDB to combine and build on the strengths of [LiteMol](https://litemol.org) (developed by PDBe) and [NGL](https://nglviewer.org) (developed by RCSB PDB) viewers.
 
-This particular project is the implementation of this technology (still under development).
+When using Mol*, please cite:
 
-*If you are looking for the "MOLeculAR structure annoTator", that package is now available on NPM as [MolArt](https://www.npmjs.com/package/molart).*
+David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: [Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures](https://doi.org/10.1093/nar/gkab314), *Nucleic Acids Research*, 2021; https://doi.org/10.1093/nar/gkab314.
 
-## Project Overview
+## Project Structure Overview
 
-The core of Mol* currently consists of these modules (see under `src/`):
+The core of Mol* consists of these modules (see under `src/`):
 
 - `mol-task` Computation abstraction with progress tracking and cancellation support.
 - `mol-data` Collections (integer-based sets, interface to columns/tables, etc.)
@@ -29,7 +29,6 @@ The core of Mol* currently consists of these modules (see under `src/`):
 - `mol-gl` A wrapper around WebGL.
 - `mol-canvas3d` A low-level 3d view component. Uses `mol-geo` to generate geometries.
 - `mol-state` State representation tree with state saving and automatic updates.
-- `mol-app` Components for building UIs.
 - `mol-plugin` Allow to define modular Mol* plugin instances utilizing `mol-state` and `mol-canvas3d`.
 - `mol-plugin-state` State transformations, builders, and managers.
 - `mol-plugin-ui` React-based user interface for the Mol* plugin. Some components of the UI are usable outside the main plugin and can be integrated into 3rd party solutions.
@@ -41,7 +40,7 @@ Moreover, the project contains the implementation of `servers`, including
 - `servers/volume` A tool for accessing volumetric experimental data related to molecular structures.
 - `servers/plugin-state` A basic server to store Mol* Plugin states.
 
-The project also contains performance tests (`perf-tests`), `examples`, and basic proof of concept `cli` apps (CIF to BinaryCIF converter and JSON domain annotation to CIF converter).
+The project also contains performance tests (`perf-tests`), `examples`, and `cli` apps (CIF to BinaryCIF converter and JSON domain annotation to CIF converter).
 
 ## Previous Work
 This project builds on experience from previous solutions:
@@ -169,9 +168,6 @@ To get syntax highlighting for shader and graphql files add the following to Vis
 ## Contributing
 Just open an issue or make a pull request. All contributions are welcome.
 
-## Roadmap
-Continually develop this prototype project. As individual modules become stable, make them into standalone libraries.
-
 ## Funding
 Funding sources include but are not limited to:
 * [RCSB PDB](https://www.rcsb.org) funding by a grant [DBI-1338415; PI: SK Burley] from the NSF, the NIH, and the US DoE

docs/interesting-pdb-entries.md

@@ -27,3 +27,9 @@
     * DNA (5D3G)
 * Multiple models with different sets of ligands or missing ligands (1J6T, 1VRC, 2ICY, 1O2F)
 * Long linear sugar chain (4HG6)
+* Anisotropic B-factors/Ellipsoids (1EJG)
+* NOS bridges (LYS-CSO in 7B0L, 6ZWJ, 6ZWH)
+
+Assembly symmetries
+* 5M30 (Assembly 1, C3 local and pseudo)
+* 1RB8 (Assembly 1, I global)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "molstar",
-  "version": "2.0.0-dev.5",
+  "version": "2.2.1",
   "description": "A comprehensive macromolecular library.",
   "homepage": "https://github.com/molstar/molstar#readme",
   "repository": {
@@ -14,6 +14,7 @@
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
     "test": "npm run lint && jest",
+    "jest": "jest",
     "build": "npm run build-tsc && npm run build-extra && npm run build-webpack",
     "build-viewer": "npm run build-tsc && npm run build-extra && npm run build-webpack-viewer",
     "build-tsc": "concurrently \"tsc --incremental\" \"tsc --build tsconfig.commonjs.json --incremental\"",
@@ -26,9 +27,9 @@
     "watch-tsc": "tsc --watch --incremental",
     "watch-servers": "tsc --build tsconfig.commonjs.json --watch --incremental",
     "watch-extra": "cpx \"src/**/*.{scss,html,ico}\" lib/ --watch",
-    "watch-webpack": "webpack -w --mode development --display minimal",
-    "watch-webpack-viewer": "webpack -w --mode development --display errors-only --info-verbosity verbose --config ./webpack.config.viewer.js",
-    "watch-webpack-viewer-debug": "webpack -w --mode development --display errors-only --info-verbosity verbose --config ./webpack.config.viewer.debug.js",
+    "watch-webpack": "webpack -w --mode development --stats minimal",
+    "watch-webpack-viewer": "webpack -w --mode development --stats minimal --config ./webpack.config.viewer.js",
+    "watch-webpack-viewer-debug": "webpack -w --mode development --stats minimal --config ./webpack.config.viewer.debug.js",
     "serve": "http-server -p 1338 -g",
     "model-server": "node lib/commonjs/servers/model/server.js",
     "model-server-watch": "nodemon --watch lib lib/commonjs/servers/model/server.js",
@@ -100,6 +101,7 @@
     "benchmark": "^2.1.4",
     "concurrently": "^5.3.0",
     "cpx2": "^3.0.0",
+    "crypto-browserify": "^3.12.0",
     "css-loader": "^5.0.1",
     "eslint": "^7.15.0",
     "extra-watch-webpack-plugin": "^1.0.3",
@@ -109,15 +111,17 @@
     "http-server": "^0.12.3",
     "jest": "^26.6.3",
     "mini-css-extract-plugin": "^1.3.2",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.0",
+    "path-browserify": "^1.0.1",
     "raw-loader": "^4.0.2",
-    "sass-loader": "^10.1.0",
+    "sass-loader": "^11.1.1",
     "simple-git": "^2.25.0",
+    "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.2.3",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
+    "typescript": "^4.2.4",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0",
     "webpack-version-file-plugin": "^0.4.0"
   },
   "dependencies": {

src/apps/docking-viewer/index.ts

@@ -5,31 +5,32 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import '../../mol-util/polyfill';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
-import './index.html';
-import { PluginContext } from '../../mol-plugin/context';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginSpec } from '../../mol-plugin/spec';
-import { PluginConfig } from '../../mol-plugin/config';
-import { ObjectKeys } from '../../mol-util/type-helpers';
-import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
-import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
 import { Structure } from '../../mol-model/structure';
-import { PluginStateTransform, PluginStateObject as PSO } from '../../mol-plugin-state/objects';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { Task } from '../../mol-task';
-import { StateObject } from '../../mol-state';
-import { ViewportComponent, StructurePreset, ShowButtons } from './viewport';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { PluginStateObject as PSO, PluginStateTransform } from '../../mol-plugin-state/objects';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
+import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginBehaviors } from '../../mol-plugin/behavior';
-import { ColorNames } from '../../mol-util/color/names';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginConfig } from '../../mol-plugin/config';
+import { PluginSpec } from '../../mol-plugin/spec';
+import { StateObject } from '../../mol-state';
+import { Task } from '../../mol-task';
 import { Color } from '../../mol-util/color';
+import { ColorNames } from '../../mol-util/color/names';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import '../../mol-util/polyfill';
+import { ObjectKeys } from '../../mol-util/type-helpers';
+import './index.html';
+import { ShowButtons, StructurePreset, ViewportComponent } from './viewport';
 
 require('mol-plugin-ui/skin/light.scss');
 
 export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
-export { setProductionMode, setDebugMode } from '../../mol-util/debug';
+export { setDebugMode, setProductionMode } from '../../mol-util/debug';
+export { Viewer as DockingViewer };
 
 const DefaultViewerOptions = {
     extensions: ObjectKeys({}),
@@ -53,7 +54,7 @@ const DefaultViewerOptions = {
 };
 
 class Viewer {
-    plugin: PluginContext
+    plugin: PluginUIContext
 
     constructor(elementOrId: string | HTMLElement, colors = [Color(0x992211), Color(0xDDDDDD)], showButtons = true) {
         const o = { ...DefaultViewerOptions, ...{
@@ -70,10 +71,10 @@ class Viewer {
             viewportShowSelectionMode: false,
             viewportShowAnimation: false,
         } };
-        const defaultSpec = DefaultPluginSpec();
+        const defaultSpec = DefaultPluginUISpec();
 
-        const spec: PluginSpec = {
-            actions: [...defaultSpec.actions],
+        const spec: PluginUISpec = {
+            actions: defaultSpec.actions,
             behaviors: [
                 PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci, { mark: false }),
                 PluginSpec.Behavior(PluginBehaviors.Representation.DefaultLociLabelProvider),
@@ -83,7 +84,7 @@ class Viewer {
                 PluginSpec.Behavior(PluginBehaviors.CustomProps.Interactions),
                 PluginSpec.Behavior(PluginBehaviors.CustomProps.SecondaryStructure),
             ],
-            animations: [...defaultSpec.animations || []],
+            animations: defaultSpec.animations,
             customParamEditors: defaultSpec.customParamEditors,
             layout: {
                 initial: {
@@ -91,15 +92,15 @@ class Viewer {
                     showControls: o.layoutShowControls,
                     controlsDisplay: o.layoutControlsDisplay,
                 },
-                controls: {
-                    ...defaultSpec.layout && defaultSpec.layout.controls,
-                    top: o.layoutShowSequence ? undefined : 'none',
-                    bottom: o.layoutShowLog ? undefined : 'none',
-                    left: o.layoutShowLeftPanel ? undefined : 'none',
-                }
             },
             components: {
                 ...defaultSpec.components,
+                controls: {
+                    ...defaultSpec.components?.controls,
+                    top: o.layoutShowSequence ? undefined : 'none',
+                    bottom: o.layoutShowLog ? undefined : 'none',
+                    left: o.layoutShowLeftPanel ? undefined : 'none',
+                },
                 remoteState: o.layoutShowRemoteState ? 'default' : 'none',
                 viewport: {
                     view: ViewportComponent
@@ -210,4 +211,3 @@ const MergeStructures = PluginStateTransform.BuiltIn({
 });
 
 (window as any).DockingViewer = Viewer;
-export { Viewer as DockingViewer };

src/apps/docking-viewer/viewport.tsx

@@ -4,24 +4,23 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as React from 'react';
-import { PluginUIComponent } from '../../mol-plugin-ui/base';
-import { Viewport, ViewportControls } from '../../mol-plugin-ui/viewport';
-import { BackgroundTaskProgress } from '../../mol-plugin-ui/task';
-import { LociLabels } from '../../mol-plugin-ui/controls';
-import { Toasts } from '../../mol-plugin-ui/toast';
-import { Button } from '../../mol-plugin-ui/controls/common';
-import { StructureRepresentationPresetProvider, presetStaticComponent } from '../../mol-plugin-state/builder/structure/representation-preset';
-import { StateObjectRef } from '../../mol-state';
-import { StructureSelectionQueries, StructureSelectionQuery } from '../../mol-plugin-state/helpers/structure-selection-query';
-import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
 import { InteractionsRepresentationProvider } from '../../mol-model-props/computed/representations/interactions';
 import { InteractionTypeColorThemeProvider } from '../../mol-model-props/computed/themes/interaction-type';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
+import { presetStaticComponent, StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
+import { StructureSelectionQueries, StructureSelectionQuery } from '../../mol-plugin-state/helpers/structure-selection-query';
 import { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
-import { Color } from '../../mol-util/color';
+import { PluginUIComponent } from '../../mol-plugin-ui/base';
+import { LociLabels } from '../../mol-plugin-ui/controls';
+import { Button } from '../../mol-plugin-ui/controls/common';
+import { BackgroundTaskProgress } from '../../mol-plugin-ui/task';
+import { Toasts } from '../../mol-plugin-ui/toast';
+import { Viewport, ViewportControls } from '../../mol-plugin-ui/viewport';
+import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginConfig } from '../../mol-plugin/config';
+import { PluginContext } from '../../mol-plugin/context';
+import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
+import { StateObjectRef } from '../../mol-state';
+import { Color } from '../../mol-util/color';
 
 function shinyStyle(plugin: PluginContext) {
     return PluginCommands.Canvas3D.SetSettings(plugin, { settings: {

src/apps/viewer/embedded.html

@@ -21,7 +21,7 @@
         <script type="text/javascript" src="./molstar.js"></script>
         <script type="text/javascript">
             var viewer = new molstar.Viewer('app', {
-                layoutIsExpanded: false,
+                layoutIsExpanded: true,
                 layoutShowControls: false,
                 layoutShowRemoteState: false,
                 layoutShowSequence: true,
@@ -37,6 +37,7 @@
             });
             viewer.loadPdb('7bv2');
             viewer.loadEmdb('EMD-30210', { detail: 6 });
+
             // viewer.loadAllModelsOrAssemblyFromUrl('https://cs.litemol.org/5ire/full', 'mmcif', false, { representationParams: { theme: { globalName: 'operator-name' } } })
         </script>
     </body>

src/apps/viewer/index.html

@@ -48,18 +48,14 @@
             var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
             if (debugMode) molstar.setDebugMode(debugMode, debugMode);
 
-            var disableAntialiasing = getParam('disable-antialiasing', '[^&]+').trim() === '1';
-            var pixelScale = parseFloat(getParam('pixel-scale', '[^&]+').trim() || '1');
-            var disableWboit = getParam('disable-wboit', '[^&]+').trim() === '1';
             var hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
+            var collapseLeftPanel = getParam('collapse-left-panel', '[^&]+').trim() === '1';
             var pdbProvider = getParam('pdb-provider', '[^&]+').trim().toLowerCase();
             var emdbProvider = getParam('emdb-provider', '[^&]+').trim().toLowerCase();
             var viewer = new molstar.Viewer('app', {
-                disableAntialiasing: disableAntialiasing,
-                pixelScale: pixelScale,
-                enableWboit: !disableWboit,
                 layoutShowControls: !hideControls,
                 viewportShowExpand: false,
+                collapseLeftPanel: collapseLeftPanel,
                 pdbProvider: pdbProvider || 'pdbe',
                 emdbProvider: emdbProvider || 'pdbe',
             });

src/apps/viewer/index.ts

@@ -5,43 +5,44 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import '../../mol-util/polyfill';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
-import './index.html';
-import './embedded.html';
-import './favicon.ico';
-import { PluginContext } from '../../mol-plugin/context';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginSpec } from '../../mol-plugin/spec';
-import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
-import { PluginConfig } from '../../mol-plugin/config';
-import { CellPack } from '../../extensions/cellpack';
-import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
-import { PDBeStructureQualityReport } from '../../extensions/pdbe';
-import { Asset } from '../../mol-util/assets';
-import { ObjectKeys } from '../../mol-util/type-helpers';
-import { PluginState } from '../../mol-plugin/state';
-import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
-import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
-import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
 import { ANVILMembraneOrientation } from '../../extensions/anvil/behavior';
+import { CellPack } from '../../extensions/cellpack';
 import { DnatcoConfalPyramids } from '../../extensions/dnatco';
 import { G3DFormat, G3dProvider } from '../../extensions/g3d/format';
+import { Mp4Export } from '../../extensions/mp4-export';
+import { GeometryExport } from '../../extensions/geo-export';
+import { PDBeStructureQualityReport } from '../../extensions/pdbe';
+import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
+import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
+import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
+import { StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
 import { DataFormatProvider } from '../../mol-plugin-state/formats/provider';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
 import { BuildInVolumeFormat } from '../../mol-plugin-state/formats/volume';
-import { Color } from '../../mol-util/color';
-import { StateObjectSelector } from '../../mol-state';
+import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
 import { PluginStateObject } from '../../mol-plugin-state/objects';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
-import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
-import { Mp4Export } from '../../extensions/mp4-export';
-import { StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
+import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginConfig } from '../../mol-plugin/config';
+import { PluginSpec } from '../../mol-plugin/spec';
+import { PluginState } from '../../mol-plugin/state';
+import { StateObjectSelector } from '../../mol-state';
+import { Asset } from '../../mol-util/assets';
+import { Color } from '../../mol-util/color';
+import '../../mol-util/polyfill';
+import { ObjectKeys } from '../../mol-util/type-helpers';
+import './embedded.html';
+import './favicon.ico';
+import './index.html';
 
 require('mol-plugin-ui/skin/light.scss');
 
 export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
-export { setProductionMode, setDebugMode } from '../../mol-util/debug';
+export { setDebugMode, setProductionMode } from '../../mol-util/debug';
 
 const CustomFormats = [
     ['g3d', G3dProvider] as const
@@ -55,7 +56,8 @@ const Extensions = {
     'rcsb-validation-report': PluginSpec.Behavior(RCSBValidationReport),
     'anvil-membrane-orientation': PluginSpec.Behavior(ANVILMembraneOrientation),
     'g3d': PluginSpec.Behavior(G3DFormat),
-    'mp4-export': PluginSpec.Behavior(Mp4Export)
+    'mp4-export': PluginSpec.Behavior(Mp4Export),
+    'geo-export': PluginSpec.Behavior(GeometryExport)
 };
 
 const DefaultViewerOptions = {
@@ -68,6 +70,7 @@ const DefaultViewerOptions = {
     layoutShowSequence: true,
     layoutShowLog: true,
     layoutShowLeftPanel: true,
+    collapseLeftPanel: false,
     disableAntialiasing: false,
     pixelScale: 1,
     enableWboit: true,
@@ -86,14 +89,14 @@ const DefaultViewerOptions = {
 type ViewerOptions = typeof DefaultViewerOptions;
 
 export class Viewer {
-    plugin: PluginContext
+    plugin: PluginUIContext
 
     constructor(elementOrId: string | HTMLElement, options: Partial<ViewerOptions> = {}) {
         const o = { ...DefaultViewerOptions, ...options };
-        const defaultSpec = DefaultPluginSpec();
+        const defaultSpec = DefaultPluginUISpec();
 
-        const spec: PluginSpec = {
-            actions: [...defaultSpec.actions],
+        const spec: PluginUISpec = {
+            actions: defaultSpec.actions,
             behaviors: [
                 ...defaultSpec.behaviors,
                 ...o.extensions.map(e => Extensions[e]),
@@ -106,16 +109,22 @@ export class Viewer {
                     isExpanded: o.layoutIsExpanded,
                     showControls: o.layoutShowControls,
                     controlsDisplay: o.layoutControlsDisplay,
+                    regionState: {
+                        bottom: 'full',
+                        left: o.collapseLeftPanel ? 'collapsed' : 'full',
+                        right: 'full',
+                        top: 'full',
+                    }
                 },
-                controls: {
-                    ...defaultSpec.layout && defaultSpec.layout.controls,
-                    top: o.layoutShowSequence ? undefined : 'none',
-                    bottom: o.layoutShowLog ? undefined : 'none',
-                    left: o.layoutShowLeftPanel ? undefined : 'none',
-                }
             },
             components: {
                 ...defaultSpec.components,
+                controls: {
+                    ...defaultSpec.components?.controls,
+                    top: o.layoutShowSequence ? undefined : 'none',
+                    bottom: o.layoutShowLog ? undefined : 'none',
+                    left: o.layoutShowLeftPanel ? undefined : 'none',
+                },
                 remoteState: o.layoutShowRemoteState ? 'default' : 'none',
             },
             config: [
@@ -234,28 +243,81 @@ export class Viewer {
         }));
     }
 
-    async loadVolumeFromUrl(url: string, format: BuildInVolumeFormat, isBinary: boolean, isovalues: VolumeIsovalueInfo[], entryId?: string) {
+    /**
+     * @example Load X-ray density from volume server
+        viewer.loadVolumeFromUrl({
+            url: 'https://www.ebi.ac.uk/pdbe/densities/x-ray/1tqn/cell?detail=3',
+            format: 'dscif',
+            isBinary: true
+        }, [{
+            type: 'relative',
+            value: 1.5,
+            color: 0x3362B2
+        }, {
+            type: 'relative',
+            value: 3,
+            color: 0x33BB33,
+            volumeIndex: 1
+        }, {
+            type: 'relative',
+            value: -3,
+            color: 0xBB3333,
+            volumeIndex: 1
+        }], {
+            entryId: ['2FO-FC', 'FO-FC'],
+            isLazy: true
+        });
+     * *********************
+     * @example Load EM density from volume server
+        viewer.loadVolumeFromUrl({
+            url: 'https://maps.rcsb.org/em/emd-30210/cell?detail=6',
+            format: 'dscif',
+            isBinary: true
+        }, [{
+            type: 'relative',
+            value: 1,
+            color: 0x3377aa
+        }], {
+            entryId: 'EMD-30210',
+            isLazy: true
+        });
+     */
+    async loadVolumeFromUrl({ url, format, isBinary }: { url: string, format: BuildInVolumeFormat, isBinary: boolean }, isovalues: VolumeIsovalueInfo[], options?: { entryId?: string | string[], isLazy?: boolean }) {
         const plugin = this.plugin;
 
         if (!plugin.dataFormats.get(format)) {
             throw new Error(`Unknown density format: ${format}`);
         }
 
+        if (options?.isLazy) {
+            const update = this.plugin.build();
+            update.toRoot().apply(StateTransforms.Data.LazyVolume, {
+                url,
+                format,
+                entryId: options?.entryId,
+                isBinary,
+                isovalues: isovalues.map(v => ({ alpha: 1, volumeIndex: 0, ...v }))
+            });
+            return update.commit();
+        }
+
         return plugin.dataTransaction(async () => {
-            const data = await plugin.builders.data.download({ url, isBinary, label: entryId }, { state: { isGhost: true } });
+            const data = await plugin.builders.data.download({ url, isBinary }, { state: { isGhost: true } });
 
-            const parsed = await plugin.dataFormats.get(format)!.parse(plugin, data, { entryId });
-            const volume = (parsed.volume || parsed.volumes[0]) as StateObjectSelector<PluginStateObject.Volume.Data>;
-            if (!volume?.isOk) throw new Error('Failed to parse any volume.');
+            const parsed = await plugin.dataFormats.get(format)!.parse(plugin, data, { entryId: options?.entryId });
+            const firstVolume = (parsed.volume || parsed.volumes[0]) as StateObjectSelector<PluginStateObject.Volume.Data>;
+            if (!firstVolume?.isOk) throw new Error('Failed to parse any volume.');
 
-            const repr = plugin.build().to(volume);
+            const repr = plugin.build();
             for (const iso of isovalues) {
-                repr.apply(StateTransforms.Representation.VolumeRepresentation3D, createVolumeRepresentationParams(this.plugin, volume.data!, {
-                    type: 'isosurface',
-                    typeParams: { alpha: iso.alpha ?? 1, isoValue: iso.type === 'absolute' ?  { kind: 'absolute', absoluteValue: iso.value } : { kind: 'relative', relativeValue: iso.value } },
-                    color: 'uniform',
-                    colorParams: { value: iso.color }
-                }));
+                repr
+                    .to(parsed.volumes?.[iso.volumeIndex ?? 0] ?? parsed.volume)
+                    .apply(StateTransforms.Representation.VolumeRepresentation3D, createVolumeRepresentationParams(this.plugin, firstVolume.data!, {
+                        type: 'isosurface',
+                        typeParams: { alpha: iso.alpha ?? 1, isoValue: iso.type === 'absolute' ? { kind: 'absolute', absoluteValue: iso.value } : { kind: 'relative', relativeValue: iso.value } },
+                        color: 'uniform',
+                        colorParams: { value: iso.color }
+                    }));
             }
 
             await repr.commit();
@@ -275,5 +337,6 @@ export interface VolumeIsovalueInfo {
     type: 'absolute' | 'relative',
     value: number,
     color: Color,
-    alpha?: number
+    alpha?: number,
+    volumeIndex?: number
 }

src/cli/state-docs/index.ts

@@ -18,7 +18,6 @@ _.StateTransforms.Data.Download.id;
 
 // Empty plugin context
 const ctx = new PluginContext({
-    actions: [],
     behaviors: []
 });
 

src/examples/alpha-orbitals/controls.tsx

@@ -4,7 +4,6 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { AlphaOrbitalsExample } from '.';
 import { ParameterControls } from '../../mol-plugin-ui/controls/parameters';

src/examples/alpha-orbitals/index.ts

@@ -4,25 +4,25 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { BehaviorSubject } from 'rxjs';
+import { debounceTime, skip } from 'rxjs/operators';
+import { AlphaOrbital, Basis } from '../../extensions/alpha-orbitals/data-model';
 import { SphericalBasisOrder } from '../../extensions/alpha-orbitals/spherical-functions';
 import { BasisAndOrbitals, CreateOrbitalDensityVolume, CreateOrbitalRepresentation3D, CreateOrbitalVolume, StaticBasisAndOrbitals } from '../../extensions/alpha-orbitals/transforms';
-import { createPluginAsync } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
+import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
 import { PluginStateObject } from '../../mol-plugin-state/objects';
+import { createPluginAsync } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
+import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginConfig } from '../../mol-plugin/config';
-import { PluginContext } from '../../mol-plugin/context';
 import { StateObjectSelector, StateTransformer } from '../../mol-state';
 import { Color } from '../../mol-util/color';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition } from '../../mol-util/param-definition';
 import { mountControls } from './controls';
 import { DemoMoleculeSDF, DemoOrbitals } from './example-data';
-import { BehaviorSubject } from 'rxjs';
-import { debounceTime, skip } from 'rxjs/operators';
 import './index.html';
-import { Basis, AlphaOrbital } from '../../extensions/alpha-orbitals/data-model';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
 require('mol-plugin-ui/skin/light.scss');
 
 interface DemoInput {
@@ -50,10 +50,10 @@ type Selectors = {
 }
 
 export class AlphaOrbitalsExample {
-    plugin: PluginContext;
+    plugin: PluginUIContext;
 
     async init(target: string | HTMLElement) {
-        const defaultSpec = DefaultPluginSpec();
+        const defaultSpec = DefaultPluginUISpec();
         this.plugin = await createPluginAsync(typeof target === 'string' ? document.getElementById(target)! : target, {
             ...defaultSpec,
             layout: {
@@ -61,15 +61,13 @@ export class AlphaOrbitalsExample {
                     isExpanded: false,
                     showControls: false
                 },
-                controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' },
             },
             components: {
-                viewport: {
-                    canvas3d: {
-                        camera: {
-                            helper: { axes: { name: 'off', params: { } } }
-                        }
-                    }
+                controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' },
+            },
+            canvas3d: {
+                camera: {
+                    helper: { axes: { name: 'off', params: { } } }
                 }
             },
             config: [
@@ -176,7 +174,8 @@ export class AlphaOrbitalsExample {
             kind,
             relativeIsovalue: this.state.value.isoValue,
             pickable: false,
-            xrayShaded: true
+            xrayShaded: true,
+            tryUseGpu: false
         };
     }
 

src/examples/basic-wrapper/controls.tsx

@@ -5,7 +5,6 @@
  */
 
 import { PluginUIComponent } from '../../mol-plugin-ui/base';
-import * as React from 'react';
 
 export class CustomToastMessage extends PluginUIComponent {
     render() {

src/examples/basic-wrapper/custom-theme.ts

@@ -0,0 +1,51 @@
+import { isPositionLocation } from '../../mol-geo/util/location-iterator';
+import { Vec3 } from '../../mol-math/linear-algebra';
+import { ColorTheme } from '../../mol-theme/color';
+import { ThemeDataContext } from '../../mol-theme/theme';
+import { Color } from '../../mol-util/color';
+import { ColorNames } from '../../mol-util/color/names';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+
+export function CustomColorTheme(
+    ctx: ThemeDataContext,
+    props: PD.Values<{}>
+): ColorTheme<{}> {
+    const { radius, center } = ctx.structure?.boundary.sphere!;
+    const radiusSq = Math.max(radius * radius, 0.001);
+    const scale = ColorTheme.PaletteScale;
+
+    return {
+        factory: CustomColorTheme,
+        granularity: 'vertex',
+        color: location => {
+            if (!isPositionLocation(location)) return ColorNames.black;
+            const dist = Vec3.squaredDistance(location.position, center);
+            const t = Math.min(dist / radiusSq, 1);
+            return ((t * scale) | 0) as Color;
+        },
+        palette: {
+            filter: 'nearest',
+            colors: [
+                ColorNames.red,
+                ColorNames.pink,
+                ColorNames.violet,
+                ColorNames.orange,
+                ColorNames.yellow,
+                ColorNames.green,
+                ColorNames.blue
+            ]
+        },
+        props: props,
+        description: '',
+    };
+}
+
+export const CustomColorThemeProvider: ColorTheme.Provider<{}, 'basic-wrapper-custom-color-theme'> = {
+    name: 'basic-wrapper-custom-color-theme',
+    label: 'Custom Color Theme',
+    category: ColorTheme.Category.Misc,
+    factory: CustomColorTheme,
+    getParams: () => ({}),
+    defaultValues: { },
+    isApplicable: (ctx: ThemeDataContext) => true,
+};

src/examples/basic-wrapper/index.html

@@ -97,6 +97,7 @@
             addHeader('Misc');
 
             addControl('Apply Stripes', () => BasicMolStarWrapper.coloring.applyStripes());
+            addControl('Apply Custom Theme', () => BasicMolStarWrapper.coloring.applyCustomTheme());
             addControl('Default Coloring', () => BasicMolStarWrapper.coloring.applyDefault());
 
             addHeader('Interactivity');

src/examples/basic-wrapper/index.ts

@@ -4,39 +4,37 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { PDBeStructureQualityReport } from '../../extensions/pdbe';
 import { EmptyLoci } from '../../mol-model/loci';
 import { StructureSelection } from '../../mol-model/structure';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
 import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in/model-index';
 import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
 import { Script } from '../../mol-script/script';
+import { Asset } from '../../mol-util/assets';
 import { Color } from '../../mol-util/color';
 import { StripedResidues } from './coloring';
 import { CustomToastMessage } from './controls';
+import { CustomColorThemeProvider } from './custom-theme';
 import './index.html';
 import { buildStaticSuperposition, dynamicSuperpositionTest, StaticSuperpositionTestData } from './superposition';
-import { PDBeStructureQualityReport } from '../../extensions/pdbe';
-import { Asset } from '../../mol-util/assets';
 require('mol-plugin-ui/skin/light.scss');
 
 type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
 
 class BasicWrapper {
-    plugin: PluginContext;
+    plugin: PluginUIContext;
 
     init(target: string | HTMLElement) {
         this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
-            ...DefaultPluginSpec(),
+            ...DefaultPluginUISpec(),
             layout: {
                 initial: {
                     isExpanded: false,
                     showControls: false
-                },
-                controls: {
-                    // left: 'none'
                 }
             },
             components: {
@@ -45,6 +43,7 @@ class BasicWrapper {
         });
 
         this.plugin.representation.structure.themes.colorThemeRegistry.add(StripedResidues.colorThemeProvider!);
+        this.plugin.representation.structure.themes.colorThemeRegistry.add(CustomColorThemeProvider);
         this.plugin.managers.lociLabels.addProvider(StripedResidues.labelProvider!);
         this.plugin.customModelProperties.register(StripedResidues.propertyProvider, true);
     }
@@ -106,6 +105,13 @@ class BasicWrapper {
                 }
             });
         },
+        applyCustomTheme: async () => {
+            this.plugin.dataTransaction(async () => {
+                for (const s of this.plugin.managers.structure.hierarchy.current.structures) {
+                    await this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: CustomColorThemeProvider.name as any });
+                }
+            });
+        },
         applyDefault: async () => {
             this.plugin.dataTransaction(async () => {
                 for (const s of this.plugin.managers.structure.hierarchy.current.structures) {

src/examples/lighting/index.ts

@@ -5,13 +5,13 @@
  */
 
 import { Canvas3DProps } from '../../mol-canvas3d/canvas3d';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
 import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
-import './index.html';
 import { Asset } from '../../mol-util/assets';
+import './index.html';
 require('mol-plugin-ui/skin/light.scss');
 
 type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
@@ -62,7 +62,7 @@ const Canvas3DPresets = {
 type Canvas3DPreset = keyof typeof Canvas3DPresets
 
 class LightingDemo {
-    plugin: PluginContext;
+    plugin: PluginUIContext;
 
     private radius = 5;
     private bias = 1.1;
@@ -70,12 +70,14 @@ class LightingDemo {
 
     init(target: string | HTMLElement) {
         this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
-            ...DefaultPluginSpec(),
+            ...DefaultPluginUISpec(),
             layout: {
                 initial: {
                     isExpanded: false,
                     showControls: false
                 },
+            },
+            components: {
                 controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' }
             }
         });

src/examples/proteopedia-wrapper/index.ts

@@ -6,15 +6,15 @@
 
 import * as ReactDOM from 'react-dom';
 import { Canvas3DProps, DefaultCanvas3DParams } from '../../mol-canvas3d/canvas3d';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
 import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in/model-index';
 import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { PluginStateObject, PluginStateObject as PSO } from '../../mol-plugin-state/objects';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { CreateVolumeStreamingInfo, InitVolumeStreaming } from '../../mol-plugin/behavior/dynamic/volume-streaming/transformers';
 import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
 import { PluginState } from '../../mol-plugin/state';
 import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
 import { StateBuilder, StateObject, StateSelection } from '../../mol-state';
@@ -41,13 +41,13 @@ class MolStarProteopediaWrapper {
         modelInfo: this._ev<ModelInfo>()
     };
 
-    plugin: PluginContext;
+    plugin: PluginUIContext;
 
     init(target: string | HTMLElement, options?: {
         customColorList?: number[]
     }) {
         this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
-            ...DefaultPluginSpec(),
+            ...DefaultPluginUISpec(),
             animations: [
                 AnimateModelIndex
             ],

src/examples/proteopedia-wrapper/ui/controls.tsx

@@ -4,14 +4,13 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { PluginUIContext } from '../../../mol-plugin-ui/context';
 import { PluginContextContainer } from '../../../mol-plugin-ui/plugin';
 import { TransformUpdaterControl } from '../../../mol-plugin-ui/state/update-transform';
-import { PluginContext } from '../../../mol-plugin/context';
 import { StateElements } from '../helpers';
 
-export function volumeStreamingControls(plugin: PluginContext, parent: Element) {
+export function volumeStreamingControls(plugin: PluginUIContext, parent: Element) {
     ReactDOM.render(<PluginContextContainer plugin={plugin}>
         <TransformUpdaterControl nodeRef={StateElements.VolumeStreaming} />
     </PluginContextContainer>, parent);

src/extensions/alpha-orbitals/data-model.ts

@@ -9,6 +9,7 @@ import { Grid } from '../../mol-model/volume';
 import { SphericalBasisOrder } from './spherical-functions';
 import { Box3D, RegularGrid3d } from '../../mol-math/geometry';
 import { arrayMin, arrayMax, arrayRms, arrayMean } from '../../mol-util/array';
+import { ModelFormat } from '../../mol-model-formats/format';
 
 // Note: generally contracted gaussians are currently not supported.
 export interface SphericalElectronShell {
@@ -59,6 +60,17 @@ export interface CubeGrid {
     isovalues?: { negative?: number; positive?: number };
 }
 
+export type CubeGridFormat = ModelFormat<CubeGrid>;
+
+// eslint-disable-next-line
+export function CubeGridFormat(grid: CubeGrid): CubeGridFormat {
+    return { name: 'custom grid', kind: 'cube-grid', data: grid };
+}
+
+export function isCubeGridData(f: ModelFormat): f is CubeGridFormat {
+    return f.kind === 'cube-grid';
+}
+
 export function initCubeGrid(params: CubeGridComputationParams): CubeGridInfo {
     const geometry = params.basis.atoms.map(a => a.center);
     const { gridSpacing: spacing, boxExpand: expand } = params;

src/extensions/alpha-orbitals/transforms.ts

@@ -17,7 +17,7 @@ import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers
 import { StateTransformer } from '../../mol-state';
 import { Theme } from '../../mol-theme/theme';
 import { VolumeRepresentation3DHelpers } from '../../mol-plugin-state/transforms/representation';
-import { AlphaOrbital, Basis, CubeGrid } from './data-model';
+import { AlphaOrbital, Basis, CubeGrid, CubeGridFormat, isCubeGridData } from './data-model';
 import { createSphericalCollocationDensityGrid } from './density';
 import { Tensor } from '../../mol-math/linear-algebra';
 
@@ -114,7 +114,7 @@ export const CreateOrbitalVolume = PluginStateTransform.BuiltIn({
             }, a.data.orbitals[params.index], plugin.canvas3d?.webgl).runInContext(ctx);
             const volume: Volume = {
                 grid: data.grid,
-                sourceData: { name: 'custom grid', kind: 'alpha-orbitals', data },
+                sourceData: CubeGridFormat(data),
                 customProperties: new CustomProperties(),
                 _propertyData: Object.create(null),
             };
@@ -146,7 +146,7 @@ export const CreateOrbitalDensityVolume = PluginStateTransform.BuiltIn({
             }, a.data.orbitals, plugin.canvas3d?.webgl).runInContext(ctx);
             const volume: Volume = {
                 grid: data.grid,
-                sourceData: { name: 'custom grid', kind: 'alpha-orbitals', data },
+                sourceData: CubeGridFormat(data),
                 customProperties: new CustomProperties(),
                 _propertyData: Object.create(null),
             };
@@ -172,7 +172,8 @@ export const CreateOrbitalRepresentation3D = PluginStateTransform.BuiltIn({
         color: PD.Color(ColorNames.blue),
         alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
         xrayShaded: PD.Boolean(false),
-        pickable: PD.Boolean(true)
+        pickable: PD.Boolean(true),
+        tryUseGpu: PD.Boolean(true)
     }
 })({
     canAutoUpdate() {
@@ -190,7 +191,7 @@ export const CreateOrbitalRepresentation3D = PluginStateTransform.BuiltIn({
             repr.setTheme(Theme.create(plugin.representation.volume.themes, { volume: a.data }, params));
             await repr.createOrUpdate(props, a.data).runInContext(ctx);
             repr.setState({ pickable: srcParams.pickable });
-            return new PluginStateObject.Volume.Representation3D({ repr, source: a }, { label: provider.label, description: VolumeRepresentation3DHelpers.getDescription(props) });
+            return new PluginStateObject.Volume.Representation3D({ repr, sourceData: a.data }, { label: provider.label, description: VolumeRepresentation3DHelpers.getDescription(props) });
         });
     },
     update({ a, b, newParams: srcParams }, plugin: PluginContext) {
@@ -200,6 +201,7 @@ export const CreateOrbitalRepresentation3D = PluginStateTransform.BuiltIn({
             const props = { ...b.data.repr.props, ...newParams.type.params };
             b.data.repr.setTheme(Theme.create(plugin.representation.volume.themes, { volume: a.data }, newParams));
             await b.data.repr.createOrUpdate(props, a.data).runInContext(ctx);
+            b.data.sourceData = a.data;
             b.data.repr.setState({ pickable: srcParams.pickable });
             b.description = VolumeRepresentation3DHelpers.getDescription(props);
             return StateTransformer.UpdateResult.Updated;
@@ -208,9 +210,9 @@ export const CreateOrbitalRepresentation3D = PluginStateTransform.BuiltIn({
 });
 
 function volumeParams(plugin: PluginContext, volume: PluginStateObject.Volume.Data, params: StateTransformer.Params<typeof CreateOrbitalRepresentation3D>) {
-    if (volume.data.sourceData.kind !== 'alpha-orbitals') throw new Error('Invalid data source kind.');
+    if (!isCubeGridData(volume.data.sourceData)) throw new Error('Invalid data source kind.');
 
-    const { isovalues } = volume.data.sourceData.data as CubeGrid;
+    const { isovalues } = volume.data.sourceData.data;
     if (!isovalues) throw new Error('Isovalues are not computed.');
 
     const value = isovalues[params.kind];
@@ -229,7 +231,7 @@ function volumeParams(plugin: PluginContext, volume: PluginStateObject.Volume.Da
         colorParams: { value: params.color }
     } : {
         type: 'isosurface',
-        typeParams: { isoValue: { kind: 'absolute', absoluteValue: (value ?? 1000) * params.relativeIsovalue }, alpha: params.alpha, xrayShaded: params.xrayShaded },
+        typeParams: { isoValue: { kind: 'absolute', absoluteValue: (value ?? 1000) * params.relativeIsovalue }, alpha: params.alpha, xrayShaded: params.xrayShaded, tryUseGpu: params.tryUseGpu },
         color: 'uniform',
         colorParams: { value: params.color }
     });

src/extensions/anvil/algorithm.ts

@@ -5,10 +5,10 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Structure, StructureElement, StructureProperties } from '../../mol-model/structure';
+import { Structure, StructureElement, StructureProperties, Unit } from '../../mol-model/structure';
 import { Task, RuntimeContext } from '../../mol-task';
 import { CentroidHelper } from '../../mol-math/geometry/centroid-helper';
-import { AccessibleSurfaceAreaProvider } from '../../mol-model-props/computed/accessible-surface-area';
+import { AccessibleSurfaceAreaParams } from '../../mol-model-props/computed/accessible-surface-area';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { getElementMoleculeType } from '../../mol-model/structure/util';
 import { MoleculeType } from '../../mol-model/structure/model/types';
@@ -16,6 +16,10 @@ import { AccessibleSurfaceArea } from '../../mol-model-props/computed/accessible
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { MembraneOrientation } from './prop';
 
+const LARGE_CA_THRESHOLD = 5000;
+const DEFAULT_UPDATE_INTERVAL = 10;
+const LARGE_CA_UPDATE_INTERVAL = 1;
+
 interface ANVILContext {
     structure: Structure,
 
@@ -24,19 +28,23 @@ interface ANVILContext {
     minThickness: number,
     maxThickness: number,
     asaCutoff: number,
+    adjust: number,
 
     offsets: ArrayLike<number>,
-    exposed: ArrayLike<boolean>,
+    exposed: ArrayLike<number>,
+    hydrophobic: ArrayLike<boolean>,
     centroid: Vec3,
-    extent: number
+    extent: number,
+    large: boolean
 };
 
 export const ANVILParams = {
-    numberOfSpherePoints: PD.Numeric(120, { min: 35, max: 700, step: 1 }, { description: 'Number of spheres/directions to test for membrane placement. Original value is 350.' }),
+    numberOfSpherePoints: PD.Numeric(140, { min: 35, max: 700, step: 1 }, { description: 'Number of spheres/directions to test for membrane placement. Original value is 350.' }),
     stepSize: PD.Numeric(1, { min: 0.25, max: 4, step: 0.25 }, { description: 'Thickness of membrane slices that will be tested' }),
     minThickness: PD.Numeric(20, { min: 10, max: 30, step: 1}, { description: 'Minimum membrane thickness used during refinement' }),
     maxThickness: PD.Numeric(40, { min: 30, max: 50, step: 1}, { description: 'Maximum membrane thickness used during refinement' }),
-    asaCutoff: PD.Numeric(40, { min: 10, max: 100, step: 1 }, { description: 'Absolute ASA cutoff above which residues will be considered' })
+    asaCutoff: PD.Numeric(40, { min: 10, max: 100, step: 1 }, { description: 'Relative ASA cutoff above which residues will be considered' }),
+    adjust: PD.Numeric(14, { min: 0, max: 30, step: 1 }, { description: 'Minimum length of membrane-spanning regions (original values: 14 for alpha-helices and 5 for beta sheets). Set to 0 to not optimize membrane thickness.' })
 };
 export type ANVILParams = typeof ANVILParams
 export type ANVILProps = PD.Values<ANVILParams>
@@ -54,22 +62,33 @@ export function computeANVIL(structure: Structure, props: ANVILProps) {
     });
 }
 
+// avoiding namespace lookup improved performance in Chrome (Aug 2020)
+const v3add = Vec3.add;
+const v3clone = Vec3.clone;
+const v3create = Vec3.create;
+const v3distance = Vec3.distance;
+const v3dot = Vec3.dot;
+const v3magnitude = Vec3.magnitude;
+const v3normalize = Vec3.normalize;
+const v3scale = Vec3.scale;
+const v3scaleAndAdd = Vec3.scaleAndAdd;
+const v3set = Vec3.set;
+const v3squaredDistance = Vec3.squaredDistance;
+const v3sub = Vec3.sub;
+const v3zero = Vec3.zero;
 
 const centroidHelper = new CentroidHelper();
-function initialize(structure: Structure, props: ANVILProps): ANVILContext {
+async function initialize(structure: Structure, props: ANVILProps, accessibleSurfaceArea: AccessibleSurfaceArea): Promise<ANVILContext> {
     const l = StructureElement.Location.create(structure);
-    const { label_atom_id, x, y, z } = StructureProperties.atom;
-    const elementCount = structure.polymerResidueCount;
+    const { label_atom_id, label_comp_id, x, y, z } = StructureProperties.atom;
+    const asaCutoff = props.asaCutoff / 100;
     centroidHelper.reset();
 
-    let offsets = new Int32Array(elementCount);
-    let exposed = new Array<boolean>(elementCount);
+    const offsets = new Array<number>();
+    const exposed = new Array<number>();
+    const hydrophobic = new Array<boolean>();
 
-    const accessibleSurfaceArea = structure && AccessibleSurfaceAreaProvider.get(structure);
-    const asa = accessibleSurfaceArea.value!;
-
-    const vec = Vec3();
-    let m = 0;
+    const vec = v3zero();
     for (let i = 0, il = structure.units.length; i < il; ++i) {
         const unit = structure.units[i];
         const { elements } = unit;
@@ -85,64 +104,82 @@ function initialize(structure: Structure, props: ANVILProps): ANVILContext {
             }
 
             // only CA is considered for downstream operations
-            if (label_atom_id(l) !== 'CA') {
+            if (label_atom_id(l) !== 'CA' && label_atom_id(l) !== 'BB') {
+                continue;
+            }
+
+            // original ANVIL only considers canonical amino acids
+            if (!MaxAsa[label_comp_id(l)]) {
                 continue;
             }
 
             // while iterating use first pass to compute centroid
-            Vec3.set(vec, x(l), y(l), z(l));
+            v3set(vec, x(l), y(l), z(l));
             centroidHelper.includeStep(vec);
 
             // keep track of offsets and exposed state to reuse
-            offsets[m] = structure.serialMapping.getSerialIndex(l.unit, l.element);
-            exposed[m] = AccessibleSurfaceArea.getValue(l, asa) > props.asaCutoff;
-
-            m++;
+            offsets.push(structure.serialMapping.getSerialIndex(l.unit, l.element));
+            if (AccessibleSurfaceArea.getValue(l, accessibleSurfaceArea) / MaxAsa[label_comp_id(l)] > asaCutoff) {
+                exposed.push(structure.serialMapping.getSerialIndex(l.unit, l.element));
+                hydrophobic.push(isHydrophobic(label_comp_id(l)));
+            }
         }
     }
 
-    // omit potentially empty tail1
-    offsets = offsets.slice(0, m);
-    exposed = exposed.slice(0, m);
-
     // calculate centroid and extent
     centroidHelper.finishedIncludeStep();
-    const centroid = centroidHelper.center;
+    const centroid = v3clone(centroidHelper.center);
     for (let k = 0, kl = offsets.length; k < kl; k++) {
         setLocation(l, structure, offsets[k]);
-        Vec3.set(vec, x(l), y(l), z(l));
+        v3set(vec, x(l), y(l), z(l));
         centroidHelper.radiusStep(vec);
     }
     const extent = 1.2 * Math.sqrt(centroidHelper.radiusSq);
 
     return {
         ...props,
-        structure: structure,
+        structure,
 
-        offsets: offsets,
-        exposed: exposed,
-        centroid: centroid,
-        extent: extent
+        offsets,
+        exposed,
+        hydrophobic,
+        centroid,
+        extent,
+        large: offsets.length > LARGE_CA_THRESHOLD
     };
 }
 
 export async function calculate(runtime: RuntimeContext, structure: Structure, params: ANVILProps): Promise<MembraneOrientation> {
-    const { label_comp_id } = StructureProperties.atom;
+    // can't get away with the default 92 points here
+    const asaProps = { ...PD.getDefaultValues(AccessibleSurfaceAreaParams), probeSize: 4.0, traceOnly: true, numberOfSpherePoints: 184 };
+    const accessibleSurfaceArea = await AccessibleSurfaceArea.compute(structure, asaProps).runInContext(runtime);
 
-    const ctx = initialize(structure, params);
-    const initialHphobHphil = HphobHphil.filtered(ctx, label_comp_id);
+    const ctx = await initialize(structure, params, accessibleSurfaceArea);
+    const initialHphobHphil = HphobHphil.initial(ctx);
 
-    const initialMembrane = findMembrane(ctx, generateSpherePoints(ctx, ctx.numberOfSpherePoints), initialHphobHphil, label_comp_id);
-    const alternativeMembrane = findMembrane(ctx, findProximateAxes(ctx, initialMembrane), initialHphobHphil, label_comp_id);
+    const initialMembrane = (await findMembrane(runtime, 'Placing initial membrane...', ctx, generateSpherePoints(ctx, ctx.numberOfSpherePoints), initialHphobHphil))!;
+    const refinedMembrane = (await findMembrane(runtime, 'Refining membrane placement...', ctx, findProximateAxes(ctx, initialMembrane), initialHphobHphil))!;
+    let membrane = initialMembrane.qmax! > refinedMembrane.qmax! ? initialMembrane : refinedMembrane;
 
-    const membrane = initialMembrane.qmax! > alternativeMembrane.qmax! ? initialMembrane : alternativeMembrane;
+    if (ctx.adjust && !ctx.large) {
+        membrane = await adjustThickness(runtime, 'Adjusting membrane thickness...', ctx, membrane, initialHphobHphil);
+    }
+
+    const normalVector = v3zero();
+    const center =  v3zero();
+    v3sub(normalVector, membrane.planePoint1, membrane.planePoint2);
+    v3normalize(normalVector, normalVector);
+
+    v3add(center, membrane.planePoint1, membrane.planePoint2);
+    v3scale(center, center, 0.5);
+    const extent = adjustExtent(ctx, membrane, center);
 
     return {
         planePoint1: membrane.planePoint1,
         planePoint2: membrane.planePoint2,
-        normalVector: membrane.normalVector!,
-        radius: ctx.extent,
-        centroid: ctx.centroid
+        normalVector,
+        centroid: center,
+        radius: extent
     };
 }
 
@@ -160,82 +197,79 @@ namespace MembraneCandidate {
         return {
             planePoint1: c1,
             planePoint2: c2,
-            stats: stats
+            stats
         };
     }
 
-    export function scored(spherePoint: Vec3, c1: Vec3, c2: Vec3, stats: HphobHphil, qmax: number, centroid: Vec3): MembraneCandidate {
-        const diam_vect = Vec3();
-        Vec3.sub(diam_vect, centroid, spherePoint);
+    export function scored(spherePoint: Vec3, planePoint1: Vec3, planePoint2: Vec3, stats: HphobHphil, qmax: number, centroid: Vec3): MembraneCandidate {
+        const normalVector = v3zero();
+        v3sub(normalVector, centroid, spherePoint);
         return {
-            planePoint1: c1,
-            planePoint2: c2,
-            stats: stats,
-            normalVector: diam_vect,
-            spherePoint: spherePoint,
-            qmax: qmax
+            planePoint1,
+            planePoint2,
+            stats,
+            normalVector,
+            spherePoint,
+            qmax
         };
     }
 }
 
-function findMembrane(ctx: ANVILContext, spherePoints: Vec3[], initialStats: HphobHphil, label_comp_id: StructureElement.Property<string>): MembraneCandidate {
-    const { centroid, stepSize, minThickness, maxThickness } = ctx;
+async function findMembrane(runtime: RuntimeContext, message: string | undefined, ctx: ANVILContext, spherePoints: Vec3[], initialStats: HphobHphil): Promise<MembraneCandidate | undefined> {
+    const { centroid, stepSize, minThickness, maxThickness, large } = ctx;
     // best performing membrane
-    let membrane: MembraneCandidate;
+    let membrane: MembraneCandidate | undefined;
     // score of the best performing membrane
     let qmax = 0;
 
     // construct slices of thickness 1.0 along the axis connecting the centroid and the spherePoint
-    const diam = Vec3();
-    for (let i = 0, il = spherePoints.length; i < il; i++) {
-        const spherePoint = spherePoints[i];
-        Vec3.sub(diam, centroid, spherePoint);
-        Vec3.scale(diam, diam, 2);
-        const diamNorm = Vec3.magnitude(diam);
-        const qvartemp = [];
+    const diam = v3zero();
+    for (let n = 0, nl = spherePoints.length; n < nl; n++) {
+        if (runtime.shouldUpdate && message && (n + 1) % (large ? LARGE_CA_UPDATE_INTERVAL : DEFAULT_UPDATE_INTERVAL) === 0) {
+            await runtime.update({ message, current: (n + 1), max: nl });
+        }
 
+        const spherePoint = spherePoints[n];
+        v3sub(diam, centroid, spherePoint);
+        v3scale(diam, diam, 2);
+        const diamNorm = v3magnitude(diam);
+
+        const sliceStats = HphobHphil.sliced(ctx, stepSize, spherePoint, diam, diamNorm);
+        const qvartemp = [];
         for (let i = 0, il = diamNorm - stepSize; i < il; i += stepSize) {
-            const c1 = Vec3();
-            const c2 = Vec3();
-            Vec3.scaleAndAdd(c1, spherePoint, diam, i / diamNorm);
-            Vec3.scaleAndAdd(c2, spherePoint, diam, (i + stepSize) / diamNorm);
+            const c1 = v3zero();
+            const c2 = v3zero();
+            v3scaleAndAdd(c1, spherePoint, diam, i / diamNorm);
+            v3scaleAndAdd(c2, spherePoint, diam, (i + stepSize) / diamNorm);
 
             // evaluate how well this membrane slice embeddeds the peculiar residues
-            const stats = HphobHphil.filtered(ctx, label_comp_id, (testPoint: Vec3) => isInMembranePlane(testPoint, diam, c1, c2));
+            const stats = sliceStats[Math.round(i / stepSize)];
             qvartemp.push(MembraneCandidate.initial(c1, c2, stats));
         }
 
-        let jmax = (minThickness / stepSize) - 1;
-
-        for (let width = 0, widthl = maxThickness; width < widthl;) {
-            const imax = qvartemp.length - 1 - jmax;
-
-            for (let i = 0, il = imax; i < il; i++) {
-                const c1 = qvartemp[i].planePoint1;
-                const c2 = qvartemp[i + jmax].planePoint2;
+        let jmax = Math.floor((minThickness / stepSize) - 1);
 
+        for (let width = 0, widthl = maxThickness; width <= widthl;) {
+            for (let i = 0, il = qvartemp.length - 1 - jmax; i < il; i++) {
                 let hphob = 0;
                 let hphil = 0;
-                let total = 0;
                 for (let j = 0; j < jmax; j++) {
                     const ij = qvartemp[i + j];
                     if (j === 0 || j === jmax - 1) {
-                        hphob += 0.5 * ij.stats.hphob;
+                        hphob += Math.floor(0.5 * ij.stats.hphob);
                         hphil += 0.5 * ij.stats.hphil;
                     } else {
                         hphob += ij.stats.hphob;
                         hphil += ij.stats.hphil;
                     }
-                    total += ij.stats.total;
                 }
 
-                const stats = HphobHphil.of(hphob, hphil, total);
-
                 if (hphob !== 0) {
+                    const stats = { hphob, hphil };
                     const qvaltest = qValue(stats, initialStats);
-                    if (qvaltest > qmax) {
+                    if (qvaltest >= qmax) {
                         qmax = qvaltest;
-                        membrane = MembraneCandidate.scored(spherePoint, c1, c2, HphobHphil.of(hphob, hphil, total), qmax, centroid);
+                        membrane = MembraneCandidate.scored(spherePoint, qvartemp[i].planePoint1, qvartemp[i + jmax].planePoint2, stats, qmax, centroid);
                     }
                 }
             }
@@ -244,7 +278,180 @@ function findMembrane(ctx: ANVILContext, spherePoints: Vec3[], initialStats: Hph
         }
     }
 
-    return membrane!;
+    return membrane;
+}
+
+/** Adjust membrane thickness by maximizing the number of membrane segments. */
+async function adjustThickness(runtime: RuntimeContext, message: string | undefined, ctx: ANVILContext, membrane: MembraneCandidate, initialHphobHphil: HphobHphil): Promise<MembraneCandidate> {
+    const { minThickness, large } = ctx;
+    const step = 0.3;
+    let maxThickness = v3distance(membrane.planePoint1, membrane.planePoint2);
+
+    let maxNos = membraneSegments(ctx, membrane).length;
+    let optimalThickness = membrane;
+
+    let n = 0;
+    const nl = Math.ceil((maxThickness - minThickness) / step);
+    while (maxThickness > minThickness) {
+        n++;
+        if (runtime.shouldUpdate && message && n % (large ? LARGE_CA_UPDATE_INTERVAL : DEFAULT_UPDATE_INTERVAL) === 0) {
+            await runtime.update({ message, current: n, max: nl });
+        }
+
+        const p = {
+            ...ctx,
+            maxThickness,
+            stepSize: step
+        };
+        const temp = await findMembrane(runtime, void 0, p, [membrane.spherePoint!], initialHphobHphil);
+        if (temp) {
+            const nos = membraneSegments(ctx, temp).length;
+            if (nos > maxNos) {
+                maxNos = nos;
+                optimalThickness = temp;
+            }
+        }
+        maxThickness -= step;
+    }
+
+    return optimalThickness;
+}
+
+/** Report auth_seq_ids for all transmembrane segments. Will reject segments that are shorter than the adjust parameter specifies. Missing residues are considered in-membrane. */
+function membraneSegments(ctx: ANVILContext, membrane: MembraneCandidate): ArrayLike<{ start: number, end: number }> {
+    const { offsets, structure, adjust } = ctx;
+    const { normalVector, planePoint1, planePoint2 } = membrane;
+    const { units } = structure;
+    const { elementIndices, unitIndices } = structure.serialMapping;
+    const testPoint = v3zero();
+    const { auth_seq_id } = StructureProperties.residue;
+
+    const d1 = -v3dot(normalVector!, planePoint1);
+    const d2 = -v3dot(normalVector!, planePoint2);
+    const dMin = Math.min(d1, d2);
+    const dMax = Math.max(d1, d2);
+
+    const inMembrane: { [k: string]: Set<number> } = Object.create(null);
+    const outMembrane: { [k: string]: Set<number> } = Object.create(null);
+    const segments: Array<{ start: number, end: number }> = [];
+    let authAsymId;
+    let lastAuthAsymId = null;
+    let authSeqId;
+    let lastAuthSeqId = units[0].model.atomicHierarchy.residues.auth_seq_id.value((units[0] as Unit.Atomic).chainIndex[0]) - 1;
+    let startOffset = 0;
+    let endOffset = 0;
+
+    // collect all residues in membrane layer
+    for (let k = 0, kl = offsets.length; k < kl; k++) {
+        const unit = units[unitIndices[offsets[k]]];
+        if (!Unit.isAtomic(unit)) throw 'Property only available for atomic models.';
+        const elementIndex = elementIndices[offsets[k]];
+
+        authAsymId = unit.model.atomicHierarchy.chains.auth_asym_id.value(unit.chainIndex[elementIndex]);
+        if (authAsymId !== lastAuthAsymId) {
+            if (!inMembrane[authAsymId]) inMembrane[authAsymId] = new Set<number>();
+            if (!outMembrane[authAsymId]) outMembrane[authAsymId] = new Set<number>();
+            lastAuthAsymId = authAsymId;
+        }
+
+        authSeqId = unit.model.atomicHierarchy.residues.auth_seq_id.value(unit.residueIndex[elementIndex]);
+        v3set(testPoint, unit.conformation.x(elementIndex), unit.conformation.y(elementIndex), unit.conformation.z(elementIndex));
+        if (_isInMembranePlane(testPoint, normalVector!, dMin, dMax)) {
+            inMembrane[authAsymId].add(authSeqId);
+        } else {
+            outMembrane[authAsymId].add(authSeqId);
+        }
+    }
+
+    for (let k = 0, kl = offsets.length; k < kl; k++) {
+        const unit = units[unitIndices[offsets[k]]];
+        if (!Unit.isAtomic(unit)) throw 'Property only available for atomic models.';
+        const elementIndex = elementIndices[offsets[k]];
+
+        authAsymId = unit.model.atomicHierarchy.chains.auth_asym_id.value(unit.chainIndex[elementIndex]);
+        authSeqId = unit.model.atomicHierarchy.residues.auth_seq_id.value(unit.residueIndex[elementIndex]);
+        if (inMembrane[authAsymId].has(authSeqId)) {
+            // chain change
+            if (authAsymId !== lastAuthAsymId) {
+                segments.push({ start: startOffset, end: endOffset });
+                lastAuthAsymId = authAsymId;
+                startOffset = k;
+                endOffset = k;
+            }
+
+            // sequence gaps
+            if (authSeqId !== lastAuthSeqId + 1) {
+                if (outMembrane[authAsymId].has(lastAuthSeqId + 1)) {
+                    segments.push({ start: startOffset, end: endOffset });
+                    startOffset = k;
+                }
+                lastAuthSeqId = authSeqId;
+                endOffset = k;
+            } else  {
+                lastAuthSeqId++;
+                endOffset++;
+            }
+        }
+    }
+    segments.push({ start: startOffset, end: endOffset });
+
+    const l = StructureElement.Location.create(structure);
+    let startAuth;
+    let endAuth;
+    const refinedSegments: Array<{ start: number, end: number }> = [];
+    for (let k = 0, kl = segments.length; k < kl; k++) {
+        const { start, end } = segments[k];
+        if (start === 0 || end === offsets.length - 1) continue;
+
+        // evaluate residues 1 pos outside of membrane
+        setLocation(l, structure, offsets[start - 1]);
+        v3set(testPoint, l.unit.conformation.x(l.element), l.unit.conformation.y(l.element), l.unit.conformation.z(l.element));
+        const d3 = -v3dot(normalVector!, testPoint);
+
+        setLocation(l, structure, offsets[end + 1]);
+        v3set(testPoint, l.unit.conformation.x(l.element), l.unit.conformation.y(l.element), l.unit.conformation.z(l.element));
+        const d4 = -v3dot(normalVector!, testPoint);
+
+        if (Math.min(d3, d4) < dMin && Math.max(d3, d4) > dMax) {
+            // reject this refinement
+            setLocation(l, structure, offsets[start]);
+            startAuth = auth_seq_id(l);
+            setLocation(l, structure, offsets[end]);
+            endAuth = auth_seq_id(l);
+            if (Math.abs(startAuth - endAuth) + 1 < adjust) {
+                return [];
+            }
+            refinedSegments.push(segments[k]);
+        }
+    }
+
+    return refinedSegments;
+}
+
+/** Filter for membrane residues and calculate the final extent of the membrane layer */
+function adjustExtent(ctx: ANVILContext, membrane: MembraneCandidate, centroid: Vec3): number {
+    const { offsets, structure } = ctx;
+    const { normalVector, planePoint1, planePoint2 } = membrane;
+    const l = StructureElement.Location.create(structure);
+    const testPoint = v3zero();
+    const { x, y, z } = StructureProperties.atom;
+
+    const d1 = -v3dot(normalVector!, planePoint1);
+    const d2 = -v3dot(normalVector!, planePoint2);
+    const dMin = Math.min(d1, d2);
+    const dMax = Math.max(d1, d2);
+    let extent = 0;
+
+    for (let k = 0, kl = offsets.length; k < kl; k++) {
+        setLocation(l, structure, offsets[k]);
+        v3set(testPoint, x(l), y(l), z(l));
+        if (_isInMembranePlane(testPoint, normalVector!, dMin, dMax)) {
+            const dsq = v3squaredDistance(testPoint, centroid);
+            if (dsq > extent) extent = dsq;
+        }
+    }
+
+    return Math.sqrt(extent);
 }
 
 function qValue(currentStats: HphobHphil, initialStats: HphobHphil): number {
@@ -262,23 +469,27 @@ function qValue(currentStats: HphobHphil, initialStats: HphobHphil): number {
 }
 
 export function isInMembranePlane(testPoint: Vec3, normalVector: Vec3, planePoint1: Vec3, planePoint2: Vec3): boolean {
-    const d1 = -Vec3.dot(normalVector, planePoint1);
-    const d2 = -Vec3.dot(normalVector, planePoint2);
-    const d = -Vec3.dot(normalVector, testPoint);
-    return d > Math.min(d1, d2) && d < Math.max(d1, d2);
+    const d1 = -v3dot(normalVector, planePoint1);
+    const d2 = -v3dot(normalVector, planePoint2);
+    return _isInMembranePlane(testPoint, normalVector, Math.min(d1, d2), Math.max(d1, d2));
 }
 
-// generates a defined number of points on a sphere with radius = extent around the specified centroid
+function _isInMembranePlane(testPoint: Vec3, normalVector: Vec3, min: number, max: number): boolean {
+    const d = -v3dot(normalVector, testPoint);
+    return d > min && d < max;
+}
+
+/** Generates a defined number of points on a sphere with radius = extent around the specified centroid */
 function generateSpherePoints(ctx: ANVILContext, numberOfSpherePoints: number): Vec3[] {
     const { centroid, extent } = ctx;
     const points = [];
     let oldPhi = 0, h, theta, phi;
     for(let k = 1, kl = numberOfSpherePoints + 1; k < kl; k++) {
-        h = -1 + 2 * (k - 1) / (numberOfSpherePoints - 1);
+        h = -1 + 2 * (k - 1) / (2 * numberOfSpherePoints - 1);
         theta = Math.acos(h);
-        phi = (k === 1 || k === numberOfSpherePoints) ? 0 : (oldPhi + 3.6 / Math.sqrt(numberOfSpherePoints * (1 - h * h))) % (2 * Math.PI);
+        phi = (k === 1 || k === numberOfSpherePoints) ? 0 : (oldPhi + 3.6 / Math.sqrt(2 * numberOfSpherePoints * (1 - h * h))) % (2 * Math.PI);
 
-        const point = Vec3.create(
+        const point = v3create(
             extent * Math.sin(phi) * Math.sin(theta) + centroid[0],
             extent * Math.cos(theta) + centroid[1],
             extent * Math.cos(phi) * Math.sin(theta) + centroid[2]
@@ -290,18 +501,18 @@ function generateSpherePoints(ctx: ANVILContext, numberOfSpherePoints: number):
     return points;
 }
 
-// generates sphere points close to that of the initial membrane
+/** Generates sphere points close to that of the initial membrane */
 function findProximateAxes(ctx: ANVILContext, membrane: MembraneCandidate): Vec3[] {
     const { numberOfSpherePoints, extent } = ctx;
     const points = generateSpherePoints(ctx, 30000);
     let j = 4;
     let sphere_pts2: Vec3[] = [];
+    const s = 2 * extent / numberOfSpherePoints;
     while (sphere_pts2.length < numberOfSpherePoints) {
-        const d = 2 * extent / numberOfSpherePoints + j;
-        const dsq = d * d;
+        const dsq = (s + j) * (s + j);
         sphere_pts2 = [];
         for (let i = 0, il = points.length; i < il; i++) {
-            if (Vec3.squaredDistance(points[i], membrane.spherePoint!) < dsq) {
+            if (v3squaredDistance(points[i], membrane.spherePoint!) < dsq) {
                 sphere_pts2.push(points[i]);
             }
         }
@@ -312,56 +523,80 @@ function findProximateAxes(ctx: ANVILContext, membrane: MembraneCandidate): Vec3
 
 interface HphobHphil {
     hphob: number,
-    hphil: number,
-    total: number
+    hphil: number
 }
 
 namespace HphobHphil {
-    export function of(hphob: number, hphil: number, total?: number) {
-        return {
-            hphob: hphob,
-            hphil: hphil,
-            total: !!total ? total : hphob + hphil
-        };
-    }
-
-    const testPoint = Vec3();
-    export function filtered(ctx: ANVILContext, label_comp_id: StructureElement.Property<string>, filter?: (test: Vec3) => boolean): HphobHphil {
-        const { offsets, exposed, structure } = ctx;
-        const l = StructureElement.Location.create(structure);
-        const { x, y, z } = StructureProperties.atom;
+    export function initial(ctx: ANVILContext): HphobHphil {
+        const { exposed, hydrophobic } = ctx;
         let hphob = 0;
         let hphil = 0;
-        for (let k = 0, kl = offsets.length; k < kl; k++) {
-            // ignore buried residues
-            if (!exposed[k]) {
-                continue;
-            }
-
-            setLocation(l, structure, offsets[k]);
-            Vec3.set(testPoint, x(l), y(l), z(l));
-
-            // testPoints have to be in putative membrane layer
-            if (filter && !filter(testPoint)) {
-                continue;
-            }
-
-            if (isHydrophobic(label_comp_id(l))) {
+        for (let k = 0, kl = exposed.length; k < kl; k++) {
+            if (hydrophobic[k]) {
                 hphob++;
             } else {
                 hphil++;
             }
         }
-        return of(hphob, hphil);
+        return { hphob, hphil };
+    }
+
+    const testPoint = v3zero();
+    export function sliced(ctx: ANVILContext, stepSize: number, spherePoint: Vec3, diam: Vec3, diamNorm: number): HphobHphil[] {
+        const { exposed, hydrophobic, structure } = ctx;
+        const { units, serialMapping } = structure;
+        const { unitIndices, elementIndices } = serialMapping;
+        const sliceStats: HphobHphil[] = [];
+        for (let i = 0, il = diamNorm - stepSize; i < il; i += stepSize) {
+            sliceStats[sliceStats.length] = { hphob: 0, hphil: 0 };
+        }
+
+        for (let i = 0, il = exposed.length; i < il; i++) {
+            const unit = units[unitIndices[exposed[i]]];
+            const elementIndex = elementIndices[exposed[i]];
+            v3set(testPoint, unit.conformation.x(elementIndex), unit.conformation.y(elementIndex), unit.conformation.z(elementIndex));
+            v3sub(testPoint, testPoint, spherePoint);
+            if (hydrophobic[i]) {
+                sliceStats[Math.floor(v3dot(testPoint, diam) / diamNorm / stepSize)].hphob++;
+            } else {
+                sliceStats[Math.floor(v3dot(testPoint, diam) / diamNorm / stepSize)].hphil++;
+            }
+        }
+        return sliceStats;
     }
 }
 
-// ANVIL-specific (not general) definition of membrane-favoring amino acids
-const HYDROPHOBIC_AMINO_ACIDS = new Set(['ALA', 'CYS', 'GLY', 'HIS', 'ILE', 'LEU', 'MET', 'PHE', 'SER', 'THR', 'VAL']);
+/** ANVIL-specific (not general) definition of membrane-favoring amino acids */
+const HYDROPHOBIC_AMINO_ACIDS = new Set(['ALA', 'CYS', 'GLY', 'HIS', 'ILE', 'LEU', 'MET', 'PHE', 'SER', 'TRP', 'VAL']);
+/** Returns true if ANVIL considers this as amino acid that favors being embedded in a membrane */
 export function isHydrophobic(label_comp_id: string): boolean {
     return HYDROPHOBIC_AMINO_ACIDS.has(label_comp_id);
 }
 
+/** Accessible surface area used for normalization. ANVIL uses 'Total-Side REL' values from NACCESS, from: Hubbard, S. J., & Thornton, J. M. (1993). naccess. Computer Program, Department of Biochemistry and Molecular Biology, University College London, 2(1). */
+export const MaxAsa: { [k: string]: number } = {
+    'ALA': 69.41,
+    'ARG': 201.25,
+    'ASN': 106.24,
+    'ASP': 102.69,
+    'CYS': 96.75,
+    'GLU': 134.74,
+    'GLN': 140.99,
+    'GLY': 32.33,
+    'HIS': 147.08,
+    'ILE': 137.96,
+    'LEU': 141.12,
+    'LYS': 163.30,
+    'MET': 156.64,
+    'PHE': 164.11,
+    'PRO': 119.90,
+    'SER': 78.11,
+    'THR': 101.70,
+    'TRP': 211.26,
+    'TYR': 177.38,
+    'VAL': 114.28
+};
+
 function setLocation(l: StructureElement.Location, structure: Structure, serialIndex: number) {
     l.structure = structure;
     l.unit = structure.units[structure.serialMapping.unitIndices[serialIndex]];

src/extensions/anvil/behavior.ts

@@ -121,7 +121,7 @@ const MembraneOrientation3D = PluginStateTransform.BuiltIn({
             await MembraneOrientationProvider.attach({ runtime: ctx, assetManager: plugin.managers.asset }, a.data);
             const repr = MembraneOrientationRepresentation({ webgl: plugin.canvas3d?.webgl, ...plugin.representation.structure.themes }, () => MembraneOrientationParams);
             await repr.createOrUpdate(params, a.data).runInContext(ctx);
-            return new PluginStateObject.Shape.Representation3D({ repr, source: a }, { label: 'Membrane Orientation' });
+            return new PluginStateObject.Shape.Representation3D({ repr, sourceData: a.data }, { label: 'Membrane Orientation' });
         });
     },
     update({ a, b, newParams }, plugin: PluginContext) {
@@ -129,6 +129,7 @@ const MembraneOrientation3D = PluginStateTransform.BuiltIn({
             await MembraneOrientationProvider.attach({ runtime: ctx, assetManager: plugin.managers.asset }, a.data);
             const props = { ...b.data.repr.props, ...newParams };
             await b.data.repr.createOrUpdate(props, a.data).runInContext(ctx);
+            b.data.sourceData = a.data;
             return StateTransformer.UpdateResult.Updated;
         });
     },

src/extensions/anvil/prop.ts

@@ -11,7 +11,6 @@ import { CustomPropertyDescriptor } from '../../mol-model/custom-property';
 import { ANVILParams, ANVILProps, computeANVIL, isInMembranePlane } from './algorithm';
 import { CustomStructureProperty } from '../../mol-model-props/common/custom-structure-property';
 import { CustomProperty } from '../../mol-model-props/common/custom-property';
-import { AccessibleSurfaceAreaProvider } from '../../mol-model-props/computed/accessible-surface-area';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { QuerySymbolRuntime } from '../../mol-script/runtime/query/base';
 import { CustomPropSymbol } from '../../mol-script/language/symbol';
@@ -76,7 +75,6 @@ export const MembraneOrientationProvider: CustomStructureProperty.Provider<Membr
 });
 
 async function computeAnvil(ctx: CustomProperty.Context, data: Structure, props: Partial<ANVILProps>): Promise<MembraneOrientation> {
-    await AccessibleSurfaceAreaProvider.attach(ctx, data);
     const p = { ...PD.getDefaultValues(ANVILParams), ...props };
     return await computeANVIL(data, p).runInContext(ctx.runtime);
 }

src/extensions/anvil/representation.ts

@@ -9,7 +9,6 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Vec3, Mat4 } from '../../mol-math/linear-algebra';
 import { Representation, RepresentationContext, RepresentationParamsGetter } from '../../mol-repr/representation';
 import { Structure } from '../../mol-model/structure';
-import { Spheres } from '../../mol-geo/geometry/spheres/spheres';
 import { StructureRepresentationProvider, StructureRepresentation, StructureRepresentationStateBuilder } from '../../mol-repr/structure/representation';
 import { MembraneOrientation } from './prop';
 import { ThemeRegistryContext } from '../../mol-theme/theme';
@@ -30,18 +29,9 @@ import { CustomProperty } from '../../mol-model-props/common/custom-property';
 
 const SharedParams = {
     color: PD.Color(ColorNames.lightgrey),
-    radiusFactor: PD.Numeric(0.8333, { min: 0.1, max: 3.0, step: 0.01 }, { description: 'Scale the radius of the membrane layer' })
+    radiusFactor: PD.Numeric(1.2, { min: 0.1, max: 3.0, step: 0.01 }, { description: 'Scale the radius of the membrane layer' })
 };
 
-const BilayerSpheresParams = {
-    ...Spheres.Params,
-    ...SharedParams,
-    sphereSize: PD.Numeric(1, { min: 0.1, max: 10, step: 0.1 }, { description: 'Size of spheres that represent membrane planes' }),
-    density: PD.Numeric(1, { min: 0.25, max: 10, step: 0.25 }, { description: 'Distance between spheres'})
-};
-export type BilayerSpheresParams = typeof BilayerSpheresParams
-export type BilayerSpheresProps = PD.Values<BilayerSpheresParams>
-
 const BilayerPlanesParams = {
     ...Mesh.Params,
     ...SharedParams,
@@ -66,7 +56,6 @@ const MembraneOrientationVisuals = {
 };
 
 export const MembraneOrientationParams = {
-    ...BilayerSpheresParams,
     ...BilayerPlanesParams,
     ...BilayerRimsParams,
     visuals: PD.MultiSelect(['bilayer-planes', 'bilayer-rims'], PD.objectToOptions(MembraneOrientationVisuals)),
@@ -104,16 +93,16 @@ function membraneLabel(data: Structure) {
 }
 
 function getBilayerRims(ctx: RuntimeContext, data: Structure, props: BilayerRimsProps, shape?: Shape<Lines>): Shape<Lines> {
-    const { planePoint1: p1, planePoint2: p2, centroid, normalVector: normal, radius } = MembraneOrientationProvider.get(data).value!;
+    const { planePoint1: p1, planePoint2: p2, centroid, radius } = MembraneOrientationProvider.get(data).value!;
     const scaledRadius = props.radiusFactor * radius;
     const builder = LinesBuilder.create(128, 64, shape?.geometry);
-    getLayerCircle(builder, p1, centroid, normal, scaledRadius, props);
-    getLayerCircle(builder, p2, centroid, normal, scaledRadius, props);
+    getLayerCircle(builder, p1, centroid, scaledRadius, props);
+    getLayerCircle(builder, p2, centroid, scaledRadius, props);
     return Shape.create('Bilayer rims', data, builder.getLines(), () => props.color, () => props.linesSize, () => membraneLabel(data));
 }
 
-function getLayerCircle(builder: LinesBuilder, p: Vec3, centroid: Vec3, normal: Vec3, radius: number, props: BilayerRimsProps, shape?: Shape<Lines>) {
-    const circle = getCircle(p, centroid, normal, radius);
+function getLayerCircle(builder: LinesBuilder, p: Vec3, centroid: Vec3, radius: number, props: BilayerRimsProps, shape?: Shape<Lines>) {
+    const circle = getCircle(p, centroid, radius);
     const { indices, vertices } = circle;
     for (let j = 0, jl = indices.length; j < jl; j += 3) {
         if (props.dashedLines && j % 2 === 1) continue; // draw every other segment to get dashes
@@ -130,8 +119,13 @@ function getLayerCircle(builder: LinesBuilder, p: Vec3, centroid: Vec3, normal:
 }
 
 const tmpMat = Mat4();
-function getCircle(p: Vec3, centroid: Vec3, normal: Vec3, radius: number) {
-    Mat4.targetTo(tmpMat, p, centroid, normal);
+const tmpV = Vec3();
+function getCircle(p: Vec3, centroid: Vec3, radius: number) {
+    if (Vec3.dot(Vec3.unitY, Vec3.sub(tmpV, p, centroid)) === 0) {
+        Mat4.targetTo(tmpMat, p, centroid, Vec3.unitY);
+    } else {
+        Mat4.targetTo(tmpMat, p, centroid, Vec3.unitX);
+    }
     Mat4.setTranslation(tmpMat, p);
     Mat4.mul(tmpMat, tmpMat, Mat4.rotX90);
 
@@ -140,16 +134,16 @@ function getCircle(p: Vec3, centroid: Vec3, normal: Vec3, radius: number) {
 }
 
 function getBilayerPlanes(ctx: RuntimeContext, data: Structure, props: BilayerPlanesProps, shape?: Shape<Mesh>): Shape<Mesh> {
-    const { planePoint1: p1, planePoint2: p2, centroid, normalVector: normal, radius } = MembraneOrientationProvider.get(data).value!;
+    const { planePoint1: p1, planePoint2: p2, centroid, radius } = MembraneOrientationProvider.get(data).value!;
     const state = MeshBuilder.createState(128, 64, shape && shape.geometry);
     const scaledRadius = props.radiusFactor * radius;
-    getLayerPlane(state, p1, centroid, normal, scaledRadius);
-    getLayerPlane(state, p2, centroid, normal, scaledRadius);
+    getLayerPlane(state, p1, centroid, scaledRadius);
+    getLayerPlane(state, p2, centroid, scaledRadius);
     return Shape.create('Bilayer planes', data, MeshBuilder.getMesh(state), () => props.color, () => 1, () => membraneLabel(data));
 }
 
-function getLayerPlane(state: MeshBuilder.State, p: Vec3, centroid: Vec3, normal: Vec3, radius: number) {
-    const circle = getCircle(p, centroid, normal, radius);
+function getLayerPlane(state: MeshBuilder.State, p: Vec3, centroid: Vec3, radius: number) {
+    const circle = getCircle(p, centroid, radius);
     state.currentGroup = 0;
     MeshBuilder.addPrimitive(state, Mat4.id, circle);
     MeshBuilder.addPrimitiveFlipped(state, Mat4.id, circle);

src/extensions/cellpack/model.ts

@@ -414,7 +414,7 @@ export function createStructureFromCellPack(plugin: PluginContext, packing: Cell
         }
 
         if (ctx.shouldUpdate) await ctx.update(`${name} - structure`);
-        const structure = new Structure(units);
+        const structure = Structure.create(units);
         for( let i = 0, il = structure.models.length; i < il; ++i) {
             Model.TrajectoryInfo.set(structure.models[i], { size: il, index: i });
         }

src/extensions/dnatco/confal-pyramids/color.ts

@@ -181,6 +181,6 @@ export const ConfalPyramidsColorThemeProvider: ColorTheme.Provider<ConfalPyramid
     isApplicable: (ctx: ThemeDataContext) => !!ctx.structure && ctx.structure.models.some(m => ConfalPyramids.isApplicable(m)),
     ensureCustomProperties: {
         attach: (ctx: CustomProperty.Context, data: ThemeDataContext) => data.structure ? ConfalPyramidsProvider.attach(ctx, data.structure.models[0], void 0, true) : Promise.resolve(),
-        detach: (data) => data.structure && data.structure.models[0].customProperties.reference(ConfalPyramidsProvider.descriptor, false)
+        detach: (data) => data.structure && ConfalPyramidsProvider.ref(data.structure.models[0], false)
     }
 };

src/extensions/dnatco/confal-pyramids/representation.ts

@@ -20,10 +20,10 @@ import { Structure, StructureProperties, Unit } from '../../../mol-model/structu
 import { CustomProperty } from '../../../mol-model-props/common/custom-property';
 import { Representation, RepresentationContext, RepresentationParamsGetter } from '../../../mol-repr/representation';
 import { StructureRepresentation, StructureRepresentationProvider, StructureRepresentationStateBuilder, UnitsRepresentation } from '../../../mol-repr/structure/representation';
-import { StructureGroup, UnitsMeshParams, UnitsMeshVisual, UnitsVisual } from '../../../mol-repr/structure/units-visual';
+import { UnitsMeshParams, UnitsMeshVisual, UnitsVisual } from '../../../mol-repr/structure/units-visual';
 import { VisualUpdateState } from '../../../mol-repr/util';
 import { VisualContext } from '../../../mol-repr/visual';
-import { getAltResidueLociFromId } from '../../../mol-repr/structure/visual/util/common';
+import { getAltResidueLociFromId, StructureGroup } from '../../../mol-repr/structure/visual/util/common';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 import { Theme, ThemeRegistryContext } from '../../../mol-theme/theme';
 import { NullLocation } from '../../../mol-model/location';

src/extensions/geo-export/controls.ts

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { getStyle } from '../../mol-gl/renderer';
+import { Box3D } from '../../mol-math/geometry';
+import { PluginComponent } from '../../mol-plugin-state/component';
+import { PluginContext } from '../../mol-plugin/context';
+import { Task } from '../../mol-task';
+import { PluginStateObject } from '../../mol-plugin-state/objects';
+import { StateSelection } from '../../mol-state';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { SetUtils } from '../../mol-util/set';
+import { GlbExporter } from './glb-exporter';
+import { ObjExporter } from './obj-exporter';
+import { StlExporter } from './stl-exporter';
+import { UsdzExporter } from './usdz-exporter';
+
+export const GeometryParams = {
+    format: PD.Select('glb', [
+        ['glb', 'glTF 2.0 Binary (.glb)'],
+        ['stl', 'Stl (.stl)'],
+        ['obj', 'Wavefront (.obj)'],
+        ['usdz', 'Universal Scene Description (.usdz)']
+    ])
+};
+
+export class GeometryControls extends PluginComponent {
+    readonly behaviors = {
+        params: this.ev.behavior<PD.Values<typeof GeometryParams>>(PD.getDefaultValues(GeometryParams))
+    }
+
+    private getFilename() {
+        const models = this.plugin.state.data.select(StateSelection.Generators.rootsOfType(PluginStateObject.Molecule.Model)).map(s => s.obj!.data);
+        const uniqueIds = new Set<string>();
+        models.forEach(m => uniqueIds.add(m.entryId.toUpperCase()));
+        const idString = SetUtils.toArray(uniqueIds).join('-');
+        return `${idString || 'molstar-model'}`;
+    }
+
+    exportGeometry() {
+        const task = Task.create('Export Geometry', async ctx => {
+            try {
+                const renderObjects = this.plugin.canvas3d?.getRenderObjects()!;
+                const filename = this.getFilename();
+
+                const style = getStyle(this.plugin.canvas3d?.props.renderer.style!);
+                const boundingSphere = this.plugin.canvas3d?.boundingSphereVisible!;
+                const boundingBox = Box3D.fromSphere3D(Box3D(), boundingSphere);
+                let renderObjectExporter: GlbExporter | ObjExporter | StlExporter | UsdzExporter;
+                switch (this.behaviors.params.value.format) {
+                    case 'glb':
+                        renderObjectExporter = new GlbExporter(style, boundingBox);
+                        break;
+                    case 'obj':
+                        renderObjectExporter = new ObjExporter(filename, boundingBox);
+                        break;
+                    case 'stl':
+                        renderObjectExporter = new StlExporter(boundingBox);
+                        break;
+                    case 'usdz':
+                        renderObjectExporter = new UsdzExporter(style, boundingBox, boundingSphere.radius);
+                        break;
+                    default: throw new Error('Unsupported format.');
+                }
+
+                for (let i = 0, il = renderObjects.length; i < il; ++i) {
+                    await ctx.update({ message: `Exporting object ${i}/${il}` });
+                    await renderObjectExporter.add(renderObjects[i], this.plugin.canvas3d?.webgl!, ctx);
+                }
+
+                const blob = await renderObjectExporter.getBlob(ctx);
+                return {
+                    blob,
+                    filename: filename + '.' + renderObjectExporter.fileExtension
+                };
+            } catch (e) {
+                this.plugin.log.error('' + e);
+                throw e;
+            }
+        });
+
+        return this.plugin.runTask(task, { useOverlay: true });
+    }
+
+    constructor(private plugin: PluginContext) {
+        super();
+    }
+}

src/extensions/geo-export/glb-exporter.ts

@@ -0,0 +1,313 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { BaseValues } from '../../mol-gl/renderable/schema';
+import { Style } from '../../mol-gl/renderer';
+import { asciiWrite } from '../../mol-io/common/ascii';
+import { IsNativeEndianLittle, flipByteOrder } from '../../mol-io/common/binary';
+import { Box3D } from '../../mol-math/geometry';
+import { Vec3, Mat4 } from '../../mol-math/linear-algebra';
+import { PLUGIN_VERSION } from '../../mol-plugin/version';
+import { RuntimeContext } from '../../mol-task';
+import { Color } from '../../mol-util/color/color';
+import { fillSerial } from '../../mol-util/array';
+import { NumberArray } from '../../mol-util/type-helpers';
+import { MeshExporter, AddMeshInput } from './mesh-exporter';
+
+// avoiding namespace lookup improved performance in Chrome (Aug 2020)
+const v3fromArray = Vec3.fromArray;
+const v3normalize = Vec3.normalize;
+const v3toArray = Vec3.toArray;
+
+// https://github.com/KhronosGroup/glTF/tree/master/specification/2.0
+
+const UNSIGNED_BYTE = 5121;
+const UNSIGNED_INT = 5125;
+const FLOAT = 5126;
+const ARRAY_BUFFER = 34962;
+const ELEMENT_ARRAY_BUFFER = 34963;
+
+export type GlbData = {
+    glb: Uint8Array
+}
+
+export class GlbExporter extends MeshExporter<GlbData> {
+    readonly fileExtension = 'glb';
+    private nodes: Record<string, any>[] = [];
+    private meshes: Record<string, any>[] = [];
+    private accessors: Record<string, any>[] = [];
+    private bufferViews: Record<string, any>[] = [];
+    private binaryBuffer: ArrayBuffer[] = [];
+    private byteOffset = 0;
+    private centerTransform: Mat4;
+
+    private static vec3MinMax(a: NumberArray) {
+        const min: number[] = [Infinity, Infinity, Infinity];
+        const max: number[] = [-Infinity, -Infinity, -Infinity];
+        for (let i = 0, il = a.length; i < il; i += 3) {
+            for (let j = 0; j < 3; ++j) {
+                min[j] = Math.min(a[i + j], min[j]);
+                max[j] = Math.max(a[i + j], max[j]);
+            }
+        }
+        return [ min, max ];
+    }
+
+    private addBuffer(buffer: ArrayBuffer, componentType: number, type: string, count: number, target: number, min?: any, max?: any, normalized?: boolean) {
+        this.binaryBuffer.push(buffer);
+
+        const bufferViewOffset = this.bufferViews.length;
+        this.bufferViews.push({
+            buffer: 0,
+            byteOffset: this.byteOffset,
+            byteLength: buffer.byteLength,
+            target
+        });
+        this.byteOffset += buffer.byteLength;
+
+        const accessorOffset = this.accessors.length;
+        this.accessors.push({
+            bufferView: bufferViewOffset,
+            byteOffset: 0,
+            componentType,
+            count,
+            type,
+            min,
+            max,
+            normalized
+        });
+        return accessorOffset;
+    }
+
+    private addGeometryBuffers(vertices: Float32Array, normals: Float32Array, indices: Uint32Array | undefined, vertexCount: number, drawCount: number, isGeoTexture: boolean) {
+        const tmpV = Vec3();
+        const stride = isGeoTexture ? 4 : 3;
+
+        const vertexArray = new Float32Array(vertexCount * 3);
+        const normalArray = new Float32Array(vertexCount * 3);
+        let indexArray: Uint32Array | undefined;
+
+        // position
+        for (let i = 0; i < vertexCount; ++i) {
+            v3fromArray(tmpV, vertices, i * stride);
+            v3toArray(tmpV, vertexArray, i * 3);
+        }
+
+        // normal
+        for (let i = 0; i < vertexCount; ++i) {
+            v3fromArray(tmpV, normals, i * stride);
+            v3normalize(tmpV, tmpV);
+            v3toArray(tmpV, normalArray, i * 3);
+        }
+
+        // face
+        if (!isGeoTexture) {
+            indexArray = indices!.slice(0, drawCount);
+        }
+
+        const [ vertexMin, vertexMax ] = GlbExporter.vec3MinMax(vertexArray);
+
+        let vertexBuffer = vertexArray.buffer;
+        let normalBuffer = normalArray.buffer;
+        let indexBuffer = isGeoTexture ? undefined : indexArray!.buffer;
+        if (!IsNativeEndianLittle) {
+            vertexBuffer = flipByteOrder(new Uint8Array(vertexBuffer), 4);
+            normalBuffer = flipByteOrder(new Uint8Array(normalBuffer), 4);
+            if (!isGeoTexture) indexBuffer = flipByteOrder(new Uint8Array(indexBuffer!), 4);
+        }
+
+        return {
+            vertexAccessorIndex: this.addBuffer(vertexBuffer, FLOAT, 'VEC3', vertexCount, ARRAY_BUFFER, vertexMin, vertexMax),
+            normalAccessorIndex: this.addBuffer(normalBuffer, FLOAT, 'VEC3', vertexCount, ARRAY_BUFFER),
+            indexAccessorIndex: isGeoTexture ? undefined : this.addBuffer(indexBuffer!, UNSIGNED_INT, 'SCALAR', drawCount, ELEMENT_ARRAY_BUFFER)
+        };
+    }
+
+    private addColorBuffer(values: BaseValues, groups: Float32Array | Uint8Array, vertexCount: number, instanceIndex: number, isGeoTexture: boolean, interpolatedColors: Uint8Array | undefined) {
+        const groupCount = values.uGroupCount.ref.value;
+        const uAlpha = values.uAlpha.ref.value;
+        const dTransparency = values.dTransparency.ref.value;
+        const tTransparency = values.tTransparency.ref.value;
+
+        const colorArray = new Uint8Array(vertexCount * 4);
+
+        for (let i = 0; i < vertexCount; ++i) {
+            let color = GlbExporter.getColor(values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors, i);
+
+            let alpha = uAlpha;
+            if (dTransparency) {
+                const group = isGeoTexture ? GlbExporter.getGroup(groups, i) : groups[i];
+                const transparency = tTransparency.array[instanceIndex * groupCount + group] / 255;
+                alpha *= 1 - transparency;
+            }
+
+            color = Color.sRGBToLinear(color);
+            Color.toArray(color, colorArray, i * 4);
+            colorArray[i * 4 + 3] = Math.round(alpha * 255);
+        }
+
+        let colorBuffer = colorArray.buffer;
+        if (!IsNativeEndianLittle) {
+            colorBuffer = flipByteOrder(new Uint8Array(colorBuffer), 4);
+        }
+
+        return this.addBuffer(colorBuffer, UNSIGNED_BYTE, 'VEC4', vertexCount, ARRAY_BUFFER, undefined, undefined, true);
+    }
+
+    protected async addMeshWithColors(input: AddMeshInput) {
+        const { mesh, values, isGeoTexture, webgl, ctx } = input;
+
+        const t = Mat4();
+
+        const colorType = values.dColorType.ref.value;
+        const dTransparency = values.dTransparency.ref.value;
+        const aTransform = values.aTransform.ref.value;
+        const instanceCount = values.uInstanceCount.ref.value;
+
+        let interpolatedColors: Uint8Array | undefined;
+        if (colorType === 'volume' || colorType === 'volumeInstance') {
+            const stride = isGeoTexture ? 4 : 3;
+            interpolatedColors = GlbExporter.getInterpolatedColors(mesh!.vertices, mesh!.vertexCount, values, stride, colorType, webgl!);
+        }
+
+        // instancing
+        const sameGeometryBuffers = mesh !== undefined;
+        const sameColorBuffer = sameGeometryBuffers && colorType !== 'instance' && !colorType.endsWith('Instance') && !dTransparency;
+        let vertexAccessorIndex: number;
+        let normalAccessorIndex: number;
+        let indexAccessorIndex: number | undefined;
+        let colorAccessorIndex: number;
+        let meshIndex: number;
+
+        await ctx.update({ isIndeterminate: false, current: 0, max: instanceCount });
+
+        for (let instanceIndex = 0; instanceIndex < instanceCount; ++instanceIndex) {
+            if (ctx.shouldUpdate) await ctx.update({ current: instanceIndex + 1 });
+
+            // create a glTF mesh if needed
+            if (instanceIndex === 0 || !sameGeometryBuffers || !sameColorBuffer) {
+                const { vertices, normals, indices, groups, vertexCount, drawCount } = GlbExporter.getInstance(input, instanceIndex);
+
+                // create geometry buffers if needed
+                if (instanceIndex === 0 || !sameGeometryBuffers) {
+                    const accessorIndices = this.addGeometryBuffers(vertices, normals, indices, vertexCount, drawCount, isGeoTexture);
+                    vertexAccessorIndex = accessorIndices.vertexAccessorIndex;
+                    normalAccessorIndex = accessorIndices.normalAccessorIndex;
+                    indexAccessorIndex = accessorIndices.indexAccessorIndex;
+                }
+
+                // create a color buffer if needed
+                if (instanceIndex === 0 || !sameColorBuffer) {
+                    colorAccessorIndex = this.addColorBuffer(values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors);
+                }
+
+                // glTF mesh
+                meshIndex = this.meshes.length;
+                this.meshes.push({
+                    primitives: [{
+                        attributes: {
+                            POSITION: vertexAccessorIndex!,
+                            NORMAL: normalAccessorIndex!,
+                            COLOR_0: colorAccessorIndex!
+                        },
+                        indices: indexAccessorIndex,
+                        material: 0
+                    }]
+                });
+            }
+
+            // node
+            Mat4.fromArray(t, aTransform, instanceIndex * 16);
+            Mat4.mul(t, this.centerTransform, t);
+            const node: Record<string, any> = {
+                mesh: meshIndex!,
+                matrix: t.slice()
+            };
+            this.nodes.push(node);
+        }
+    }
+
+    async getData() {
+        const binaryBufferLength = this.byteOffset;
+
+        const gltf = {
+            asset: {
+                version: '2.0',
+                generator: `Mol* ${PLUGIN_VERSION}`
+            },
+            scenes: [{
+                nodes: fillSerial(new Array(this.nodes.length) as number[])
+            }],
+            nodes: this.nodes,
+            meshes: this.meshes,
+            buffers: [{
+                byteLength: binaryBufferLength,
+            }],
+            bufferViews: this.bufferViews,
+            accessors: this.accessors,
+            materials: [{
+                pbrMetallicRoughness: {
+                    baseColorFactor: [1, 1, 1, 1],
+                    metallicFactor: this.style.metalness,
+                    roughnessFactor: this.style.roughness
+                }
+            }]
+        };
+
+        const createChunk = (chunkType: number, data: ArrayBuffer[], byteLength: number, padChar: number): [ArrayBuffer[], number] => {
+            let padding = null;
+            if (byteLength % 4 !== 0) {
+                const pad = 4 - (byteLength % 4);
+                byteLength += pad;
+                padding = new Uint8Array(pad);
+                padding.fill(padChar);
+            }
+            const preamble = new ArrayBuffer(8);
+            const preambleDataView = new DataView(preamble);
+            preambleDataView.setUint32(0, byteLength, true);
+            preambleDataView.setUint32(4, chunkType, true);
+            const chunk = [preamble, ...data];
+            if (padding) {
+                chunk.push(padding.buffer);
+            }
+            return [ chunk, 8 + byteLength ];
+        };
+        const jsonString = JSON.stringify(gltf);
+        const jsonBuffer = new Uint8Array(jsonString.length);
+        asciiWrite(jsonBuffer, jsonString);
+
+        const [ jsonChunk, jsonChunkLength ] = createChunk(0x4E4F534A, [jsonBuffer.buffer], jsonBuffer.length, 0x20);
+        const [ binaryChunk, binaryChunkLength ] = createChunk(0x004E4942, this.binaryBuffer, binaryBufferLength, 0x00);
+
+        const glbBufferLength = 12 + jsonChunkLength + binaryChunkLength;
+        const header = new ArrayBuffer(12);
+        const headerDataView = new DataView(header);
+        headerDataView.setUint32(0, 0x46546C67, true); // magic number "glTF"
+        headerDataView.setUint32(4, 2, true); // version
+        headerDataView.setUint32(8, glbBufferLength, true); // length
+        const glbBuffer = [header, ...jsonChunk, ...binaryChunk];
+
+        const glb = new Uint8Array(glbBufferLength);
+        let offset = 0;
+        for (const buffer of glbBuffer) {
+            glb.set(new Uint8Array(buffer), offset);
+            offset += buffer.byteLength;
+        }
+        return { glb };
+    }
+
+    async getBlob(ctx: RuntimeContext) {
+        return new Blob([(await this.getData()).glb], { type: 'model/gltf-binary' });
+    }
+
+    constructor(private style: Style, boundingBox: Box3D) {
+        super();
+        const tmpV = Vec3();
+        Vec3.add(tmpV, boundingBox.min, boundingBox.max);
+        Vec3.scale(tmpV, tmpV, -0.5);
+        this.centerTransform = Mat4.fromTranslation(Mat4(), tmpV);
+    }
+}

src/extensions/geo-export/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { PluginBehavior } from '../../mol-plugin/behavior/behavior';
+import { GeometryExporterUI } from './ui';
+
+export const GeometryExport = PluginBehavior.create<{ }>({
+    name: 'extension-geo-export',
+    category: 'misc',
+    display: {
+        name: 'Geometry Export'
+    },
+    ctor: class extends PluginBehavior.Handler<{ }> {
+        register(): void {
+            this.ctx.customStructureControls.set('geo-export', GeometryExporterUI as any);
+        }
+
+        update() {
+            return false;
+        }
+
+        unregister() {
+            this.ctx.customStructureControls.delete('geo-export');
+        }
+    },
+    params: () => ({ })
+});

src/extensions/geo-export/mesh-exporter.ts

@@ -0,0 +1,401 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { sort, arraySwap } from '../../mol-data/util';
+import { GraphicsRenderObject } from '../../mol-gl/render-object';
+import { MeshValues } from '../../mol-gl/renderable/mesh';
+import { LinesValues } from '../../mol-gl/renderable/lines';
+import { PointsValues } from '../../mol-gl/renderable/points';
+import { SpheresValues } from '../../mol-gl/renderable/spheres';
+import { CylindersValues } from '../../mol-gl/renderable/cylinders';
+import { TextureMeshValues } from '../../mol-gl/renderable/texture-mesh';
+import { BaseValues, SizeValues } from '../../mol-gl/renderable/schema';
+import { TextureImage } from '../../mol-gl/renderable/util';
+import { WebGLContext } from '../../mol-gl/webgl/context';
+import { getTrilinearlyInterpolated } from '../../mol-geo/geometry/mesh/color-smoothing';
+import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
+import { MeshBuilder } from '../../mol-geo/geometry/mesh/mesh-builder';
+import { addSphere } from '../../mol-geo/geometry/mesh/builder/sphere';
+import { addCylinder } from '../../mol-geo/geometry/mesh/builder/cylinder';
+import { sizeDataFactor } from '../../mol-geo/geometry/size-data';
+import { Vec3 } from '../../mol-math/linear-algebra';
+import { RuntimeContext } from '../../mol-task';
+import { Color } from '../../mol-util/color/color';
+import { decodeFloatRGB } from '../../mol-util/float-packing';
+import { RenderObjectExporter, RenderObjectExportData } from './render-object-exporter';
+
+const GeoExportName = 'geo-export';
+
+// avoiding namespace lookup improved performance in Chrome (Aug 2020)
+const v3fromArray = Vec3.fromArray;
+
+export interface AddMeshInput {
+    mesh: {
+        vertices: Float32Array
+        normals: Float32Array
+        indices: Uint32Array | undefined
+        groups: Float32Array | Uint8Array
+        vertexCount: number
+        drawCount: number
+    } | undefined
+    meshes: Mesh[] | undefined
+    values: BaseValues
+    isGeoTexture: boolean
+    webgl: WebGLContext | undefined
+    ctx: RuntimeContext
+}
+
+export abstract class MeshExporter<D extends RenderObjectExportData> implements RenderObjectExporter<D> {
+    abstract readonly fileExtension: string;
+
+    private static getSizeFromTexture(tSize: TextureImage<Uint8Array>, i: number): number {
+        const r = tSize.array[i * 3];
+        const g = tSize.array[i * 3 + 1];
+        const b = tSize.array[i * 3 + 2];
+        return decodeFloatRGB(r, g, b) / sizeDataFactor;
+    }
+
+    private static getSize(values: BaseValues & SizeValues, instanceIndex: number, group: number): number {
+        const tSize = values.tSize.ref.value;
+        let size = 0;
+        switch (values.dSizeType.ref.value) {
+            case 'uniform':
+                size = values.uSize.ref.value;
+                break;
+            case 'instance':
+                size = MeshExporter.getSizeFromTexture(tSize, instanceIndex);
+                break;
+            case 'group':
+                size = MeshExporter.getSizeFromTexture(tSize, group);
+                break;
+            case 'groupInstance':
+                const groupCount = values.uGroupCount.ref.value;
+                size = MeshExporter.getSizeFromTexture(tSize, instanceIndex * groupCount + group);
+                break;
+        }
+        return size * values.uSizeFactor.ref.value;
+    }
+
+    protected static getGroup(groups: Float32Array | Uint8Array, i: number): number {
+        const i4 = i * 4;
+        const r = groups[i4];
+        const g = groups[i4 + 1];
+        const b = groups[i4 + 2];
+        if (groups instanceof Float32Array) {
+            return decodeFloatRGB(r * 255 + 0.5, g * 255 + 0.5, b * 255 + 0.5);
+        }
+        return decodeFloatRGB(r, g, b);
+    }
+
+    protected static getInterpolatedColors(vertices: Float32Array, vertexCount: number, values: BaseValues, stride: number, colorType: 'volume' | 'volumeInstance', webgl: WebGLContext) {
+        const colorGridTransform = values.uColorGridTransform.ref.value;
+        const colorGridDim = values.uColorGridDim.ref.value;
+        const colorTexDim = values.uColorTexDim.ref.value;
+        const aTransform = values.aTransform.ref.value;
+        const instanceCount = values.uInstanceCount.ref.value;
+
+        if (!webgl.namedFramebuffers[GeoExportName]) {
+            webgl.namedFramebuffers[GeoExportName] = webgl.resources.framebuffer();
+        }
+        const framebuffer = webgl.namedFramebuffers[GeoExportName];
+
+        const [ width, height ] = colorTexDim;
+        const colorGrid = new Uint8Array(width * height * 4);
+
+        framebuffer.bind();
+        values.tColorGrid.ref.value.attachFramebuffer(framebuffer, 0);
+        webgl.readPixels(0, 0, width, height, colorGrid);
+
+        const interpolated = getTrilinearlyInterpolated({ vertexCount, instanceCount, transformBuffer: aTransform, positionBuffer: vertices, colorType, grid: colorGrid, gridDim: colorGridDim, gridTexDim: colorTexDim, gridTransform: colorGridTransform, vertexStride: stride, colorStride: 4 });
+        return interpolated.array;
+    }
+
+    protected static quantizeColors(colorArray: Uint8Array, vertexCount: number) {
+        if (vertexCount <= 1024) return;
+        const rgb = Vec3();
+        const min = Vec3();
+        const max = Vec3();
+        const sum = Vec3();
+        const colorMap = new Map<Color, Color>();
+        const colorComparers = [
+            (colors: Color[], i: number, j: number) => (Color.toVec3(rgb, colors[i])[0] - Color.toVec3(rgb, colors[j])[0]),
+            (colors: Color[], i: number, j: number) => (Color.toVec3(rgb, colors[i])[1] - Color.toVec3(rgb, colors[j])[1]),
+            (colors: Color[], i: number, j: number) => (Color.toVec3(rgb, colors[i])[2] - Color.toVec3(rgb, colors[j])[2]),
+        ];
+
+        const medianCut = (colors: Color[], l: number, r: number, depth: number) => {
+            if (l > r) return;
+            if (l === r || depth >= 10) {
+                // Find the average color.
+                Vec3.set(sum, 0, 0, 0);
+                for (let i = l; i <= r; ++i) {
+                    Color.toVec3(rgb, colors[i]);
+                    Vec3.add(sum, sum, rgb);
+                }
+                Vec3.round(rgb, Vec3.scale(rgb, sum, 1 / (r - l + 1)));
+                const averageColor = Color.fromArray(rgb, 0);
+                for (let i = l; i <= r; ++i) colorMap.set(colors[i], averageColor);
+                return;
+            }
+
+            // Find the color channel with the greatest range.
+            Vec3.set(min, 255, 255, 255);
+            Vec3.set(max, 0, 0, 0);
+            for (let i = l; i <= r; ++i) {
+                Color.toVec3(rgb, colors[i]);
+                for (let j = 0; j < 3; ++j) {
+                    Vec3.min(min, min, rgb);
+                    Vec3.max(max, max, rgb);
+                }
+            }
+            let k = 0;
+            if (max[1] - min[1] > max[k] - min[k]) k = 1;
+            if (max[2] - min[2] > max[k] - min[k]) k = 2;
+
+            sort(colors, l, r + 1, colorComparers[k], arraySwap);
+
+            const m = (l + r) >> 1;
+            medianCut(colors, l, m, depth + 1);
+            medianCut(colors, m + 1, r, depth + 1);
+        };
+
+        // Create an array of unique colors and use the median cut algorithm.
+        const colorSet = new Set<Color>();
+        for (let i = 0; i < vertexCount; ++i) {
+            colorSet.add(Color.fromArray(colorArray, i * 3));
+        }
+        const colors = Array.from(colorSet);
+        medianCut(colors, 0, colors.length - 1, 0);
+
+        // Map actual colors to quantized colors.
+        for (let i = 0; i < vertexCount; ++i) {
+            const color = colorMap.get(Color.fromArray(colorArray, i * 3));
+            Color.toArray(color!, colorArray, i * 3);
+        }
+    }
+
+    protected static getInstance(input: AddMeshInput, instanceIndex: number) {
+        const { mesh, meshes } = input;
+        if (mesh !== undefined) {
+            return mesh;
+        } else {
+            const mesh = meshes![instanceIndex];
+            return {
+                vertices: mesh.vertexBuffer.ref.value,
+                normals: mesh.normalBuffer.ref.value,
+                indices: mesh.indexBuffer.ref.value,
+                groups: mesh.groupBuffer.ref.value,
+                vertexCount: mesh.vertexCount,
+                drawCount: mesh.triangleCount * 3
+            };
+        }
+    }
+
+    protected static getColor(values: BaseValues, groups: Float32Array | Uint8Array, vertexCount: number, instanceIndex: number, isGeoTexture: boolean, interpolatedColors: Uint8Array | undefined, vertexIndex: number): Color {
+        const groupCount = values.uGroupCount.ref.value;
+        const colorType = values.dColorType.ref.value;
+        const uColor = values.uColor.ref.value;
+        const tColor = values.tColor.ref.value.array;
+        const dOverpaint = values.dOverpaint.ref.value;
+        const tOverpaint = values.tOverpaint.ref.value.array;
+
+        let color: Color;
+        switch (colorType) {
+            case 'uniform':
+                color = Color.fromNormalizedArray(uColor, 0);
+                break;
+            case 'instance':
+                color = Color.fromArray(tColor, instanceIndex * 3);
+                break;
+            case 'group': {
+                const group = isGeoTexture ? MeshExporter.getGroup(groups, vertexIndex) : groups[vertexIndex];
+                color = Color.fromArray(tColor, group * 3);
+                break;
+            }
+            case 'groupInstance': {
+                const group = isGeoTexture ? MeshExporter.getGroup(groups, vertexIndex) : groups[vertexIndex];
+                color = Color.fromArray(tColor, (instanceIndex * groupCount + group) * 3);
+                break;
+            }
+            case 'vertex':
+                color = Color.fromArray(tColor, vertexIndex * 3);
+                break;
+            case 'vertexInstance':
+                color = Color.fromArray(tColor, (instanceIndex * vertexCount + vertexIndex) * 3);
+                break;
+            case 'volume':
+                color = Color.fromArray(interpolatedColors!, vertexIndex * 3);
+                break;
+            case 'volumeInstance':
+                color = Color.fromArray(interpolatedColors!, (instanceIndex * vertexCount + vertexIndex) * 3);
+                break;
+            default: throw new Error('Unsupported color type.');
+        }
+
+        if (dOverpaint) {
+            const group = isGeoTexture ? MeshExporter.getGroup(groups, vertexIndex) : groups[vertexIndex];
+            const overpaintColor = Color.fromArray(tOverpaint, (instanceIndex * groupCount + group) * 4);
+            const overpaintAlpha = tOverpaint[(instanceIndex * groupCount + group) * 4 + 3] / 255;
+            color = Color.interpolate(color, overpaintColor, overpaintAlpha);
+        }
+
+        return color;
+    }
+
+    protected abstract addMeshWithColors(input: AddMeshInput): void;
+
+    private async addMesh(values: MeshValues, webgl: WebGLContext, ctx: RuntimeContext) {
+        const aPosition = values.aPosition.ref.value;
+        const aNormal = values.aNormal.ref.value;
+        const aGroup = values.aGroup.ref.value;
+        const originalData = Mesh.getOriginalData(values);
+        let indices: Uint32Array;
+        let vertexCount: number;
+        let drawCount: number;
+        if (originalData) {
+            indices = originalData.indexBuffer;
+            vertexCount = originalData.vertexCount;
+            drawCount = originalData.triangleCount * 3;
+        } else {
+            indices = values.elements.ref.value;
+            vertexCount = values.uVertexCount.ref.value;
+            drawCount = values.drawCount.ref.value;
+        }
+
+        await this.addMeshWithColors({ mesh: { vertices: aPosition, normals: aNormal, indices, groups: aGroup, vertexCount, drawCount }, meshes: undefined, values, isGeoTexture: false, webgl, ctx });
+    }
+
+    private async addLines(values: LinesValues, webgl: WebGLContext, ctx: RuntimeContext) {
+        // TODO
+    }
+
+    private async addPoints(values: PointsValues, webgl: WebGLContext, ctx: RuntimeContext) {
+        // TODO
+    }
+
+    private async addSpheres(values: SpheresValues, webgl: WebGLContext, ctx: RuntimeContext) {
+        const center = Vec3();
+
+        const aPosition = values.aPosition.ref.value;
+        const aGroup = values.aGroup.ref.value;
+        const instanceCount = values.instanceCount.ref.value;
+        const vertexCount = values.uVertexCount.ref.value;
+        const meshes: Mesh[] = [];
+
+        const sphereCount = vertexCount / 4 * instanceCount;
+        let detail: number;
+        if (sphereCount < 2000) detail = 3;
+        else if (sphereCount < 20000) detail = 2;
+        else detail = 1;
+
+        for (let instanceIndex = 0; instanceIndex < instanceCount; ++instanceIndex) {
+            const state = MeshBuilder.createState(512, 256);
+
+            for (let i = 0; i < vertexCount; i += 4) {
+                v3fromArray(center, aPosition, i * 3);
+
+                const group = aGroup[i];
+                const radius = MeshExporter.getSize(values, instanceIndex, group);
+                state.currentGroup = group;
+                addSphere(state, center, radius, detail);
+            }
+
+            meshes.push(MeshBuilder.getMesh(state));
+        }
+
+        await this.addMeshWithColors({ mesh: undefined, meshes, values, isGeoTexture: false, webgl, ctx });
+    }
+
+    private async addCylinders(values: CylindersValues, webgl: WebGLContext, ctx: RuntimeContext) {
+        const start = Vec3();
+        const end = Vec3();
+
+        const aStart = values.aStart.ref.value;
+        const aEnd = values.aEnd.ref.value;
+        const aScale = values.aScale.ref.value;
+        const aCap = values.aCap.ref.value;
+        const aGroup = values.aGroup.ref.value;
+        const instanceCount = values.instanceCount.ref.value;
+        const vertexCount = values.uVertexCount.ref.value;
+        const meshes: Mesh[] = [];
+
+        const cylinderCount = vertexCount / 6 * instanceCount;
+        let radialSegments: number;
+        if (cylinderCount < 2000) radialSegments = 36;
+        else if (cylinderCount < 20000) radialSegments = 24;
+        else radialSegments = 12;
+
+        for (let instanceIndex = 0; instanceIndex < instanceCount; ++instanceIndex) {
+            const state = MeshBuilder.createState(512, 256);
+
+            for (let i = 0; i < vertexCount; i += 6) {
+                v3fromArray(start, aStart, i * 3);
+                v3fromArray(end, aEnd, i * 3);
+
+                const group = aGroup[i];
+                const radius = MeshExporter.getSize(values, instanceIndex, group) * aScale[i];
+                const cap = aCap[i];
+                const topCap = cap === 1 || cap === 3;
+                const bottomCap = cap >= 2;
+                const cylinderProps = { radiusTop: radius, radiusBottom: radius, topCap, bottomCap, radialSegments };
+                state.currentGroup = aGroup[i];
+                addCylinder(state, start, end, 1, cylinderProps);
+            }
+
+            meshes.push(MeshBuilder.getMesh(state));
+        }
+
+        await this.addMeshWithColors({ mesh: undefined, meshes, values, isGeoTexture: false, webgl, ctx });
+    }
+
+    private async addTextureMesh(values: TextureMeshValues, webgl: WebGLContext, ctx: RuntimeContext) {
+        if (!webgl.namedFramebuffers[GeoExportName]) {
+            webgl.namedFramebuffers[GeoExportName] = webgl.resources.framebuffer();
+        }
+        const framebuffer = webgl.namedFramebuffers[GeoExportName];
+
+        const [ width, height ] = values.uGeoTexDim.ref.value;
+        const vertices = new Float32Array(width * height * 4);
+        const normals = new Float32Array(width * height * 4);
+        const groups = webgl.isWebGL2 ? new Uint8Array(width * height * 4) : new Float32Array(width * height * 4);
+
+        framebuffer.bind();
+        values.tPosition.ref.value.attachFramebuffer(framebuffer, 0);
+        webgl.readPixels(0, 0, width, height, vertices);
+        values.tNormal.ref.value.attachFramebuffer(framebuffer, 0);
+        webgl.readPixels(0, 0, width, height, normals);
+        values.tGroup.ref.value.attachFramebuffer(framebuffer, 0);
+        webgl.readPixels(0, 0, width, height, groups);
+
+        const vertexCount = values.uVertexCount.ref.value;
+        const drawCount = values.drawCount.ref.value;
+
+        await this.addMeshWithColors({ mesh: { vertices, normals, indices: undefined, groups, vertexCount, drawCount }, meshes: undefined, values, isGeoTexture: true, webgl, ctx });
+    }
+
+    add(renderObject: GraphicsRenderObject, webgl: WebGLContext, ctx: RuntimeContext) {
+        if (!renderObject.state.visible) return;
+
+        switch (renderObject.type) {
+            case 'mesh':
+                return this.addMesh(renderObject.values as MeshValues, webgl, ctx);
+            case 'lines':
+                return this.addLines(renderObject.values as LinesValues, webgl, ctx);
+            case 'points':
+                return this.addPoints(renderObject.values as PointsValues, webgl, ctx);
+            case 'spheres':
+                return this.addSpheres(renderObject.values as SpheresValues, webgl, ctx);
+            case 'cylinders':
+                return this.addCylinders(renderObject.values as CylindersValues, webgl, ctx);
+            case 'texture-mesh':
+                return this.addTextureMesh(renderObject.values as TextureMeshValues, webgl, ctx);
+        }
+    }
+
+    abstract getData(ctx: RuntimeContext): Promise<D>;
+
+    abstract getBlob(ctx: RuntimeContext): Promise<Blob>;
+}

src/extensions/geo-export/obj-exporter.ts

@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { asciiWrite } from '../../mol-io/common/ascii';
+import { Box3D } from '../../mol-math/geometry';
+import { Vec3, Mat3, Mat4 } from '../../mol-math/linear-algebra';
+import { RuntimeContext } from '../../mol-task';
+import { StringBuilder } from '../../mol-util';
+import { Color } from '../../mol-util/color/color';
+import { zip } from '../../mol-util/zip/zip';
+import { MeshExporter, AddMeshInput } from './mesh-exporter';
+
+// avoiding namespace lookup improved performance in Chrome (Aug 2020)
+const v3fromArray = Vec3.fromArray;
+const v3transformMat4 = Vec3.transformMat4;
+const v3transformMat3 = Vec3.transformMat3;
+const mat3directionTransform = Mat3.directionTransform;
+
+// http://paulbourke.net/dataformats/obj/
+// http://paulbourke.net/dataformats/mtl/
+
+export type ObjData = {
+    obj: string
+    mtl: string
+}
+
+export class ObjExporter extends MeshExporter<ObjData> {
+    readonly fileExtension = 'zip';
+    private obj = StringBuilder.create();
+    private mtl = StringBuilder.create();
+    private vertexOffset = 0;
+    private currentColor: Color | undefined;
+    private currentAlpha: number | undefined;
+    private materialSet = new Set<string>();
+    private centerTransform: Mat4;
+
+    private updateMaterial(color: Color, alpha: number) {
+        if (this.currentColor === color && this.currentAlpha === alpha) return;
+
+        this.currentColor = color;
+        this.currentAlpha = alpha;
+        const material = Color.toHexString(color) + alpha;
+        StringBuilder.writeSafe(this.obj, `usemtl ${material}`);
+        StringBuilder.newline(this.obj);
+        if (!this.materialSet.has(material)) {
+            this.materialSet.add(material);
+            const [r, g, b] = Color.toRgbNormalized(color);
+            const mtl = this.mtl;
+            StringBuilder.writeSafe(mtl, `newmtl ${material}\n`);
+            StringBuilder.writeSafe(mtl, 'illum 2\n'); // illumination model
+            StringBuilder.writeSafe(mtl, 'Ns 163\n'); // specular exponent
+            StringBuilder.writeSafe(mtl, 'Ni 0.001\n'); // optical density a.k.a. index of refraction
+            StringBuilder.writeSafe(mtl, 'Ka 0 0 0\n'); // ambient reflectivity
+            StringBuilder.writeSafe(mtl, 'Kd '); // diffuse reflectivity
+            StringBuilder.writeFloat(mtl, r, 1000);
+            StringBuilder.whitespace1(mtl);
+            StringBuilder.writeFloat(mtl, g, 1000);
+            StringBuilder.whitespace1(mtl);
+            StringBuilder.writeFloat(mtl, b, 1000);
+            StringBuilder.newline(mtl);
+            StringBuilder.writeSafe(mtl, 'Ks 0.25 0.25 0.25\n'); // specular reflectivity
+            StringBuilder.writeSafe(mtl, 'd '); // dissolve
+            StringBuilder.writeFloat(mtl, alpha, 1000);
+            StringBuilder.newline(mtl);
+        }
+    }
+
+    protected async addMeshWithColors(input: AddMeshInput) {
+        const { mesh, values, isGeoTexture, webgl, ctx } = input;
+
+        const obj = this.obj;
+        const t = Mat4();
+        const n = Mat3();
+        const tmpV = Vec3();
+        const stride = isGeoTexture ? 4 : 3;
+
+        const groupCount = values.uGroupCount.ref.value;
+        const colorType = values.dColorType.ref.value;
+        const uAlpha = values.uAlpha.ref.value;
+        const dTransparency = values.dTransparency.ref.value;
+        const tTransparency = values.tTransparency.ref.value;
+        const aTransform = values.aTransform.ref.value;
+        const instanceCount = values.uInstanceCount.ref.value;
+
+        let interpolatedColors: Uint8Array | undefined;
+        if (colorType === 'volume' || colorType === 'volumeInstance') {
+            interpolatedColors = ObjExporter.getInterpolatedColors(mesh!.vertices, mesh!.vertexCount, values, stride, colorType, webgl!);
+            ObjExporter.quantizeColors(interpolatedColors, mesh!.vertexCount);
+        }
+
+        await ctx.update({ isIndeterminate: false, current: 0, max: instanceCount });
+
+        for (let instanceIndex = 0; instanceIndex < instanceCount; ++instanceIndex) {
+            if (ctx.shouldUpdate) await ctx.update({ current: instanceIndex + 1 });
+
+            const { vertices, normals, indices, groups, vertexCount, drawCount } = ObjExporter.getInstance(input, instanceIndex);
+
+            Mat4.fromArray(t, aTransform, instanceIndex * 16);
+            Mat4.mul(t, this.centerTransform, t);
+            mat3directionTransform(n, t);
+
+            // position
+            for (let i = 0; i < vertexCount; ++i) {
+                v3transformMat4(tmpV, v3fromArray(tmpV, vertices, i * stride), t);
+                StringBuilder.writeSafe(obj, 'v ');
+                StringBuilder.writeFloat(obj, tmpV[0], 1000);
+                StringBuilder.whitespace1(obj);
+                StringBuilder.writeFloat(obj, tmpV[1], 1000);
+                StringBuilder.whitespace1(obj);
+                StringBuilder.writeFloat(obj, tmpV[2], 1000);
+                StringBuilder.newline(obj);
+            }
+
+            // normal
+            for (let i = 0; i < vertexCount; ++i) {
+                v3transformMat3(tmpV, v3fromArray(tmpV, normals, i * stride), n);
+                StringBuilder.writeSafe(obj, 'vn ');
+                StringBuilder.writeFloat(obj, tmpV[0], 100);
+                StringBuilder.whitespace1(obj);
+                StringBuilder.writeFloat(obj, tmpV[1], 100);
+                StringBuilder.whitespace1(obj);
+                StringBuilder.writeFloat(obj, tmpV[2], 100);
+                StringBuilder.newline(obj);
+            }
+
+            // face
+            for (let i = 0; i < drawCount; i += 3) {
+                const v = isGeoTexture ? i : indices![i];
+                const color = ObjExporter.getColor(values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors, v);
+
+                let alpha = uAlpha;
+                if (dTransparency) {
+                    const group = isGeoTexture ? ObjExporter.getGroup(groups, i) : groups[indices![i]];
+                    const transparency = tTransparency.array[instanceIndex * groupCount + group] / 255;
+                    alpha *= 1 - transparency;
+                }
+
+                this.updateMaterial(color, alpha);
+
+                const v1 = this.vertexOffset + (isGeoTexture ? i : indices![i]) + 1;
+                const v2 = this.vertexOffset + (isGeoTexture ? i + 1 : indices![i + 1]) + 1;
+                const v3 = this.vertexOffset + (isGeoTexture ? i + 2 : indices![i + 2]) + 1;
+                StringBuilder.writeSafe(obj, 'f ');
+                StringBuilder.writeInteger(obj, v1);
+                StringBuilder.writeSafe(obj, '//');
+                StringBuilder.writeIntegerAndSpace(obj, v1);
+                StringBuilder.writeInteger(obj, v2);
+                StringBuilder.writeSafe(obj, '//');
+                StringBuilder.writeIntegerAndSpace(obj, v2);
+                StringBuilder.writeInteger(obj, v3);
+                StringBuilder.writeSafe(obj, '//');
+                StringBuilder.writeInteger(obj, v3);
+                StringBuilder.newline(obj);
+            }
+
+            this.vertexOffset += vertexCount;
+        }
+    }
+
+    async getData() {
+        return {
+            obj: StringBuilder.getString(this.obj),
+            mtl: StringBuilder.getString(this.mtl)
+        };
+    }
+
+    async getBlob(ctx: RuntimeContext) {
+        const { obj, mtl } = await this.getData();
+        const objData = new Uint8Array(obj.length);
+        asciiWrite(objData, obj);
+        const mtlData = new Uint8Array(mtl.length);
+        asciiWrite(mtlData, mtl);
+        const zipDataObj = {
+            [this.filename + '.obj']: objData,
+            [this.filename + '.mtl']: mtlData
+        };
+        return new Blob([await zip(ctx, zipDataObj)], { type: 'application/zip' });
+    }
+
+    constructor(private filename: string, boundingBox: Box3D) {
+        super();
+        StringBuilder.writeSafe(this.obj, `mtllib ${filename}.mtl\n`);
+        const tmpV = Vec3();
+        Vec3.add(tmpV, boundingBox.min, boundingBox.max);
+        Vec3.scale(tmpV, tmpV, -0.5);
+        this.centerTransform = Mat4.fromTranslation(Mat4(), tmpV);
+    }
+}

src/extensions/geo-export/render-object-exporter.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { GraphicsRenderObject } from '../../mol-gl/render-object';
+import { WebGLContext } from '../../mol-gl/webgl/context';
+import { RuntimeContext } from '../../mol-task';
+
+export type RenderObjectExportData = {
+    [k: string]: string | Uint8Array | ArrayBuffer | undefined
+}
+
+export interface RenderObjectExporter<D extends RenderObjectExportData> {
+    readonly fileExtension: string
+    add(renderObject: GraphicsRenderObject, webgl: WebGLContext, ctx: RuntimeContext): Promise<void> | undefined
+    getData(ctx: RuntimeContext): Promise<D>
+    getBlob(ctx: RuntimeContext): Promise<Blob>
+}

src/extensions/geo-export/stl-exporter.ts

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { asciiWrite } from '../../mol-io/common/ascii';
+import { Box3D } from '../../mol-math/geometry';
+import { Vec3, Mat4 } from '../../mol-math/linear-algebra';
+import { PLUGIN_VERSION } from '../../mol-plugin/version';
+import { RuntimeContext } from '../../mol-task';
+import { MeshExporter, AddMeshInput } from './mesh-exporter';
+
+// avoiding namespace lookup improved performance in Chrome (Aug 2020)
+const v3fromArray = Vec3.fromArray;
+const v3transformMat4 = Vec3.transformMat4;
+const v3triangleNormal = Vec3.triangleNormal;
+const v3toArray = Vec3.toArray;
+
+// https://www.fabbers.com/tech/STL_Format
+
+export type StlData = {
+    stl: Uint8Array
+}
+
+export class StlExporter extends MeshExporter<StlData> {
+    readonly fileExtension = 'stl';
+    private triangleBuffers: ArrayBuffer[] = [];
+    private triangleCount = 0;
+    private centerTransform: Mat4;
+
+    protected async addMeshWithColors(input: AddMeshInput) {
+        const { values, isGeoTexture, ctx } = input;
+
+        const t = Mat4();
+        const tmpV = Vec3();
+        const v1 = Vec3();
+        const v2 = Vec3();
+        const v3 = Vec3();
+        const stride = isGeoTexture ? 4 : 3;
+
+        const aTransform = values.aTransform.ref.value;
+        const instanceCount = values.uInstanceCount.ref.value;
+
+        for (let instanceIndex = 0; instanceIndex < instanceCount; ++instanceIndex) {
+            if (ctx.shouldUpdate) await ctx.update({ current: instanceIndex + 1 });
+
+            const { vertices, indices, vertexCount, drawCount } = StlExporter.getInstance(input, instanceIndex);
+
+            Mat4.fromArray(t, aTransform, instanceIndex * 16);
+            Mat4.mul(t, this.centerTransform, t);
+
+            // position
+            const vertexArray = new Float32Array(vertexCount * 3);
+            for (let i = 0; i < vertexCount; ++i) {
+                v3transformMat4(tmpV, v3fromArray(tmpV, vertices, i * stride), t);
+                v3toArray(tmpV, vertexArray, i * 3);
+            }
+
+            // face
+            const triangleBuffer = new ArrayBuffer(50 * drawCount);
+            const dataView = new DataView(triangleBuffer);
+            for (let i = 0; i < drawCount; i += 3) {
+                v3fromArray(v1, vertexArray, (isGeoTexture ? i : indices![i]) * 3);
+                v3fromArray(v2, vertexArray, (isGeoTexture ? i + 1 : indices![i + 1]) * 3);
+                v3fromArray(v3, vertexArray, (isGeoTexture ? i + 2 : indices![i + 2]) * 3);
+                v3triangleNormal(tmpV, v1, v2, v3);
+
+                const byteOffset = 50 * i;
+                dataView.setFloat32(byteOffset, tmpV[0], true);
+                dataView.setFloat32(byteOffset + 4, tmpV[1], true);
+                dataView.setFloat32(byteOffset + 8, tmpV[2], true);
+
+                dataView.setFloat32(byteOffset + 12, v1[0], true);
+                dataView.setFloat32(byteOffset + 16, v1[1], true);
+                dataView.setFloat32(byteOffset + 20, v1[2], true);
+
+                dataView.setFloat32(byteOffset + 24, v2[0], true);
+                dataView.setFloat32(byteOffset + 28, v2[1], true);
+                dataView.setFloat32(byteOffset + 32, v2[2], true);
+
+                dataView.setFloat32(byteOffset + 36, v3[0], true);
+                dataView.setFloat32(byteOffset + 40, v3[1], true);
+                dataView.setFloat32(byteOffset + 44, v3[2], true);
+            }
+
+            this.triangleBuffers.push(triangleBuffer);
+            this.triangleCount += drawCount;
+        }
+    }
+
+    async getData() {
+        const stl = new Uint8Array(84 + 50 * this.triangleCount);
+
+        asciiWrite(stl, `Exported from Mol* ${PLUGIN_VERSION}`);
+
+        const dataView = new DataView(stl.buffer);
+        dataView.setUint32(80, this.triangleCount, true);
+
+        let byteOffset = 84;
+        for (const buffer of this.triangleBuffers) {
+            stl.set(new Uint8Array(buffer), byteOffset);
+            byteOffset += buffer.byteLength;
+        }
+        return { stl };
+    }
+
+    async getBlob(ctx: RuntimeContext) {
+        return new Blob([(await this.getData()).stl], { type: 'model/stl' });
+    }
+
+    constructor(boundingBox: Box3D) {
+        super();
+        const tmpV = Vec3();
+        Vec3.add(tmpV, boundingBox.min, boundingBox.max);
+        Vec3.scale(tmpV, tmpV, -0.5);
+        this.centerTransform = Mat4.fromTranslation(Mat4(), tmpV);
+    }
+}

src/extensions/geo-export/ui.tsx

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { merge } from 'rxjs';
+import { CollapsableControls, CollapsableState } from '../../mol-plugin-ui/base';
+import { Button } from '../../mol-plugin-ui/controls/common';
+import { GetAppSvg, CubeScanSvg, CubeSendSvg } from '../../mol-plugin-ui/controls/icons';
+import { ParameterControls } from '../../mol-plugin-ui/controls/parameters';
+import { download } from '../../mol-util/download';
+import { GeometryParams, GeometryControls } from './controls';
+
+interface State {
+    busy?: boolean
+}
+
+export class GeometryExporterUI extends CollapsableControls<{}, State> {
+    private _controls: GeometryControls | undefined;
+    private isARSupported: boolean | undefined;
+
+    get controls() {
+        return this._controls || (this._controls = new GeometryControls(this.plugin));
+    }
+
+    protected defaultState(): State & CollapsableState {
+        return {
+            header: 'Export Geometry',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: CubeSendSvg }
+        };
+    }
+
+    protected renderControls(): JSX.Element {
+        if (this.isARSupported === undefined) {
+            this.isARSupported = !!document.createElement('a').relList?.supports?.('ar');
+        }
+        const ctrl = this.controls;
+        return <>
+            <ParameterControls
+                params={GeometryParams}
+                values={ctrl.behaviors.params.value}
+                onChangeValues={xs => ctrl.behaviors.params.next(xs)}
+                isDisabled={this.state.busy}
+            />
+            <Button icon={GetAppSvg}
+                onClick={this.save} style={{ marginTop: 1 }}
+                disabled={this.state.busy || !this.plugin.canvas3d?.reprCount.value}>
+                Save
+            </Button>
+            {this.isARSupported && ctrl.behaviors.params.value.format === 'usdz' &&
+                <Button icon={CubeScanSvg}
+                    onClick={this.viewInAR} style={{ marginTop: 1 }}
+                    disabled={this.state.busy || !this.plugin.canvas3d?.reprCount.value}>
+                    View in AR
+                </Button>
+            }
+        </>;
+    }
+
+    componentDidMount() {
+        const merged = merge(
+            this.controls.behaviors.params,
+            this.plugin.canvas3d!.reprCount
+        );
+
+        this.subscribe(merged, () => {
+            if (!this.state.isCollapsed) this.forceUpdate();
+        });
+    }
+
+    componentWillUnmount() {
+        this._controls?.dispose();
+        this._controls = void 0;
+    }
+
+    save = async () => {
+        try {
+            this.setState({ busy: true });
+            const data = await this.controls.exportGeometry();
+            this.setState({ busy: false });
+
+            download(data.blob, data.filename);
+        } catch {
+            this.setState({ busy: false });
+        }
+    }
+
+    viewInAR = async () => {
+        try {
+            this.setState({ busy: true });
+            const data = await this.controls.exportGeometry();
+            this.setState({ busy: false });
+            const a = document.createElement('a');
+            a.rel = 'ar';
+            a.href = URL.createObjectURL(data.blob);
+            // For in-place viewing of USDZ on iOS, the link must contain a single child that is either an img or picture.
+            // https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/
+            a.appendChild(document.createElement('img'));
+            setTimeout(() => URL.revokeObjectURL(a.href), 4E4); // 40s
+            setTimeout(() => a.dispatchEvent(new MouseEvent('click')));
+        } catch {
+            this.setState({ busy: false });
+        }
+    }
+}

src/extensions/geo-export/usdz-exporter.ts

@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+import { Style } from '../../mol-gl/renderer';
+import { asciiWrite } from '../../mol-io/common/ascii';
+import { Box3D } from '../../mol-math/geometry';
+import { Vec3, Mat3, Mat4 } from '../../mol-math/linear-algebra';
+import { PLUGIN_VERSION } from '../../mol-plugin/version';
+import { RuntimeContext } from '../../mol-task';
+import { StringBuilder } from '../../mol-util';
+import { Color } from '../../mol-util/color/color';
+import { zip } from '../../mol-util/zip/zip';
+import { MeshExporter, AddMeshInput } from './mesh-exporter';
+
+// avoiding namespace lookup improved performance in Chrome (Aug 2020)
+const v3fromArray = Vec3.fromArray;
+const v3transformMat4 = Vec3.transformMat4;
+const v3transformMat3 = Vec3.transformMat3;
+const mat3directionTransform = Mat3.directionTransform;
+
+// https://graphics.pixar.com/usd/docs/index.html
+
+export type UsdzData = {
+    usdz: ArrayBuffer
+}
+
+export class UsdzExporter extends MeshExporter<UsdzData> {
+    readonly fileExtension = 'usdz';
+    private meshes: string[] = [];
+    private materials: string[] = [];
+    private materialSet = new Set<number>();
+    private centerTransform: Mat4;
+
+    private static getMaterialKey(color: Color, alpha: number) {
+        return color * 256 + Math.round(alpha * 255);
+    }
+
+    private addMaterial(color: Color, alpha: number) {
+        const materialKey = UsdzExporter.getMaterialKey(color, alpha);
+        if (this.materialSet.has(materialKey)) return;
+        this.materialSet.add(materialKey);
+        const [r, g, b] = Color.toRgbNormalized(color);
+        this.materials.push(`
+def Material "material${materialKey}"
+{
+    token outputs:surface.connect = </material${materialKey}/shader.outputs:surface>
+    def Shader "shader"
+    {
+        uniform token info:id = "UsdPreviewSurface"
+        color3f inputs:diffuseColor = (${r},${g},${b})
+        float inputs:opacity = ${alpha}
+        float inputs:metallic = ${this.style.metalness}
+        float inputs:roughness = ${this.style.roughness}
+        token outputs:surface
+    }
+}
+`);
+    }
+
+    protected async addMeshWithColors(input: AddMeshInput) {
+        const { mesh, values, isGeoTexture, webgl, ctx } = input;
+
+        const t = Mat4();
+        const n = Mat3();
+        const tmpV = Vec3();
+        const stride = isGeoTexture ? 4 : 3;
+
+        const groupCount = values.uGroupCount.ref.value;
+        const colorType = values.dColorType.ref.value;
+        const uAlpha = values.uAlpha.ref.value;
+        const dTransparency = values.dTransparency.ref.value;
+        const tTransparency = values.tTransparency.ref.value;
+        const aTransform = values.aTransform.ref.value;
+        const instanceCount = values.uInstanceCount.ref.value;
+
+        let interpolatedColors: Uint8Array | undefined;
+        if (colorType === 'volume' || colorType === 'volumeInstance') {
+            interpolatedColors = UsdzExporter.getInterpolatedColors(mesh!.vertices, mesh!.vertexCount, values, stride, colorType, webgl!);
+            UsdzExporter.quantizeColors(interpolatedColors, mesh!.vertexCount);
+        }
+
+        await ctx.update({ isIndeterminate: false, current: 0, max: instanceCount });
+
+        for (let instanceIndex = 0; instanceIndex < instanceCount; ++instanceIndex) {
+            if (ctx.shouldUpdate) await ctx.update({ current: instanceIndex + 1 });
+
+            const { vertices, normals, indices, groups, vertexCount, drawCount } = UsdzExporter.getInstance(input, instanceIndex);
+
+            Mat4.fromArray(t, aTransform, instanceIndex * 16);
+            Mat4.mul(t, this.centerTransform, t);
+            mat3directionTransform(n, t);
+
+            const vertexBuilder = StringBuilder.create();
+            const normalBuilder = StringBuilder.create();
+            const indexBuilder = StringBuilder.create();
+
+            // position
+            for (let i = 0; i < vertexCount; ++i) {
+                v3transformMat4(tmpV, v3fromArray(tmpV, vertices, i * stride), t);
+                StringBuilder.writeSafe(vertexBuilder, (i === 0) ? '(' : ',(');
+                StringBuilder.writeFloat(vertexBuilder, tmpV[0], 10000);
+                StringBuilder.writeSafe(vertexBuilder, ',');
+                StringBuilder.writeFloat(vertexBuilder, tmpV[1], 10000);
+                StringBuilder.writeSafe(vertexBuilder, ',');
+                StringBuilder.writeFloat(vertexBuilder, tmpV[2], 10000);
+                StringBuilder.writeSafe(vertexBuilder, ')');
+            }
+
+            // normal
+            for (let i = 0; i < vertexCount; ++i) {
+                v3transformMat3(tmpV, v3fromArray(tmpV, normals, i * stride), n);
+                StringBuilder.writeSafe(normalBuilder, (i === 0) ? '(' : ',(');
+                StringBuilder.writeFloat(normalBuilder, tmpV[0], 100);
+                StringBuilder.writeSafe(normalBuilder, ',');
+                StringBuilder.writeFloat(normalBuilder, tmpV[1], 100);
+                StringBuilder.writeSafe(normalBuilder, ',');
+                StringBuilder.writeFloat(normalBuilder, tmpV[2], 100);
+                StringBuilder.writeSafe(normalBuilder, ')');
+            }
+
+            // face
+            for (let i = 0; i < drawCount; ++i) {
+                const v = isGeoTexture ? i : indices![i];
+                if (i > 0) StringBuilder.writeSafe(indexBuilder, ',');
+                StringBuilder.writeInteger(indexBuilder, v);
+            }
+
+            // color
+            const faceIndicesByMaterial = new Map<number, number[]>();
+            for (let i = 0; i < drawCount; i += 3) {
+                const v = isGeoTexture ? i : indices![i];
+                const color = UsdzExporter.getColor(values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors, v);
+
+                let alpha = uAlpha;
+                if (dTransparency) {
+                    const group = isGeoTexture ? UsdzExporter.getGroup(groups, i) : groups[indices![i]];
+                    const transparency = tTransparency.array[instanceIndex * groupCount + group] / 255;
+                    alpha *= 1 - transparency;
+                }
+
+                this.addMaterial(color, alpha);
+
+                const materialKey = UsdzExporter.getMaterialKey(color, alpha);
+                let faceIndices = faceIndicesByMaterial.get(materialKey);
+                if (faceIndices === undefined) {
+                    faceIndices = [];
+                    faceIndicesByMaterial.set(materialKey, faceIndices);
+                }
+                faceIndices.push(i / 3);
+            }
+
+            // If this mesh uses only one material, bind it to the material directly.
+            // Otherwise, use GeomSubsets to bind it to multiple materials.
+            let materialBinding: string;
+            if (faceIndicesByMaterial.size === 1) {
+                const materialKey = faceIndicesByMaterial.keys().next().value;
+                materialBinding = `rel material:binding = </material${materialKey}>`;
+            } else {
+                const geomSubsets: string[] = [];
+                faceIndicesByMaterial.forEach((faceIndices: number[], materialKey: number) => {
+                    geomSubsets.push(`
+    def GeomSubset "g${materialKey}"
+    {
+        uniform token elementType = "face"
+        uniform token familyName = "materialBind"
+        int[] indices = [${faceIndices.join(',')}]
+        rel material:binding = </material${materialKey}>
+    }
+`);
+                });
+                materialBinding = geomSubsets.join('');
+            }
+
+            this.meshes.push(`
+def Mesh "mesh${this.meshes.length}"
+{
+    int[] faceVertexCounts = [${new Array(drawCount / 3).fill(3).join(',')}]
+    int[] faceVertexIndices = [${StringBuilder.getString(indexBuilder)}]
+    point3f[] points = [${StringBuilder.getString(vertexBuilder)}]
+    normal3f[] primvars:normals = [${StringBuilder.getString(normalBuilder)}] (
+        interpolation = "vertex"
+    )
+    uniform token subdivisionScheme = "none"
+    ${materialBinding}
+}
+`);
+        }
+    }
+
+    async getData(ctx: RuntimeContext) {
+        const header = `#usda 1.0
+(
+    customLayerData = {
+        string creator = "Mol* ${PLUGIN_VERSION}"
+    }
+    metersPerUnit = 1
+)
+`;
+        const usda = [header, ...this.materials, ...this.meshes].join('');
+        const usdaData = new Uint8Array(usda.length);
+        asciiWrite(usdaData, usda);
+        const zipDataObj = {
+            ['model.usda']: usdaData
+        };
+        return {
+            usdz: await zip(ctx, zipDataObj, true)
+        };
+    }
+
+    async getBlob(ctx: RuntimeContext) {
+        const { usdz } = await this.getData(ctx);
+        return new Blob([usdz], { type: 'model/vnd.usdz+zip' });
+    }
+
+    constructor(private style: Style, boundingBox: Box3D, radius: number) {
+        super();
+        const t = Mat4();
+        // scale the model so that it fits within 1 meter
+        Mat4.fromUniformScaling(t, Math.min(1 / (radius * 2), 1));
+        // translate the model so that it sits on the ground plane (y = 0)
+        Mat4.translate(t, t, Vec3.create(
+            -(boundingBox.min[0] + boundingBox.max[0]) / 2,
+            -boundingBox.min[1],
+            -(boundingBox.min[2] + boundingBox.max[2]) / 2
+        ));
+        this.centerTransform = t;
+    }
+}

src/extensions/mp4-export/ui.tsx

@@ -4,7 +4,6 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import React from 'react';
 import { merge } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { CollapsableControls, CollapsableState } from '../../mol-plugin-ui/base';

src/extensions/pdbe/structure-quality-report/color.ts

@@ -79,6 +79,7 @@ export function StructureQualityReportColorTheme(ctx: ThemeDataContext, props: P
     return {
         factory: StructureQualityReportColorTheme,
         granularity: 'group',
+        preferSmoothing: true,
         color: color,
         props: props,
         description: 'Assigns residue colors according to the number of quality issues or a specific quality issue. Data from wwPDB Validation Report, obtained via PDBe.',
@@ -114,6 +115,6 @@ export const StructureQualityReportColorThemeProvider: ColorTheme.Provider<Param
     isApplicable: (ctx: ThemeDataContext) => StructureQualityReport.isApplicable(ctx.structure?.models[0]),
     ensureCustomProperties: {
         attach: (ctx: CustomProperty.Context, data: ThemeDataContext) => data.structure ? StructureQualityReportProvider.attach(ctx, data.structure.models[0], void 0, true) : Promise.resolve(),
-        detach: (data) => data.structure && data.structure.models[0].customProperties.reference(StructureQualityReportProvider.descriptor, false)
+        detach: (data) => data.structure && StructureQualityReportProvider.ref(data.structure.models[0], false)
     }
 };

src/extensions/rcsb/assembly-symmetry/behavior.ts

@@ -124,7 +124,7 @@ const AssemblySymmetry3D = PluginStateTransform.BuiltIn({
             const repr = AssemblySymmetryRepresentation({ webgl: plugin.canvas3d?.webgl, ...plugin.representation.structure.themes }, () => AssemblySymmetryParams);
             await repr.createOrUpdate(params, a.data).runInContext(ctx);
             const { type, kind, symbol } = assemblySymmetry;
-            return new PluginStateObject.Shape.Representation3D({ repr, source: a }, { label: kind, description: `${type} (${symbol})` });
+            return new PluginStateObject.Shape.Representation3D({ repr, sourceData: a.data }, { label: kind, description: `${type} (${symbol})` });
         });
     },
     update({ a, b, newParams }, plugin: PluginContext) {
@@ -138,6 +138,7 @@ const AssemblySymmetry3D = PluginStateTransform.BuiltIn({
             }
             const props = { ...b.data.repr.props, ...newParams };
             await b.data.repr.createOrUpdate(props, a.data).runInContext(ctx);
+            b.data.sourceData = a.data;
             const { type, kind, symbol } = assemblySymmetry;
             b.label = kind;
             b.description = `${type} (${symbol})`;

src/extensions/rcsb/assembly-symmetry/color.ts

@@ -109,6 +109,6 @@ export const AssemblySymmetryClusterColorThemeProvider: ColorTheme.Provider<Asse
     isApplicable: (ctx: ThemeDataContext) => AssemblySymmetry.isApplicable(ctx.structure),
     ensureCustomProperties: {
         attach: (ctx: CustomProperty.Context, data: ThemeDataContext) => data.structure ? AssemblySymmetryProvider.attach(ctx, data.structure, void 0, true) : Promise.resolve(),
-        detach: (data) => data.structure && data.structure.customPropertyDescriptors.reference(AssemblySymmetryProvider.descriptor, false)
+        detach: (data) => data.structure && AssemblySymmetryProvider.ref(data.structure, false)
     }
 };

src/extensions/rcsb/assembly-symmetry/prop.ts

@@ -124,16 +124,20 @@ export function getSymmetrySelectParam(structure?: Structure) {
     if (structure) {
         const assemblySymmetryData = AssemblySymmetryDataProvider.get(structure).value;
         if (assemblySymmetryData) {
-            const options: [number, string][] = [];
+            const options: [number, string][] = [
+                [-1, 'Off']
+            ];
             for (let i = 0, il = assemblySymmetryData.length; i < il; ++i) {
                 const { symbol, kind } = assemblySymmetryData[i];
                 if (symbol !== 'C1') {
                     options.push([ i, `${i + 1}: ${symbol} ${kind}` ]);
                 }
             }
-            if (options.length) {
+            if (options.length > 1) {
                 param.options = options;
-                param.defaultValue = options[0][0];
+                param.defaultValue = options[1][0];
+            } else {
+                options.length = 0;
             }
         }
     }

src/extensions/rcsb/assembly-symmetry/ui.tsx

@@ -4,7 +4,6 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as React from 'react';
 import { CollapsableState, CollapsableControls } from '../../../mol-plugin-ui/base';
 import { ApplyActionControl } from '../../../mol-plugin-ui/state/apply-action';
 import { InitAssemblySymmetry3D, AssemblySymmetry3D, AssemblySymmetryPreset, tryCreateAssemblySymmetry } from './behavior';
@@ -74,7 +73,6 @@ export class AssemblySymmetryControls extends CollapsableControls<{}, AssemblySy
         const structure = this.pivot.cell.obj?.data;
         const params = PD.clone(structure ? AssemblySymmetryProvider.getParams(structure) : AssemblySymmetryProvider.defaultParams);
         params.serverUrl.isHidden = true;
-        params.symmetryIndex.options = [[-1, 'Off'], ...params.symmetryIndex.options];
         return params;
     }
 

src/extensions/rcsb/validation-report/color/density-fit.ts

@@ -58,6 +58,7 @@ export function DensityFitColorTheme(ctx: ThemeDataContext, props: {}): ColorThe
     return {
         factory: DensityFitColorTheme,
         granularity: 'group',
+        preferSmoothing: true,
         color,
         props,
         contextHash,
@@ -76,6 +77,6 @@ export const DensityFitColorThemeProvider: ColorTheme.Provider<{}, ValidationRep
     isApplicable: (ctx: ThemeDataContext) => !!ctx.structure && ValidationReport.isApplicable(ctx.structure.models[0]) && Model.isFromXray(ctx.structure.models[0]) && Model.probablyHasDensityMap(ctx.structure.models[0]),
     ensureCustomProperties: {
         attach: (ctx: CustomProperty.Context, data: ThemeDataContext) => data.structure ? ValidationReportProvider.attach(ctx, data.structure.models[0], void 0, true) : Promise.resolve(),
-        detach: (data) => data.structure && data.structure.models[0].customProperties.reference(ValidationReportProvider.descriptor, false)
+        detach: (data) => data.structure && ValidationReportProvider.ref(data.structure.models[0], false)
     }
 };

src/extensions/rcsb/validation-report/color/geometry-quality.ts

@@ -96,6 +96,7 @@ export function GeometryQualityColorTheme(ctx: ThemeDataContext, props: PD.Value
     return {
         factory: GeometryQualityColorTheme,
         granularity: 'group',
+        preferSmoothing: true,
         color,
         props,
         contextHash,
@@ -114,6 +115,6 @@ export const GeometryQualityColorThemeProvider: ColorTheme.Provider<GeometricQua
     isApplicable: (ctx: ThemeDataContext) => ValidationReport.isApplicable(ctx.structure?.models[0]),
     ensureCustomProperties: {
         attach: (ctx: CustomProperty.Context, data: ThemeDataContext) => data.structure ? ValidationReportProvider.attach(ctx, data.structure.models[0], void 0, true) : Promise.resolve(),
-        detach: (data) => data.structure && data.structure.models[0].customProperties.reference(ValidationReportProvider.descriptor, false)
+        detach: (data) => data.structure && ValidationReportProvider.ref(data.structure.models[0], false)
     }
 };

src/extensions/rcsb/validation-report/color/random-coil-index.ts

@@ -49,6 +49,7 @@ export function RandomCoilIndexColorTheme(ctx: ThemeDataContext, props: {}): Col
     return {
         factory: RandomCoilIndexColorTheme,
         granularity: 'group',
+        preferSmoothing: true,
         color,
         props,
         contextHash,
@@ -67,6 +68,6 @@ export const RandomCoilIndexColorThemeProvider: ColorTheme.Provider<{}, Validati
     isApplicable: (ctx: ThemeDataContext) => !!ctx.structure && ValidationReport.isApplicable(ctx.structure.models[0]) && Model.isFromNmr(ctx.structure.models[0]),
     ensureCustomProperties: {
         attach: (ctx: CustomProperty.Context, data: ThemeDataContext) => data.structure ? ValidationReportProvider.attach(ctx, data.structure.models[0], void 0, true) : Promise.resolve(),
-        detach: (data) => data.structure && data.structure.models[0].customProperties.reference(ValidationReportProvider.descriptor, false)
+        detach: (data) => data.structure && ValidationReportProvider.ref(data.structure.models[0], false)
     }
 };

src/extensions/rcsb/validation-report/representation.ts

@@ -16,7 +16,7 @@ import { RepresentationContext, RepresentationParamsGetter, Representation } fro
 import { UnitsRepresentation, StructureRepresentation, StructureRepresentationStateBuilder, StructureRepresentationProvider, ComplexRepresentation } from '../../../mol-repr/structure/representation';
 import { VisualContext } from '../../../mol-repr/visual';
 import { createLinkCylinderMesh, LinkCylinderParams, LinkStyle } from '../../../mol-repr/structure/visual/util/link';
-import { UnitsMeshParams, UnitsVisual, UnitsMeshVisual, StructureGroup } from '../../../mol-repr/structure/units-visual';
+import { UnitsMeshParams, UnitsVisual, UnitsMeshVisual } from '../../../mol-repr/structure/units-visual';
 import { VisualUpdateState } from '../../../mol-repr/util';
 import { LocationIterator } from '../../../mol-geo/util/location-iterator';
 import { ClashesProvider, IntraUnitClashes, InterUnitClashes, ValidationReport } from './prop';
@@ -28,6 +28,7 @@ import { CentroidHelper } from '../../../mol-math/geometry/centroid-helper';
 import { Sphere3D } from '../../../mol-math/geometry';
 import { bondLabel } from '../../../mol-theme/label';
 import { getUnitKindsParam } from '../../../mol-repr/structure/params';
+import { StructureGroup } from '../../../mol-repr/structure/visual/util/common';
 
 //
 

src/mol-canvas3d/camera.ts

@@ -9,6 +9,7 @@ import { Mat4, Vec3, Vec4, EPSILON } from '../mol-math/linear-algebra';
 import { Viewport, cameraProject, cameraUnproject } from './camera/util';
 import { CameraTransitionManager } from './camera/transition';
 import { BehaviorSubject } from 'rxjs';
+import { Scene } from '../mol-gl/scene';
 
 export { ICamera, Camera };
 
@@ -86,7 +87,12 @@ class Camera implements ICamera {
 
         if (changed) {
             Mat4.mul(this.projectionView, this.projection, this.view);
-            Mat4.invert(this.inverseProjectionView, this.projectionView);
+            if (!Mat4.tryInvert(this.inverseProjectionView, this.projectionView)) {
+                Mat4.copy(this.view, this.prevView);
+                Mat4.copy(this.projection, this.prevProjection);
+                Mat4.mul(this.projectionView, this.projection, this.view);
+                return false;
+            }
 
             Mat4.copy(this.prevView, this.view);
             Mat4.copy(this.prevProjection, this.projection);
@@ -126,6 +132,23 @@ class Camera implements ICamera {
         return state;
     }
 
+    getInvariantFocus(target: Vec3, radius: number, up: Vec3, dir: Vec3): Partial<Camera.Snapshot> {
+        const r = Math.max(radius, 0.01);
+        const targetDistance = this.getTargetDistance(r);
+
+        Vec3.copy(this.deltaDirection, dir);
+        Vec3.setMagnitude(this.deltaDirection, this.deltaDirection, targetDistance);
+        Vec3.sub(this.newPosition, target, this.deltaDirection);
+
+        const state = Camera.copySnapshot(Camera.createDefaultSnapshot(), this.state);
+        state.target = Vec3.clone(target);
+        state.radius = r;
+        state.position = Vec3.clone(this.newPosition);
+        Vec3.copy(state.up, up);
+
+        return state;
+    }
+
     focus(target: Vec3, radius: number, durationMs?: number, up?: Vec3, dir?: Vec3) {
         if (radius > 0) {
             this.setState(this.getFocus(target, radius, up, dir), durationMs);
@@ -150,6 +173,8 @@ class Camera implements ICamera {
 namespace Camera {
     export type Mode = 'perspective' | 'orthographic'
 
+    export type SnapshotProvider = Partial<Snapshot> | ((scene: Scene, camera: Camera) => Partial<Snapshot>)
+
     /**
      * Sets an offseted view in a larger frustum. This is useful for
      * - multi-window or multi-monitor/multi-machine setups
@@ -210,7 +235,7 @@ namespace Camera {
             target: Vec3.create(0, 0, 0),
 
             radius: 0,
-            radiusMax: 0,
+            radiusMax: 10,
             fog: 50,
             clipFar: true
         };
@@ -247,6 +272,18 @@ namespace Camera {
 
         return out;
     }
+
+    export function areSnapshotsEqual(a: Snapshot, b: Snapshot) {
+        return a.mode === b.mode
+            && a.fov === b.fov
+            && a.radius === b.radius
+            && a.radiusMax === b.radiusMax
+            && a.fog === b.fog
+            && a.clipFar === b.clipFar
+            && Vec3.exactEquals(a.position, b.position)
+            && Vec3.exactEquals(a.up, b.up)
+            && Vec3.exactEquals(a.target, b.target);
+    }
 }
 
 function updateOrtho(camera: Camera) {
@@ -327,8 +364,9 @@ function updateClip(camera: Camera) {
         near = Math.max(Math.min(radiusMax, 5), near);
         far = Math.max(5, far);
     } else {
-        near = Math.max(0, near);
-        far = Math.max(0, far);
+        // not too close to 0 as it causes issues with outline rendering
+        near = Math.max(Math.min(radiusMax, 5), near);
+        far = Math.max(5, far);
     }
 
     if (near === far) {

src/mol-canvas3d/camera/transition.ts

@@ -39,6 +39,9 @@ class CameraTransitionManager {
             this._target.radius = this._target.radiusMax;
         }
 
+        if (this._target.radius < 0.01) this._target.radius = 0.01;
+        if (this._target.radiusMax < 0.01) this._target.radiusMax = 0.01;
+
         if (!this.inTransition && durationMs <= 0 || (typeof to.mode !== 'undefined' && to.mode !== this.camera.state.mode)) {
             this.finish(this._target);
             return;

src/mol-canvas3d/canvas3d.ts

@@ -61,11 +61,17 @@ export const Canvas3DParams = {
     }, { pivot: 'radius' }),
     viewport: PD.MappedStatic('canvas', {
         canvas: PD.Group({}),
-        custom: PD.Group({
+        'static-frame': PD.Group({
             x: PD.Numeric(0),
             y: PD.Numeric(0),
             width: PD.Numeric(128),
             height: PD.Numeric(128)
+        }),
+        'relative-frame': PD.Group({
+            x: PD.Numeric(0.33, { min: 0, max: 1, step: 0.01 }),
+            y: PD.Numeric(0.33, { min: 0, max: 1, step: 0.01 }),
+            width: PD.Numeric(0.5, { min: 0.01, max: 1, step: 0.01 }),
+            height: PD.Numeric(0.5, { min: 0.01, max: 1, step: 0.01 })
         })
     }),
 
@@ -100,7 +106,7 @@ interface Canvas3DContext {
 }
 
 namespace Canvas3DContext {
-    const DefaultAttribs = {
+    export const DefaultAttribs = {
         /** true by default to avoid issues with Safari (Jan 2021) */
         antialias: true,
         /** true to support multiple Canvas3D objects with a single context */
@@ -123,7 +129,7 @@ namespace Canvas3DContext {
         });
         if (gl === null) throw new Error('Could not create a WebGL rendering context');
 
-        const input = InputObserver.fromElement(canvas, { pixelScale });
+        const input = InputObserver.fromElement(canvas, { pixelScale, preventGestures: true });
         const webgl = createContext(gl, { pixelScale });
         const passes = new Passes(webgl, attribs);
 
@@ -201,7 +207,7 @@ interface Canvas3D {
      */
     commit(isSynchronous?: boolean): void
     /**
-     * Funcion for external "animation" control
+     * Function for external "animation" control
      * Calls commit.
      */
     tick(t: now.Timestamp, options?: { isSynchronous?: boolean, manualDraw?: boolean }): void
@@ -214,7 +220,13 @@ interface Canvas3D {
     /** Reset the timers, used by "animate" */
     resetTime(t: number): void
     animate(): void
-    pause(): void
+    /**
+     * Pause animation loop and optionally any rendering
+     * @param noDraw pause any rendering (drawPaused = true)
+     */
+    pause(noDraw?: boolean): void
+    /** Sets drawPaused = false without starting the built in animation loop */
+    resume(): void
     identify(x: number, y: number): PickData | undefined
     mark(loci: Representation.Loci, action: MarkerAction): void
     getLoci(pickingId: PickingId | undefined): Representation.Loci
@@ -229,11 +241,13 @@ interface Canvas3D {
     /** performs handleResize on the next animation frame */
     requestResize(): void
     /** Focuses camera on scene's bounding sphere, centered and zoomed. */
-    requestCameraReset(options?: { durationMs?: number, snapshot?: Partial<Camera.Snapshot> }): void
+    requestCameraReset(options?: { durationMs?: number, snapshot?: Camera.SnapshotProvider }): void
     readonly camera: Camera
     readonly boundingSphere: Readonly<Sphere3D>
+    readonly boundingSphereVisible: Readonly<Sphere3D>
     setProps(props: PartialCanvas3DProps | ((old: Canvas3DProps) => Partial<Canvas3DProps> | void), doNotRequestDraw?: boolean /* = false */): void
     getImagePass(props: Partial<ImageProps>): ImagePass
+    getRenderObjects(): GraphicsRenderObject[]
 
     /** Returns a copy of the current Canvas3D instance props */
     readonly props: Readonly<Canvas3DProps>
@@ -293,10 +307,9 @@ namespace Canvas3D {
         const interactionHelper = new Canvas3dInteractionHelper(identify, getLoci, input, camera);
         const multiSampleHelper = new MultiSampleHelper(passes.multiSample);
 
-        let drawPending = false;
         let cameraResetRequested = false;
         let nextCameraResetDuration: number | undefined = void 0;
-        let nextCameraResetSnapshot: Partial<Camera.Snapshot> | undefined = void 0;
+        let nextCameraResetSnapshot: Camera.SnapshotProvider | undefined = void 0;
         let resizeRequested = false;
 
         let notifyDidDraw = true;
@@ -305,7 +318,11 @@ namespace Canvas3D {
             let loci: Loci = EmptyLoci;
             let repr: Representation.Any = Representation.Empty;
             if (pickingId) {
+                const cameraHelperLoci = helper.camera.getLoci(pickingId);
+                if (cameraHelperLoci !== EmptyLoci) return { loci: cameraHelperLoci, repr };
+
                 loci = helper.handle.getLoci(pickingId);
+
                 reprRenderObjects.forEach((_, _repr) => {
                     const _loci = _repr.getLoci(pickingId);
                     if (!isEmptyLoci(_loci)) {
@@ -327,11 +344,13 @@ namespace Canvas3D {
                 changed = repr.mark(loci, action);
             } else {
                 changed = helper.handle.mark(loci, action);
+                changed = helper.camera.mark(loci, action) || changed;
                 reprRenderObjects.forEach((_, _repr) => { changed = _repr.mark(loci, action) || changed; });
             }
             if (changed) {
                 scene.update(void 0, true);
                 helper.handle.scene.update(void 0, true);
+                helper.camera.scene.update(void 0, true);
                 const prevPickDirty = pickHelper.dirty;
                 draw(true);
                 pickHelper.dirty = prevPickDirty; // marking does not change picking buffers
@@ -355,9 +374,13 @@ namespace Canvas3D {
             let didRender = false;
             controls.update(currentTime);
             const cameraChanged = camera.update();
-            const multiSampleChanged = multiSampleHelper.update(force || cameraChanged, p.multiSample);
 
-            if (resized || force || cameraChanged || multiSampleChanged) {
+            const shouldRender = force || cameraChanged || resized || forceNextRender;
+            forceNextRender = false;
+
+            const multiSampleChanged = multiSampleHelper.update(shouldRender, p.multiSample);
+
+            if (shouldRender || multiSampleChanged) {
                 let cam: Camera | StereoCamera = camera;
                 if (p.camera.stereo.name === 'on') {
                     stereoCamera.update();
@@ -376,22 +399,20 @@ namespace Canvas3D {
             return didRender;
         }
 
-        let forceNextDraw = false;
+        let forceNextRender = false;
         let forceDrawAfterAllCommited = false;
         let currentTime = 0;
+        let drawPaused = false;
 
         function draw(force?: boolean) {
-            if (render(!!force || forceNextDraw) && notifyDidDraw) {
+            if (drawPaused) return;
+            if (render(!!force) && notifyDidDraw) {
                 didDraw.next(now() - startTime as now.Timestamp);
             }
-            forceNextDraw = false;
-            drawPending = false;
         }
 
         function requestDraw(force?: boolean) {
-            if (drawPending) return;
-            drawPending = true;
-            forceNextDraw = !!force;
+            forceNextRender = forceNextRender || !!force;
         }
 
         let animationFrameHandle = 0;
@@ -422,11 +443,13 @@ namespace Canvas3D {
         }
 
         function animate() {
+            drawPaused = false;
             controls.start(now());
             if (animationFrameHandle === 0) _animate();
         }
 
-        function pause() {
+        function pause(noDraw = false) {
+            drawPaused = noDraw;
             cancelAnimationFrame(animationFrameHandle);
             animationFrameHandle = 0;
         }
@@ -453,11 +476,21 @@ namespace Canvas3D {
         function resolveCameraReset() {
             if (!cameraResetRequested) return;
 
-            const { center, radius } = scene.boundingSphereVisible;
+            const boundingSphere = scene.boundingSphereVisible;
+            const { center, radius } = boundingSphere;
+
+            const autoAdjustControls = controls.props.autoAdjustMinMaxDistance;
+            if (autoAdjustControls.name === 'on') {
+                const minDistance = autoAdjustControls.params.minDistanceFactor * radius + autoAdjustControls.params.minDistancePadding;
+                const maxDistance = Math.max(autoAdjustControls.params.maxDistanceFactor * radius, autoAdjustControls.params.maxDistanceMin);
+                controls.setProps({ minDistance, maxDistance });
+            }
+
             if (radius > 0) {
                 const duration = nextCameraResetDuration === undefined ? p.cameraResetDurationMs : nextCameraResetDuration;
                 const focus = camera.getFocus(center, radius);
-                const snapshot = nextCameraResetSnapshot ? { ...focus, ...nextCameraResetSnapshot } : focus;
+                const next = typeof nextCameraResetSnapshot === 'function' ? nextCameraResetSnapshot(scene, camera) : nextCameraResetSnapshot;
+                const snapshot = next ? { ...focus, ...next } : focus;
                 camera.setState({ ...snapshot, radiusMax: scene.boundingSphere.radius }, duration);
             }
 
@@ -671,6 +704,7 @@ namespace Canvas3D {
             animate,
             resetTime,
             pause,
+            resume: () => { drawPaused = false; },
             identify,
             mark,
             getLoci,
@@ -686,6 +720,7 @@ namespace Canvas3D {
             },
             camera,
             boundingSphere: scene.boundingSphere,
+            boundingSphereVisible: scene.boundingSphereVisible,
             get notifyDidDraw() { return notifyDidDraw; },
             set notifyDidDraw(v: boolean) { notifyDidDraw = v; },
             didDraw,
@@ -753,6 +788,11 @@ namespace Canvas3D {
             getImagePass: (props: Partial<ImageProps> = {}) => {
                 return new ImagePass(webgl, renderer, scene, camera, helper, passes.draw.wboitEnabled, props);
             },
+            getRenderObjects(): GraphicsRenderObject[] {
+                const renderObjects: GraphicsRenderObject[] = [];
+                scene.forEach((_, ro) => renderObjects.push(ro));
+                return renderObjects;
+            },
 
             get props() {
                 return getProps();
@@ -778,16 +818,30 @@ namespace Canvas3D {
         };
 
         function updateViewport() {
+            const oldX = x, oldY = y, oldWidth = width, oldHeight = height;
+
             if (p.viewport.name === 'canvas') {
                 x = 0;
                 y = 0;
                 width = gl.drawingBufferWidth;
                 height = gl.drawingBufferHeight;
-            } else {
+            } else if (p.viewport.name === 'static-frame') {
                 x = p.viewport.params.x * webgl.pixelRatio;
-                y = p.viewport.params.y * webgl.pixelRatio;
-                width = p.viewport.params.width * webgl.pixelRatio;
                 height = p.viewport.params.height * webgl.pixelRatio;
+                y = gl.drawingBufferHeight - height - p.viewport.params.y * webgl.pixelRatio;
+                width = p.viewport.params.width * webgl.pixelRatio;
+            } else if (p.viewport.name === 'relative-frame') {
+                x = Math.round(p.viewport.params.x * gl.drawingBufferWidth);
+                height = Math.round(p.viewport.params.height * gl.drawingBufferHeight);
+                y = Math.round(gl.drawingBufferHeight - height - p.viewport.params.y * gl.drawingBufferHeight);
+                width = Math.round(p.viewport.params.width * gl.drawingBufferWidth);
+                // if (x + width >= gl.drawingBufferWidth) width = gl.drawingBufferWidth - x;
+                // if (y + height >= gl.drawingBufferHeight) height = gl.drawingBufferHeight - y - 1;
+                // console.log({ x, y, width, height });
+            }
+
+            if (oldX !== x || oldY !== y || oldWidth !== width || oldHeight !== height) {
+                forceNextRender = true;
             }
         }
 

src/mol-canvas3d/controls/trackball.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 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>
@@ -10,7 +10,7 @@
 
 import { Quat, Vec2, Vec3, EPSILON } from '../../mol-math/linear-algebra';
 import { Viewport } from '../camera/util';
-import { InputObserver, DragInput, WheelInput, PinchInput, ButtonsType, ModifiersKeys } from '../../mol-util/input/input-observer';
+import { InputObserver, DragInput, WheelInput, PinchInput, ButtonsType, ModifiersKeys, GestureInput } from '../../mol-util/input/input-observer';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Camera } from '../camera';
 import { absMax } from '../../mol-math/misc';
@@ -49,7 +49,24 @@ export const TrackballControlsParams = {
     minDistance: PD.Numeric(0.01, {}, { isHidden: true }),
     maxDistance: PD.Numeric(1e150, {}, { isHidden: true }),
 
-    bindings: PD.Value(DefaultTrackballBindings, { isHidden: true })
+    gestureScaleFactor: PD.Numeric(1, {}, { isHidden: true }),
+    maxWheelDelta: PD.Numeric(0.02, {}, { isHidden: true }),
+
+    bindings: PD.Value(DefaultTrackballBindings, { isHidden: true }),
+
+    /**
+     * minDistance = minDistanceFactor * boundingSphere.radius + minDistancePadding
+     * maxDistance = max(maxDistanceFactor * boundingSphere.radius, maxDistanceMin)
+     */
+    autoAdjustMinMaxDistance: PD.MappedStatic('on', {
+        off: PD.EmptyGroup(),
+        on: PD.Group({
+            minDistanceFactor: PD.Numeric(0),
+            minDistancePadding: PD.Numeric(5),
+            maxDistanceFactor: PD.Numeric(10),
+            maxDistanceMin: PD.Numeric(20)
+        })
+    }, { isHidden: true })
 };
 export type TrackballControlsProps = PD.Values<typeof TrackballControlsParams>
 
@@ -77,6 +94,7 @@ namespace TrackballControls {
         const interactionEndSub = input.interactionEnd.subscribe(onInteractionEnd);
         const wheelSub = input.wheel.subscribe(onWheel);
         const pinchSub = input.pinch.subscribe(onPinch);
+        const gestureSub = input.gesture.subscribe(onGesture);
 
         let _isInteracting = false;
 
@@ -376,25 +394,33 @@ namespace TrackballControls {
             _isInteracting = false;
         }
 
-        function onWheel({ x, y, dx, dy, dz, buttons, modifiers }: WheelInput) {
+        function onWheel({ x, y, spinX, spinY, dz, buttons, modifiers }: WheelInput) {
             if (outsideViewport(x, y)) return;
 
-            const delta = absMax(dx, dy, dz);
+            let delta = absMax(spinX * 0.075, spinY * 0.075, dz * 0.0001);
+            if (delta < -p.maxWheelDelta) delta = -p.maxWheelDelta;
+            else if (delta > p.maxWheelDelta) delta = p.maxWheelDelta;
+
             if (Binding.match(p.bindings.scrollZoom, buttons, modifiers)) {
-                _zoomEnd[1] += delta * 0.0001;
+                _zoomEnd[1] += delta;
             }
             if (Binding.match(p.bindings.scrollFocus, buttons, modifiers)) {
-                _focusEnd[1] += delta * 0.0001;
+                _focusEnd[1] += delta;
             }
         }
 
-        function onPinch({ fraction, buttons, modifiers }: PinchInput) {
+        function onPinch({ fractionDelta, buttons, modifiers }: PinchInput) {
             if (Binding.match(p.bindings.scrollZoom, buttons, modifiers)) {
                 _isInteracting = true;
-                _zoomEnd[1] += (fraction - 1) * 0.1;
+                _zoomEnd[1] += p.gestureScaleFactor * fractionDelta;
             }
         }
 
+        function onGesture({ deltaScale }: GestureInput) {
+            _isInteracting = true;
+            _zoomEnd[1] += p.gestureScaleFactor * deltaScale;
+        }
+
         function dispose() {
             if (disposed) return;
             disposed = true;
@@ -402,6 +428,7 @@ namespace TrackballControls {
             dragSub.unsubscribe();
             wheelSub.unsubscribe();
             pinchSub.unsubscribe();
+            gestureSub.unsubscribe();
             interactionEndSub.unsubscribe();
         }
 

src/mol-canvas3d/helper/camera-helper.ts

@@ -1,30 +1,35 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { WebGLContext } from '../../mol-gl/webgl/context';
-import { Scene } from '../../mol-gl/scene';
-import { Camera, ICamera } from '../camera';
-import { MeshBuilder } from '../../mol-geo/geometry/mesh/mesh-builder';
-import { Vec3, Mat4 } from '../../mol-math/linear-algebra';
-import { addSphere } from '../../mol-geo/geometry/mesh/builder/sphere';
-import { GraphicsRenderObject } from '../../mol-gl/render-object';
-import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
-import { ColorNames } from '../../mol-util/color/names';
-import { addCylinder } from '../../mol-geo/geometry/mesh/builder/cylinder';
-import { Viewport } from '../camera/util';
-import { Sphere3D } from '../../mol-math/geometry';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import produce from 'immer';
+import { Interval } from '../../mol-data/int/interval';
+import { addCylinder } from '../../mol-geo/geometry/mesh/builder/cylinder';
+import { addSphere } from '../../mol-geo/geometry/mesh/builder/sphere';
+import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
+import { MeshBuilder } from '../../mol-geo/geometry/mesh/mesh-builder';
+import { PickingId } from '../../mol-geo/geometry/picking';
+import { GraphicsRenderObject } from '../../mol-gl/render-object';
+import { Scene } from '../../mol-gl/scene';
+import { WebGLContext } from '../../mol-gl/webgl/context';
+import { Sphere3D } from '../../mol-math/geometry';
+import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
+import { DataLoci, EmptyLoci, Loci } from '../../mol-model/loci';
 import { Shape } from '../../mol-model/shape';
+import { Visual } from '../../mol-repr/visual';
+import { ColorNames } from '../../mol-util/color/names';
+import { MarkerAction, MarkerActions } from '../../mol-util/marker-action';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { Camera, ICamera } from '../camera';
+import { Viewport } from '../camera/util';
 
 // TODO add scale line/grid
 
 const AxesParams = {
     ...Mesh.Params,
-    alpha: { ...Mesh.Params.alpha, defaultValue: 0.33 },
+    alpha: { ...Mesh.Params.alpha, defaultValue: 0.51 },
     ignoreLight: { ...Mesh.Params.ignoreLight, defaultValue: true },
     colorX: PD.Color(ColorNames.red, { isEssential: true }),
     colorY: PD.Color(ColorNames.green, { isEssential: true }),
@@ -87,6 +92,32 @@ export class CameraHelper {
         return this.props.axes.name === 'on';
     }
 
+    getLoci(pickingId: PickingId) {
+        const { objectId, groupId, instanceId } = pickingId;
+        if (!this.renderObject || objectId !== this.renderObject.id || groupId === CameraHelperAxis.None) return EmptyLoci;
+        return CameraAxesLoci(this, groupId, instanceId);
+    }
+
+    private eachGroup = (loci: Loci, apply: (interval: Interval) => boolean): boolean => {
+        if (!this.renderObject) return false;
+        if (!isCameraAxesLoci(loci)) return false;
+        let changed = false;
+        const groupCount = this.renderObject.values.uGroupCount.ref.value;
+        const { elements } = loci;
+        for (const { groupId, instanceId } of elements) {
+            const idx = instanceId * groupCount + groupId;
+            if (apply(Interval.ofSingleton(idx))) changed = true;
+        }
+        return changed;
+    }
+
+    mark(loci: Loci, action: MarkerAction) {
+        if (!MarkerActions.is(MarkerActions.Highlighting, action)) return false;
+        if (!isCameraAxesLoci(loci)) return false;
+        if (loci.data !== this) return false;
+        return Visual.mark(this.renderObject, loci, action, this.eachGroup);
+    }
+
     update(camera: ICamera) {
         if (!this.renderObject) return;
 
@@ -102,6 +133,38 @@ export class CameraHelper {
     }
 }
 
+export const enum CameraHelperAxis {
+    None = 0,
+    X,
+    Y,
+    Z,
+    XY,
+    XZ,
+    YZ
+}
+
+function getAxisLabel(axis: number) {
+    switch (axis) {
+        case CameraHelperAxis.X: return 'X Axis';
+        case CameraHelperAxis.Y: return 'Y Axis';
+        case CameraHelperAxis.Z: return 'Z Axis';
+        case CameraHelperAxis.XY: return 'XY Plane';
+        case CameraHelperAxis.XZ: return 'XZ Plane';
+        case CameraHelperAxis.YZ: return 'YZ Plane';
+        default: return 'Axes';
+    }
+}
+
+function CameraAxesLoci(cameraHelper: CameraHelper, groupId: number, instanceId: number) {
+    return DataLoci('camera-axes', cameraHelper, [{ groupId, instanceId }],
+        void 0 /** bounding sphere */,
+        () => getAxisLabel(groupId));
+}
+export type CameraAxesLoci = ReturnType<typeof CameraAxesLoci>
+export function isCameraAxesLoci(x: Loci): x is CameraAxesLoci {
+    return x.kind === 'data-loci' && x.tag === 'camera-axes';
+}
+
 function updateCamera(camera: Camera, viewport: Viewport, viewOffset: Camera.ViewOffset) {
     const { near, far } = camera;
 
@@ -134,27 +197,52 @@ function updateCamera(camera: Camera, viewport: Viewport, viewOffset: Camera.Vie
 
 function createAxesMesh(scale: number, mesh?: Mesh) {
     const state = MeshBuilder.createState(512, 256, mesh);
-    const radius = 0.05 * scale;
+    const radius = 0.075 * scale;
     const x = Vec3.scale(Vec3(), Vec3.unitX, scale);
     const y = Vec3.scale(Vec3(), Vec3.unitY, scale);
     const z = Vec3.scale(Vec3(), Vec3.unitZ, scale);
     const cylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments: 32 };
 
-    state.currentGroup = 0;
+    state.currentGroup = CameraHelperAxis.None;
     addSphere(state, Vec3.origin, radius, 2);
 
-    state.currentGroup = 1;
+    state.currentGroup = CameraHelperAxis.X;
     addSphere(state, x, radius, 2);
     addCylinder(state, Vec3.origin, x, 1, cylinderProps);
 
-    state.currentGroup = 2;
+    state.currentGroup = CameraHelperAxis.Y;
     addSphere(state, y, radius, 2);
     addCylinder(state, Vec3.origin, y, 1, cylinderProps);
 
-    state.currentGroup = 3;
+    state.currentGroup = CameraHelperAxis.Z;
     addSphere(state, z, radius, 2);
     addCylinder(state, Vec3.origin, z, 1, cylinderProps);
 
+    Vec3.scale(x, x, 0.5);
+    Vec3.scale(y, y, 0.5);
+    Vec3.scale(z, z, 0.5);
+
+    state.currentGroup = CameraHelperAxis.XY;
+    MeshBuilder.addTriangle(state, Vec3.origin, x, y);
+    MeshBuilder.addTriangle(state, Vec3.origin, y, x);
+    const xy = Vec3.add(Vec3(), x, y);
+    MeshBuilder.addTriangle(state, xy, x, y);
+    MeshBuilder.addTriangle(state, xy, y, x);
+
+    state.currentGroup = CameraHelperAxis.XZ;
+    MeshBuilder.addTriangle(state, Vec3.origin, x, z);
+    MeshBuilder.addTriangle(state, Vec3.origin, z, x);
+    const xz = Vec3.add(Vec3(), x, z);
+    MeshBuilder.addTriangle(state, xz, x, z);
+    MeshBuilder.addTriangle(state, xz, z, x);
+
+    state.currentGroup = CameraHelperAxis.YZ;
+    MeshBuilder.addTriangle(state, Vec3.origin, y, z);
+    MeshBuilder.addTriangle(state, Vec3.origin, z, y);
+    const yz = Vec3.add(Vec3(), y, z);
+    MeshBuilder.addTriangle(state, yz, y, z);
+    MeshBuilder.addTriangle(state, yz, z, y);
+
     return MeshBuilder.getMesh(state);
 }
 

src/mol-canvas3d/passes/draw.ts

@@ -290,13 +290,18 @@ export class DrawPass {
         renderer.setViewport(x, y, width, height);
         renderer.update(camera);
 
+        if (transparentBackground && !antialiasingEnabled && toDrawingBuffer) {
+            this.drawTarget.bind();
+            renderer.clear(false);
+        }
+
         if (this.wboitEnabled) {
             this._renderWboit(renderer, camera, scene, transparentBackground, postprocessingProps);
         } else {
             this._renderBlended(renderer, camera, scene, !volumeRendering && !postprocessingEnabled && !antialiasingEnabled && toDrawingBuffer, transparentBackground, postprocessingProps);
         }
 
-        if (PostprocessingPass.isEnabled(postprocessingProps)) {
+        if (postprocessingEnabled) {
             this.postprocessing.target.bind();
         } else if (!toDrawingBuffer || volumeRendering || this.wboitEnabled) {
             this.colorTarget.bind();
@@ -323,7 +328,7 @@ export class DrawPass {
             this.drawTarget.bind();
 
             this.webgl.state.disable(this.webgl.gl.DEPTH_TEST);
-            if (PostprocessingPass.isEnabled(postprocessingProps)) {
+            if (postprocessingEnabled) {
                 this.copyFboPostprocessing.render();
             } else if (volumeRendering || this.wboitEnabled) {
                 this.copyFboTarget.render();

src/mol-canvas3d/passes/image.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -103,7 +103,9 @@ export class ImagePass {
         } else {
             this.webgl.readPixels(viewport.x, height - viewport.y - viewport.height, w, h, array);
         }
-        PixelData.flipY({ array, width: w, height: h });
+        const pixelData = PixelData.create(array, w, h);
+        PixelData.flipY(pixelData);
+        PixelData.divideByAlpha(pixelData);
         return new ImageData(new Uint8ClampedArray(array), w, h);
     }
 }

src/mol-canvas3d/passes/pick.ts

@@ -66,14 +66,20 @@ export class PickPass {
     private renderVariant(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, variant: GraphicsRenderVariant) {
         const depth = this.drawPass.depthTexturePrimitives;
         renderer.clear(false);
+
+        renderer.update(camera);
         renderer.renderPick(scene.primitives, camera, variant, null);
         renderer.renderPick(scene.volumes, camera, variant, depth);
         renderer.renderPick(helper.handle.scene, camera, variant, null);
+
+        if (helper.camera.isEnabled) {
+            helper.camera.update(camera);
+            renderer.update(helper.camera.camera);
+            renderer.renderPick(helper.camera.scene, helper.camera.camera, variant, null);
+        }
     }
 
     render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper) {
-        renderer.update(camera);
-
         this.objectPickTarget.bind();
         this.renderVariant(renderer, camera, scene, helper, 'pickObject');
 
@@ -122,8 +128,8 @@ export class PickHelper {
         this.pickX = Math.ceil(x * this.pickScale);
         this.pickY = Math.ceil(y * this.pickScale);
 
-        const pickWidth = Math.ceil(width * this.pickScale);
-        const pickHeight = Math.ceil(height * this.pickScale);
+        const pickWidth = Math.floor(width * this.pickScale);
+        const pickHeight = Math.floor(height * this.pickScale);
 
         if (pickWidth !== this.pickWidth || pickHeight !== this.pickHeight) {
             this.pickWidth = pickWidth;

src/mol-canvas3d/passes/postprocessing.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 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>
@@ -13,7 +13,7 @@ import { Texture } from '../../mol-gl/webgl/texture';
 import { ValueCell } from '../../mol-util';
 import { createComputeRenderItem } from '../../mol-gl/webgl/render-item';
 import { createComputeRenderable, ComputeRenderable } from '../../mol-gl/renderable';
-import { Mat4, Vec2, Vec3 } from '../../mol-math/linear-algebra';
+import { Mat4, Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { DrawPass } from './draw';
@@ -70,6 +70,7 @@ const SsaoSchema = {
 
     uProjection: UniformSpec('m4'),
     uInvProjection: UniformSpec('m4'),
+    uBounds: UniformSpec('v4'),
 
     uTexSize: UniformSpec('v2'),
 
@@ -89,6 +90,7 @@ function getSsaoRenderable(ctx: WebGLContext, depthTexture: Texture): SsaoRender
 
         uProjection: ValueCell.create(Mat4.identity()),
         uInvProjection: ValueCell.create(Mat4.identity()),
+        uBounds: ValueCell.create(Vec4()),
 
         uTexSize: ValueCell.create(Vec2.create(ctx.gl.drawingBufferWidth, ctx.gl.drawingBufferHeight)),
 
@@ -118,6 +120,7 @@ const SsaoBlurSchema = {
 
     uNear: UniformSpec('f'),
     uFar: UniformSpec('f'),
+    uBounds: UniformSpec('v4'),
     dOrthographic: DefineSpec('number'),
 };
 
@@ -139,6 +142,7 @@ function getSsaoBlurRenderable(ctx: WebGLContext, ssaoDepthTexture: Texture, dir
 
         uNear: ValueCell.create(0.0),
         uFar: ValueCell.create(10000.0),
+        uBounds: ValueCell.create(Vec4()),
         dOrthographic: ValueCell.create(0),
     };
 
@@ -286,10 +290,14 @@ export class PostprocessingPass {
 
     private readonly renderable: PostprocessingRenderable
 
-    private scale: number
+    private ssaoScale: number
+    private calcSsaoScale() {
+        // downscale ssao for high pixel-ratios
+        return Math.min(1, 1 / this.webgl.pixelRatio);
+    }
 
     constructor(private webgl: WebGLContext, drawPass: DrawPass) {
-        this.scale = 1 / this.webgl.pixelRatio;
+        this.ssaoScale = this.calcSsaoScale();
 
         const { colorTarget, depthTexture } = drawPass;
         const width = colorTarget.getWidth();
@@ -298,6 +306,7 @@ export class PostprocessingPass {
         this.nSamples = 1;
         this.blurKernelSize = 1;
 
+        // needs to be linear for anti-aliasing pass
         this.target = webgl.createRenderTarget(width, height, false, 'uint8', 'linear');
 
         this.outlinesTarget = webgl.createRenderTarget(width, height, false);
@@ -317,14 +326,14 @@ export class PostprocessingPass {
         this.ssaoBlurFirstPassFramebuffer = webgl.resources.framebuffer();
         this.ssaoBlurSecondPassFramebuffer = webgl.resources.framebuffer();
 
-        const sw = Math.floor(width * this.scale);
-        const sh = Math.floor(height * this.scale);
+        const sw = Math.floor(width * this.ssaoScale);
+        const sh = Math.floor(height * this.ssaoScale);
 
-        this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
+        this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
         this.ssaoDepthTexture.define(sw, sh);
         this.ssaoDepthTexture.attachFramebuffer(this.ssaoFramebuffer, 'color0');
 
-        this.ssaoDepthBlurProxyTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
+        this.ssaoDepthBlurProxyTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
         this.ssaoDepthBlurProxyTexture.define(sw, sh);
         this.ssaoDepthBlurProxyTexture.attachFramebuffer(this.ssaoBlurFirstPassFramebuffer, 'color0');
 
@@ -338,9 +347,13 @@ export class PostprocessingPass {
 
     setSize(width: number, height: number) {
         const [w, h] = this.renderable.values.uTexSize.ref.value;
-        if (width !== w || height !== h) {
-            const sw = Math.floor(width * this.scale);
-            const sh = Math.floor(height * this.scale);
+        const ssaoScale = this.calcSsaoScale();
+
+        if (width !== w || height !== h || this.ssaoScale !== ssaoScale) {
+            this.ssaoScale = ssaoScale;
+
+            const sw = Math.floor(width * this.ssaoScale);
+            const sh = Math.floor(height * this.ssaoScale);
             this.target.setSize(width, height);
             this.outlinesTarget.setSize(width, height);
             this.ssaoDepthTexture.define(sw, sh);
@@ -349,8 +362,8 @@ export class PostprocessingPass {
             ValueCell.update(this.renderable.values.uTexSize, Vec2.set(this.renderable.values.uTexSize.ref.value, width, height));
             ValueCell.update(this.outlinesRenderable.values.uTexSize, Vec2.set(this.outlinesRenderable.values.uTexSize.ref.value, width, height));
             ValueCell.update(this.ssaoRenderable.values.uTexSize, Vec2.set(this.ssaoRenderable.values.uTexSize.ref.value, sw, sh));
-            ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uTexSize, Vec2.set(this.ssaoRenderable.values.uTexSize.ref.value, sw, sh));
-            ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uTexSize, Vec2.set(this.ssaoRenderable.values.uTexSize.ref.value, sw, sh));
+            ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uTexSize, Vec2.set(this.ssaoBlurFirstPassRenderable.values.uTexSize.ref.value, sw, sh));
+            ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uTexSize, Vec2.set(this.ssaoBlurSecondPassRenderable.values.uTexSize.ref.value, sw, sh));
         }
     }
 
@@ -367,8 +380,22 @@ export class PostprocessingPass {
         Mat4.invert(invProjection, camera.projection);
 
         if (props.occlusion.name === 'on') {
-            ValueCell.updateIfChanged(this.ssaoRenderable.values.uProjection, camera.projection);
-            ValueCell.updateIfChanged(this.ssaoRenderable.values.uInvProjection, invProjection);
+            ValueCell.update(this.ssaoRenderable.values.uProjection, camera.projection);
+            ValueCell.update(this.ssaoRenderable.values.uInvProjection, invProjection);
+
+            const [w, h] = this.renderable.values.uTexSize.ref.value;
+            const b = this.ssaoRenderable.values.uBounds;
+            const v = camera.viewport;
+            const s = this.ssaoScale;
+            Vec4.set(b.ref.value,
+                Math.floor(v.x * s) / (w * s),
+                Math.floor(v.y * s) / (h * s),
+                Math.ceil((v.x + v.width) * s) / (w * s),
+                Math.ceil((v.y + v.height) * s) / (h * s)
+            );
+            ValueCell.update(b, b.ref.value);
+            ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uBounds, b.ref.value);
+            ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uBounds, b.ref.value);
 
             ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.uNear, camera.near);
             ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.uNear, camera.near);
@@ -376,7 +403,9 @@ export class PostprocessingPass {
             ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.uFar, camera.far);
             ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.uFar, camera.far);
 
-            if (this.ssaoBlurFirstPassRenderable.values.dOrthographic.ref.value !== orthographic) { needsUpdateSsaoBlur = true; }
+            if (this.ssaoBlurFirstPassRenderable.values.dOrthographic.ref.value !== orthographic) {
+                needsUpdateSsaoBlur = true;
+            }
             ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.dOrthographic, orthographic);
             ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.dOrthographic, orthographic);
 
@@ -384,7 +413,7 @@ export class PostprocessingPass {
                 needsUpdateSsao = true;
 
                 this.nSamples = props.occlusion.params.samples;
-                ValueCell.updateIfChanged(this.ssaoRenderable.values.uSamples, getSamples(this.randomHemisphereVector, this.nSamples));
+                ValueCell.update(this.ssaoRenderable.values.uSamples, getSamples(this.randomHemisphereVector, this.nSamples));
                 ValueCell.updateIfChanged(this.ssaoRenderable.values.dNSamples, this.nSamples);
             }
             ValueCell.updateIfChanged(this.ssaoRenderable.values.uRadius, Math.pow(2, props.occlusion.params.radius));
@@ -394,10 +423,10 @@ export class PostprocessingPass {
                 needsUpdateSsaoBlur = true;
 
                 this.blurKernelSize = props.occlusion.params.blurKernelSize;
-                let kernel = getBlurKernel(this.blurKernelSize);
+                const kernel = getBlurKernel(this.blurKernelSize);
 
-                ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.uKernel, kernel);
-                ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.uKernel, kernel);
+                ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uKernel, kernel);
+                ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uKernel, kernel);
                 ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.dOcclusionKernelSize, this.blurKernelSize);
                 ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.dOcclusionKernelSize, this.blurKernelSize);
             }
@@ -405,8 +434,12 @@ export class PostprocessingPass {
         }
 
         if (props.outline.name === 'on') {
-            const factor = Math.pow(1000, props.outline.params.threshold) / 1000;
-            const maxPossibleViewZDiff = factor * (camera.far - camera.near);
+            let { threshold } = props.outline.params;
+            // orthographic needs lower threshold
+            if (camera.state.mode === 'orthographic') threshold /= 5;
+            const factor = Math.pow(1000, threshold) / 1000;
+            // use radiusMax for stable outlines when zooming
+            const maxPossibleViewZDiff = factor * camera.state.radiusMax;
             const outlineScale = props.outline.params.scale - 1;
 
             ValueCell.updateIfChanged(this.outlinesRenderable.values.uNear, camera.near);
@@ -414,7 +447,6 @@ export class PostprocessingPass {
             ValueCell.updateIfChanged(this.outlinesRenderable.values.uMaxPossibleViewZDiff, maxPossibleViewZDiff);
 
             ValueCell.updateIfChanged(this.renderable.values.uMaxPossibleViewZDiff, maxPossibleViewZDiff);
-            ValueCell.updateIfChanged(this.renderable.values.uOutlineThreshold, props.outline.params.threshold);
             if (this.renderable.values.dOutlineScale.ref.value !== outlineScale) { needsUpdateMain = true; }
             ValueCell.updateIfChanged(this.renderable.values.dOutlineScale, outlineScale);
         }
@@ -467,10 +499,10 @@ export class PostprocessingPass {
 
         if (props.occlusion.name === 'on') {
             const { x, y, width, height } = camera.viewport;
-            const sx = Math.floor(x * this.scale);
-            const sy = Math.floor(y * this.scale);
-            const sw = Math.floor(width * this.scale);
-            const sh = Math.floor(height * this.scale);
+            const sx = Math.floor(x * this.ssaoScale);
+            const sy = Math.floor(y * this.ssaoScale);
+            const sw = Math.ceil(width * this.ssaoScale);
+            const sh = Math.ceil(height * this.ssaoScale);
             this.webgl.gl.viewport(sx, sy, sw, sh);
             this.webgl.gl.scissor(sx, sy, sw, sh);
 

src/mol-canvas3d/passes/smaa.ts

@@ -44,7 +44,7 @@ export class SmaaPass {
     }
 
     constructor(private webgl: WebGLContext, input: Texture) {
-        if (typeof HTMLImageElement === undefined) {
+        if (typeof HTMLImageElement === 'undefined') {
             if (isDebugMode) console.log(`Missing "HTMLImageElement" required for "SMAA"`);
             return;
         }

src/mol-canvas3d/util.ts

@@ -12,13 +12,13 @@ export function setCanvasSize(canvas: HTMLCanvasElement, width: number, height:
 }
 
 /** Resize canvas to container element taking `devicePixelRatio` into account */
-export function resizeCanvas (canvas: HTMLCanvasElement, container: Element, scale = 1) {
+export function resizeCanvas (canvas: HTMLCanvasElement, container: HTMLElement, scale = 1) {
     let width = window.innerWidth;
     let height = window.innerHeight;
     if (container !== document.body) {
-        let bounds = container.getBoundingClientRect();
-        width = bounds.right - bounds.left;
-        height = bounds.bottom - bounds.top;
+        // fixes issue #molstar/molstar#147, offsetWidth/offsetHeight is correct size when css transform:scale is used
+        width = container.offsetWidth;
+        height = container.offsetHeight;
     }
     setCanvasSize(canvas, width, height, scale);
 }

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

@@ -1,28 +1,46 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
  */
 
 import { ValueCell } from '../../mol-util';
 import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';
 import { Color } from '../../mol-util/color';
-import { Vec2, Vec3 } from '../../mol-math/linear-algebra';
+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 { createNullTexture, Texture } from '../../mol-gl/webgl/texture';
 
-export type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance'
+export type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance' | 'volume' | 'volumeInstance'
 
 export type ColorData = {
     uColor: ValueCell<Vec3>,
     tColor: ValueCell<TextureImage<Uint8Array>>,
+    tColorGrid: ValueCell<Texture>,
+    tPalette: ValueCell<TextureImage<Uint8Array>>,
     uColorTexDim: ValueCell<Vec2>,
+    uColorGridDim: ValueCell<Vec3>,
+    uColorGridTransform: ValueCell<Vec4>,
     dColorType: ValueCell<string>,
+    dUsePalette: ValueCell<boolean>,
 }
 
 export function createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData {
+    const data = _createColors(locationIt, positionIt, colorTheme, colorData);
+    if (colorTheme.palette) {
+        ValueCell.updateIfChanged(data.dUsePalette, true);
+        updatePaletteTexture(colorTheme.palette, data.tPalette);
+    } else {
+        ValueCell.updateIfChanged(data.dUsePalette, false);
+    }
+    return data;
+}
+
+function _createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData {
     switch (Geometry.getGranularity(locationIt, colorTheme.granularity)) {
         case 'uniform': return createUniformColor(locationIt, colorTheme.color, colorData);
         case 'instance': return createInstanceColor(locationIt, colorTheme.color, colorData);
@@ -30,9 +48,44 @@ export function createColors(locationIt: LocationIterator, positionIt: LocationI
         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);
     }
 }
 
+function updatePaletteTexture(palette: ColorTheme.Palette, cell: ValueCell<TextureImage<Uint8Array>>) {
+    let isSynced = true;
+    const texture = cell.ref.value;
+    if (palette.colors.length !== texture.width || texture.filter !== palette.filter) {
+        isSynced = false;
+    } else {
+        const data = texture.array;
+        let o = 0;
+        for (const c of palette.colors) {
+            const [r, g, b] = Color.toRgb(c);
+            if (data[o++] !== r || data[o++] !== g || data[o++] !== b) {
+                isSynced = false;
+                break;
+            }
+        }
+    }
+
+    if (isSynced) return;
+
+    const array = new Uint8Array(palette.colors.length * 3);
+    let o = 0;
+    for (const c of palette.colors) {
+        const [r, g, b] = Color.toRgb(c);
+        array[o++] = r;
+        array[o++] = g;
+        array[o++] = b;
+    }
+
+    ValueCell.update(cell, { array, height: 1, width: palette.colors.length, filter: palette.filter });
+}
+
+//
+
 export function createValueColor(value: Color, colorData?: ColorData): ColorData {
     if (colorData) {
         ValueCell.update(colorData.uColor, Color.toVec3Normalized(colorData.uColor.ref.value, value));
@@ -42,17 +95,24 @@ export function createValueColor(value: Color, colorData?: ColorData): ColorData
         return {
             uColor: ValueCell.create(Color.toVec3Normalized(Vec3(), value)),
             tColor: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
+            tColorGrid: ValueCell.create(createNullTexture()),
+            tPalette: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
             uColorTexDim: ValueCell.create(Vec2.create(1, 1)),
+            uColorGridDim: ValueCell.create(Vec3.create(1, 1, 1)),
+            uColorGridTransform: ValueCell.create(Vec4.create(0, 0, 0, 1)),
             dColorType: ValueCell.create('uniform'),
+            dUsePalette: ValueCell.create(false),
         };
     }
 }
 
 /** Creates color uniform */
-export function createUniformColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
+function createUniformColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     return createValueColor(color(NullLocation, false), colorData);
 }
 
+//
+
 export function createTextureColor(colors: TextureImage<Uint8Array>, type: ColorType, colorData?: ColorData): ColorData {
     if (colorData) {
         ValueCell.update(colorData.tColor, colors);
@@ -63,14 +123,19 @@ export function createTextureColor(colors: TextureImage<Uint8Array>, type: Color
         return {
             uColor: ValueCell.create(Vec3()),
             tColor: ValueCell.create(colors),
+            tColorGrid: ValueCell.create(createNullTexture()),
+            tPalette: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
             uColorTexDim: ValueCell.create(Vec2.create(colors.width, colors.height)),
+            uColorGridDim: ValueCell.create(Vec3.create(1, 1, 1)),
+            uColorGridTransform: ValueCell.create(Vec4.create(0, 0, 0, 1)),
             dColorType: ValueCell.create(type),
+            dUsePalette: ValueCell.create(false),
         };
     }
 }
 
 /** Creates color texture with color for each instance */
-export function createInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
+function createInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { instanceCount } = locationIt;
     const colors = createTextureImage(Math.max(1, instanceCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
     locationIt.reset();
@@ -83,7 +148,7 @@ export function createInstanceColor(locationIt: LocationIterator, color: Locatio
 }
 
 /** Creates color texture with color for each group (i.e. shared across instances) */
-export function createGroupColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
+function createGroupColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount } = locationIt;
     const colors = createTextureImage(Math.max(1, groupCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
     locationIt.reset();
@@ -95,7 +160,7 @@ export function createGroupColor(locationIt: LocationIterator, color: LocationCo
 }
 
 /** Creates color texture with color for each group in each instance */
-export function createGroupInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
+function createGroupInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount, instanceCount } = locationIt;
     const count = instanceCount * groupCount;
     const colors = createTextureImage(Math.max(1, count), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
@@ -108,7 +173,7 @@ export function createGroupInstanceColor(locationIt: LocationIterator, color: Lo
 }
 
 /** Creates color texture with color for each vertex (i.e. shared across instances) */
-export function createVertexColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
+function createVertexColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount, stride } = locationIt;
     const colors = createTextureImage(Math.max(1, groupCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
     locationIt.reset();
@@ -124,7 +189,7 @@ export function createVertexColor(locationIt: LocationIterator, color: LocationC
 }
 
 /** Creates color texture with color for each vertex in each instance */
-export function createVertexInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
+function createVertexInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount, instanceCount, stride } = locationIt;
     const count = instanceCount * groupCount;
     const colors = createTextureImage(Math.max(1, count), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
@@ -138,3 +203,37 @@ export function createVertexInstanceColor(locationIt: LocationIterator, color: L
     }
     return createTextureColor(colors, 'vertexInstance', colorData);
 }
+
+//
+
+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();
+    const height = colors.getHeight();
+    if (colorData) {
+        ValueCell.update(colorData.tColorGrid, colors);
+        ValueCell.update(colorData.uColorTexDim, Vec2.create(width, height));
+        ValueCell.update(colorData.uColorGridDim, Vec3.clone(dimension));
+        ValueCell.update(colorData.uColorGridTransform, Vec4.clone(transform));
+        ValueCell.updateIfChanged(colorData.dColorType, type);
+        return colorData;
+    } else {
+        return {
+            uColor: ValueCell.create(Vec3()),
+            tColor: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
+            tColorGrid: ValueCell.create(colors),
+            tPalette: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
+            uColorTexDim: ValueCell.create(Vec2.create(width, height)),
+            uColorGridDim: ValueCell.create(Vec3.clone(dimension)),
+            uColorGridTransform: ValueCell.create(Vec4.clone(transform)),
+            dColorType: ValueCell.create(type),
+            dUsePalette: ValueCell.create(false),
+        };
+    }
+}

src/mol-geo/geometry/geometry.ts

@@ -55,7 +55,7 @@ export interface GeometryUtils<G extends Geometry, P extends PD.Params = Geometr
     createValuesSimple(geometry: G, props: Partial<PD.Values<P>>, colorValue: Color, sizeValue: number, transform?: TransformData): V
     updateValues(values: V, props: PD.Values<P>): void
     updateBoundingSphere(values: V, geometry: G): void
-    createRenderableState(props: Partial<PD.Values<P>>): RenderableState
+    createRenderableState(props: PD.Values<P>): RenderableState
     updateRenderableState(state: RenderableState, props: PD.Values<P>): void
     createPositionIterator(geometry: G, transform: TransformData): LocationIterator
 }

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -25,12 +25,13 @@ const tmpCylinderMatScale = Mat4();
 const tmpCylinderStart = Vec3();
 const tmpUp = Vec3();
 
-function setCylinderMat(m: Mat4, start: Vec3, dir: Vec3, length: number) {
+function setCylinderMat(m: Mat4, start: Vec3, dir: Vec3, length: number, matchDir: boolean) {
     Vec3.setMagnitude(tmpCylinderMatDir, dir, length / 2);
     Vec3.add(tmpCylinderCenter, start, tmpCylinderMatDir);
     // ensure the direction used to create the rotation is always pointing in the same
     // direction so the triangles of adjacent cylinder will line up
-    Vec3.matchDirection(tmpUp, up, tmpCylinderMatDir);
+    if (matchDir) Vec3.matchDirection(tmpUp, up, tmpCylinderMatDir);
+    else Vec3.copy(tmpUp, up);
     Mat4.fromScaling(tmpCylinderMatScale, Vec3.set(tmpCylinderScale, 1, length, 1));
     Vec3.makeRotation(tmpCylinderMatRot, tmpUp, tmpCylinderMatDir);
     Mat4.mul(m, tmpCylinderMatRot, tmpCylinderMatScale);
@@ -69,10 +70,17 @@ function getCylinder(props: CylinderProps) {
 
 export type BasicCylinderProps = Omit<CylinderProps, 'height'>
 
+export function addSimpleCylinder(state: MeshBuilder.State, start: Vec3, end: Vec3, props: BasicCylinderProps) {
+    const d = Vec3.distance(start, end);
+    Vec3.sub(tmpCylinderDir, end, start);
+    setCylinderMat(tmpCylinderMat, start, tmpCylinderDir, d, false);
+    MeshBuilder.addPrimitive(state, tmpCylinderMat, getCylinder(props));
+}
+
 export function addCylinder(state: MeshBuilder.State, start: Vec3, end: Vec3, lengthScale: number, props: BasicCylinderProps) {
     const d = Vec3.distance(start, end) * lengthScale;
     Vec3.sub(tmpCylinderDir, end, start);
-    setCylinderMat(tmpCylinderMat, start, tmpCylinderDir, d);
+    setCylinderMat(tmpCylinderMat, start, tmpCylinderDir, d, true);
     MeshBuilder.addPrimitive(state, tmpCylinderMat, getCylinder(props));
 }
 
@@ -82,11 +90,11 @@ export function addDoubleCylinder(state: MeshBuilder.State, start: Vec3, end: Ve
     Vec3.sub(tmpCylinderDir, end, start);
     // positivly shifted cylinder
     Vec3.add(tmpCylinderStart, start, shift);
-    setCylinderMat(tmpCylinderMat, tmpCylinderStart, tmpCylinderDir, d);
+    setCylinderMat(tmpCylinderMat, tmpCylinderStart, tmpCylinderDir, d, true);
     MeshBuilder.addPrimitive(state, tmpCylinderMat, cylinder);
     // negativly shifted cylinder
     Vec3.sub(tmpCylinderStart, start, shift);
-    setCylinderMat(tmpCylinderMat, tmpCylinderStart, tmpCylinderDir, d);
+    setCylinderMat(tmpCylinderMat, tmpCylinderStart, tmpCylinderDir, d, true);
     MeshBuilder.addPrimitive(state, tmpCylinderMat, cylinder);
 }
 
@@ -109,7 +117,7 @@ export function addFixedCountDashedCylinder(state: MeshBuilder.State, start: Vec
         const f = step * (j * 2 + 1);
         Vec3.setMagnitude(tmpCylinderDir, tmpCylinderDir, d * f);
         Vec3.add(tmpCylinderStart, start, tmpCylinderDir);
-        setCylinderMat(tmpCylinderMat, tmpCylinderStart, tmpCylinderDir, d * step);
+        setCylinderMat(tmpCylinderMat, tmpCylinderStart, tmpCylinderDir, d * step, false);
         MeshBuilder.addPrimitive(state, tmpCylinderMat, cylinder);
     }
 }

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

@@ -36,6 +36,7 @@ const v3magnitude = Vec3.magnitude;
 const v3negate = Vec3.negate;
 const v3copy = Vec3.copy;
 const v3cross = Vec3.cross;
+const v3set = Vec3.set;
 const caAdd3 = ChunkedArray.add3;
 const caAdd = ChunkedArray.add;
 
@@ -43,14 +44,14 @@ function addCap(offset: number, state: MeshBuilder.State, controlPoints: ArrayLi
     const { vertices, normals, indices } = state;
     const vertexCount = vertices.elementCount;
 
-    v3fromArray(verticalLeftVector, normalVectors, offset);
-    v3scale(verticalLeftVector, verticalLeftVector, leftHeight);
+    v3fromArray(tA, normalVectors, offset);
+    v3scale(verticalLeftVector, tA, leftHeight);
+    v3scale(verticalRightVector, tA, rightHeight);
 
-    v3fromArray(verticalRightVector, normalVectors, offset);
-    v3scale(verticalRightVector, verticalRightVector, rightHeight);
+    v3fromArray(tB, binormalVectors, offset);
+    v3scale(horizontalVector, tB, width);
 
-    v3fromArray(horizontalVector, binormalVectors, offset);
-    v3scale(horizontalVector, horizontalVector, width);
+    v3cross(normalVector, tB, tA);
 
     v3fromArray(positionVector, controlPoints, offset);
 
@@ -73,8 +74,6 @@ function addCap(offset: number, state: MeshBuilder.State, controlPoints: ArrayLi
         v3copy(verticalVector, verticalLeftVector);
     }
 
-    v3cross(normalVector, horizontalVector, verticalVector);
-
     for (let i = 0; i < 4; ++i) {
         caAdd3(normals, normalVector[0], normalVector[1], normalVector[2]);
     }
@@ -93,6 +92,8 @@ export function addSheet(state: MeshBuilder.State, controlPoints: ArrayLike<numb
         v3fromArray(tA, controlPoints, 0);
         v3fromArray(tB, controlPoints, linearSegments * 3);
         offsetLength = arrowHeight / v3magnitude(v3sub(tV, tB, tA));
+    } else {
+        v3set(normalOffset, 0, 0, 0);
     }
 
     for (let i = 0; i <= linearSegments; ++i) {
@@ -119,7 +120,7 @@ export function addSheet(state: MeshBuilder.State, controlPoints: ArrayLike<numb
         v3fromArray(torsionVector, binormalVectors, i3);
 
         v3add(tA, v3add(tA, positionVector, horizontalVector), verticalVector);
-        v3copy(tB, normalVector);
+        v3add(tB, normalVector, normalOffset);
         caAdd3(vertices, tA[0], tA[1], tA[2]);
         caAdd3(normals, tB[0], tB[1], tB[2]);
 
@@ -128,7 +129,7 @@ export function addSheet(state: MeshBuilder.State, controlPoints: ArrayLike<numb
         caAdd3(normals, tB[0], tB[1], tB[2]);
 
         // v3add(tA, v3sub(tA, positionVector, horizontalVector), verticalVector) // reuse tA
-        v3add(tB, v3negate(tB, torsionVector), normalOffset);
+        v3negate(tB, torsionVector);
         caAdd3(vertices, tA[0], tA[1], tA[2]);
         caAdd3(normals, tB[0], tB[1], tB[2]);
 
@@ -137,7 +138,7 @@ export function addSheet(state: MeshBuilder.State, controlPoints: ArrayLike<numb
         caAdd3(normals, tB[0], tB[1], tB[2]);
 
         // v3sub(tA, v3sub(tA, positionVector, horizontalVector), verticalVector) // reuse tA
-        v3negate(tB, normalVector);
+        v3add(tB, v3negate(tB, normalVector), normalOffset);
         caAdd3(vertices, tA[0], tA[1], tA[2]);
         caAdd3(normals, tB[0], tB[1], tB[2]);
 
@@ -146,7 +147,7 @@ export function addSheet(state: MeshBuilder.State, controlPoints: ArrayLike<numb
         caAdd3(normals, tB[0], tB[1], tB[2]);
 
         // v3sub(tA, v3add(tA, positionVector, horizontalVector), verticalVector) // reuse tA
-        v3add(tB, torsionVector, normalOffset);
+        v3copy(tB, torsionVector);
         caAdd3(vertices, tA[0], tA[1], tA[2]);
         caAdd3(normals, tB[0], tB[1], tB[2]);
 

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

@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { createTextureImage, TextureImage } from '../../../mol-gl/renderable/util';
+import { WebGLContext } from '../../../mol-gl/webgl/context';
+import { Texture } from '../../../mol-gl/webgl/texture';
+import { Box3D, Sphere3D } from '../../../mol-math/geometry';
+import { Vec2, Vec3, Vec4 } from '../../../mol-math/linear-algebra';
+import { getVolumeTexture2dLayout } from '../../../mol-repr/volume/util';
+import { Color } from '../../../mol-util/color';
+
+interface ColorSmoothingInput {
+    vertexCount: number
+    instanceCount: number
+    groupCount: number
+    transformBuffer: Float32Array
+    instanceBuffer: Float32Array
+    positionBuffer: Float32Array
+    groupBuffer: Float32Array
+    colorData: TextureImage<Uint8Array>
+    colorType: 'group' | 'groupInstance'
+    boundingSphere: Sphere3D
+    invariantBoundingSphere: Sphere3D
+}
+
+export function calcMeshColorSmoothing(input: ColorSmoothingInput, resolution: number, stride: number, webgl?: WebGLContext, texture?: Texture) {
+    const { colorType, vertexCount, groupCount, positionBuffer, transformBuffer, groupBuffer } = input;
+
+    const isInstanceType = colorType.endsWith('Instance');
+    const box = Box3D.fromSphere3D(Box3D(), isInstanceType ? input.boundingSphere : input.invariantBoundingSphere);
+
+    const scaleFactor = 1 / resolution;
+    const scaledBox = Box3D.scale(Box3D(), box, scaleFactor);
+    const gridDim = Box3D.size(Vec3(), scaledBox);
+    Vec3.ceil(gridDim, gridDim);
+    Vec3.add(gridDim, gridDim, Vec3.create(2, 2, 2));
+    const { min } = box;
+
+    const [ xn, yn ] = gridDim;
+    const { width, height } = getVolumeTexture2dLayout(gridDim);
+    // console.log({ width, height, dim });
+
+    const itemSize = 3;
+    const data = new Float32Array(width * height * itemSize);
+    const count = new Float32Array(width * height);
+
+    const grid = new Uint8Array(width * height * itemSize);
+    const textureImage: TextureImage<Uint8Array> = { array: grid, width, height, filter: 'linear' };
+
+    const instanceCount = isInstanceType ? input.instanceCount : 1;
+    const colors = input.colorData.array;
+
+    function getIndex(x: number, y: number, z: number) {
+        const column = Math.floor(((z * xn) % width) / xn);
+        const row = Math.floor((z * xn) / width);
+        const px = column * xn + x;
+        return itemSize * ((row * yn * width) + (y * width) + px);
+    }
+
+    const p = 2;
+    const [dimX, dimY, dimZ] = gridDim;
+    const v = Vec3();
+
+    for (let i = 0; i < instanceCount; ++i) {
+        for (let j = 0; j < vertexCount; j += stride) {
+            Vec3.fromArray(v, positionBuffer, j * 3);
+            if (isInstanceType) Vec3.transformMat4Offset(v, v, transformBuffer, 0, 0, i * 16);
+            Vec3.sub(v, v, min);
+            Vec3.scale(v, v, scaleFactor);
+            const [vx, vy, vz] = v;
+
+            // vertex mapped to grid
+            const x = Math.floor(vx);
+            const y = Math.floor(vy);
+            const z = Math.floor(vz);
+
+            // group colors
+            const ci = i * groupCount + groupBuffer[j];
+            const r = colors[ci * 3];
+            const g = colors[ci * 3 + 1];
+            const b = colors[ci * 3 + 2];
+
+            // Extents of grid to consider for this atom
+            const begX = Math.max(0, x - p);
+            const begY = Math.max(0, y - p);
+            const begZ = Math.max(0, z - p);
+
+            // Add two to these points:
+            // - x, y, z are floor'd values so this ensures coverage
+            // - these are loop limits (exclusive)
+            const endX = Math.min(dimX, x + p + 2);
+            const endY = Math.min(dimY, y + p + 2);
+            const endZ = Math.min(dimZ, z + p + 2);
+
+            for (let xi = begX; xi < endX; ++xi) {
+                const dx = xi - vx;
+                for (let yi = begY; yi < endY; ++yi) {
+                    const dy = yi - vy;
+                    for (let zi = begZ; zi < endZ; ++zi) {
+                        const dz = zi - vz;
+                        const d = Math.sqrt(dx * dx + dy * dy + dz * dz);
+                        if (d > p) continue;
+
+                        let s = p - d;
+                        const index = getIndex(xi, yi, zi);
+                        data[index] += r * s;
+                        data[index + 1] += g * s;
+                        data[index + 2] += b * s;
+                        count[index / 3] += s;
+                    }
+                }
+            }
+        }
+    }
+
+    for (let i = 0, il = count.length; i < il; ++i) {
+        const i3 = i * 3;
+        const c = count[i];
+        grid[i3] = Math.round(data[i3] / c);
+        grid[i3 + 1] = Math.round(data[i3 + 1] / c);
+        grid[i3 + 2] = Math.round(data[i3 + 2] / c);
+    }
+
+    const gridTexDim = Vec2.create(width, height);
+    const gridTransform = Vec4.create(min[0], min[1], min[2], scaleFactor);
+    const type = isInstanceType ? 'volumeInstance' as const : 'volume' as const;
+
+    if (webgl) {
+        if (!texture) texture = webgl.resources.texture('image-uint8', 'rgb', 'ubyte', 'linear');
+        texture.load(textureImage);
+
+        return { kind: 'volume' as const, texture, gridTexDim, gridDim, gridTransform, type };
+    } else {
+        const interpolated = getTrilinearlyInterpolated({ vertexCount, instanceCount, transformBuffer, positionBuffer, colorType: type, grid, gridDim, gridTexDim, gridTransform, vertexStride: 3, colorStride: 3 });
+
+        return {
+            kind: 'vertex' as const,
+            texture: interpolated,
+            texDim: Vec2.create(interpolated.width, interpolated.height),
+            type: isInstanceType ? 'vertexInstance' : 'vertex'
+        };
+    }
+}
+
+//
+
+interface ColorInterpolationInput {
+    vertexCount: number
+    instanceCount: number
+    transformBuffer: Float32Array
+    positionBuffer: Float32Array
+    colorType: 'volumeInstance' | 'volume'
+    grid: Uint8Array // 2d layout
+    gridTexDim: Vec2
+    gridDim: Vec3
+    gridTransform: Vec4
+    vertexStride: number
+    colorStride: number
+}
+
+export function getTrilinearlyInterpolated(input: ColorInterpolationInput): TextureImage<Uint8Array> {
+    const { vertexCount, positionBuffer, transformBuffer, grid, gridDim, gridTexDim, gridTransform, vertexStride, colorStride } = input;
+
+    const isInstanceType = input.colorType.endsWith('Instance');
+    const instanceCount = isInstanceType ? input.instanceCount : 1;
+    const image = createTextureImage(Math.max(1, instanceCount * vertexCount), 3, Uint8Array);
+    const { array } = image;
+
+    const [xn, yn] = gridDim;
+    const width = gridTexDim[0];
+    const min = Vec3.fromArray(Vec3(), gridTransform, 0);
+    const scaleFactor = gridTransform[3];
+
+    function getIndex(x: number, y: number, z: number) {
+        const column = Math.floor(((z * xn) % width) / xn);
+        const row = Math.floor((z * xn) / width);
+        const px = column * xn + x;
+        return colorStride * ((row * yn * width) + (y * width) + px);
+    }
+
+    const v = Vec3();
+    const v0 = Vec3();
+    const v1 = Vec3();
+    const vd = Vec3();
+
+    for (let i = 0; i < instanceCount; ++i) {
+        for (let j = 0; j < vertexCount; ++j) {
+            Vec3.fromArray(v, positionBuffer, j * vertexStride);
+            if (isInstanceType) Vec3.transformMat4Offset(v, v, transformBuffer, 0, 0, i * 16);
+            Vec3.sub(v, v, min);
+            Vec3.scale(v, v, scaleFactor);
+
+            Vec3.floor(v0, v);
+            Vec3.ceil(v1, v);
+
+            Vec3.sub(vd, v, v0);
+            Vec3.sub(v, v1, v0);
+            Vec3.div(vd, vd, v);
+
+            const [x0, y0, z0] = v0;
+            const [x1, y1, z1] = v1;
+            const [xd, yd, zd] = vd;
+
+            const s000 = Color.fromArray(grid, getIndex(x0, y0, z0));
+            const s100 = Color.fromArray(grid, getIndex(x1, y0, z0));
+            const s001 = Color.fromArray(grid, getIndex(x0, y0, z1));
+            const s101 = Color.fromArray(grid, getIndex(x1, y0, z1));
+            const s010 = Color.fromArray(grid, getIndex(x0, y1, z0));
+            const s110 = Color.fromArray(grid, getIndex(x1, y1, z0));
+            const s011 = Color.fromArray(grid, getIndex(x0, y1, z1));
+            const s111 = Color.fromArray(grid, getIndex(x1, y1, z1));
+
+            const s00 = Color.interpolate(s000, s100, xd);
+            const s01 = Color.interpolate(s001, s101, xd);
+            const s10 = Color.interpolate(s010, s110, xd);
+            const s11 = Color.interpolate(s011, s111, xd);
+
+            const s0 = Color.interpolate(s00, s10, yd);
+            const s1 = Color.interpolate(s01, s11, yd);
+
+            Color.toArray(Color.interpolate(s0, s1, zd), array, (i * vertexCount + j) * 3);
+        }
+    }
+
+    return image;
+}

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

@@ -144,6 +144,14 @@ export namespace MeshBuilder {
         }
     }
 
+    export function addMesh(state: State, t: Mat4, mesh: Mesh) {
+        addPrimitive(state, t, {
+            vertices: mesh.vertexBuffer.ref.value.subarray(0, mesh.vertexCount * 3),
+            normals: mesh.normalBuffer.ref.value.subarray(0, mesh.vertexCount * 3),
+            indices: mesh.indexBuffer.ref.value.subarray(0, mesh.triangleCount * 3),
+        });
+    }
+
     export function getMesh (state: State): Mesh {
         const { vertices, normals, indices, groups, mesh } = state;
         const vb = ChunkedArray.compact(vertices, true) as Float32Array;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 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>
@@ -49,6 +49,8 @@ export interface Mesh {
     readonly groupMapping: GroupMapping
 
     setBoundingSphere(boundingSphere: Sphere3D): void
+
+    readonly meta: { [k: string]: unknown }
 }
 
 export namespace Mesh {
@@ -109,7 +111,8 @@ export namespace Mesh {
             setBoundingSphere(sphere: Sphere3D) {
                 Sphere3D.copy(boundingSphere, sphere);
                 currentHash = hashCode(mesh);
-            }
+            },
+            meta: {}
         };
         return mesh;
     }
@@ -174,6 +177,18 @@ export namespace Mesh {
         ValueCell.update(mesh.vertexBuffer, v);
     }
 
+    export type OriginalData = {
+        indexBuffer: Uint32Array
+        vertexCount: number
+        triangleCount: number
+    }
+
+    /** Meshes may contain some original data in case any processing was done. */
+    export function getOriginalData(x: Mesh | MeshValues) {
+        const { originalData } = 'kind' in x ? x.meta : x.meta.ref.value as Mesh['meta'];
+        return originalData as OriginalData | undefined;
+    }
+
     /**
      * Ensure that each vertices of each triangle have the same group id.
      * Note that normals are copied over and can't be re-created from the new mesh.
@@ -322,6 +337,9 @@ export namespace Mesh {
         ValueCell.update(indexBuffer, newIb) as ValueCell<Uint32Array>;
         ValueCell.update(normalBuffer, newNb) as ValueCell<Float32Array>;
 
+        // keep some original data, e.g., for geometry export
+        (mesh.meta.originalData as OriginalData) = { indexBuffer: ib, vertexCount, triangleCount };
+
         return mesh;
     }
 
@@ -369,9 +387,6 @@ export namespace Mesh {
 
     function createValues(mesh: Mesh, transform: TransformData, locationIt: LocationIterator, theme: Theme, props: PD.Values<Params>): MeshValues {
         const { instanceCount, groupCount } = locationIt;
-        if (instanceCount !== transform.instanceCount.ref.value) {
-            throw new Error('instanceCount values in TransformData and LocationIterator differ');
-        }
         const positionIt = createPositionIterator(mesh, transform);
 
         const color = createColors(locationIt, positionIt, theme.color);
@@ -406,6 +421,8 @@ export namespace Mesh {
             dFlipSided: ValueCell.create(props.flipSided),
             dIgnoreLight: ValueCell.create(props.ignoreLight),
             dXrayShaded: ValueCell.create(props.xrayShaded),
+
+            meta: ValueCell.create(mesh.meta),
         };
     }
 

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

@@ -31,7 +31,7 @@ export function createSizes(locationIt: LocationIterator, sizeTheme: SizeTheme<a
     }
 }
 
-const sizeFactor = 100; // NOTE same factor is set in shaders
+export const sizeDataFactor = 100; // NOTE same factor is set in shaders
 
 export function getMaxSize(sizeData: SizeData): number {
     const type = sizeData.dSizeType.ref.value as SizeType;
@@ -47,7 +47,7 @@ export function getMaxSize(sizeData: SizeData): number {
                 const value = decodeFloatRGB(array[i], array[i + 1], array[i + 2]);
                 if (maxSize < value) maxSize = value;
             }
-            return maxSize / sizeFactor;
+            return maxSize / sizeDataFactor;
     }
 }
 
@@ -103,7 +103,7 @@ export function createInstanceSize(locationIt: LocationIterator, sizeFn: Locatio
     locationIt.reset();
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
         const v = locationIt.move();
-        encodeFloatRGBtoArray(sizeFn(v.location) * sizeFactor, sizes.array, v.instanceIndex * 3);
+        encodeFloatRGBtoArray(sizeFn(v.location) * sizeDataFactor, sizes.array, v.instanceIndex * 3);
         locationIt.skipInstance();
     }
     return createTextureSize(sizes, 'instance', sizeData);
@@ -116,7 +116,7 @@ export function createGroupSize(locationIt: LocationIterator, sizeFn: LocationSi
     locationIt.reset();
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
         const v = locationIt.move();
-        encodeFloatRGBtoArray(sizeFn(v.location) * sizeFactor, sizes.array, v.groupIndex * 3);
+        encodeFloatRGBtoArray(sizeFn(v.location) * sizeDataFactor, sizes.array, v.groupIndex * 3);
     }
     return createTextureSize(sizes, 'group', sizeData);
 }
@@ -129,7 +129,7 @@ export function createGroupInstanceSize(locationIt: LocationIterator, sizeFn: Lo
     locationIt.reset();
     while (locationIt.hasNext) {
         const v = locationIt.move();
-        encodeFloatRGBtoArray(sizeFn(v.location) * sizeFactor, sizes.array, v.index * 3);
+        encodeFloatRGBtoArray(sizeFn(v.location) * sizeDataFactor, sizes.array, v.index * 3);
     }
     return createTextureSize(sizes, 'groupInstance', sizeData);
 }

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

@@ -163,9 +163,6 @@ export namespace Spheres {
 
     function createValues(spheres: Spheres, transform: TransformData, locationIt: LocationIterator, theme: Theme, props: PD.Values<Params>): SpheresValues {
         const { instanceCount, groupCount } = locationIt;
-        if (instanceCount !== transform.instanceCount.ref.value) {
-            throw new Error('instanceCount values in TransformData and LocationIterator differ');
-        }
         const positionIt = createPositionIterator(spheres, transform);
 
         const color = createColors(locationIt, positionIt, theme.color);
@@ -177,7 +174,7 @@ export namespace Spheres {
 
         const counts = { drawCount: spheres.sphereCount * 2 * 3, vertexCount: spheres.sphereCount * 4, groupCount, instanceCount };
 
-        const padding = getMaxSize(size) * props.sizeFactor;
+        const padding = spheres.boundingSphere.radius ? getMaxSize(size) * props.sizeFactor : 0;
         const invariantBoundingSphere = Sphere3D.expand(Sphere3D(), spheres.boundingSphere, padding);
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
@@ -222,7 +219,9 @@ export namespace Spheres {
     }
 
     function updateBoundingSphere(values: SpheresValues, spheres: Spheres) {
-        const padding = getMaxSize(values) * values.uSizeFactor.ref.value;
+        const padding = spheres.boundingSphere.radius
+            ? getMaxSize(values) * values.uSizeFactor.ref.value
+            : 0;
         const invariantBoundingSphere = Sphere3D.expand(Sphere3D(), spheres.boundingSphere, padding);
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, values.aTransform.ref.value, values.instanceCount.ref.value);
 

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

@@ -206,9 +206,6 @@ export namespace Text {
 
     function createValues(text: Text, transform: TransformData, locationIt: LocationIterator, theme: Theme, props: PD.Values<Params>): TextValues {
         const { instanceCount, groupCount } = locationIt;
-        if (instanceCount !== transform.instanceCount.ref.value) {
-            throw new Error('instanceCount values in TransformData and LocationIterator differ');
-        }
         const positionIt = createPositionIterator(text, transform);
 
         const color = createColors(locationIt, positionIt, theme.color);

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

@@ -0,0 +1,344 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ValueCell } from '../../../mol-util';
+import { createComputeRenderable, ComputeRenderable } from '../../../mol-gl/renderable';
+import { WebGLContext } from '../../../mol-gl/webgl/context';
+import { Texture } from '../../../mol-gl/webgl/texture';
+import { ShaderCode } from '../../../mol-gl/shader-code';
+import { createComputeRenderItem } from '../../../mol-gl/webgl/render-item';
+import { ValueSpec, AttributeSpec, UniformSpec, TextureSpec, Values, DefineSpec } from '../../../mol-gl/renderable/schema';
+import { quad_vert } from '../../../mol-gl/shader/quad.vert';
+import { normalize_frag } from '../../../mol-gl/shader/compute/color-smoothing/normalize.frag';
+import { QuadSchema, QuadValues } from '../../../mol-gl/compute/util';
+import { Vec2, Vec3, Vec4 } from '../../../mol-math/linear-algebra';
+import { Box3D, Sphere3D } from '../../../mol-math/geometry';
+import { accumulate_frag } from '../../../mol-gl/shader/compute/color-smoothing/accumulate.frag';
+import { accumulate_vert } from '../../../mol-gl/shader/compute/color-smoothing/accumulate.vert';
+import { TextureImage } from '../../../mol-gl/renderable/util';
+
+export const ColorAccumulateSchema = {
+    drawCount: ValueSpec('number'),
+    instanceCount: ValueSpec('number'),
+    stride: ValueSpec('number'),
+
+    uTotalCount: UniformSpec('i'),
+    uInstanceCount: UniformSpec('i'),
+    uGroupCount: UniformSpec('i'),
+
+    aTransform: AttributeSpec('float32', 16, 1),
+    aInstance: AttributeSpec('float32', 1, 1),
+    aSample: AttributeSpec('float32', 1, 0),
+
+    uGeoTexDim: UniformSpec('v2', 'buffered'),
+    tPosition: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+    tGroup: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+
+    uColorTexDim: UniformSpec('v2'),
+    tColor: TextureSpec('image-uint8', 'rgb', 'ubyte', 'nearest'),
+    dColorType: DefineSpec('string', ['group', 'groupInstance', 'vertex', 'vertexInstance']),
+
+    uCurrentSlice: UniformSpec('f'),
+    uCurrentX: UniformSpec('f'),
+    uCurrentY: UniformSpec('f'),
+    uBboxMin: UniformSpec('v3', 'material'),
+    uBboxSize: UniformSpec('v3', 'material'),
+    uResolution: UniformSpec('f', 'material'),
+};
+type ColorAccumulateValues = Values<typeof ColorAccumulateSchema>
+const ColorAccumulateName = 'color-accumulate';
+
+interface AccumulateInput {
+    vertexCount: number
+    instanceCount: number
+    groupCount: number
+    transformBuffer: Float32Array
+    instanceBuffer: Float32Array
+    positionTexture: Texture
+    groupTexture: Texture
+    colorData: TextureImage<Uint8Array>
+    colorType: 'group' | 'groupInstance'
+}
+
+function getSampleBuffer(sampleCount: number, stride: number) {
+    const sampleBuffer = new Float32Array(sampleCount);
+    for (let i = 0; i < sampleCount; ++i) {
+        sampleBuffer[i] = i * stride;
+    }
+    return sampleBuffer;
+}
+
+function getAccumulateRenderable(ctx: WebGLContext, input: AccumulateInput, box: Box3D, resolution: number, stride: number): ComputeRenderable<ColorAccumulateValues> {
+    if (ctx.namedComputeRenderables[ColorAccumulateName]) {
+        const extent = Vec3.sub(Vec3(), box.max, box.min);
+        const v = ctx.namedComputeRenderables[ColorAccumulateName].values as ColorAccumulateValues;
+
+        const sampleCount = Math.round(input.vertexCount / stride);
+        if (sampleCount > v.drawCount.ref.value || stride !== v.stride.ref.value) {
+            ValueCell.update(v.aSample, getSampleBuffer(sampleCount, stride));
+        }
+
+        ValueCell.updateIfChanged(v.drawCount, sampleCount);
+        ValueCell.updateIfChanged(v.instanceCount, input.instanceCount);
+        ValueCell.updateIfChanged(v.stride, stride);
+
+        ValueCell.updateIfChanged(v.uTotalCount, input.vertexCount);
+        ValueCell.updateIfChanged(v.uInstanceCount, input.instanceCount);
+        ValueCell.updateIfChanged(v.uGroupCount, input.groupCount);
+
+        ValueCell.update(v.aTransform, input.transformBuffer);
+        ValueCell.update(v.aInstance, input.instanceBuffer);
+
+        ValueCell.update(v.uGeoTexDim, Vec2.set(v.uGeoTexDim.ref.value, input.positionTexture.getWidth(), input.positionTexture.getHeight()));
+        ValueCell.update(v.tPosition, input.positionTexture);
+        ValueCell.update(v.tGroup, input.groupTexture);
+
+        ValueCell.update(v.uColorTexDim, Vec2.set(v.uColorTexDim.ref.value, input.colorData.width, input.colorData.height));
+        ValueCell.update(v.tColor, input.colorData);
+        ValueCell.updateIfChanged(v.dColorType, input.colorType);
+
+        ValueCell.updateIfChanged(v.uCurrentSlice, 0);
+        ValueCell.updateIfChanged(v.uCurrentX, 0);
+        ValueCell.updateIfChanged(v.uCurrentY, 0);
+        ValueCell.update(v.uBboxMin, box.min);
+        ValueCell.update(v.uBboxSize, extent);
+        ValueCell.updateIfChanged(v.uResolution, resolution);
+
+        ctx.namedComputeRenderables[ColorAccumulateName].update();
+    } else {
+        ctx.namedComputeRenderables[ColorAccumulateName] = createAccumulateRenderable(ctx, input, box, resolution, stride);
+    }
+    return ctx.namedComputeRenderables[ColorAccumulateName];
+}
+
+function createAccumulateRenderable(ctx: WebGLContext, input: AccumulateInput, box: Box3D, resolution: number, stride: number) {
+    const extent = Vec3.sub(Vec3(), box.max, box.min);
+    const sampleCount = Math.round(input.vertexCount / stride);
+
+    const values: ColorAccumulateValues = {
+        drawCount: ValueCell.create(sampleCount),
+        instanceCount: ValueCell.create(input.instanceCount),
+        stride: ValueCell.create(stride),
+
+        uTotalCount: ValueCell.create(input.vertexCount),
+        uInstanceCount: ValueCell.create(input.instanceCount),
+        uGroupCount: ValueCell.create(input.groupCount),
+
+        aTransform: ValueCell.create(input.transformBuffer),
+        aInstance: ValueCell.create(input.instanceBuffer),
+        aSample: ValueCell.create(getSampleBuffer(sampleCount, stride)),
+
+        uGeoTexDim: ValueCell.create(Vec2.create(input.positionTexture.getWidth(), input.positionTexture.getHeight())),
+        tPosition: ValueCell.create(input.positionTexture),
+        tGroup: ValueCell.create(input.groupTexture),
+
+        uColorTexDim: ValueCell.create(Vec2.create(input.colorData.width, input.colorData.height)),
+        tColor: ValueCell.create(input.colorData),
+        dColorType: ValueCell.create(input.colorType),
+
+        uCurrentSlice: ValueCell.create(0),
+        uCurrentX: ValueCell.create(0),
+        uCurrentY: ValueCell.create(0),
+        uBboxMin: ValueCell.create(box.min),
+        uBboxSize: ValueCell.create(extent),
+        uResolution: ValueCell.create(resolution),
+    };
+
+    const schema = { ...ColorAccumulateSchema };
+    const shaderCode = ShaderCode('accumulate', accumulate_vert, accumulate_frag);
+    const renderItem = createComputeRenderItem(ctx, 'points', shaderCode, schema, values);
+
+    return createComputeRenderable(renderItem, values);
+}
+
+function setAccumulateDefaults(ctx: WebGLContext) {
+    const { gl, state } = ctx;
+    state.disable(gl.CULL_FACE);
+    state.enable(gl.BLEND);
+    state.disable(gl.DEPTH_TEST);
+    state.enable(gl.SCISSOR_TEST);
+    state.depthMask(false);
+    state.clearColor(0, 0, 0, 0);
+    state.blendFunc(gl.ONE, gl.ONE);
+    state.blendEquation(gl.FUNC_ADD);
+}
+
+//
+
+export const ColorNormalizeSchema = {
+    ...QuadSchema,
+
+    tColor: TextureSpec('texture', 'rgba', 'float', 'nearest'),
+    uTexSize: UniformSpec('v2'),
+
+};
+type ColorNormalizeValues = Values<typeof ColorNormalizeSchema>
+const ColorNormalizeName = 'color-normalize';
+
+function getNormalizeRenderable(ctx: WebGLContext, color: Texture): ComputeRenderable<ColorNormalizeValues> {
+    if (ctx.namedComputeRenderables[ColorNormalizeName]) {
+        const v = ctx.namedComputeRenderables[ColorNormalizeName].values as ColorNormalizeValues;
+
+        ValueCell.update(v.tColor, color);
+        ValueCell.update(v.uTexSize, Vec2.set(v.uTexSize.ref.value, color.getWidth(), color.getHeight()));
+
+        ctx.namedComputeRenderables[ColorNormalizeName].update();
+    } else {
+        ctx.namedComputeRenderables[ColorNormalizeName] = createColorNormalizeRenderable(ctx, color);
+    }
+    return ctx.namedComputeRenderables[ColorNormalizeName];
+}
+
+function createColorNormalizeRenderable(ctx: WebGLContext, color: Texture) {
+    const values: ColorNormalizeValues = {
+        ...QuadValues,
+        tColor: ValueCell.create(color),
+        uTexSize: ValueCell.create(Vec2.create(color.getWidth(), color.getHeight())),
+    };
+
+    const schema = { ...ColorNormalizeSchema };
+    const shaderCode = ShaderCode('normalize', quad_vert, normalize_frag);
+    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
+
+    return createComputeRenderable(renderItem, values);
+}
+
+function setNormalizeDefaults(ctx: WebGLContext) {
+    const { gl, state } = ctx;
+    state.disable(gl.CULL_FACE);
+    state.enable(gl.BLEND);
+    state.disable(gl.DEPTH_TEST);
+    state.enable(gl.SCISSOR_TEST);
+    state.depthMask(false);
+    state.clearColor(0, 0, 0, 0);
+    state.blendFunc(gl.ONE, gl.ONE);
+    state.blendEquation(gl.FUNC_ADD);
+}
+
+//
+
+function getTexture2dSize(gridDim: Vec3) {
+    const area = gridDim[0] * gridDim[1] * gridDim[2];
+    const squareDim = Math.sqrt(area);
+    const powerOfTwoSize = Math.pow(2, Math.ceil(Math.log(squareDim) / Math.log(2)));
+
+    let texDimX = 0;
+    let texDimY = gridDim[1];
+    let texRows = 1;
+    let texCols = gridDim[2];
+    if (powerOfTwoSize < gridDim[0] * gridDim[2]) {
+        texCols = Math.floor(powerOfTwoSize / gridDim[0]);
+        texRows = Math.ceil(gridDim[2] / texCols);
+        texDimX = texCols * gridDim[0];
+        texDimY *= texRows;
+    } else {
+        texDimX = gridDim[0] * gridDim[2];
+    }
+    // console.log(texDimX, texDimY, texDimY < powerOfTwoSize ? powerOfTwoSize : powerOfTwoSize * 2);
+    return { texDimX, texDimY, texRows, texCols, powerOfTwoSize: texDimY < powerOfTwoSize ? powerOfTwoSize : powerOfTwoSize * 2 };
+}
+
+interface ColorSmoothingInput extends AccumulateInput {
+    boundingSphere: Sphere3D
+    invariantBoundingSphere: Sphere3D
+}
+
+export function calcTextureMeshColorSmoothing(input: ColorSmoothingInput, resolution: number, stride: number, webgl: WebGLContext, texture?: Texture) {
+    const { gl, resources, state, extensions: { colorBufferHalfFloat, textureHalfFloat } } = webgl;
+
+    const isInstanceType = input.colorType.endsWith('Instance');
+    const box = Box3D.fromSphere3D(Box3D(), isInstanceType ? input.boundingSphere : input.invariantBoundingSphere);
+
+    const scaleFactor = 1 / resolution;
+    const scaledBox = Box3D.scale(Box3D(), box, scaleFactor);
+    const gridDim = Box3D.size(Vec3(), scaledBox);
+    Vec3.ceil(gridDim, gridDim);
+    Vec3.add(gridDim, gridDim, Vec3.create(2, 2, 2));
+    const { min } = box;
+
+    const [ dx, dy, dz ] = gridDim;
+    const { texDimX: width, texDimY: height, texCols } = getTexture2dSize(gridDim);
+    // console.log({ width, height, texCols, dim, resolution });
+
+    if (!webgl.namedTextures[ColorAccumulateName]) {
+        webgl.namedTextures[ColorAccumulateName] = colorBufferHalfFloat && textureHalfFloat
+            ? resources.texture('image-float16', 'rgba', 'fp16', 'nearest')
+            : resources.texture('image-float32', 'rgba', 'float', 'nearest');
+    }
+    const accumulateTexture = webgl.namedTextures[ColorAccumulateName];
+    accumulateTexture.define(width, height);
+
+    const accumulateRenderable = getAccumulateRenderable(webgl, input, box, resolution, stride);
+
+    //
+
+    const { uCurrentSlice, uCurrentX, uCurrentY } = accumulateRenderable.values;
+
+    if (!webgl.namedFramebuffers[ColorAccumulateName]) {
+        webgl.namedFramebuffers[ColorAccumulateName] = webgl.resources.framebuffer();
+    }
+    const framebuffer = webgl.namedFramebuffers[ColorAccumulateName];
+    framebuffer.bind();
+
+    setAccumulateDefaults(webgl);
+    state.currentRenderItemId = -1;
+    accumulateTexture.attachFramebuffer(framebuffer, 0);
+    gl.viewport(0, 0, width, height);
+    gl.scissor(0, 0, width, height);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    ValueCell.update(uCurrentY, 0);
+    let currCol = 0;
+    let currY = 0;
+    let currX = 0;
+    for (let i = 0; i < dz; ++i) {
+        if (currCol >= texCols) {
+            currCol -= texCols;
+            currY += dy;
+            currX = 0;
+            ValueCell.update(uCurrentY, currY);
+        }
+        // console.log({ i, currX, currY });
+        ValueCell.update(uCurrentX, currX);
+        ValueCell.update(uCurrentSlice, i);
+        gl.viewport(currX, currY, dx, dy);
+        gl.scissor(currX, currY, dx, dy);
+        accumulateRenderable.render();
+        ++currCol;
+        currX += dx;
+    }
+
+    // const accImage = new Float32Array(width * height * 4);
+    // accumulateTexture.attachFramebuffer(framebuffer, 0);
+    // webgl.readPixels(0, 0, width, height, accImage);
+    // console.log(accImage);
+    // printTextureImage({ array: accImage, width, height }, 1 / 4);
+
+    // normalize
+
+    if (!texture) texture = resources.texture('image-uint8', 'rgb', 'ubyte', 'linear');
+    texture.define(width, height);
+
+    const normalizeRenderable = getNormalizeRenderable(webgl, accumulateTexture);
+
+    setNormalizeDefaults(webgl);
+    state.currentRenderItemId = -1;
+    texture.attachFramebuffer(framebuffer, 0);
+    gl.viewport(0, 0, width, height);
+    gl.scissor(0, 0, width, height);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    normalizeRenderable.render();
+
+    // const normImage = new Uint8Array(width * height * 4);
+    // texture.attachFramebuffer(framebuffer, 0);
+    // webgl.readPixels(0, 0, width, height, normImage);
+    // console.log(normImage);
+    // printTextureImage({ array: normImage, width, height }, 1 / 4);
+
+    const gridTransform = Vec4.create(min[0], min[1], min[2], scaleFactor);
+    const type = isInstanceType ? 'volumeInstance' : 'volume';
+
+    return { texture, gridDim, gridTexDim: Vec2.create(width, height), gridTransform, type };
+}

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

@@ -39,6 +39,8 @@ export interface TextureMesh {
     readonly doubleBuffer: TextureMesh.DoubleBuffer
 
     readonly boundingSphere: Sphere3D
+
+    meta?: unknown
 }
 
 export namespace TextureMesh {

src/mol-geo/primitive/torus.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+// adapted from three.js, MIT License Copyright 2010-2021 three.js authors
+
+import { Vec3 } from '../../mol-math/linear-algebra';
+import { Primitive } from './primitive';
+
+export const DefaultTorusProps = {
+    radius: 1,
+    tube: 0.4,
+    radialSegments: 8,
+    tubularSegments: 6,
+    arc: Math.PI * 2,
+};
+export type TorusProps = Partial<typeof DefaultTorusProps>
+
+export function Torus(props?: TorusProps): Primitive {
+    const { radius, tube, radialSegments, tubularSegments, arc } = { ...DefaultTorusProps, ...props };
+
+    // buffers
+    const indices: number[] = [];
+    const vertices: number[] = [];
+    const normals: number[] = [];
+
+    // helper variables
+    const center = Vec3();
+    const vertex = Vec3();
+    const normal = Vec3();
+
+    // generate vertices and normals
+    for (let j = 0; j <= radialSegments; ++j) {
+        for (let i = 0; i <= tubularSegments; ++i) {
+            const u = i / tubularSegments * arc;
+            const v = j / radialSegments * Math.PI * 2;
+
+            // vertex
+            Vec3.set(
+                vertex,
+                (radius + tube * Math.cos(v)) * Math.cos(u),
+                (radius + tube * Math.cos(v)) * Math.sin(u),
+                tube * Math.sin(v)
+            );
+            vertices.push(...vertex);
+
+            // normal
+            Vec3.set(center, radius * Math.cos(u), radius * Math.sin(u), 0 );
+            Vec3.sub(normal, vertex, center);
+            Vec3.normalize(normal, normal);
+            normals.push(...normal);
+        }
+    }
+
+    // generate indices
+    for (let j = 1; j <= radialSegments; ++j) {
+        for (let i = 1; i <= tubularSegments; ++i) {
+
+            // indices
+            const a = (tubularSegments + 1) * j + i - 1;
+            const b = (tubularSegments + 1) * (j - 1) + i - 1;
+            const c = (tubularSegments + 1) * (j - 1) + i;
+            const d = (tubularSegments + 1) * j + i;
+
+            // faces
+            indices.push(a, b, d);
+            indices.push(b, c, d);
+        }
+    }
+
+    return {
+        vertices: new Float32Array(vertices),
+        normals: new Float32Array(normals),
+        indices: new Uint32Array(indices)
+    };
+}

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

@@ -133,7 +133,7 @@ describe('renderer', () => {
         scene.add(points);
         scene.commit();
         expect(ctx.stats.resourceCounts.attribute).toBe(ctx.isWebGL2 ? 4 : 5);
-        expect(ctx.stats.resourceCounts.texture).toBe(6);
+        expect(ctx.stats.resourceCounts.texture).toBe(7);
         expect(ctx.stats.resourceCounts.vertexArray).toBe(6);
         expect(ctx.stats.resourceCounts.program).toBe(6);
         expect(ctx.stats.resourceCounts.shader).toBe(12);

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

@@ -32,6 +32,7 @@ const IsosurfaceSchema = {
     uSize: UniformSpec('f'),
     uLevels: UniformSpec('f'),
     uCount: UniformSpec('f'),
+    uInvert: UniformSpec('b'),
 
     uGridDim: UniformSpec('v3'),
     uGridTexDim: UniformSpec('v3'),
@@ -44,7 +45,7 @@ type IsosurfaceValues = Values<typeof IsosurfaceSchema>
 
 const IsosurfaceName = 'isosurface';
 
-function getIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture, activeVoxelsBase: Texture, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, levels: number, scale: Vec2, count: number, packedGroup: boolean): ComputeRenderable<IsosurfaceValues> {
+function getIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture, activeVoxelsBase: Texture, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, levels: number, scale: Vec2, count: number, invert: boolean, packedGroup: boolean): ComputeRenderable<IsosurfaceValues> {
     if (ctx.namedComputeRenderables[IsosurfaceName]) {
         const v = ctx.namedComputeRenderables[IsosurfaceName].values as IsosurfaceValues;
 
@@ -56,6 +57,7 @@ function getIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture
         ValueCell.updateIfChanged(v.uSize, Math.pow(2, levels));
         ValueCell.updateIfChanged(v.uLevels, levels);
         ValueCell.updateIfChanged(v.uCount, count);
+        ValueCell.updateIfChanged(v.uInvert, invert);
 
         ValueCell.update(v.uGridDim, gridDim);
         ValueCell.update(v.uGridTexDim, gridTexDim);
@@ -66,12 +68,12 @@ function getIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture
 
         ctx.namedComputeRenderables[IsosurfaceName].update();
     } else {
-        ctx.namedComputeRenderables[IsosurfaceName] = createIsosurfaceRenderable(ctx, activeVoxelsPyramid, activeVoxelsBase, volumeData, gridDim, gridTexDim, transform, isoValue, levels, scale, count, packedGroup);
+        ctx.namedComputeRenderables[IsosurfaceName] = createIsosurfaceRenderable(ctx, activeVoxelsPyramid, activeVoxelsBase, volumeData, gridDim, gridTexDim, transform, isoValue, levels, scale, count, invert, packedGroup);
     }
     return ctx.namedComputeRenderables[IsosurfaceName];
 }
 
-function createIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture, activeVoxelsBase: Texture, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, levels: number, scale: Vec2, count: number, packedGroup: boolean) {
+function createIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture, activeVoxelsBase: Texture, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, levels: number, scale: Vec2, count: number, invert: boolean, packedGroup: boolean) {
     // console.log('uSize', Math.pow(2, levels))
     const values: IsosurfaceValues = {
         ...QuadValues,
@@ -85,6 +87,7 @@ function createIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Text
         uSize: ValueCell.create(Math.pow(2, levels)),
         uLevels: ValueCell.create(levels),
         uCount: ValueCell.create(count),
+        uInvert: ValueCell.create(invert),
 
         uGridDim: ValueCell.create(gridDim),
         uGridTexDim: ValueCell.create(gridTexDim),
@@ -112,7 +115,7 @@ function setRenderingDefaults(ctx: WebGLContext) {
     state.clearColor(0, 0, 0, 0);
 }
 
-export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Texture, volumeData: Texture, histogramPyramid: HistogramPyramid, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, packedGroup: boolean, vertexTexture?: Texture, groupTexture?: Texture, normalTexture?: Texture) {
+export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Texture, volumeData: Texture, histogramPyramid: HistogramPyramid, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, invert: boolean, packedGroup: boolean, vertexTexture?: Texture, groupTexture?: Texture, normalTexture?: Texture) {
     const { gl, resources, extensions } = ctx;
     const { pyramidTex, height, levels, scale, count } = histogramPyramid;
     const width = pyramidTex.getWidth();
@@ -167,7 +170,7 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
     groupTexture.attachFramebuffer(framebuffer, 1);
     normalTexture.attachFramebuffer(framebuffer, 2);
 
-    const renderable = getIsosurfaceRenderable(ctx, pyramidTex, activeVoxelsBase, volumeData, gridDim, gridTexDim, transform, isoValue, levels, scale, count, packedGroup);
+    const renderable = getIsosurfaceRenderable(ctx, pyramidTex, activeVoxelsBase, volumeData, gridDim, gridTexDim, transform, isoValue, levels, scale, count, invert, packedGroup);
     ctx.state.currentRenderItemId = -1;
 
     const { drawBuffers } = ctx.extensions;
@@ -192,7 +195,16 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
 
 //
 
-export function extractIsosurface(ctx: WebGLContext, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, gridTexScale: Vec2, transform: Mat4, isoValue: number, packedGroup: boolean, vertexTexture?: Texture, groupTexture?: Texture, normalTexture?: Texture) {
+/**
+ * GPU isosurface extraction
+ *
+ * Algorithm from "High‐speed Marching Cubes using HistoPyramids"
+ * by C Dyken, G Ziegler, C Theobalt, HP Seidel
+ * https://doi.org/10.1111/j.1467-8659.2008.01182.x
+ *
+ * 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, vertexTexture?: Texture, groupTexture?: Texture, normalTexture?: Texture) {
     // console.time('calcActiveVoxels');
     const activeVoxelsTex = calcActiveVoxels(ctx, volumeData, gridDim, gridTexDim, isoValue, gridTexScale);
     // ctx.waitForGpuCommandsCompleteSync();
@@ -204,7 +216,7 @@ export function extractIsosurface(ctx: WebGLContext, volumeData: Texture, gridDi
     // console.timeEnd('createHistogramPyramid');
 
     // console.time('createIsosurfaceBuffers');
-    const gv = createIsosurfaceBuffers(ctx, activeVoxelsTex, volumeData, compacted, gridDim, gridTexDim, transform, isoValue, packedGroup, vertexTexture, groupTexture, normalTexture);
+    const gv = createIsosurfaceBuffers(ctx, activeVoxelsTex, volumeData, compacted, gridDim, gridTexDim, transform, isoValue, invert, packedGroup, vertexTexture, groupTexture, normalTexture);
     // ctx.waitForGpuCommandsCompleteSync();
     // console.timeEnd('createIsosurfaceBuffers');
 

src/mol-gl/renderable/mesh.ts

@@ -7,7 +7,7 @@
 import { Renderable, RenderableState, createRenderable } from '../renderable';
 import { WebGLContext } from '../webgl/context';
 import { createGraphicsRenderItem } from '../webgl/render-item';
-import { GlobalUniformSchema, BaseSchema, AttributeSpec, ElementsSpec, DefineSpec, Values, InternalSchema, InternalValues, GlobalTextureSchema } from './schema';
+import { GlobalUniformSchema, BaseSchema, AttributeSpec, ElementsSpec, DefineSpec, Values, InternalSchema, InternalValues, GlobalTextureSchema, ValueSpec } from './schema';
 import { MeshShaderCode } from '../shader-code';
 import { ValueCell } from '../../mol-util';
 
@@ -22,6 +22,7 @@ export const MeshSchema = {
     dFlipSided: DefineSpec('boolean'),
     dIgnoreLight: DefineSpec('boolean'),
     dXrayShaded: DefineSpec('boolean'),
+    meta: ValueSpec('unknown')
 } as const;
 export type MeshSchema = typeof MeshSchema
 export type MeshValues = Values<MeshSchema>

src/mol-gl/renderable/schema.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -17,6 +17,7 @@ export type ValueKindType = {
     'string': string
     'boolean': boolean
     'any': any
+    'unknown': unknown
 
     'm4': Mat4,
     'float32': Float32Array
@@ -184,8 +185,13 @@ export const ColorSchema = {
     // aColor: AttributeSpec('float32', 3, 0), // TODO
     uColor: UniformSpec('v3', 'material'),
     uColorTexDim: UniformSpec('v2'),
+    uColorGridDim: UniformSpec('v3'),
+    uColorGridTransform: UniformSpec('v4'),
     tColor: TextureSpec('image-uint8', 'rgb', 'ubyte', 'nearest'),
-    dColorType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'groupInstance', 'vertex', 'vertexInstance']),
+    tPalette: TextureSpec('image-uint8', 'rgb', 'ubyte', 'nearest'),
+    tColorGrid: TextureSpec('texture', 'rgb', 'ubyte', 'linear'),
+    dColorType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'groupInstance', 'vertex', 'vertexInstance', 'volume', 'volumeInstance']),
+    dUsePalette: DefineSpec('boolean'),
 } as const;
 export type ColorSchema = typeof ColorSchema
 export type ColorValues = Values<ColorSchema>

src/mol-gl/renderable/util.ts

@@ -7,6 +7,7 @@
 import { Sphere3D } from '../../mol-math/geometry';
 import { Vec3, Mat4 } from '../../mol-math/linear-algebra';
 import { BoundaryHelper } from '../../mol-math/geometry/boundary-helper';
+import { TextureFilter } from '../webgl/texture';
 
 export function calculateTextureInfo (n: number, itemSize: number) {
     n = Math.max(n, 2); // observed issues with 1 pixel textures
@@ -22,6 +23,7 @@ export interface TextureImage<T extends Uint8Array | Float32Array | Int32Array>
     readonly width: number
     readonly height: number
     readonly flipY?: boolean
+    readonly filter?: TextureFilter
 }
 
 export interface TextureVolume<T extends Uint8Array | Float32Array> {
@@ -72,7 +74,7 @@ export function printImageData(imageData: ImageData, scale = 1, pixelated = fals
             // not supported in Firefox and IE
             img.style.imageRendering = 'pixelated';
         }
-        img.style.position = 'absolute';
+        img.style.position = 'relative';
         img.style.top = '0px';
         img.style.left = '0px';
         img.style.border = 'solid grey';

src/mol-gl/renderer.ts

@@ -110,10 +110,18 @@ export const RendererParams = {
 };
 export type RendererProps = PD.Values<typeof RendererParams>
 
-function getStyle(props: RendererProps['style']) {
+export type Style = {
+    lightIntensity: number
+    ambientIntensity: number
+    metalness: number
+    roughness: number
+    reflectivity: number
+}
+
+export function getStyle(props: RendererProps['style']): Style {
     switch (props.name) {
         case 'custom':
-            return props.params;
+            return props.params as Style;
         case 'flat':
             return {
                 lightIntensity: 0, ambientIntensity: 1,
@@ -190,7 +198,7 @@ namespace Renderer {
 
         let transparentBackground = false;
 
-        const nullDepthTexture = createNullTexture(gl, 'image-depth');
+        const nullDepthTexture = createNullTexture(gl);
         const sharedTexturesList: Textures = [
             ['tDepth', nullDepthTexture]
         ];

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

@@ -12,6 +12,16 @@ export const assign_color_varying = `
         vColor.rgb = readFromTexture(tColor, VertexID, uColorTexDim).rgb;
     #elif defined(dColorType_vertexInstance)
         vColor.rgb = readFromTexture(tColor, int(aInstance) * uVertexCount + VertexID, uColorTexDim).rgb;
+    #elif defined(dColorType_volume)
+        vec3 gridPos = (uColorGridTransform.w * (position - uColorGridTransform.xyz)) / uColorGridDim;
+        vColor.rgb = texture3dFrom2dLinear(tColorGrid, gridPos, uColorGridDim, uColorTexDim).rgb;
+    #elif defined(dColorType_volumeInstance)
+        vec3 gridPos = (uColorGridTransform.w * (vModelPosition - uColorGridTransform.xyz)) / uColorGridDim;
+        vColor.rgb = texture3dFrom2dLinear(tColorGrid, gridPos, uColorGridDim, uColorTexDim).rgb;
+    #endif
+
+    #ifdef dUsePalette
+        vPaletteV = ((vColor.r * 256.0 * 256.0 * 255.0 + vColor.g * 256.0 * 255.0 + vColor.b * 255.0) - 1.0) / 16777215.0;
     #endif
 
     #ifdef dOverpaint

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

@@ -1,6 +1,8 @@
 export const assign_material_color = `
 #if defined(dRenderVariant_color)
-    #if defined(dColorType_uniform)
+    #if defined(dUsePalette)
+        vec4 material = vec4(texture2D(tPalette, vec2(vPaletteV, 0.5)).rgb, uAlpha);
+    #elif defined(dColorType_uniform)
         vec4 material = vec4(uColor, uAlpha);
     #elif defined(dColorType_varying)
         vec4 material = vec4(vColor.rgb, uAlpha);

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

@@ -7,7 +7,8 @@ mat4 modelView = uView * model;
     vec3 position = aPosition;
 #endif
 vec4 position4 = vec4(position, 1.0);
-vModelPosition = (model * position4).xyz; // for clipping in frag shader
+// for accessing tColorGrid in vert shader and for clipping in frag shader
+vModelPosition = (model * position4).xyz;
 vec4 mvPosition = modelView * position4;
 vViewPosition = mvPosition.xyz;
 gl_Position = uProjection * mvPosition;

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

@@ -21,4 +21,9 @@ export const color_frag_params = `
     varying float vGroup;
     varying float vTransparency;
 #endif
+
+#ifdef dUsePalette
+    uniform sampler2D tPalette;
+    varying float vPaletteV;
+#endif
 `;

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

@@ -9,6 +9,12 @@ export const color_vert_params = `
         varying vec4 vColor;
         uniform vec2 uColorTexDim;
         uniform sampler2D tColor;
+    #elif defined(dColorType_grid)
+        varying vec4 vColor;
+        uniform vec2 uColorTexDim;
+        uniform vec3 uColorGridDim;
+        uniform vec4 uColorGridTransform;
+        uniform sampler2D tColorGrid;
     #endif
 
     #ifdef dOverpaint
@@ -30,4 +36,8 @@ export const color_vert_params = `
     uniform vec2 uTransparencyTexDim;
     uniform sampler2D tTransparency;
 #endif
+
+#ifdef dUsePalette
+    varying float vPaletteV;
+#endif
 `;

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

@@ -13,7 +13,11 @@ export const common = `
     #define dColorType_texture
 #endif
 
-#if defined(dColorType_attribute) || defined(dColorType_texture)
+#if defined(dColorType_volume) || defined(dColorType_volumeInstance)
+    #define dColorType_grid
+#endif
+
+#if defined(dColorType_attribute) || defined(dColorType_texture) || defined(dColorType_grid)
     #define dColorType_varying
 #endif
 

src/mol-gl/shader/compute/color-smoothing/accumulate.frag.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+export const accumulate_frag = `
+precision highp float;
+
+varying vec3 vPosition;
+varying vec3 vColor;
+
+uniform float uCurrentSlice;
+uniform float uCurrentX;
+uniform float uCurrentY;
+uniform float uResolution;
+
+const float p = 2.0;
+
+void main() {
+    vec2 v = gl_FragCoord.xy - vec2(uCurrentX, uCurrentY) - 0.5;
+    vec3 fragPos = vec3(v.x, v.y, uCurrentSlice);
+    float dist = distance(fragPos, vPosition);
+    if (dist > p) discard;
+
+    gl_FragColor = vec4(vColor, 1.0) * (p - dist);
+}
+`;

src/mol-gl/shader/compute/color-smoothing/accumulate.vert.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+export const accumulate_vert = `
+precision highp float;
+
+#include common
+#include read_from_texture
+
+uniform int uTotalCount;
+uniform int uGroupCount;
+
+attribute float aSample;
+#define SampleID int(aSample)
+
+attribute mat4 aTransform;
+attribute float aInstance;
+
+uniform vec2 uGeoTexDim;
+uniform sampler2D tPosition;
+uniform sampler2D tGroup;
+
+uniform vec2 uColorTexDim;
+uniform sampler2D tColor;
+
+varying vec3 vPosition;
+varying vec3 vColor;
+
+uniform vec3 uBboxSize;
+uniform vec3 uBboxMin;
+uniform float uResolution;
+
+void main() {
+    vec3 position = readFromTexture(tPosition, SampleID, uGeoTexDim).xyz;
+    float group = decodeFloatRGB(readFromTexture(tGroup, SampleID, uGeoTexDim).rgb);
+
+    position = (aTransform * vec4(position, 1.0)).xyz;
+    gl_PointSize = 7.0;
+    vPosition = (position - uBboxMin) / uResolution;
+    gl_Position = vec4(((position - uBboxMin) / uBboxSize) * 2.0 - 1.0, 1.0);
+
+    #if defined(dColorType_group)
+        vColor = readFromTexture(tColor, group, uColorTexDim).rgb;
+    #elif defined(dColorType_groupInstance)
+        vColor = readFromTexture(tColor, aInstance * float(uGroupCount) + group, uColorTexDim).rgb;
+    #endif
+}
+`;

src/mol-gl/shader/compute/color-smoothing/normalize.frag.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+export const normalize_frag = `
+precision highp float;
+precision highp sampler2D;
+
+uniform sampler2D tColor;
+uniform vec2 uTexSize;
+
+void main(void) {
+    vec2 coords = gl_FragCoord.xy / uTexSize;
+    vec4 color = texture2D(tColor, coords);
+
+    gl_FragColor.rgb = color.rgb / color.a;
+}
+`;

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

@@ -18,6 +18,7 @@ uniform float uIsoValue;
 uniform float uLevels;
 uniform float uSize;
 uniform float uCount;
+uniform bool uInvert;
 
 uniform vec3 uGridDim;
 uniform vec3 uGridTexDim;
@@ -163,6 +164,13 @@ void main(void) {
     // current vertex for the up to 15 MC cases
     int currentVertex = vI - idot4(m, starts);
 
+    // ensure winding-order is the same for negative and positive iso-levels
+    if (uInvert) {
+        int v = imod(currentVertex + 1, 3);
+        if (v == 1) currentVertex += 2;
+        else if (v == 0) currentVertex -= 2;
+    }
+
     // get index into triIndices table
     int mcIndex = 16 * int(edgeIndex) + currentVertex;
     vec4 mcData = texture2D(tTriIndices, vec2(imod(mcIndex, 64), mcIndex / 64) / 64.);
@@ -273,11 +281,18 @@ void main(void) {
         voxelPadded(b1 - c3).a - voxelPadded(b1 + c3).a,
         voxelPadded(b1 - c4).a - voxelPadded(b1 + c4).a
     ));
-    mat3 normalMatrix = transpose3(inverse3(mat3(uGridTransform)));
-    gl_FragData[2].xyz = normalMatrix * -vec3(
+    gl_FragData[2].xyz = -vec3(
         n0.x + t * (n0.x - n1.x),
         n0.y + t * (n0.y - n1.y),
         n0.z + t * (n0.z - n1.z)
     );
+
+    // ensure normal-direction is the same for negative and positive iso-levels
+    if (uInvert) {
+        gl_FragData[2].xyz *= -1.0;
+    }
+
+    // apply normal matrix
+    gl_FragData[2].xyz *= transpose3(inverse3(mat3(uGridTransform)));
 }
 `;

src/mol-gl/shader/mesh.vert.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -15,6 +15,10 @@ precision highp sampler2D;
 #include color_vert_params
 #include common_clip
 
+#if defined(dColorType_grid)
+    #include texture3d_from_2d_linear
+#endif
+
 #ifdef dGeoTexture
     uniform vec2 uGeoTexDim;
     uniform sampler2D tPosition;
@@ -32,10 +36,10 @@ varying vec3 vNormal;
 
 void main(){
     #include assign_group
-    #include assign_color_varying
     #include assign_marker_varying
     #include assign_clipping_varying
     #include assign_position
+    #include assign_color_varying
     #include clip_instance
 
     #ifdef dGeoTexture

src/mol-gl/shader/postprocessing.frag.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 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>
@@ -26,9 +26,6 @@ uniform bool uTransparentBackground;
 uniform float uOcclusionBias;
 uniform float uOcclusionRadius;
 
-uniform float uOutlineScale;
-uniform float uOutlineThreshold;
-
 uniform float uMaxPossibleViewZDiff;
 
 const vec3 occlusionColor = vec3(0.0);
@@ -88,7 +85,8 @@ float getSsao(vec2 coords) {
     } else if (rawSsao > 0.001) {
         return rawSsao;
     }
-    return 0.0;
+    // treat values close to 0.0 as errors and return no occlusion
+    return 1.0;
 }
 
 void main(void) {

src/mol-gl/shader/ssao-blur.frag.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 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 ssaoBlur_frag = `
@@ -11,6 +12,7 @@ precision highp sampler2D;
 
 uniform sampler2D tSsaoDepth;
 uniform vec2 uTexSize;
+uniform vec4 uBounds;
 
 uniform float uKernel[dOcclusionKernelSize];
 
@@ -36,16 +38,25 @@ bool isBackground(const in float depth) {
     return depth == 1.0;
 }
 
+bool outsideBounds(const in vec2 p) {
+    return p.x < uBounds.x || p.y < uBounds.y || p.x > uBounds.z || p.y > uBounds.w;
+}
+
 void main(void) {
     vec2 coords = gl_FragCoord.xy / uTexSize;
 
     vec2 packedDepth = texture2D(tSsaoDepth, coords).zw;
 
+    if (outsideBounds(coords)) {
+        gl_FragColor = vec4(packUnitIntervalToRG(1.0), packedDepth);
+        return;
+    }
+
     float selfDepth = unpackRGToUnitInterval(packedDepth);
     // if background and if second pass
     if (isBackground(selfDepth) && uBlurDirectionY != 0.0) {
-       gl_FragColor = vec4(packUnitIntervalToRG(1.0), packedDepth);
-       return;
+        gl_FragColor = vec4(packUnitIntervalToRG(1.0), packedDepth);
+        return;
     }
 
     float selfViewZ = getViewZ(selfDepth);
@@ -57,6 +68,9 @@ void main(void) {
     // only if kernelSize is odd
     for (int i = -dOcclusionKernelSize / 2; i <= dOcclusionKernelSize / 2; i++) {
         vec2 sampleCoords = coords + float(i) * offset;
+        if (outsideBounds(sampleCoords)) {
+            continue;
+        }
 
         vec4 sampleSsaoDepth = texture2D(tSsaoDepth, sampleCoords);
 

src/mol-gl/shader/ssao.frag.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 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>
@@ -13,14 +13,14 @@ precision highp sampler2D;
 #include common
 
 uniform sampler2D tDepth;
+uniform vec2 uTexSize;
+uniform vec4 uBounds;
 
 uniform vec3 uSamples[dNSamples];
 
 uniform mat4 uProjection;
 uniform mat4 uInvProjection;
 
-uniform vec2 uTexSize;
-
 uniform float uRadius;
 uniform float uBias;
 
@@ -46,8 +46,12 @@ bool isBackground(const in float depth) {
     return depth == 1.0;
 }
 
+bool outsideBounds(const in vec2 p) {
+    return p.x < uBounds.x || p.y < uBounds.y || p.x > uBounds.z || p.y > uBounds.w;
+}
+
 float getDepth(const in vec2 coords) {
-    return unpackRGBAToDepth(texture2D(tDepth, coords));
+    return outsideBounds(coords) ? 1.0 : unpackRGBAToDepth(texture2D(tDepth, coords));
 }
 
 vec3 normalFromDepth(const in float depth, const in float depth1, const in float depth2, vec2 offset1, vec2 offset2) {

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

@@ -88,7 +88,7 @@ export function createRenderTarget(gl: GLRenderingContext, resources: WebGLResou
 export function createNullRenderTarget(gl: GLRenderingContext): RenderTarget {
     return {
         id: getNextRenderTargetId(),
-        texture: createNullTexture(gl, 'image-uint8'),
+        texture: createNullTexture(gl),
         framebuffer: createNullFramebuffer(),
 
         getWidth: () => 0,

src/mol-gl/webgl/texture.ts

@@ -169,7 +169,7 @@ export function getAttachment(gl: GLRenderingContext, extensions: WebGLExtension
 }
 
 function isImage(x: TextureImage<any> | TextureVolume<any> | HTMLImageElement): x is HTMLImageElement {
-    return typeof HTMLImageElement !== undefined && (x instanceof HTMLImageElement);
+    return typeof HTMLImageElement !== 'undefined' && (x instanceof HTMLImageElement);
 }
 
 function isTexture2d(x: TextureImage<any> | TextureVolume<any>, target: number, gl: GLRenderingContext): x is TextureImage<any> {
@@ -186,6 +186,7 @@ export interface Texture {
     readonly format: number
     readonly internalFormat: number
     readonly type: number
+    readonly filter: number
 
     getWidth: () => number
     getHeight: () => number
@@ -283,6 +284,9 @@ export function createTexture(gl: GLRenderingContext, extensions: WebGLExtension
             gl.bindTexture(gl.TEXTURE_2D, texture);
             gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, format, type, data);
         } else if (isTexture2d(data, target, gl)) {
+            const _filter = data.filter ? getFilter(gl, data.filter) : filter;
+            gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, _filter);
+            gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, _filter);
             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, !!data.flipY);
             if (sub) {
                 gl.texSubImage2D(target, 0, 0, 0, data.width, data.height, format, type, data.array);
@@ -323,6 +327,7 @@ export function createTexture(gl: GLRenderingContext, extensions: WebGLExtension
         format,
         internalFormat,
         type,
+        filter,
 
         getWidth: () => width,
         getHeight: () => height,
@@ -391,7 +396,7 @@ export function createTextures(ctx: WebGLContext, schema: RenderableSchema, valu
 
 /**
  * Loads an image from a url to a textures and triggers update asynchronously.
- * This will not work on node.js with a polyfill for HTMLImageElement.
+ * This will not work on node.js without a polyfill for `HTMLImageElement`.
  */
 export function loadImageTexture(src: string, cell: ValueCell<Texture>, texture: Texture) {
     const img = new Image();
@@ -404,14 +409,15 @@ export function loadImageTexture(src: string, cell: ValueCell<Texture>, texture:
 
 //
 
-export function createNullTexture(gl: GLRenderingContext, kind: TextureKind): Texture {
-    const target = getTarget(gl, kind);
+export function createNullTexture(gl?: GLRenderingContext): Texture {
+    const target = gl?.TEXTURE_2D ?? 3553;
     return {
         id: getNextTextureId(),
         target,
         format: 0,
         internalFormat: 0,
         type: 0,
+        filter: 0,
 
         getWidth: () => 0,
         getHeight: () => 0,
@@ -421,12 +427,16 @@ export function createNullTexture(gl: GLRenderingContext, kind: TextureKind): Te
         define: () => {},
         load: () => {},
         bind: (id: TextureId) => {
-            gl.activeTexture(gl.TEXTURE0 + id);
-            gl.bindTexture(target, null);
+            if (gl) {
+                gl.activeTexture(gl.TEXTURE0 + id);
+                gl.bindTexture(target, null);
+            }
         },
         unbind: (id: TextureId) => {
-            gl.activeTexture(gl.TEXTURE0 + id);
-            gl.bindTexture(target, null);
+            if (gl) {
+                gl.activeTexture(gl.TEXTURE0 + id);
+                gl.bindTexture(target, null);
+            }
         },
         attachFramebuffer: () => {},
         detachFramebuffer: () => {},
@@ -434,4 +444,4 @@ export function createNullTexture(gl: GLRenderingContext, kind: TextureKind): Te
         reset: () => {},
         destroy: () => {},
     };
-}
+}

src/mol-io/common/ascii.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ */
+
+export function asciiWrite(data: Uint8Array, str: string) {
+    for (let i = 0, il = str.length; i < il; ++i) {
+        data[i] = str.charCodeAt(i);
+    }
+}

src/mol-io/common/file-handle.ts

@@ -7,8 +7,6 @@
 
 import { defaults, noop } from '../../mol-util';
 import { SimpleBuffer } from './simple-buffer';
-// only import 'fs' in node.js
-const fs = typeof document === 'undefined' ? require('fs') as typeof import('fs') : void 0;
 
 export interface FileHandle {
     name: string
@@ -83,55 +81,4 @@ export namespace FileHandle {
             close: noop
         };
     }
-
-    export function fromDescriptor(file: number, name: string): FileHandle {
-        if (fs === undefined) throw new Error('fs module not available');
-        return {
-            name,
-            readBuffer: (position: number, sizeOrBuffer: SimpleBuffer | number, length?: number, byteOffset?: number) => {
-                return new Promise((res, rej) => {
-                    let outBuffer: SimpleBuffer;
-                    if (typeof sizeOrBuffer === 'number') {
-                        byteOffset = defaults(byteOffset, 0);
-                        length = defaults(length, sizeOrBuffer);
-                        outBuffer = SimpleBuffer.fromArrayBuffer(new ArrayBuffer(sizeOrBuffer));
-                    } else {
-                        byteOffset = defaults(byteOffset, 0);
-                        length = defaults(length, sizeOrBuffer.length);
-                        outBuffer = sizeOrBuffer;
-                    }
-                    fs.read(file, outBuffer, byteOffset, length, position, (err, bytesRead, buffer) => {
-                        if (err) {
-                            rej(err);
-                            return;
-                        }
-                        if (length !== bytesRead) {
-                            console.warn(`byteCount ${length} and bytesRead ${bytesRead} differ`);
-                        }
-                        res({ bytesRead, buffer });
-                    });
-                });
-            },
-            writeBuffer: (position: number, buffer: SimpleBuffer, length?: number) => {
-                length = defaults(length, buffer.length);
-                return new Promise<number>((res, rej) => {
-                    fs.write(file, buffer, 0, length, position, (err, written) => {
-                        if (err) rej(err);
-                        else res(written);
-                    });
-                });
-            },
-            writeBufferSync: (position: number, buffer: Uint8Array, length?: number) => {
-                length = defaults(length, buffer.length);
-                return fs.writeSync(file, buffer, 0, length, position);
-            },
-            close: () => {
-                try {
-                    if (file !== void 0) fs.close(file, noop);
-                } catch (e) {
-
-                }
-            }
-        };
-    }
 }

src/mol-io/reader/_spec/sdf.spec.ts

@@ -2,7 +2,7 @@
 import { parseSdf } from '../sdf/parser';
 
 const SdfString = `
-  Mrv1718007121815122D          
+  Mrv1718007121815122D
 
   5  4  0  0  0  0            999 V2000
     0.0000    0.8250    0.0000 O   0  5  0  0  0  0  0  0  0  0  0  0
@@ -17,13 +17,13 @@ const SdfString = `
 M  CHG  3   1  -1   3  -1   5  -1
 M  END
 > <DATABASE_ID>
-DB14523
+0
 
 > <DATABASE_NAME>
 drugbank
 
-> <SMILES>
-[O-]P([O-])([O-])=O
+> 5225 <TEST_FIELD>
+whatever
 
 > <INCHI_IDENTIFIER>
 InChI=1S/H3O4P/c1-5(2,3)4/h(H3,1,2,3,4)/p-3
@@ -112,7 +112,225 @@ Phosphate ion
 > <SYNONYMS>
 Orthophosphate; Phosphate
 
-$$$$`;
+$$$$
+
+Comp 2
+
+5  4  0  0  0  0            999 V2000
+  0.0000    0.8250    0.0000 O   0  5  0  0  0  0  0  0  0  0  0  0
+ -0.8250    0.0000    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
+  0.0000   -0.8250    0.0000 O   0  5  0  0  0  0  0  0  0  0  0  0
+  0.0000    0.0000    0.0000 P   0  0  0  0  0  0  0  0  0  0  0  0
+  0.8250    0.0000    0.0000 O   0  5  0  0  0  0  0  0  0  0  0  0
+4  1  1  0  0  0  0
+4  2  2  0  0  0  0
+4  3  1  0  0  0  0
+4  5  1  0  0  0  0
+M  CHG  3   1  -1   3  -1   5  -1
+M  END
+> <DATABASE_ID>
+1
+
+$$$$
+
+2244
+  -OEChem-04122119123D
+
+ 21 21  0     0  0  0  0  0  0999 V2000
+    1.2333    0.5540    0.7792 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.6952   -2.7148   -0.7502 O   0  0  0  0  0  0  0  0  0  0  0  0
+    0.7958   -2.1843    0.8685 O   0  0  0  0  0  0  0  0  0  0  0  0
+    1.7813    0.8105   -1.4821 O   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.0857    0.6088    0.4403 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.7927   -0.5515    0.1244 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.7288    1.8464    0.4133 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.1426   -0.4741   -0.2184 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.0787    1.9238    0.0706 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.7855    0.7636   -0.2453 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1409   -1.8536    0.1477 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.1094    0.6715   -0.3113 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.5305    0.5996    0.1635 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.1851    2.7545    0.6593 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.7247   -1.3605   -0.4564 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -2.5797    2.8872    0.0506 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -3.8374    0.8238   -0.5090 H   0  0  0  0  0  0  0  0  0  0  0  0
+    3.7290    1.4184    0.8593 H   0  0  0  0  0  0  0  0  0  0  0  0
+    4.2045    0.6969   -0.6924 H   0  0  0  0  0  0  0  0  0  0  0  0
+    3.7105   -0.3659    0.6426 H   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.2555   -3.5916   -0.7337 H   0  0  0  0  0  0  0  0  0  0  0  0
+  1  5  1  0  0  0  0
+  1 12  1  0  0  0  0
+  2 11  1  0  0  0  0
+  2 21  1  0  0  0  0
+  3 11  2  0  0  0  0
+  4 12  2  0  0  0  0
+  5  6  1  0  0  0  0
+  5  7  2  0  0  0  0
+  6  8  2  0  0  0  0
+  6 11  1  0  0  0  0
+  7  9  1  0  0  0  0
+  7 14  1  0  0  0  0
+  8 10  1  0  0  0  0
+  8 15  1  0  0  0  0
+  9 10  2  0  0  0  0
+  9 16  1  0  0  0  0
+ 10 17  1  0  0  0  0
+ 12 13  1  0  0  0  0
+ 13 18  1  0  0  0  0
+ 13 19  1  0  0  0  0
+ 13 20  1  0  0  0  0
+M  END
+> <PUBCHEM_COMPOUND_CID>
+2244
+
+> <PUBCHEM_CONFORMER_RMSD>
+0.6
+
+> <PUBCHEM_CONFORMER_DIVERSEORDER>
+1
+11
+10
+3
+15
+17
+13
+5
+16
+7
+14
+9
+8
+4
+18
+6
+12
+2
+
+> <PUBCHEM_MMFF94_PARTIAL_CHARGES>
+18
+1 -0.23
+10 -0.15
+11 0.63
+12 0.66
+13 0.06
+14 0.15
+15 0.15
+16 0.15
+17 0.15
+2 -0.65
+21 0.5
+3 -0.57
+4 -0.57
+5 0.08
+6 0.09
+7 -0.15
+8 -0.15
+9 -0.15
+
+> <PUBCHEM_EFFECTIVE_ROTOR_COUNT>
+3
+
+> <PUBCHEM_PHARMACOPHORE_FEATURES>
+5
+1 2 acceptor
+1 3 acceptor
+1 4 acceptor
+3 2 3 11 anion
+6 5 6 7 8 9 10 rings
+
+> <PUBCHEM_HEAVY_ATOM_COUNT>
+13
+
+> <PUBCHEM_ATOM_DEF_STEREO_COUNT>
+0
+
+> <PUBCHEM_ATOM_UDEF_STEREO_COUNT>
+0
+
+> <PUBCHEM_BOND_DEF_STEREO_COUNT>
+0
+
+> <PUBCHEM_BOND_UDEF_STEREO_COUNT>
+0
+
+> <PUBCHEM_ISOTOPIC_ATOM_COUNT>
+0
+
+> <PUBCHEM_COMPONENT_COUNT>
+1
+
+> <PUBCHEM_CACTVS_TAUTO_COUNT>
+1
+
+> <PUBCHEM_CONFORMER_ID>
+000008C400000001
+
+> <PUBCHEM_MMFF94_ENERGY>
+39.5952
+
+> <PUBCHEM_FEATURE_SELFOVERLAP>
+25.432
+
+> <PUBCHEM_SHAPE_FINGERPRINT>
+1 1 18265615372930943622
+100427 49 16967750034970055351
+12138202 97 18271247217817981012
+12423570 1 16692715976000295083
+12524768 44 16753525617747228747
+12716758 59 18341332292274886536
+13024252 1 17968377969333732145
+14181834 199 17830728755827362645
+14614273 12 18262232214645093005
+15207287 21 17703787037639964108
+15775835 57 18340488876329928641
+16945 1 18271533103414939405
+193761 8 17907860604865584321
+20645476 183 17677348215414174190
+20871998 184 18198632231250704846
+21040471 1 18411412921197846465
+21501502 16 18123463883164380929
+23402539 116 18271795865171824860
+23419403 2 13539898140662769886
+23552423 10 18048876295495619569
+23559900 14 18272369794190581304
+241688 4 16179044415907240795
+257057 1 17478316999871287486
+2748010 2 18339085878070479087
+305870 269 18263645056784260212
+528862 383 18117272558388284091
+53812653 8 18410289211719108569
+7364860 26 17910392788380644719
+81228 2 18050568744116491203
+
+> <PUBCHEM_SHAPE_MULTIPOLES>
+244.06
+3.86
+2.45
+0.89
+1.95
+1.58
+0.15
+-1.85
+0.38
+-0.61
+-0.02
+0.29
+0.01
+-0.33
+
+> <PUBCHEM_SHAPE_SELFOVERLAP>
+513.037
+
+> <PUBCHEM_SHAPE_VOLUME>
+136
+
+> <PUBCHEM_COORDINATE_TYPE>
+2
+5
+10
+
+$$$$
+`;
 
 describe('sdf reader', () => {
     it('basic', async () => {
@@ -120,14 +338,21 @@ describe('sdf reader', () => {
         if (parsed.isError) {
             throw new Error(parsed.message);
         }
-        const compound = parsed.result.compounds[0];
-        const { molFile, dataItems } = compound;
+        const compound1 = parsed.result.compounds[0];
+        const compound2 = parsed.result.compounds[1];
+        const compound3 = parsed.result.compounds[2];
+        const { molFile, dataItems } = compound1;
         const { atoms, bonds } = molFile;
 
+        expect(parsed.result.compounds.length).toBe(3);
+
         // number of structures
         expect(atoms.count).toBe(5);
         expect(bonds.count).toBe(4);
 
+        expect(compound2.molFile.atoms.count).toBe(5);
+        expect(compound2.molFile.bonds.count).toBe(4);
+
         expect(atoms.x.value(0)).toBeCloseTo(0, 0.001);
         expect(atoms.y.value(0)).toBeCloseTo(0.8250, 0.0001);
         expect(atoms.z.value(0)).toBeCloseTo(0, 0.0001);
@@ -137,13 +362,25 @@ describe('sdf reader', () => {
         expect(bonds.atomIdxB.value(3)).toBe(5);
         expect(bonds.order.value(3)).toBe(1);
 
-        expect(dataItems.dataHeader.value(0)).toBe('DATABASE_ID');
-        expect(dataItems.data.value(0)).toBe('DB14523');
+        expect(dataItems.dataHeader.value(0)).toBe('<DATABASE_ID>');
+        expect(dataItems.data.value(0)).toBe('0');
 
-        expect(dataItems.dataHeader.value(1)).toBe('DATABASE_NAME');
+        expect(dataItems.dataHeader.value(1)).toBe('<DATABASE_NAME>');
         expect(dataItems.data.value(1)).toBe('drugbank');
 
-        expect(dataItems.dataHeader.value(31)).toBe('SYNONYMS');
+        expect(dataItems.dataHeader.value(2)).toBe('5225 <TEST_FIELD>');
+        expect(dataItems.data.value(2)).toBe('whatever');
+
+        expect(dataItems.dataHeader.value(31)).toBe('<SYNONYMS>');
         expect(dataItems.data.value(31)).toBe('Orthophosphate; Phosphate');
+
+        expect(compound1.dataItems.data.value(0)).toBe('0');
+        expect(compound2.dataItems.data.value(0)).toBe('1');
+
+        expect(compound3.dataItems.dataHeader.value(2)).toBe('<PUBCHEM_CONFORMER_DIVERSEORDER>');
+        expect(compound3.dataItems.data.value(2)).toBe('1\n11\n10\n3\n15\n17\n13\n5\n16\n7\n14\n9\n8\n4\n18\n6\n12\n2');
+
+        expect(compound3.dataItems.dataHeader.value(21)).toBe('<PUBCHEM_COORDINATE_TYPE>');
+        expect(compound3.dataItems.data.value(21)).toBe('2\n5\n10');
     });
 });

src/mol-io/reader/common/text/tokenizer.ts

@@ -91,12 +91,21 @@ namespace Tokenizer {
         return eatLine(state);
     }
 
-    /** Advance the state by the given number of lines and return line as string. */
+    /** Advance the state and return line as string. */
     export function readLine(state: Tokenizer): string {
         markLine(state);
         return getTokenString(state);
     }
 
+    /** Advance the state and return trimmed line as string. */
+    export function readLineTrim(state: Tokenizer): string {
+        markLine(state);
+        const position = state.position;
+        trim(state, state.tokenStart, state.tokenEnd);
+        state.position = position;
+        return getTokenString(state);
+    }
+
     function readLinesChunk(state: Tokenizer, count: number, tokens: Tokens) {
         let read = 0;
         for (let i = 0; i < count; i++) {