Merge pull request #323 from molstar/dv-refactor

Direct-volume refactor

CHANGELOG.md

@@ -7,6 +7,15 @@ Note that since we don't clearly distinguish between a public and private interf
 ## [Unreleased]
 
 - Add ``PluginFeatureDetection`` and disable WBOIT in Safari 15.
+- Add ``disable-wboit`` Viewer GET param
+- Add ``prefer-webgl1`` Viewer GET param
+- [Breaking] Refactor direct-volume rendering
+    - Remove isosurface render-mode (use GPU MC instead)
+    - Move coloring into theme (like for other geometries/renderables)
+        - Add ``direct`` color type
+        - Remove color from transfer-function (now only alpha)
+        - Add direct-volume color theme support
+        - Add volume-value color theme
 - [Breaking] Use size theme in molecular/gaussian surface & label representations
     - This is breaking because it was hardcoded to ``physical`` internally but the repr size theme default was ``uniform`` (now ``physical``)
 

src/apps/viewer/index.html

@@ -56,6 +56,8 @@
             var pixelScale = getParam('pixel-scale', '[^&]+').trim();
             var pickScale = getParam('pick-scale', '[^&]+').trim();
             var pickPadding = getParam('pick-padding', '[^&]+').trim();
+            var disableWboit = getParam('disable-wboit', '[^&]+').trim() === '1';
+            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1';
 
             molstar.Viewer.create('app', {
                 layoutShowControls: !hideControls,
@@ -69,6 +71,8 @@
                 pixelScale: parseFloat(pixelScale) || 1,
                 pickScale: parseFloat(pickScale) || 0.25,
                 pickPadding: isNaN(parseFloat(pickPadding)) ? 1 : parseFloat(pickPadding),
+                enableWboit: !disableWboit,
+                preferWebgl1: preferWebgl1,
             }).then(viewer => {
                 var snapshotId = getParam('snapshot-id', '[^&]+').trim();
                 if (snapshotId) viewer.setRemoteSnapshot(snapshotId);

src/apps/viewer/index.ts

@@ -84,6 +84,7 @@ const DefaultViewerOptions = {
     pickScale: PluginConfig.General.PickScale.defaultValue,
     pickPadding: PluginConfig.General.PickPadding.defaultValue,
     enableWboit: PluginConfig.General.EnableWboit.defaultValue,
+    preferWebgl1: PluginConfig.General.PreferWebGl1.defaultValue,
 
     viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
     viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,
@@ -144,6 +145,7 @@ export class Viewer {
                 [PluginConfig.General.PickScale, o.pickScale],
                 [PluginConfig.General.PickPadding, o.pickPadding],
                 [PluginConfig.General.EnableWboit, o.enableWboit],
+                [PluginConfig.General.PreferWebGl1, o.preferWebgl1],
                 [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
                 [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
                 [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],

src/examples/alpha-orbitals/index.ts

@@ -97,7 +97,7 @@ export class AlphaOrbitalsExample {
     }
 
     readonly params = new BehaviorSubject<ParamDefinition.For<Params>>({} as any);
-    readonly state = new BehaviorSubject<Params>({ show: { name: 'orbital', params: { index: 32 } }, isoValue: 1, gpuSurface: false });
+    readonly state = new BehaviorSubject<Params>({ show: { name: 'orbital', params: { index: 32 } }, isoValue: 1, gpuSurface: true });
 
     private selectors?: Selectors = void 0;
     private basis?: StateObjectSelector<BasisAndOrbitals> = void 0;

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

@@ -25,7 +25,7 @@ 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 { unpackRGBToInt } from '../../mol-util/number-packing';
 import { RenderObjectExporter, RenderObjectExportData } from './render-object-exporter';
 import { readAlphaTexture, readTexture } from '../../mol-gl/compute/util';
 
@@ -65,7 +65,7 @@ export abstract class MeshExporter<D extends RenderObjectExportData> implements
         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;
+        return unpackRGBToInt(r, g, b) / sizeDataFactor;
     }
 
     private static getSize(values: BaseValues & SizeValues, instanceIndex: number, group: number): number {
@@ -95,9 +95,9 @@ export abstract class MeshExporter<D extends RenderObjectExportData> implements
         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 unpackRGBToInt(r * 255 + 0.5, g * 255 + 0.5, b * 255 + 0.5);
         }
-        return decodeFloatRGB(r, g, b);
+        return unpackRGBToInt(r, g, b);
     }
 
     protected static getInterpolatedColors(webgl: WebGLContext, input: { vertices: Float32Array, vertexCount: number, values: BaseValues, stride: 3 | 4, colorType: 'volume' | 'volumeInstance' }) {

src/mol-canvas3d/passes/pick.ts

@@ -12,7 +12,7 @@ import { GraphicsRenderVariant } from '../../mol-gl/webgl/render-item';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { spiral2d } from '../../mol-math/misc';
-import { decodeFloatRGB, unpackRGBAToDepth } from '../../mol-util/float-packing';
+import { unpackRGBToInt, unpackRGBAToDepth } from '../../mol-util/number-packing';
 import { Camera, ICamera } from '../camera';
 import { StereoCamera } from '../camera/stereo';
 import { cameraUnproject } from '../camera/util';
@@ -174,7 +174,7 @@ export class PickHelper {
 
     private getId(x: number, y: number, buffer: Uint8Array) {
         const idx = this.getBufferIdx(x, y);
-        return decodeFloatRGB(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
+        return unpackRGBToInt(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
     }
 
     private render(camera: Camera | StereoCamera) {

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

@@ -15,7 +15,7 @@ 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' | 'volume' | 'volumeInstance'
+export type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance' | 'volume' | 'volumeInstance' | 'direct'
 
 export type ColorData = {
     uColor: ValueCell<Vec3>,
@@ -50,6 +50,7 @@ function _createColors(locationIt: LocationIterator, positionIt: LocationIterato
         case 'vertexInstance': return createVertexInstanceColor(positionIt, colorTheme.color, colorData);
         case 'volume': return createGridColor((colorTheme as any).grid, 'volume', colorData);
         case 'volumeInstance': return createGridColor((colorTheme as any).grid, 'volumeInstance', colorData);
+        case 'direct': return createDirectColor(colorData);
     }
 }
 
@@ -237,3 +238,25 @@ export function createGridColor(grid: ColorVolume, type: ColorType, colorData?:
         };
     }
 }
+
+//
+
+/** Creates direct color */
+function createDirectColor(colorData?: ColorData): ColorData {
+    if (colorData) {
+        ValueCell.updateIfChanged(colorData.dColorType, 'direct');
+        return colorData;
+    } else {
+        return {
+            uColor: ValueCell.create(Vec3()),
+            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('direct'),
+            dUsePalette: ValueCell.create(false),
+        };
+    }
+}

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

@@ -213,6 +213,8 @@ export namespace Cylinders {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('cylinders'),
+
             aMapping: cylinders.mappingBuffer,
             aGroup: cylinders.groupBuffer,
             aStart: cylinders.startBuffer,

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -26,8 +26,7 @@ import { TransformData } from '../transform-data';
 import { createEmptyTransparency } from '../transparency-data';
 import { createTransferFunctionTexture, getControlPointsFromVec2Array } from './transfer-function';
 import { createEmptyClipping } from '../clipping-data';
-import { Grid, Volume } from '../../../mol-model/volume';
-import { ColorNames } from '../../../mol-util/color/names';
+import { Grid } from '../../../mol-model/volume';
 import { createEmptySubstance } from '../substance-data';
 
 const VolumeBox = Box();
@@ -48,6 +47,7 @@ export interface DirectVolume {
     readonly unitToCartn: ValueCell<Mat4>
     readonly cartnToUnit: ValueCell<Mat4>
     readonly packedGroup: ValueCell<boolean>
+    readonly axisOrder: ValueCell<Vec3>
 
     /** Bounding sphere of the volume */
     readonly boundingSphere: Sphere3D
@@ -56,10 +56,10 @@ export interface DirectVolume {
 }
 
 export namespace DirectVolume {
-    export function create(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, directVolume?: DirectVolume): DirectVolume {
+    export function create(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, axisOrder: Vec3, directVolume?: DirectVolume): DirectVolume {
         return directVolume ?
-            update(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, directVolume) :
-            fromData(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup);
+            update(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, axisOrder, directVolume) :
+            fromData(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, axisOrder);
     }
 
     function hashCode(directVolume: DirectVolume) {
@@ -70,7 +70,7 @@ export namespace DirectVolume {
         ]);
     }
 
-    function fromData(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean): DirectVolume {
+    function fromData(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, axisOrder: Vec3): DirectVolume {
         const boundingSphere = Sphere3D();
         let currentHash = -1;
 
@@ -101,6 +101,7 @@ export namespace DirectVolume {
                 return boundingSphere;
             },
             packedGroup: ValueCell.create(packedGroup),
+            axisOrder: ValueCell.create(axisOrder),
             setBoundingSphere(sphere: Sphere3D) {
                 Sphere3D.copy(boundingSphere, sphere);
                 currentHash = hashCode(directVolume);
@@ -109,7 +110,7 @@ export namespace DirectVolume {
         return directVolume;
     }
 
-    function update(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, directVolume: DirectVolume): DirectVolume {
+    function update(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, axisOrder: Vec3, directVolume: DirectVolume): DirectVolume {
         const width = texture.getWidth();
         const height = texture.getHeight();
         const depth = texture.getDepth();
@@ -126,6 +127,7 @@ export namespace DirectVolume {
         ValueCell.update(directVolume.unitToCartn, unitToCartn);
         ValueCell.update(directVolume.cartnToUnit, Mat4.invert(Mat4(), unitToCartn));
         ValueCell.updateIfChanged(directVolume.packedGroup, packedGroup);
+        ValueCell.updateIfChanged(directVolume.axisOrder, Vec3.fromArray(directVolume.axisOrder.ref.value, axisOrder, 0));
         return directVolume;
     }
 
@@ -138,47 +140,19 @@ export namespace DirectVolume {
         const texture = createNullTexture();
         const stats = Grid.One.stats;
         const packedGroup = false;
-        return create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, directVolume);
-    }
-
-    export function createRenderModeParam(stats?: Grid['stats']) {
-        const isoValueParam = stats
-            ? Volume.createIsoValueParam(Volume.IsoValue.relative(2), stats)
-            : Volume.IsoValueParam;
-
-        return PD.MappedStatic('volume', {
-            isosurface: PD.Group({
-                isoValue: isoValueParam,
-                singleLayer: PD.Boolean(false, { isEssential: true }),
-            }, { isFlat: true }),
-            volume: PD.Group({
-                controlPoints: PD.LineGraph([
-                    Vec2.create(0.19, 0.0), Vec2.create(0.2, 0.05), Vec2.create(0.25, 0.05), Vec2.create(0.26, 0.0),
-                    Vec2.create(0.79, 0.0), Vec2.create(0.8, 0.05), Vec2.create(0.85, 0.05), Vec2.create(0.86, 0.0),
-                ]),
-                list: PD.ColorList({
-                    kind: 'interpolate',
-                    colors: [
-                        [ColorNames.white, 0],
-                        [ColorNames.red, 0.25],
-                        [ColorNames.white, 0.5],
-                        [ColorNames.blue, 0.75],
-                        [ColorNames.white, 1]
-                    ]
-                }, { offsets: true }),
-            }, { isFlat: true })
-        }, { isEssential: true });
+        const axisOrder = Vec3.create(0, 1, 2);
+        return create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, axisOrder, directVolume);
     }
 
     export const Params = {
         ...BaseGeometry.Params,
-        doubleSided: PD.Boolean(false, BaseGeometry.CustomQualityParamInfo),
-        flipSided: PD.Boolean(false, BaseGeometry.ShadingCategory),
-        flatShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
         ignoreLight: PD.Boolean(false, BaseGeometry.ShadingCategory),
         xrayShaded: PD.Boolean(false, BaseGeometry.ShadingCategory),
-        renderMode: createRenderModeParam(),
-        stepsPerCell: PD.Numeric(5, { min: 1, max: 20, step: 1 }),
+        controlPoints: PD.LineGraph([
+            Vec2.create(0.19, 0.0), Vec2.create(0.2, 0.05), Vec2.create(0.25, 0.05), Vec2.create(0.26, 0.0),
+            Vec2.create(0.79, 0.0), Vec2.create(0.8, 0.05), Vec2.create(0.85, 0.05), Vec2.create(0.86, 0.0),
+        ], { isEssential: true }),
+        stepsPerCell: PD.Numeric(3, { min: 1, max: 10, step: 1 }),
         jumpLength: PD.Numeric(0, { min: 0, max: 20, step: 0.1 }),
     };
     export type Params = typeof Params
@@ -217,13 +191,6 @@ export namespace DirectVolume {
         return LocationIterator(groupCount, instanceCount, 1, getLocation);
     }
 
-    function getNormalizedIsoValue(out: Vec2, isoValue: Volume.IsoValue, stats: Vec4) {
-        const [min, max, mean, sigma] = stats;
-        const value = Volume.IsoValue.toAbsolute(isoValue, { min, max, mean, sigma }).absoluteValue;
-        Vec2.set(out, (value - min) / (max - min), (0 - min) / (max - min));
-        return out;
-    }
-
     function getMaxSteps(gridDim: Vec3, stepsPerCell: number) {
         return Math.ceil(Vec3.magnitude(gridDim) * stepsPerCell);
     }
@@ -256,18 +223,12 @@ export namespace DirectVolume {
         const invariantBoundingSphere = Sphere3D.clone(directVolume.boundingSphere);
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
-        const controlPoints = props.renderMode.name === 'volume' ? getControlPointsFromVec2Array(props.renderMode.params.controlPoints) : [];
-        const transferTex = createTransferFunctionTexture(controlPoints, props.renderMode.name === 'volume' ? props.renderMode.params.list.colors : []);
-
-        const isoValue = props.renderMode.name === 'isosurface'
-            ? props.renderMode.params.isoValue
-            : Volume.IsoValue.relative(2);
-
-        const singleLayer = props.renderMode.name === 'isosurface'
-            ? props.renderMode.params.singleLayer
-            : false;
+        const controlPoints = getControlPointsFromVec2Array(props.controlPoints);
+        const transferTex = createTransferFunctionTexture(controlPoints);
 
         return {
+            dGeometryType: ValueCell.create('directVolume'),
+
             ...color,
             ...marker,
             ...overpaint,
@@ -283,7 +244,6 @@ export namespace DirectVolume {
             invariantBoundingSphere: ValueCell.create(invariantBoundingSphere),
             uInvariantBoundingSphere: ValueCell.create(Vec4.ofSphere(invariantBoundingSphere)),
 
-            uIsoValue: ValueCell.create(getNormalizedIsoValue(Vec2(), isoValue, directVolume.gridStats.ref.value)),
             uBboxMin: bboxMin,
             uBboxMax: bboxMax,
             uBboxSize: bboxSize,
@@ -292,7 +252,6 @@ export namespace DirectVolume {
             uJumpLength: ValueCell.create(props.jumpLength),
             uTransform: gridTransform,
             uGridDim: gridDimension,
-            dRenderMode: ValueCell.create(props.renderMode.name),
             tTransferTex: transferTex,
             uTransferScale: ValueCell.create(getTransferScale(props.stepsPerCell)),
 
@@ -305,11 +264,8 @@ export namespace DirectVolume {
             uCartnToUnit: directVolume.cartnToUnit,
             uUnitToCartn: directVolume.unitToCartn,
             dPackedGroup: directVolume.packedGroup,
-            dSingleLayer: ValueCell.create(singleLayer),
+            dAxisOrder: ValueCell.create(directVolume.axisOrder.ref.value.join('')),
 
-            uDoubleSided: ValueCell.create(props.doubleSided),
-            dFlatShaded: ValueCell.create(props.flatShaded),
-            dFlipSided: ValueCell.create(props.flipSided),
             dIgnoreLight: ValueCell.create(props.ignoreLight),
             dXrayShaded: ValueCell.create(props.xrayShaded),
         };
@@ -323,20 +279,11 @@ export namespace DirectVolume {
 
     function updateValues(values: DirectVolumeValues, props: PD.Values<Params>) {
         BaseGeometry.updateValues(values, props);
-        ValueCell.updateIfChanged(values.uDoubleSided, props.doubleSided);
-        ValueCell.updateIfChanged(values.dFlatShaded, props.flatShaded);
-        ValueCell.updateIfChanged(values.dFlipSided, props.flipSided);
         ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
         ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
-        ValueCell.updateIfChanged(values.dRenderMode, props.renderMode.name);
-
-        if (props.renderMode.name === 'isosurface') {
-            ValueCell.updateIfChanged(values.uIsoValue, getNormalizedIsoValue(values.uIsoValue.ref.value, props.renderMode.params.isoValue, values.uGridStats.ref.value));
-            ValueCell.updateIfChanged(values.dSingleLayer, props.renderMode.params.singleLayer);
-        } else if (props.renderMode.name === 'volume') {
-            const controlPoints = getControlPointsFromVec2Array(props.renderMode.params.controlPoints);
-            createTransferFunctionTexture(controlPoints, props.renderMode.params.list.colors, values.tTransferTex);
-        }
+
+        const controlPoints = getControlPointsFromVec2Array(props.controlPoints);
+        createTransferFunctionTexture(controlPoints, values.tTransferTex);
 
         ValueCell.updateIfChanged(values.uMaxSteps, getMaxSteps(values.uGridDim.ref.value, props.stepsPerCell));
         ValueCell.updateIfChanged(values.uStepScale, getStepScale(values.uCellDim.ref.value, props.stepsPerCell));
@@ -360,14 +307,14 @@ export namespace DirectVolume {
     function createRenderableState(props: PD.Values<Params>): RenderableState {
         const state = BaseGeometry.createRenderableState(props);
         state.opaque = false;
-        state.writeDepth = props.renderMode.name === 'isosurface';
+        state.writeDepth = false;
         return state;
     }
 
     function updateRenderableState(state: RenderableState, props: PD.Values<Params>) {
         BaseGeometry.updateRenderableState(state, props);
         state.opaque = false;
-        state.writeDepth = props.renderMode.name === 'isosurface';
+        state.writeDepth = false;
     }
 }
 

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

@@ -1,16 +1,13 @@
 /**
- * Copyright (c) 2018 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>
  */
 
 import { TextureImage } from '../../../mol-gl/renderable/util';
 import { spline } from '../../../mol-math/interpolate';
-import { ColorScale } from '../../../mol-util/color';
 import { ValueCell } from '../../../mol-util';
 import { Vec2 } from '../../../mol-math/linear-algebra';
-import { ColorListName } from '../../../mol-util/color/lists';
-import { ColorListEntry } from '../../../mol-util/color/color';
 
 export interface ControlPoint { x: number, alpha: number }
 
@@ -25,7 +22,7 @@ export function getControlPointsFromVec2Array(array: Vec2[]): ControlPoint[] {
     return array.map(v => ({ x: v[0], alpha: v[1] }));
 }
 
-export function createTransferFunctionTexture(controlPoints: ControlPoint[], listOrName: ColorListEntry[] | ColorListName, texture?: ValueCell<TextureImage<Uint8Array>>): ValueCell<TextureImage<Uint8Array>> {
+export function createTransferFunctionTexture(controlPoints: ControlPoint[], texture?: ValueCell<TextureImage<Uint8Array>>): ValueCell<TextureImage<Uint8Array>> {
     const cp = [
         { x: 0, alpha: 0 },
         { x: 0, alpha: 0 },
@@ -33,10 +30,9 @@ export function createTransferFunctionTexture(controlPoints: ControlPoint[], lis
         { x: 1, alpha: 0 },
         { x: 1, alpha: 0 },
     ];
-    const scale = ColorScale.create({ domain: [0, 1], listOrName });
 
     const n = 256;
-    const array = texture ? texture.ref.value.array : new Uint8Array(n * 4);
+    const array = texture ? texture.ref.value.array : new Uint8Array(n);
 
     let k = 0;
     let x1: number, x2: number;
@@ -55,8 +51,7 @@ export function createTransferFunctionTexture(controlPoints: ControlPoint[], lis
         const jl = Math.round((x2 - x1) * n);
         for (let j = 0; j < jl; ++j) {
             const t = j / jl;
-            array[k * 4 + 3] = Math.max(0, spline(a0, a1, a2, a3, t, 0.5) * 255);
-            scale.colorToArray(k / 255, array, k * 4);
+            array[k] = Math.max(0, spline(a0, a1, a2, a3, t, 0.5) * 255);
             ++k;
         }
     }

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

@@ -155,6 +155,8 @@ namespace Image {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('image'),
+
             ...color,
             ...marker,
             ...overpaint,

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

@@ -220,6 +220,8 @@ export namespace Lines {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('lines'),
+
             aMapping: lines.mappingBuffer,
             aGroup: lines.groupBuffer,
             aStart: lines.startBuffer,

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

@@ -677,6 +677,8 @@ export namespace Mesh {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('mesh'),
+
             aPosition: mesh.vertexBuffer,
             aNormal: mesh.normalBuffer,
             aGroup: mesh.groupBuffer,

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

@@ -182,6 +182,8 @@ export namespace Points {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('points'),
+
             aPosition: points.centerBuffer,
             aGroup: points.groupBuffer,
             boundingSphere: ValueCell.create(boundingSphere),

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

@@ -11,7 +11,7 @@ import { LocationIterator } from '../util/location-iterator';
 import { Location, NullLocation } from '../../mol-model/location';
 import { SizeTheme } from '../../mol-theme/size';
 import { Geometry } from './geometry';
-import { decodeFloatRGB, encodeFloatRGBtoArray } from '../../mol-util/float-packing';
+import { unpackRGBToInt, packIntToRGBArray } from '../../mol-util/number-packing';
 
 export type SizeType = 'uniform' | 'instance' | 'group' | 'groupInstance'
 
@@ -44,7 +44,7 @@ export function getMaxSize(sizeData: SizeData): number {
             let maxSize = 0;
             const array = sizeData.tSize.ref.value.array;
             for (let i = 0, il = array.length; i < il; i += 3) {
-                const value = decodeFloatRGB(array[i], array[i + 1], array[i + 2]);
+                const value = unpackRGBToInt(array[i], array[i + 1], array[i + 2]);
                 if (maxSize < value) maxSize = value;
             }
             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) * sizeDataFactor, sizes.array, v.instanceIndex * 3);
+        packIntToRGBArray(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) * sizeDataFactor, sizes.array, v.groupIndex * 3);
+        packIntToRGBArray(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) * sizeDataFactor, sizes.array, v.index * 3);
+        packIntToRGBArray(sizeFn(v.location) * sizeDataFactor, sizes.array, v.index * 3);
     }
     return createTextureSize(sizes, 'groupInstance', sizeData);
 }

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

@@ -183,6 +183,8 @@ export namespace Spheres {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('spheres'),
+
             aPosition: spheres.centerBuffer,
             aMapping: spheres.mappingBuffer,
             aGroup: spheres.groupBuffer,

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

@@ -224,6 +224,8 @@ export namespace Text {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('text'),
+
             aPosition: text.centerBuffer,
             aMapping: text.mappingBuffer,
             aDepth: text.depthBuffer,

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

@@ -147,6 +147,8 @@ export namespace TextureMesh {
         const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
+            dGeometryType: ValueCell.create('textureMesh'),
+
             uGeoTexDim: textureMesh.geoTextureDim,
             tPosition: textureMesh.vertexTexture,
             tGroup: textureMesh.groupTexture,
@@ -172,7 +174,6 @@ export namespace TextureMesh {
             dXrayShaded: ValueCell.create(props.xrayShaded),
             uBumpFrequency: ValueCell.create(props.bumpFrequency),
             uBumpAmplitude: ValueCell.create(props.bumpAmplitude),
-            dGeoTexture: ValueCell.create(true),
 
             meta: ValueCell.create(textureMesh.meta),
         };

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

@@ -11,7 +11,7 @@ import { Values, TextureSpec } from '../../renderable/schema';
 import { Texture } from '../../../mol-gl/webgl/texture';
 import { ShaderCode } from '../../../mol-gl/shader-code';
 import { ValueCell } from '../../../mol-util';
-import { decodeFloatRGB } from '../../../mol-util/float-packing';
+import { unpackRGBToInt } from '../../../mol-util/number-packing';
 import { QuadSchema, QuadValues } from '../util';
 import { quad_vert } from '../../../mol-gl/shader/quad.vert';
 import { sum_frag } from '../../../mol-gl/shader/histogram-pyramid/sum.frag';
@@ -96,5 +96,5 @@ export function getHistopyramidSum(ctx: WebGLContext, pyramidTopTexture: Texture
 
     return isWebGL2(gl)
         ? sumInts[0]
-        : decodeFloatRGB(sumBytes[0], sumBytes[1], sumBytes[2]);
+        : unpackRGBToInt(sumBytes[0], sumBytes[1], sumBytes[2]);
 }

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

@@ -17,12 +17,6 @@ export const DirectVolumeSchema = {
     aPosition: AttributeSpec('float32', 3, 0),
     elements: ElementsSpec('uint32'),
 
-    uColor: UniformSpec('v3'),
-    uColorTexDim: UniformSpec('v2'),
-    tColor: TextureSpec('image-uint8', 'rgb', 'ubyte', 'nearest'),
-    dColorType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'groupInstance', 'vertex', 'vertexInstance']),
-
-    uIsoValue: UniformSpec('v2'),
     uBboxMin: UniformSpec('v3'),
     uBboxMax: UniformSpec('v3'),
     uBboxSize: UniformSpec('v3'),
@@ -31,9 +25,7 @@ export const DirectVolumeSchema = {
     uJumpLength: UniformSpec('f'),
     uTransform: UniformSpec('m4'),
     uGridDim: UniformSpec('v3'),
-    dRenderMode: DefineSpec('string', ['isosurface', 'volume']),
-    dSingleLayer: DefineSpec('boolean'),
-    tTransferTex: TextureSpec('image-uint8', 'rgba', 'ubyte', 'linear'),
+    tTransferTex: TextureSpec('image-uint8', 'alpha', 'ubyte', 'linear'),
     uTransferScale: UniformSpec('f'),
 
     dGridTexType: DefineSpec('string', ['2d', '3d']),
@@ -45,10 +37,8 @@ export const DirectVolumeSchema = {
     uCartnToUnit: UniformSpec('m4'),
     uUnitToCartn: UniformSpec('m4'),
     dPackedGroup: DefineSpec('boolean'),
+    dAxisOrder: DefineSpec('string', ['012', '021', '102', '120', '201', '210']),
 
-    uDoubleSided: UniformSpec('b'),
-    dFlipSided: DefineSpec('boolean'),
-    dFlatShaded: DefineSpec('boolean'),
     dIgnoreLight: DefineSpec('boolean'),
     dXrayShaded: DefineSpec('boolean'),
 };

src/mol-gl/renderable/schema.ts

@@ -182,7 +182,7 @@ export const ColorSchema = {
     tColor: TextureSpec('image-uint8', 'rgb', 'ubyte', 'nearest'),
     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']),
+    dColorType: DefineSpec('string', ['uniform', 'attribute', 'instance', 'group', 'groupInstance', 'vertex', 'vertexInstance', 'volume', 'volumeInstance', 'direct']),
     dUsePalette: DefineSpec('boolean'),
 } as const;
 export type ColorSchema = typeof ColorSchema
@@ -258,6 +258,8 @@ export type ClippingSchema = typeof ClippingSchema
 export type ClippingValues = Values<ClippingSchema>
 
 export const BaseSchema = {
+    dGeometryType: DefineSpec('string', ['cylinders', 'directVolume', 'image', 'lines', 'mesh', 'points', 'spheres', 'text', 'textureMesh']),
+
     ...ColorSchema,
     ...MarkerSchema,
     ...OverpaintSchema,

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

@@ -23,7 +23,6 @@ export const TextureMeshSchema = {
     dFlipSided: DefineSpec('boolean'),
     dIgnoreLight: DefineSpec('boolean'),
     dXrayShaded: DefineSpec('boolean'),
-    dGeoTexture: DefineSpec('boolean'),
     uBumpFrequency: UniformSpec('f'),
     uBumpAmplitude: UniformSpec('f'),
     meta: ValueSpec('unknown')

src/mol-gl/renderer.ts

@@ -136,7 +136,7 @@ function getLight(props: RendererProps['light'], light?: Light): Light {
 
 namespace Renderer {
     export function create(ctx: WebGLContext, props: Partial<RendererProps> = {}): Renderer {
-        const { gl, state, stats, extensions: { fragDepth } } = ctx;
+        const { gl, state, stats } = ctx;
         const p = PD.merge(RendererParams, PD.getDefaultValues(RendererParams), props);
         const light = getLight(p.light);
 
@@ -245,9 +245,9 @@ namespace Renderer {
                 globalUniformsNeedUpdate = false;
             }
 
-            if (r.values.dRenderMode) { // indicates direct-volume
-                if ((variant === 'pick' || variant === 'depth') && r.values.dRenderMode.ref.value === 'volume') {
-                    return; // no picking/depth in volume mode
+            if (r.values.dGeometryType.ref.value === 'directVolume') {
+                if (variant !== 'colorWboit' && variant !== 'colorBlended') {
+                    return; // only color supported
                 }
 
                 // culling done in fragment shader
@@ -256,14 +256,8 @@ namespace Renderer {
 
                 if (variant === 'colorBlended') {
                     // depth test done manually in shader against `depthTexture`
-                    // still need to enable when fragDepth can be used to write depth
-                    if (r.values.dRenderMode.ref.value === 'volume' || !fragDepth) {
-                        state.disable(gl.DEPTH_TEST);
-                        state.depthMask(false);
-                    } else {
-                        state.enable(gl.DEPTH_TEST);
-                        state.depthMask(r.values.uAlpha.ref.value === 1.0);
-                    }
+                    state.disable(gl.DEPTH_TEST);
+                    state.depthMask(false);
                 }
             } else {
                 if (r.values.uDoubleSided) {
@@ -506,7 +500,7 @@ namespace Renderer {
                 // TODO: simplify, handle in renderable.state???
                 // uAlpha is updated in "render" so we need to recompute it here
                 const alpha = clamp(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
-                if (alpha === 1 && r.values.transparencyAverage.ref.value !== 1 && r.values.dRenderMode?.ref.value !== 'volume' && r.values.dPointStyle?.ref.value !== 'fuzzy' && !r.values.dXrayShaded?.ref.value) {
+                if (alpha === 1 && r.values.transparencyAverage.ref.value !== 1 && r.values.dGeometryType.ref.value !== 'directVolume' && r.values.dPointStyle?.ref.value !== 'fuzzy' && !r.values.dXrayShaded?.ref.value) {
                     renderObject(r, 'colorWboit');
                 }
             }
@@ -522,7 +516,7 @@ namespace Renderer {
                 // TODO: simplify, handle in renderable.state???
                 // uAlpha is updated in "render" so we need to recompute it here
                 const alpha = clamp(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
-                if (alpha < 1 || r.values.transparencyAverage.ref.value > 0 || r.values.dRenderMode?.ref.value === 'volume' || r.values.dPointStyle?.ref.value === 'fuzzy' || !!r.values.uBackgroundColor || r.values.dXrayShaded?.ref.value) {
+                if (alpha < 1 || r.values.transparencyAverage.ref.value > 0 || r.values.dGeometryType.ref.value === 'directVolume' || r.values.dPointStyle?.ref.value === 'fuzzy' || !!r.values.uBackgroundColor || r.values.dXrayShaded?.ref.value) {
                     renderObject(r, 'colorWboit');
                 }
             }

src/mol-gl/shader-code.ts

@@ -198,7 +198,7 @@ export const MeshShaderCode = ShaderCode('mesh', mesh_vert, mesh_frag, { drawBuf
 
 import { directVolume_vert } from './shader/direct-volume.vert';
 import { directVolume_frag } from './shader/direct-volume.frag';
-export const DirectVolumeShaderCode = ShaderCode('direct-volume', directVolume_vert, directVolume_frag, { fragDepth: 'optional', drawBuffers: 'optional' });
+export const DirectVolumeShaderCode = ShaderCode('direct-volume', directVolume_vert, directVolume_frag, { fragDepth: 'optional', drawBuffers: 'optional' }, {}, ignoreDefine);
 
 import { image_vert } from './shader/image.vert';
 import { image_frag } from './shader/image.frag';

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

@@ -57,11 +57,11 @@ export const assign_color_varying = `
     #endif
 #elif defined(dRenderVariant_pick)
     if (uPickType == 1) {
-        vColor = vec4(encodeFloatRGB(float(uObjectId)), 1.0);
+        vColor = vec4(packIntToRGB(float(uObjectId)), 1.0);
     } else if (uPickType == 2) {
-        vColor = vec4(encodeFloatRGB(aInstance), 1.0);
+        vColor = vec4(packIntToRGB(aInstance), 1.0);
     } else {
-        vColor = vec4(encodeFloatRGB(group), 1.0);
+        vColor = vec4(packIntToRGB(group), 1.0);
     }
 #endif
 

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

@@ -1,6 +1,6 @@
 export const assign_group = `
-#ifdef dGeoTexture
-    float group = decodeFloatRGB(readFromTexture(tGroup, VertexID, uGeoTexDim).rgb);
+#ifdef dGeometryType_textureMesh
+    float group = unpackRGBToInt(readFromTexture(tGroup, VertexID, uGeoTexDim).rgb);
 #else
     float group = aGroup;
 #endif

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

@@ -1,7 +1,7 @@
 export const assign_position = `
 mat4 model = uModel * aTransform;
 mat4 modelView = uView * model;
-#ifdef dGeoTexture
+#ifdef dGeometryType_textureMesh
     vec3 position = readFromTexture(tPosition, VertexID, uGeoTexDim).xyz;
 #else
     vec3 position = aPosition;

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

@@ -4,11 +4,11 @@ export const assign_size = `
 #elif defined(dSizeType_attribute)
     float size = aSize;
 #elif defined(dSizeType_instance)
-    float size = decodeFloatRGB(readFromTexture(tSize, aInstance, uSizeTexDim).rgb);
+    float size = unpackRGBToInt(readFromTexture(tSize, aInstance, uSizeTexDim).rgb);
 #elif defined(dSizeType_group)
-    float size = decodeFloatRGB(readFromTexture(tSize, group, uSizeTexDim).rgb);
+    float size = unpackRGBToInt(readFromTexture(tSize, group, uSizeTexDim).rgb);
 #elif defined(dSizeType_groupInstance)
-    float size = decodeFloatRGB(readFromTexture(tSize, aInstance * float(uGroupCount) + group, uSizeTexDim).rgb);
+    float size = unpackRGBToInt(readFromTexture(tSize, aInstance * float(uGroupCount) + group, uSizeTexDim).rgb);
 #endif
 
 #if defined(dSizeType_instance) || defined(dSizeType_group) || defined(dSizeType_groupInstance)

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

@@ -32,13 +32,8 @@ int imod(const in int a, const in int b) { return a - b * (a / b); }
 
 float pow2(const in float x) { return x * x; }
 
-const float maxFloat = 10000.0; // NOTE constant also set in TypeScript
-const float floatLogFactor = 9.210440366976517; // log(maxFloat + 1.0);
-float encodeFloatLog(const in float value) { return log(value + 1.0) / floatLogFactor; }
-float decodeFloatLog(const in float value) { return exp(value * floatLogFactor) - 1.0; }
-
-vec3 encodeFloatRGB(in float value) {
-    value = clamp(value, 0.0, 16777216.0 - 1.0) + 1.0;
+vec3 packIntToRGB(in float value) {
+    value = clamp(round(value), 0.0, 16777216.0 - 1.0) + 1.0;
     vec3 c = vec3(0.0);
     c.b = mod(value, 256.0);
     value = floor(value / 256.0);
@@ -47,8 +42,8 @@ vec3 encodeFloatRGB(in float value) {
     c.r = mod(value, 256.0);
     return c / 255.0;
 }
-float decodeFloatRGB(const in vec3 rgb) {
-    return (rgb.r * 256.0 * 256.0 * 255.0 + rgb.g * 256.0 * 255.0 + rgb.b * 255.0) - 1.0;
+float unpackRGBToInt(const in vec3 rgb) {
+    return (floor(rgb.r * 255.0 + 0.5) * 256.0 * 256.0 + floor(rgb.g * 255.0 + 0.5) * 256.0 + floor(rgb.b * 255.0 + 0.5)) - 1.0;
 }
 
 vec2 packUnitIntervalToRG(const in float v) {

src/mol-gl/shader/chunks/wboit-write.glsl.ts

@@ -18,7 +18,7 @@ export const wboit_write = `
             float wboitWeight = alpha * clamp(pow(1.0 - fragmentDepth, 2.0), 0.01, 1.0);
             gl_FragColor = vec4(gl_FragColor.rgb * alpha * wboitWeight, alpha);
             // extra alpha is to handle pre-multiplied alpha
-            #if !defined(dRenderMode_volume) && !defined(dRenderMode_isosurface)
+            #ifndef dGeometryType_directVolume
                 gl_FragData[1] = vec4((uTransparentBackground ? alpha : 1.0) * alpha * wboitWeight);
             #else
                 gl_FragData[1] = vec4(alpha * alpha * wboitWeight);

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

@@ -35,7 +35,7 @@ uniform float uResolution;
 
 void main() {
     vec3 position = readFromTexture(tPosition, SampleID, uGeoTexDim).xyz;
-    float group = decodeFloatRGB(readFromTexture(tGroup, SampleID, uGeoTexDim).rgb);
+    float group = unpackRGBToInt(readFromTexture(tGroup, SampleID, uGeoTexDim).rgb);
 
     position = (aTransform * vec4(position, 1.0)).xyz;
     gl_PointSize = 7.0;

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

@@ -38,7 +38,6 @@ varying vec4 vBoundingSphere;
 varying mat4 vTransform;
 
 uniform mat4 uInvView;
-uniform vec2 uIsoValue;
 uniform vec3 uGridDim;
 uniform vec3 uBboxSize;
 uniform sampler2D tTransferTex;
@@ -76,11 +75,9 @@ uniform float uXrayEdgeFalloff;
 uniform float uInteriorDarkening;
 uniform bool uInteriorColorFlag;
 uniform vec3 uInteriorColor;
-bool interior;
 
 uniform bool uRenderWboit;
 uniform bool uDoubleSided;
-uniform int uPickType;
 
 uniform float uNear;
 uniform float uFar;
@@ -104,27 +101,22 @@ uniform mat4 uCartnToUnit;
     uniform sampler3D tGridTex;
 #endif
 
-#if defined(dRenderVariant_color)
-    #if defined(dColorType_uniform)
-        uniform vec3 uColor;
-    #elif defined(dColorType_texture)
-        uniform vec2 uColorTexDim;
-        uniform sampler2D tColor;
-    #endif
+#if defined(dColorType_uniform)
+    uniform vec3 uColor;
+#elif defined(dColorType_texture)
+    uniform vec2 uColorTexDim;
+    uniform sampler2D tColor;
+#endif
 
-    #ifdef dOverpaint
-        #if defined(dOverpaintType_groupInstance) || defined(dOverpaintType_vertexInstance)
-            uniform vec2 uOverpaintTexDim;
-            uniform sampler2D tOverpaint;
-        #endif
+#ifdef dOverpaint
+    #if defined(dOverpaintType_groupInstance) || defined(dOverpaintType_vertexInstance)
+        uniform vec2 uOverpaintTexDim;
+        uniform sampler2D tOverpaint;
     #endif
+#endif
 
-    #ifdef dSubstance
-        #if defined(dSubstanceType_groupInstance) || defined(dSubstanceType_vertexInstance)
-            uniform vec2 uSubstanceTexDim;
-            uniform sampler2D tSubstance;
-        #endif
-    #endif
+#ifdef dUsePalette
+    uniform sampler2D tPalette;
 #endif
 
 #if defined(dGridTexType_2d)
@@ -148,8 +140,8 @@ float calcDepth(const in vec3 pos) {
     return 0.5 + 0.5 * clipZW.x / clipZW.y;
 }
 
-vec4 transferFunction(float value) {
-    return texture2D(tTransferTex, vec2(value, 0.0));
+float transferFunction(float value) {
+    return texture2D(tTransferTex, vec2(value, 0.0)).a;
 }
 
 float getDepth(const in vec2 coords) {
@@ -174,7 +166,7 @@ vec3 v3m4(vec3 p, mat4 m) {
 float preFogAlphaBlended = 0.0;
 
 vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
-    #if defined(dRenderVariant_color) && !defined(dIgnoreLight)
+    #if !defined(dIgnoreLight)
         mat3 normalMatrix = transpose3(inverse3(mat3(uModelView * vTransform)));
     #endif
     mat4 cartnToUnit = uCartnToUnit * inverse4(vTransform);
@@ -190,21 +182,18 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
     float value = 0.0;
     vec4 src = vec4(0.0);
     vec4 dst = vec4(0.0);
-    bool hit = false;
     float fragmentDepth;
 
     vec3 posMin = vec3(0.0);
     vec3 posMax = vec3(1.0) - vec3(1.0) / uGridDim;
 
     vec3 unitPos;
-    vec3 isoPos;
 
     vec3 nextPos;
     float nextValue;
 
-    vec3 color = vec3(0.45, 0.55, 0.8);
-    vec4 overpaint = vec4(0.0);
-    vec3 substance = vec3(0.0);
+    vec4 material;
+    vec4 overpaint;
     float metalness = uMetalness;
     float roughness = uRoughness;
 
@@ -227,7 +216,6 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
         if (unitPos.x > posMax.x || unitPos.y > posMax.y || unitPos.z > posMax.z ||
             unitPos.x < posMin.x || unitPos.y < posMin.y || unitPos.z < posMin.z
         ) {
-            if (hit) break;
             prevValue = value;
             pos += step;
             continue;
@@ -246,226 +234,108 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
             }
         }
 
-        #if defined(dRenderMode_isosurface)
-            if (prevValue > 0.0 && ( // there was a prev Value
-                (prevValue < uIsoValue.x && value > uIsoValue.x) || // entering isosurface
-                (prevValue > uIsoValue.x && value < uIsoValue.x) // leaving isosurface
-            )) {
-                isoPos = v3m4(mix(pos - step, pos, ((prevValue - uIsoValue.x) / ((prevValue - uIsoValue.x) - (value - uIsoValue.x)))), cartnToUnit);
-
-                vec4 mvPosition = modelViewTransform * vec4(isoPos * uGridDim, 1.0);
-
-                #if defined(dClipVariant_pixel) && dClipObjectCount != 0
-                    vec3 vModelPosition = v3m4(isoPos * uGridDim, modelTransform);
-                    if (clipTest(vec4(vModelPosition, 0.0), 0)) {
-                        prevValue = value;
-                        pos += step;
-                        continue;
-                    }
-                #endif
+        vec4 mvPosition = modelViewTransform * vec4(unitPos * uGridDim, 1.0);
+        if (calcDepth(mvPosition.xyz) > getDepth(gl_FragCoord.xy / uDrawingBufferSize))
+            break;
 
-                float depth = calcDepth(mvPosition.xyz);
-                if (depth > getDepth(gl_FragCoord.xy / uDrawingBufferSize))
-                    break;
+        #if defined(dClipVariant_pixel) && dClipObjectCount != 0
+            vec3 vModelPosition = v3m4(unitPos * uGridDim, modelTransform);
+            if (clipTest(vec4(vModelPosition, 0.0), 0)) {
+                prevValue = value;
+                pos += step;
+                continue;
+            }
+        #endif
 
-                #ifdef enabledFragDepth
-                    if (!hit) {
-                        gl_FragDepthEXT = depth;
-                    }
-                #endif
+        vec3 vViewPosition = mvPosition.xyz;
+        material.a = transferFunction(value);
 
-                #if defined(dRenderVariant_pick)
-                    if (uPickType == 1) {
-                        return vec4(encodeFloatRGB(float(uObjectId)), 1.0);
-                    } else if (uPickType == 2) {
-                        return vec4(encodeFloatRGB(vInstance), 1.0);
-                    } else {
-                        #ifdef dPackedGroup
-                            return vec4(textureGroup(floor(isoPos * uGridDim + 0.5) / uGridDim).rgb, 1.0);
-                        #else
-                            vec3 g = floor(isoPos * uGridDim + 0.5);
-                            return vec4(encodeFloatRGB(g.z + g.y * uGridDim.z + g.x * uGridDim.z * uGridDim.y), 1.0);
-                        #endif
-                    }
-                #elif defined(dRenderVariant_depth)
-                    #ifdef enabledFragDepth
-                        return packDepthToRGBA(gl_FragDepthEXT);
-                    #else
-                        return packDepthToRGBA(depth);
-                    #endif
-                #elif defined(dRenderVariant_color)
-                    #ifdef dPackedGroup
-                        float group = decodeFloatRGB(textureGroup(floor(isoPos * uGridDim + 0.5) / uGridDim).rgb);
-                    #else
-                        vec3 g = floor(isoPos * uGridDim + 0.5);
-                        float group = g.z + g.y * uGridDim.z + g.x * uGridDim.z * uGridDim.y;
-                    #endif
-
-                    #if defined(dColorType_uniform)
-                        color = uColor;
-                    #elif defined(dColorType_instance)
-                        color = readFromTexture(tColor, vInstance, uColorTexDim).rgb;
-                    #elif defined(dColorType_group)
-                        color = readFromTexture(tColor, group, uColorTexDim).rgb;
-                    #elif defined(dColorType_groupInstance)
-                        color = readFromTexture(tColor, vInstance * float(uGroupCount) + group, uColorTexDim).rgb;
-                    #elif defined(dColorType_vertex)
-                        color = texture3dFrom1dTrilinear(tColor, isoPos, uGridDim, uColorTexDim, 0.0).rgb;
-                    #elif defined(dColorType_vertexInstance)
-                        color = texture3dFrom1dTrilinear(tColor, isoPos, uGridDim, uColorTexDim, vInstance * float(uVertexCount)).rgb;
-                    #endif
-
-                    #ifdef dOverpaint
-                        #if defined(dOverpaintType_groupInstance)
-                            overpaint = readFromTexture(tOverpaint, vInstance * float(uGroupCount) + group, uOverpaintTexDim);
-                        #elif defined(dOverpaintType_vertexInstance)
-                            overpaint = texture3dFrom1dTrilinear(tOverpaint, isoPos, uGridDim, uOverpaintTexDim, vInstance * float(uVertexCount));
-                        #endif
-
-                        color = mix(color, overpaint.rgb, overpaint.a);
-                    #endif
-
-                    // handle flipping and negative isosurfaces
-                    #ifdef dFlipSided
-                        bool flipped = value < uIsoValue.y; // flipped
-                    #else
-                        bool flipped = value > uIsoValue.y;
-                    #endif
-                    interior = value < uIsoValue.x && flipped;
-                    if (uDoubleSided) {
-                        if (interior) {
-                            prevValue = value;
-                            pos += step;
-                            continue;
-                        }
-                    }
-                    vec3 vViewPosition = mvPosition.xyz;
-                    vec4 material = vec4(color, uAlpha);
-
-                    #ifdef dIgnoreLight
-                        gl_FragColor = material;
-                    #else
-                        #if defined(dFlatShaded)
-                            // nearest grid point
-                            isoPos = floor(isoPos * uGridDim + 0.5) / uGridDim;
-                        #endif
-                        #ifdef dPackedGroup
-                            // compute gradient by central differences
-                            gradient.x = textureVal(isoPos - dx).a - textureVal(isoPos + dx).a;
-                            gradient.y = textureVal(isoPos - dy).a - textureVal(isoPos + dy).a;
-                            gradient.z = textureVal(isoPos - dz).a - textureVal(isoPos + dz).a;
-                        #else
-                            gradient = textureVal(isoPos).xyz * 2.0 - 1.0;
-                        #endif
-                        vec3 normal = -normalize(normalMatrix * normalize(gradient));
-                        normal = normal * (float(flipped) * 2.0 - 1.0);
-                        normal = normal * -(float(interior) * 2.0 - 1.0);
-                        #ifdef dSubstance
-                            #if defined(dSubstanceType_groupInstance)
-                                substance = readFromTexture(tSubstance, vInstance * float(uGroupCount) + group, uSubstanceTexDim).rgb;
-                            #elif defined(dSubstanceType_vertexInstance)
-                                substance = texture3dFrom1dTrilinear(tSubstance, isoPos, uGridDim, uSubstanceTexDim, vInstance * float(uVertexCount)).rgb;
-                            #endif
-                            metalness = mix(metalness, substance.r, substance.b);
-                            roughness = mix(roughness, substance.g, substance.b);
-                        #endif
-                        #include apply_light_color
-                    #endif
-
-                    float marker = uMarker;
-                    if (uMarker == -1.0) {
-                        marker = readFromTexture(tMarker, vInstance * float(uGroupCount) + group, uMarkerTexDim).a;
-                        marker = floor(marker * 255.0 + 0.5); // rounding required to work on some cards on win
-                    }
-                    #include apply_interior_color
-                    #include apply_marker_color
-
-                    preFogAlphaBlended = (1.0 - preFogAlphaBlended) * gl_FragColor.a + preFogAlphaBlended;
-                    fragmentDepth = depth;
-                    #include apply_fog
-
-                    src = gl_FragColor;
-
-                    if (!uTransparentBackground) {
-                        // done in 'apply_fog' otherwise
-                        src.rgb *= src.a;
-                    }
-                    dst = (1.0 - dst.a) * src + dst; // standard blending
-                #endif
+        #ifdef dPackedGroup
+            float group = unpackRGBToInt(textureGroup(floor(unitPos * uGridDim + 0.5) / uGridDim).rgb);
+        #else
+            vec3 g = floor(unitPos * uGridDim + 0.5);
+            // note that we swap x and z because the texture is flipped around y
+            #if defined(dAxisOrder_012)
+                float group = g.z + g.y * uGridDim.z + g.x * uGridDim.z * uGridDim.y; // 210
+            #elif defined(dAxisOrder_021)
+                float group = g.y + g.z * uGridDim.y + g.x * uGridDim.y * uGridDim.z; // 120
+            #elif defined(dAxisOrder_102)
+                float group = g.z + g.x * uGridDim.z + g.y * uGridDim.z * uGridDim.x; // 201
+            #elif defined(dAxisOrder_120)
+                float group = g.x + g.z * uGridDim.x + g.y * uGridDim.x * uGridDim.z; // 021
+            #elif defined(dAxisOrder_201)
+                float group = g.y + g.x * uGridDim.y + g.z * uGridDim.y * uGridDim.x; // 102
+            #elif defined(dAxisOrder_210)
+                float group = g.x + g.y * uGridDim.x + g.z * uGridDim.x * uGridDim.y; // 012
+            #endif
+        #endif
 
-                #ifdef dSingleLayer
-                    break;
-                #endif
+        #if defined(dColorType_direct) && defined(dUsePalette)
+            material.rgb = texture2D(tPalette, vec2(value, 0.0)).rgb;
+        #elif defined(dColorType_uniform)
+            material.rgb = uColor;
+        #elif defined(dColorType_instance)
+            material.rgb = readFromTexture(tColor, vInstance, uColorTexDim).rgb;
+        #elif defined(dColorType_group)
+            material.rgb = readFromTexture(tColor, group, uColorTexDim).rgb;
+        #elif defined(dColorType_groupInstance)
+            material.rgb = readFromTexture(tColor, vInstance * float(uGroupCount) + group, uColorTexDim).rgb;
+        #elif defined(dColorType_vertex)
+            material.rgb = texture3dFrom1dTrilinear(tColor, isoPos, uGridDim, uColorTexDim, 0.0).rgb;
+        #elif defined(dColorType_vertexInstance)
+            material.rgb = texture3dFrom1dTrilinear(tColor, isoPos, uGridDim, uColorTexDim, vInstance * float(uVertexCount)).rgb;
+        #endif
 
-                hit = true;
-            }
-            prevValue = value;
-        #elif defined(dRenderMode_volume)
-            vec4 mvPosition = modelViewTransform * vec4(unitPos * uGridDim, 1.0);
-            if (calcDepth(mvPosition.xyz) > getDepth(gl_FragCoord.xy / uDrawingBufferSize))
-                break;
-
-            #if defined(dClipVariant_pixel) && dClipObjectCount != 0
-                vec3 vModelPosition = v3m4(unitPos * uGridDim, modelTransform);
-                if (clipTest(vec4(vModelPosition, 0.0), 0)) {
-                    prevValue = value;
-                    pos += step;
-                    continue;
-                }
+        #ifdef dOverpaint
+            #if defined(dOverpaintType_groupInstance)
+                overpaint = readFromTexture(tOverpaint, vInstance * float(uGroupCount) + group, uOverpaintTexDim);
+            #elif defined(dOverpaintType_vertexInstance)
+                overpaint = texture3dFrom1dTrilinear(tOverpaint, isoPos, uGridDim, uOverpaintTexDim, vInstance * float(uVertexCount));
             #endif
 
-            #if defined(dRenderVariant_color)
-                vec3 vViewPosition = mvPosition.xyz;
-                vec4 material = transferFunction(value);
+            material.rgb = mix(material.rgb, overpaint.rgb, overpaint.a);
+        #endif
 
-                #ifdef dIgnoreLight
-                    gl_FragColor.rgb = material.rgb;
+        #ifdef dIgnoreLight
+            gl_FragColor.rgb = material.rgb;
+        #else
+            if (material.a >= 0.01) {
+                #ifdef dPackedGroup
+                    // compute gradient by central differences
+                    gradient.x = textureVal(unitPos - dx).a - textureVal(unitPos + dx).a;
+                    gradient.y = textureVal(unitPos - dy).a - textureVal(unitPos + dy).a;
+                    gradient.z = textureVal(unitPos - dz).a - textureVal(unitPos + dz).a;
                 #else
-                    if (material.a >= 0.01) {
-                        #ifdef dPackedGroup
-                            // compute gradient by central differences
-                            gradient.x = textureVal(unitPos - dx).a - textureVal(unitPos + dx).a;
-                            gradient.y = textureVal(unitPos - dy).a - textureVal(unitPos + dy).a;
-                            gradient.z = textureVal(unitPos - dz).a - textureVal(unitPos + dz).a;
-                        #else
-                            gradient = cell.xyz * 2.0 - 1.0;
-                        #endif
-                        vec3 normal = -normalize(normalMatrix * normalize(gradient));
-                        #include apply_light_color
-                    } else {
-                        gl_FragColor.rgb = material.rgb;
-                    }
+                    gradient = cell.xyz * 2.0 - 1.0;
                 #endif
-
-                gl_FragColor.a = material.a * uAlpha * uTransferScale;
-
-                float marker = uMarker;
-                if (uMarker == -1.0) {
-                    #ifdef dPackedGroup
-                        float group = decodeFloatRGB(textureGroup(floor(unitPos * uGridDim + 0.5) / uGridDim).rgb);
-                    #else
-                        vec3 g = floor(unitPos * uGridDim + 0.5);
-                        float group = g.z + g.y * uGridDim.z + g.x * uGridDim.z * uGridDim.y;
-                    #endif
-                    marker = readFromTexture(tMarker, vInstance * float(uGroupCount) + group, uMarkerTexDim).a;
-                    marker = floor(marker * 255.0 + 0.5); // rounding required to work on some cards on win
-                }
-                #include apply_marker_color
-
-                preFogAlphaBlended = (1.0 - preFogAlphaBlended) * gl_FragColor.a + preFogAlphaBlended;
-                fragmentDepth = calcDepth(mvPosition.xyz);
-                #include apply_fog
-
-                src = gl_FragColor;
-
-                if (!uTransparentBackground) {
-                    // done in 'apply_fog' otherwise
-                    src.rgb *= src.a;
-                }
-                dst = (1.0 - dst.a) * src + dst; // standard blending
-            #endif
+                vec3 normal = -normalize(normalMatrix * normalize(gradient));
+                #include apply_light_color
+            } else {
+                gl_FragColor.rgb = material.rgb;
+            }
         #endif
 
+        gl_FragColor.a = material.a * uAlpha * uTransferScale;
+
+        float marker = uMarker;
+        if (uMarker == -1.0) {
+            marker = readFromTexture(tMarker, vInstance * float(uGroupCount) + group, uMarkerTexDim).a;
+            marker = floor(marker * 255.0 + 0.5); // rounding required to work on some cards on win
+        }
+        #include apply_marker_color
+
+        preFogAlphaBlended = (1.0 - preFogAlphaBlended) * gl_FragColor.a + preFogAlphaBlended;
+        fragmentDepth = calcDepth(mvPosition.xyz);
+        #include apply_fog
+
+        src = gl_FragColor;
+
+        if (!uTransparentBackground) {
+            // done in 'apply_fog' otherwise
+            src.rgb *= src.a;
+        }
+        dst = (1.0 - dst.a) * src + dst; // standard blending
+
         // break if the color is opaque enough
         if (dst.a > 0.95)
             break;
@@ -473,12 +343,6 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
         pos += step;
     }
 
-    #if defined(dRenderMode_isosurface) && defined(enabledFragDepth)
-        // ensure depth is written everywhere
-        if (!hit)
-            gl_FragDepthEXT = 1.0;
-    #endif
-
     return dst;
 }
 
@@ -489,21 +353,6 @@ void main() {
     if (gl_FrontFacing)
         discard;
 
-    #ifdef dRenderVariant_marking
-        // not supported
-        discard;
-    #endif
-
-    #if defined(dRenderVariant_pick) || defined(dRenderVariant_depth)
-        #if defined(dRenderMode_volume)
-            // always ignore pick & depth for volume
-            discard;
-        #elif defined(dRenderMode_isosurface)
-            if (uAlpha < uPickingAlphaThreshold)
-                discard; // ignore so the element below can be picked
-        #endif
-    #endif
-
     vec3 rayDir = mix(normalize(vOrigPos - uCameraPosition), uCameraDir, uIsOrtho);
     vec3 step = rayDir * uStepScale;
 
@@ -512,21 +361,9 @@ void main() {
     vec3 start = mix(uCameraPosition, vOrigPos, uIsOrtho) + (d * rayDir);
     gl_FragColor = raymarch(start, step, rayDir);
 
-    #if defined(dRenderVariant_pick) || defined(dRenderVariant_depth)
-        // discard when nothing was hit
-        if (gl_FragColor == vec4(0.0))
-            discard;
-    #endif
-
-    #if defined(dRenderVariant_color)
-        #if defined(dRenderMode_isosurface) && defined(enabledFragDepth)
-            float fragmentDepth = gl_FragDepthEXT;
-        #else
-            float fragmentDepth = calcDepth((uModelView * vec4(start, 1.0)).xyz);
-        #endif
-        float preFogAlpha = clamp(preFogAlphaBlended, 0.0, 1.0);
-        interior = false;
-        #include wboit_write
-    #endif
+    float fragmentDepth = calcDepth((uModelView * vec4(start, 1.0)).xyz);
+    float preFogAlpha = clamp(preFogAlphaBlended, 0.0, 1.0);
+    bool interior = false;
+    #include wboit_write
 }
 `;

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

@@ -51,7 +51,7 @@ void main() {
         #endif
         if (dist * uRadiusFactorInv > minDistance + uResolution * 0.05)
             discard;
-        gl_FragColor.rgb = encodeFloatRGB(vGroup);
+        gl_FragColor.rgb = packIntToRGB(vGroup);
     #endif
 }
 `;

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

@@ -33,12 +33,12 @@ void main(void) {
             c = texture2D(tInputLevel, position + vec2(0.0, k)).r * 255.0;
             d = texture2D(tInputLevel, position + vec2(k, k)).r * 255.0;
         } else {
-            a = decodeFloatRGB(texture2D(tPreviousLevel, position).rgb);
-            b = decodeFloatRGB(texture2D(tPreviousLevel, position + vec2(k, 0.0)).rgb);
-            c = decodeFloatRGB(texture2D(tPreviousLevel, position + vec2(0.0, k)).rgb);
-            d = decodeFloatRGB(texture2D(tPreviousLevel, position + vec2(k, k)).rgb);
+            a = unpackRGBToInt(texture2D(tPreviousLevel, position).rgb);
+            b = unpackRGBToInt(texture2D(tPreviousLevel, position + vec2(k, 0.0)).rgb);
+            c = unpackRGBToInt(texture2D(tPreviousLevel, position + vec2(0.0, k)).rgb);
+            d = unpackRGBToInt(texture2D(tPreviousLevel, position + vec2(k, k)).rgb);
         }
-        gl_FragColor = vec4(encodeFloatRGB(a + b + c + d), 1.0);
+        gl_FragColor = vec4(packIntToRGB(a + b + c + d), 1.0);
     #else
         int a, b, c, d;
 

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

@@ -105,9 +105,9 @@ void main() {
         if (imageData.a < 0.3)
             discard;
         if (uPickType == 1) {
-            gl_FragColor = vec4(encodeFloatRGB(float(uObjectId)), 1.0);
+            gl_FragColor = vec4(packIntToRGB(float(uObjectId)), 1.0);
         } else if (uPickType == 2) {
-            gl_FragColor = vec4(encodeFloatRGB(vInstance), 1.0);
+            gl_FragColor = vec4(packIntToRGB(vInstance), 1.0);
         } else {
             gl_FragColor = vec4(texture2D(tGroupTex, vUv).rgb, 1.0);
         }
@@ -118,7 +118,7 @@ void main() {
     #elif defined(dRenderVariant_marking)
         float marker = uMarker;
         if (uMarker == -1.0) {
-            float group = decodeFloatRGB(texture2D(tGroupTex, vUv).rgb);
+            float group = unpackRGBToInt(texture2D(tGroupTex, vUv).rgb);
             marker = readFromTexture(tMarker, vInstance * float(uGroupCount) + group, uMarkerTexDim).a;
             marker = floor(marker * 255.0 + 0.5); // rounding required to work on some cards on win
         }
@@ -144,7 +144,7 @@ void main() {
 
         float marker = uMarker;
         if (uMarker == -1.0) {
-            float group = decodeFloatRGB(texture2D(tGroupTex, vUv).rgb);
+            float group = unpackRGBToInt(texture2D(tGroupTex, vUv).rgb);
             marker = readFromTexture(tMarker, vInstance * float(uGroupCount) + group, uMarkerTexDim).a;
             marker = floor(marker * 255.0 + 0.5); // rounding required to work on some cards on win
         }

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

@@ -74,7 +74,7 @@ int idot4(const in ivec4 a, const in ivec4 b) {
 
 #if __VERSION__ == 100
     int pyramidVoxel(vec2 pos) {
-        return int(decodeFloatRGB(texture2D(tActiveVoxelsPyramid, pos / (vec2(1.0, 0.5) * uSize)).rgb));
+        return int(unpackRGBToInt(texture2D(tActiveVoxelsPyramid, pos / (vec2(1.0, 0.5) * uSize)).rgb));
     }
 #else
     int pyramidVoxel(vec2 pos) {
@@ -102,7 +102,7 @@ vec4 getGroup(const in vec3 p) {
     #elif defined(dAxisOrder_210)
         float group = p.x + p.y * gridDim.x + p.z * gridDim.x * gridDim.y; // 012
     #endif
-    return vec4(group > 16777215.5 ? vec3(1.0) : encodeFloatRGB(group), 1.0);
+    return vec4(group > 16777215.5 ? vec3(1.0) : packIntToRGB(group), 1.0);
 }
 
 void main(void) {

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

@@ -16,7 +16,7 @@ precision highp sampler2D;
 #include common_clip
 #include texture3d_from_2d_linear
 
-#ifdef dGeoTexture
+#ifdef dGeometryType_textureMesh
     uniform vec2 uGeoTexDim;
     uniform sampler2D tPosition;
     uniform sampler2D tGroup;
@@ -39,7 +39,7 @@ void main(){
     #include assign_color_varying
     #include clip_instance
 
-    #ifdef dGeoTexture
+    #ifdef dGeometryType_textureMesh
         vec3 normal = readFromTexture(tNormal, VertexID, uGeoTexDim).xyz;
     #else
         vec3 normal = aNormal;

src/mol-math/geometry/gaussian-density/gpu.ts

@@ -14,7 +14,7 @@ import { ValueCell } from '../../../mol-util';
 import { createComputeRenderable, ComputeRenderable } from '../../../mol-gl/renderable';
 import { WebGLContext } from '../../../mol-gl/webgl/context';
 import { Texture, TextureFilter, TextureFormat, TextureKind, TextureType } from '../../../mol-gl/webgl/texture';
-import { decodeFloatRGB } from '../../../mol-util/float-packing';
+import { unpackRGBToInt } from '../../../mol-util/number-packing';
 import { ShaderCode } from '../../../mol-gl/shader-code';
 import { createComputeRenderItem } from '../../../mol-gl/webgl/render-item';
 import { ValueSpec, AttributeSpec, UniformSpec, TextureSpec, DefineSpec, Values } from '../../../mol-gl/renderable/schema';
@@ -462,7 +462,7 @@ function fieldFromTexture2d(ctx: WebGLContext, texture: Texture, dim: Vec3, texD
             for (let ix = 0; ix < dx; ++ix) {
                 const idx = 4 * (tmpCol * dx + (iy + tmpRow) * width + ix);
                 data[j] = image[idx + 3] / 255;
-                idData[j] = decodeFloatRGB(image[idx], image[idx + 1], image[idx + 2]);
+                idData[j] = unpackRGBToInt(image[idx], image[idx + 1], image[idx + 2]);
                 j++;
             }
         }

src/mol-repr/structure/representation/gaussian-volume.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>
  */
@@ -10,7 +10,6 @@ import { StructureRepresentation, StructureRepresentationProvider, ComplexRepres
 import { Representation, RepresentationParamsGetter, RepresentationContext } from '../../../mol-repr/representation';
 import { ThemeRegistryContext } from '../../../mol-theme/theme';
 import { Structure } from '../../../mol-model/structure';
-import { DirectVolume } from '../../../mol-geo/geometry/direct-volume/direct-volume';
 
 const GaussianVolumeVisuals = {
     'gaussian-volume': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, GaussianDensityVolumeParams>) => ComplexRepresentation('Gaussian volume', ctx, getParams, GaussianDensityVolumeVisual),
@@ -24,10 +23,6 @@ export const GaussianVolumeParams = {
 export type GaussianVolumeParams = typeof GaussianVolumeParams
 export function getGaussianVolumeParams(ctx: ThemeRegistryContext, structure: Structure) {
     const p = PD.clone(GaussianVolumeParams);
-    p.renderMode = DirectVolume.createRenderModeParam({
-        // TODO find a better way to set
-        min: 0, max: 1, mean: 0.04, sigma: 0.01
-    });
     p.jumpLength = PD.Numeric(4, { min: 0, max: 20, step: 0.1 });
     return p;
 }

src/mol-repr/structure/visual/gaussian-density-volume.ts

@@ -31,8 +31,8 @@ async function createGaussianDensityVolume(ctx: VisualContext, structure: Struct
 
     const unitToCartn = Mat4.mul(Mat4(), transform, Mat4.fromScaling(Mat4(), gridDim));
     const cellDim = Mat4.getScaling(Vec3(), transform);
-
-    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, directVolume);
+    const axisOrder = Vec3.create(0, 1, 2);
+    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, axisOrder, directVolume);
 
     const sphere = Sphere3D.expand(Sphere3D(), structure.boundary.sphere, props.radiusOffset + getStructureExtraRadius(structure));
     vol.setBoundingSphere(sphere);
@@ -87,8 +87,8 @@ async function createUnitsGaussianDensityVolume(ctx: VisualContext, unit: Unit,
 
     const unitToCartn = Mat4.mul(Mat4(), transform, Mat4.fromScaling(Mat4(), gridDim));
     const cellDim = Mat4.getScaling(Vec3(), transform);
-
-    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, directVolume);
+    const axisOrder = Vec3.create(0, 1, 2);
+    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, axisOrder, directVolume);
 
     const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, props.radiusOffset + getUnitExtraRadius(unit));
     vol.setBoundingSphere(sphere);

src/mol-repr/volume/direct-volume.ts

@@ -48,7 +48,8 @@ export function createDirectVolume2d(ctx: RuntimeContext, webgl: WebGLContext, v
     texture.load(textureImage);
 
     const { unitToCartn, cellDim } = getUnitToCartn(volume.grid);
-    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, directVolume);
+    const axisOrder = volume.grid.cells.space.axisOrderSlowToFast as Vec3;
+    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, axisOrder, directVolume);
 }
 
 // 3d volume texture
@@ -89,7 +90,8 @@ export function createDirectVolume3d(ctx: RuntimeContext, webgl: WebGLContext, v
     texture.load(textureVolume);
 
     const { unitToCartn, cellDim } = getUnitToCartn(volume.grid);
-    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, directVolume);
+    const axisOrder = volume.grid.cells.space.axisOrderSlowToFast as Vec3;
+    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, axisOrder, directVolume);
 }
 
 //
@@ -104,9 +106,7 @@ export async function createDirectVolume(ctx: VisualContext, volume: Volume, the
 }
 
 function getLoci(volume: Volume, props: PD.Values<DirectVolumeParams>) {
-    return props.renderMode.name === 'isosurface'
-        ? Volume.Isosurface.Loci(volume, props.renderMode.params.isoValue)
-        : Volume.Loci(volume);
+    return Volume.Loci(volume);
 }
 
 export function getDirectVolumeLoci(pickingId: PickingId, volume: Volume, props: DirectVolumeProps, id: number) {
@@ -118,9 +118,7 @@ export function getDirectVolumeLoci(pickingId: PickingId, volume: Volume, props:
 }
 
 export function eachDirectVolume(loci: Loci, volume: Volume, props: DirectVolumeProps, apply: (interval: Interval) => boolean) {
-    const isoValue = props.renderMode.name === 'isosurface'
-        ? props.renderMode.params.isoValue : undefined;
-    return eachVolumeLoci(loci, volume, isoValue, apply);
+    return eachVolumeLoci(loci, volume, undefined, apply);
 }
 
 //
@@ -131,9 +129,7 @@ export const DirectVolumeParams = {
 };
 export type DirectVolumeParams = typeof DirectVolumeParams
 export function getDirectVolumeParams(ctx: ThemeRegistryContext, volume: Volume) {
-    const p = PD.clone(DirectVolumeParams);
-    p.renderMode = DirectVolume.createRenderModeParam(volume.grid.stats);
-    return p;
+    return PD.clone(DirectVolumeParams);
 }
 export type DirectVolumeProps = PD.Values<DirectVolumeParams>
 
@@ -164,7 +160,7 @@ export const DirectVolumeRepresentationProvider = VolumeRepresentationProvider({
     factory: DirectVolumeRepresentation,
     getParams: getDirectVolumeParams,
     defaultValues: PD.getDefaultValues(DirectVolumeParams),
-    defaultColorTheme: { name: 'uniform' },
+    defaultColorTheme: { name: 'volume-value' },
     defaultSizeTheme: { name: 'uniform' },
     isApplicable: (volume: Volume) => !Volume.isEmpty(volume)
 });

src/mol-repr/volume/slice.ts

@@ -21,7 +21,7 @@ import { transformPositionArray } from '../../mol-geo/util';
 import { RenderableState } from '../../mol-gl/renderable';
 import { Color } from '../../mol-util/color';
 import { ColorTheme } from '../../mol-theme/color';
-import { encodeFloatRGBtoArray } from '../../mol-util/float-packing';
+import { packIntToRGBArray } from '../../mol-util/number-packing';
 import { eachVolumeLoci } from './util';
 
 export async function createImage(ctx: VisualContext, volume: Volume, theme: Theme, props: PD.Values<SliceParams>, image?: Image) {
@@ -116,7 +116,7 @@ function getPackedGroupArray(grid: Grid, props: PD.Values<SliceParams>) {
     for (let iy = y0; iy < ny; ++iy) {
         for (let ix = x0; ix < nx; ++ix) {
             for (let iz = z0; iz < nz; ++iz) {
-                encodeFloatRGBtoArray(space.dataOffset(ix, iy, iz), groupArray, j);
+                packIntToRGBArray(space.dataOffset(ix, iy, iz), groupArray, j);
                 j += 4;
             }
         }

src/mol-repr/volume/util.ts

@@ -9,7 +9,7 @@ import { Loci } from '../../mol-model/loci';
 import { Interval, OrderedSet } from '../../mol-data/int';
 import { equalEps } from '../../mol-math/linear-algebra/3d/common';
 import { Vec3 } from '../../mol-math/linear-algebra/3d/vec3';
-import { encodeFloatRGBtoArray } from '../../mol-util/float-packing';
+import { packIntToRGBArray } from '../../mol-util/number-packing';
 
 // avoiding namespace lookup improved performance in Chrome (Aug 2020)
 const v3set = Vec3.set;
@@ -110,7 +110,7 @@ export function createVolumeTexture2d(volume: Volume, variant: 'normals' | 'grou
                     array[index] = Math.round(((data[offset] - min) / diff) * 255);
                 } else {
                     if (variant === 'groups') {
-                        encodeFloatRGBtoArray(offset, array, index);
+                        packIntToRGBArray(offset, array, index);
                     } else {
                         v3set(n0,
                             data[o(Math.max(0, x - 1), y, z)],

src/mol-theme/color.ts

@@ -36,6 +36,7 @@ import { PartialChargeColorThemeProvider } from './color/partial-charge';
 import { AtomIdColorThemeProvider } from './color/atom-id';
 import { EntityIdColorThemeProvider } from './color/entity-id';
 import { TextureFilter } from '../mol-gl/webgl/texture';
+import { VolumeValueColorThemeProvider } from './color/volume-value';
 
 export type LocationColor = (location: Location, isSecondary: boolean) => Color
 
@@ -120,6 +121,7 @@ namespace ColorTheme {
         'uncertainty': UncertaintyColorThemeProvider,
         'unit-index': UnitIndexColorThemeProvider,
         'uniform': UniformColorThemeProvider,
+        'volume-value': VolumeValueColorThemeProvider,
     };
     type _BuiltIn = typeof BuiltIn
     export type BuiltIn = keyof _BuiltIn

src/mol-theme/color/volume-value.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ColorTheme } from '../color';
+import { Color, ColorScale } from '../../mol-util/color';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { ThemeDataContext } from '../theme';
+import { ColorNames } from '../../mol-util/color/names';
+
+const DefaultColor = Color(0xCCCCCC);
+const Description = 'Assign color based on the given value of a volume cell.';
+
+export const VolumeValueColorThemeParams = {
+    colorList: PD.ColorList({
+        kind: 'interpolate',
+        colors: [
+            [ColorNames.white, 0],
+            [ColorNames.red, 0.25],
+            [ColorNames.white, 0.5],
+            [ColorNames.blue, 0.75],
+            [ColorNames.white, 1]
+        ]
+    }, { offsets: true, isEssential: true }),
+};
+export type VolumeValueColorThemeParams = typeof VolumeValueColorThemeParams
+export function getVolumeValueColorThemeParams(ctx: ThemeDataContext) {
+    return VolumeValueColorThemeParams; // TODO return copy
+}
+
+export function VolumeValueColorTheme(ctx: ThemeDataContext, props: PD.Values<VolumeValueColorThemeParams>): ColorTheme<VolumeValueColorThemeParams> {
+    const scale = ColorScale.create({ domain: [0, 1], listOrName: props.colorList.colors });
+
+    const colors: Color[] = [];
+    for (let i = 0; i < 256; ++i) {
+        colors[i] = scale.color(i / 255);
+    }
+
+    const palette: ColorTheme.Palette = { colors, filter: 'linear' };
+
+    return {
+        factory: VolumeValueColorTheme,
+        granularity: 'direct',
+        color: () => DefaultColor,
+        props: props,
+        description: Description,
+        legend: scale.legend,
+        palette,
+    };
+}
+
+export const VolumeValueColorThemeProvider: ColorTheme.Provider<VolumeValueColorThemeParams, 'volume-value'> = {
+    name: 'volume-value',
+    label: 'Volume Value',
+    category: ColorTheme.Category.Misc,
+    factory: VolumeValueColorTheme,
+    getParams: getVolumeValueColorThemeParams,
+    defaultValues: PD.getDefaultValues(VolumeValueColorThemeParams),
+    isApplicable: (ctx: ThemeDataContext) => !!ctx.volume,
+};

src/mol-util/float-packing.ts → src/mol-util/number-packing.ts

@@ -1,26 +1,16 @@
 /**
- * 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>
  */
 
 import { clamp } from '../mol-math/interpolate';
-import { fasterExp, fasterLog } from '../mol-math/approx';
 import { Vec3, Vec4 } from '../mol-math/linear-algebra';
 import { NumberArray } from './type-helpers';
 
-const maxFloat = 10000.0; // NOTE same constant is set in shaders
-const floatLogFactor = fasterLog(maxFloat + 1);
-
-/** encode float logarithmically */
-export function encodeFloatLog(value: number) { return fasterLog(value + 1) / floatLogFactor; }
-
-/** decode logarithmically encoded float */
-export function decodeFloatLog(value: number) { return fasterExp(value * floatLogFactor) - 1; }
-
-/** encode float as rgb triplet into array at offset */
-export function encodeFloatRGBtoArray(value: number, array: NumberArray, offset: number) {
-    value = clamp(value, 0, 16777216 - 1) + 1;
+/** encode positive integer as rgb byte triplet into array at offset */
+export function packIntToRGBArray(value: number, array: NumberArray, offset: number) {
+    value = clamp(Math.round(value), 0, 16777216 - 1) + 1;
     array[offset + 2] = value % 256;
     value = Math.floor(value / 256);
     array[offset + 1] = value % 256;
@@ -29,8 +19,8 @@ export function encodeFloatRGBtoArray(value: number, array: NumberArray, offset:
     return array;
 }
 
-/** decode float encoded as rgb triplet */
-export function decodeFloatRGB(r: number, g: number, b: number) {
+/** decode positive integer encoded as rgb byte triplet */
+export function unpackRGBToInt(r: number, g: number, b: number) {
     return (Math.floor(r) * 256 * 256 + Math.floor(g) * 256 + Math.floor(b)) - 1;
 }