render optimizations

src/mol-canvas3d/canvas3d.ts

@@ -34,14 +34,12 @@ export const Canvas3DParams = {
     // maxFps: PD.Numeric(30),
     cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]),
     backgroundColor: PD.Color(Color(0x000000)),
-    // TODO: make this an interval?
     clip: PD.Interval([1, 100], { min: 1, max: 100, step: 1 }),
     fog: PD.Interval([50, 100], { min: 1, max: 100, step: 1 }),
     pickingAlphaThreshold: PD.Numeric(0.5, { min: 0.0, max: 1.0, step: 0.01 }, { description: 'The minimum opacity value needed for an object to be pickable.' }),
-    showBoundingSpheres: PD.Boolean(false, { description: 'Show bounding spheres of render objects.' }),
-    // debug: PD.Group({
-    //     showBoundingSpheres: PD.Boolean(false, { description: 'Show bounding spheres of render objects.' }),
-    // })
+    debug: PD.Group({
+        showBoundingSpheres: PD.Boolean(false, { description: 'Show bounding spheres of render objects.' }),
+    })
 }
 export type Canvas3DParams = PD.Values<typeof Canvas3DParams>
 
@@ -130,7 +128,7 @@ namespace Canvas3D {
         let drawPending = false
         let lastRenderTime = -1
 
-        const boundingSphereHelper = new BoundingSphereHelper(scene, p.showBoundingSpheres)
+        const boundingSphereHelper = new BoundingSphereHelper(scene, p.debug.showBoundingSpheres)
 
         function getLoci(pickingId: PickingId) {
             let loci: Loci = EmptyLoci
@@ -154,8 +152,7 @@ namespace Canvas3D {
                 }
             })
             if (changed) {
-                // console.log('changed')
-                scene.update()
+                scene.update(true)
                 draw(true)
                 pickDirty = false // picking buffers should not have changed
             }
@@ -388,8 +385,8 @@ namespace Canvas3D {
                 if (props.pickingAlphaThreshold !== undefined && props.pickingAlphaThreshold !== renderer.props.pickingAlphaThreshold) {
                     renderer.setPickingAlphaThreshold(props.pickingAlphaThreshold)
                 }
-                if (props.showBoundingSpheres !== undefined) {
-                    boundingSphereHelper.visible = props.showBoundingSpheres
+                if (props.debug && props.debug.showBoundingSpheres !== undefined) {
+                    boundingSphereHelper.visible = props.debug.showBoundingSpheres
                 }
                 requestDraw(true)
             },
@@ -401,7 +398,9 @@ namespace Canvas3D {
                     clip: p.clip,
                     fog: p.fog,
                     pickingAlphaThreshold: renderer.props.pickingAlphaThreshold,
-                    showBoundingSpheres: boundingSphereHelper.visible
+                    debug: {
+                        showBoundingSpheres: boundingSphereHelper.visible
+                    }
                 }
             },
             get input() {

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

@@ -20,7 +20,7 @@ export class BoundingSphereHelper {
         const builder = MeshBuilder.create(1024, 512)
         this.mesh = builder.getMesh()
         const values = Mesh.createValuesSimple(this.mesh, { alpha: 0.1, doubleSided: false })
-        this.renderObject = createMeshRenderObject(values, { visible, pickable: false })
+        this.renderObject = createMeshRenderObject(values, { visible, pickable: false, opaque: false })
         scene.add(this.renderObject)
     }
 

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

@@ -20,6 +20,7 @@ import { Geometry } from '../geometry';
 import { transformPositionArray } from 'mol-geo/util';
 import { calculateBoundingSphere } from 'mol-gl/renderable/util';
 import { Theme } from 'mol-theme/theme';
+import { RenderableState } from 'mol-gl/renderable';
 
 const VolumeBox = Box()
 const RenderModeOptions = [['isosurface', 'Isosurface'], ['volume', 'Volume']] as [string, string][]
@@ -144,4 +145,15 @@ export namespace DirectVolume {
             ValueCell.update(values.boundingSphere, boundingSphere)
         }
     }
+
+    export function createRenderableState(props: PD.Values<Params>): RenderableState {
+        const state = Geometry.createRenderableState(props)
+        updateRenderableState(state, props)
+        return state
+    }
+
+    export function updateRenderableState(state: RenderableState, props: PD.Values<Params>) {
+        Geometry.updateRenderableState(state, props)
+        state.opaque = false
+    }
 }

src/mol-geo/geometry/geometry.ts

@@ -91,19 +91,18 @@ export namespace Geometry {
         ValueCell.updateIfChanged(values.uAlpha, props.alpha)
         ValueCell.updateIfChanged(values.dUseFog, props.useFog)
     }
-}
-
-//
 
-export function createRenderableState(props: PD.Values<Geometry.Params>): RenderableState {
-    return {
-        visible: true,
-        pickable: true,
+    export function createRenderableState(props: PD.Values<Params>): RenderableState {
+        return {
+            visible: true,
+            pickable: true,
+            opaque: props.alpha === 1
+        }
+    }
+    
+    export function updateRenderableState(state: RenderableState, props: PD.Values<Params>) {
+        state.opaque = props.alpha === 1
     }
-}
-
-export function updateRenderableState(state: RenderableState, props: PD.Values<Geometry.Params>) {
-
 }
 
 //

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

@@ -18,6 +18,7 @@ import { calculateBoundingSphere } from 'mol-gl/renderable/util';
 import { Sphere3D } from 'mol-math/geometry';
 import { Theme } from 'mol-theme/theme';
 import { PointsValues } from 'mol-gl/renderable/points';
+import { RenderableState } from 'mol-gl/renderable';
 
 /** Point cloud */
 export interface Points {
@@ -107,4 +108,15 @@ export namespace Points {
             ValueCell.update(values.boundingSphere, boundingSphere)
         }
     }
+
+    export function createRenderableState(props: PD.Values<Params>): RenderableState {
+        const state = Geometry.createRenderableState(props)
+        updateRenderableState(state, props)
+        return state
+    }
+
+    export function updateRenderableState(state: RenderableState, props: PD.Values<Params>) {
+        Geometry.updateRenderableState(state, props)
+        state.opaque = state.opaque && !props.pointFilledCircle && props.pointEdgeBleach === 0
+    }
 }

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

@@ -86,6 +86,7 @@ function createPoints() {
     const state: RenderableState = {
         visible: true,
         pickable: true,
+        opaque: true
     }
 
     return createPointsRenderObject(values, state)

src/mol-gl/renderable.ts

@@ -14,13 +14,13 @@ import { ValueCell } from 'mol-util';
 export type RenderableState = {
     visible: boolean
     pickable: boolean
+    opaque: boolean
 }
 
 export interface Renderable<T extends RenderableValues> {
     readonly values: T
     readonly state: RenderableState
     readonly boundingSphere: Sphere3D
-    readonly opaque: boolean
 
     render: (variant: RenderVariant) => void
     getProgram: (variant: RenderVariant) => Program
@@ -32,15 +32,14 @@ export function createRenderable<T extends Values<RenderableSchema>>(renderItem:
     let boundingSphere: Sphere3D = Sphere3D.create(Vec3.zero(), 50)
 
     return {
-        get values () { return values },
-        get state () { return state },
+        values,
+        state,
         get boundingSphere () {
             if (values.boundingSphere) {
                 Sphere3D.copy(boundingSphere, values.boundingSphere.ref.value)
             }
             return boundingSphere
         },
-        get opaque () { return values.uAlpha && values.uAlpha.ref.value === 1 },
 
         render: (variant: RenderVariant) => {
             if (values.uPickable) {

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

@@ -65,7 +65,5 @@ export function DirectVolumeRenderable(ctx: WebGLContext, id: number, values: Di
     const renderItem = createRenderItem(ctx, 'triangles', shaderCode, schema, { ...values, ...internalValues })
     const renderable = createRenderable(renderItem, values, state);
 
-    Object.defineProperty(renderable, 'opaque', { get: () => false });
-
     return renderable
 }

src/mol-gl/renderable/points.ts

@@ -32,10 +32,5 @@ export function PointsRenderable(ctx: WebGLContext, id: number, values: PointsVa
     const renderItem = createRenderItem(ctx, 'points', shaderCode, schema, { ...values, ...internalValues })
     const renderable = createRenderable(renderItem, values, state);
 
-    const isOpaque = Object.getOwnPropertyDescriptor(renderable, 'opaque')!.get as () => boolean
-    Object.defineProperty(renderable, 'opaque', {
-        get: () => isOpaque() && !values.dPointFilledCircle.ref.value && values.uPointEdgeBleach.ref.value === 0
-    });
-
     return renderable
 }

src/mol-gl/renderer.ts

@@ -140,7 +140,7 @@ namespace Renderer {
                     gl.cullFace(gl.BACK)
                 }
 
-                gl.depthMask(r.opaque)
+                gl.depthMask(r.state.opaque)
 
                 r.render(variant)
             }

src/mol-gl/scene.ts

@@ -57,7 +57,7 @@ interface Scene extends Object3D {
     readonly count: number
     readonly boundingSphere: Sphere3D
 
-    update: () => void
+    update: (keepBoundingSphere?: boolean) => void
     add: (o: RenderObject) => void
     remove: (o: RenderObject) => void
     clear: () => void
@@ -80,10 +80,10 @@ namespace Scene {
             get direction () { return object3d.direction },
             get up () { return object3d.up },
 
-            update: () => {
+            update: (keepBoundingSphere?: boolean) => {
                 Object3D.update(object3d)
                 renderableMap.forEach(r => r.update())
-                boundingSphereDirty = true
+                if (!keepBoundingSphere) boundingSphereDirty = true
             },
 
             add: (o: RenderObject) => {
@@ -112,12 +112,12 @@ namespace Scene {
             },
             eachOpaque: (callbackFn: (value: Renderable<any>, key: RenderObject) => void) => {
                 renderableMap.forEach((r, o) => {
-                    if (r.opaque) callbackFn(r, o)
+                    if (r.state.opaque) callbackFn(r, o)
                 })
             },
             eachTransparent: (callbackFn: (value: Renderable<any>, key: RenderObject) => void) => {
                 renderableMap.forEach((r, o) => {
-                    if (!r.opaque) callbackFn(r, o)
+                    if (!r.state.opaque) callbackFn(r, o)
                 })
             },
             get count() {

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

@@ -233,6 +233,7 @@ function getGaussianDensityRenderObject(webgl: WebGLContext, drawCount: number,
     const state: RenderableState = {
         visible: true,
         pickable: false,
+        opaque: true
     }
 
     const renderObject = createGaussianDensityRenderObject(values, state)

src/mol-repr/shape/representation.ts

@@ -14,7 +14,7 @@ import { OrderedSet, Interval } from 'mol-data/int';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { Mesh } from 'mol-geo/geometry/mesh/mesh';
 import { createIdentityTransform } from 'mol-geo/geometry/transform-data';
-import { createRenderableState } from 'mol-geo/geometry/geometry';
+import { Geometry } from 'mol-geo/geometry/geometry';
 import { PickingId } from 'mol-geo/geometry/picking';
 import { MarkerAction, applyMarkerAction } from 'mol-geo/geometry/marker-data';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
@@ -56,7 +56,7 @@ export function ShapeRepresentation<P extends ShapeParams>(ctx: RepresentationCo
             const transform = createIdentityTransform()
 
             const values = Mesh.createValues(mesh, transform, locationIt, _theme, currentProps)
-            const state = createRenderableState(currentProps)
+            const state = Geometry.createRenderableState(currentProps)
 
             _renderObject = createMeshRenderObject(values, state)
             renderObjects.push(_renderObject)

src/mol-repr/structure/complex-visual.ts

@@ -15,7 +15,7 @@ import { Interval } from 'mol-data/int';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { RenderableValues } from 'mol-gl/renderable/schema';
 import { createSizes } from 'mol-geo/geometry/size-data';
-import { Geometry, updateRenderableState } from 'mol-geo/geometry/geometry';
+import { Geometry } from 'mol-geo/geometry/geometry';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
 import { PickingId } from 'mol-geo/geometry/picking';
 import { createColors } from 'mol-geo/geometry/color-data';
@@ -25,6 +25,7 @@ import { VisualUpdateState } from 'mol-repr/util';
 import { Theme, createEmptyTheme } from 'mol-theme/theme';
 import { ColorTheme } from 'mol-theme/color';
 import { SizeTheme } from 'mol-theme/size';
+import { RenderableState } from 'mol-gl/renderable';
 
 export interface  ComplexVisual<P extends StructureParams> extends Visual<Structure, P> { }
 
@@ -50,11 +51,12 @@ interface ComplexVisualGeometryBuilder<P extends ComplexParams, G extends Geomet
     createRenderObject(structure: Structure, geometry: Geometry, locationIt: LocationIterator, theme: Theme, currentProps: PD.Values<P>): ComplexRenderObject
     updateValues(values: RenderableValues, newProps: PD.Values<P>): void,
     updateBoundingSphere(values: RenderableValues, geometry: Geometry): void
+    updateRenderableState(state: RenderableState, props: PD.Values<P>): void
 }
 
 export function ComplexVisual<P extends ComplexParams>(builder: ComplexVisualGeometryBuilder<P, Geometry>): ComplexVisual<P> {
     const { defaultProps, createGeometry, createLocationIterator, getLoci, mark, setUpdateState } = builder
-    const { createRenderObject, updateValues, updateBoundingSphere } = builder
+    const { createRenderObject, updateValues, updateBoundingSphere, updateRenderableState } = builder
     const updateState = VisualUpdateState.create()
 
     let renderObject: ComplexRenderObject | undefined
@@ -221,6 +223,7 @@ export function ComplexMeshVisual<P extends ComplexMeshParams>(builder: ComplexM
         createEmptyGeometry: Mesh.createEmpty,
         createRenderObject: createComplexMeshRenderObject,
         updateValues: Mesh.updateValues,
-        updateBoundingSphere: Mesh.updateBoundingSphere
+        updateBoundingSphere: Mesh.updateBoundingSphere,
+        updateRenderableState: Geometry.updateRenderableState
     })
 }

src/mol-repr/structure/units-visual.ts

@@ -14,7 +14,7 @@ import { deepEqual, ValueCell } from 'mol-util';
 import { Interval } from 'mol-data/int';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { RenderableValues } from 'mol-gl/renderable/schema';
-import { Geometry, updateRenderableState } from 'mol-geo/geometry/geometry';
+import { Geometry } from 'mol-geo/geometry/geometry';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
 import { PickingId } from 'mol-geo/geometry/picking';
 import { createMarkers, MarkerAction, applyMarkerAction } from 'mol-geo/geometry/marker-data';
@@ -29,6 +29,7 @@ import { Theme, createEmptyTheme } from 'mol-theme/theme';
 import { ColorTheme } from 'mol-theme/color';
 import { SizeTheme } from 'mol-theme/size';
 import { UnitsParams } from './units-representation';
+import { RenderableState } from 'mol-gl/renderable';
 
 export type StructureGroup = { structure: Structure, group: Unit.SymmetryGroup }
 
@@ -50,11 +51,12 @@ interface UnitsVisualGeometryBuilder<P extends UnitsParams, G extends Geometry>
     createRenderObject(group: Unit.SymmetryGroup, geometry: Geometry, locationIt: LocationIterator, theme: Theme, currentProps: PD.Values<P>): UnitsRenderObject
     updateValues(values: RenderableValues, newProps: PD.Values<P>): void
     updateBoundingSphere(values: RenderableValues, geometry: Geometry): void
+    updateRenderableState(state: RenderableState, props: PD.Values<P>): void
 }
 
 export function UnitsVisual<P extends UnitsParams>(builder: UnitsVisualGeometryBuilder<P, Geometry>): UnitsVisual<P> {
     const { defaultProps, createGeometry, createLocationIterator, getLoci, mark, setUpdateState } = builder
-    const { createEmptyGeometry, createRenderObject, updateValues, updateBoundingSphere } = builder
+    const { createEmptyGeometry, createRenderObject, updateValues, updateBoundingSphere, updateRenderableState } = builder
     const updateState = VisualUpdateState.create()
 
     let renderObject: UnitsRenderObject | undefined
@@ -263,7 +265,8 @@ export function UnitsMeshVisual<P extends UnitsMeshParams>(builder: UnitsMeshVis
         createEmptyGeometry: Mesh.createEmpty,
         createRenderObject: createUnitsMeshRenderObject,
         updateValues: Mesh.updateValues,
-        updateBoundingSphere: Mesh.updateBoundingSphere
+        updateBoundingSphere: Mesh.updateBoundingSphere,
+        updateRenderableState: Geometry.updateRenderableState
     })
 }
 
@@ -286,7 +289,8 @@ export function UnitsPointsVisual<P extends UnitsPointsParams>(builder: UnitsPoi
             if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
         },
         updateValues: Points.updateValues,
-        updateBoundingSphere: Points.updateBoundingSphere
+        updateBoundingSphere: Points.updateBoundingSphere,
+        updateRenderableState: Points.updateRenderableState
     })
 }
 
@@ -309,7 +313,8 @@ export function UnitsLinesVisual<P extends UnitsLinesParams>(builder: UnitsLines
             if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
         },
         updateValues: Lines.updateValues,
-        updateBoundingSphere: Lines.updateBoundingSphere
+        updateBoundingSphere: Lines.updateBoundingSphere,
+        updateRenderableState: Geometry.updateRenderableState
     })
 }
 
@@ -332,6 +337,7 @@ export function UnitsDirectVolumeVisual<P extends UnitsDirectVolumeParams>(build
             if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
         },
         updateValues: DirectVolume.updateValues,
-        updateBoundingSphere: DirectVolume.updateBoundingSphere
+        updateBoundingSphere: DirectVolume.updateBoundingSphere,
+        updateRenderableState: DirectVolume.updateRenderableState
     })
 }

src/mol-repr/structure/visual/util/common.ts

@@ -10,7 +10,7 @@ import { Mat4 } from 'mol-math/linear-algebra';
 import { TransformData, createTransform, createIdentityTransform } from 'mol-geo/geometry/transform-data';
 import { Mesh } from 'mol-geo/geometry/mesh/mesh';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
-import { createRenderableState } from 'mol-geo/geometry/geometry';
+import { Geometry } from 'mol-geo/geometry/geometry';
 import { Points } from 'mol-geo/geometry/points/points';
 import { Lines } from 'mol-geo/geometry/lines/lines';
 import { DirectVolume } from 'mol-geo/geometry/direct-volume/direct-volume';
@@ -72,14 +72,14 @@ export function includesUnitKind(unitKinds: UnitKind[], unit: Unit) {
 export function createComplexMeshRenderObject(structure: Structure, mesh: Mesh, locationIt: LocationIterator, theme: Theme, props: PD.Values<StructureMeshParams>) {
     const transform = createIdentityTransform()
     const values = Mesh.createValues(mesh, transform, locationIt, theme, props)
-    const state = createRenderableState(props)
+    const state = Geometry.createRenderableState(props)
     return createMeshRenderObject(values, state)
 }
 
 export function createUnitsMeshRenderObject(group: Unit.SymmetryGroup, mesh: Mesh, locationIt: LocationIterator, theme: Theme, props: PD.Values<StructureMeshParams>) {
     const transform = createUnitsTransform(group)
     const values = Mesh.createValues(mesh, transform, locationIt, theme, props)
-    const state = createRenderableState(props)
+    const state = Geometry.createRenderableState(props)
     return createMeshRenderObject(values, state)
 }
 
@@ -88,7 +88,7 @@ export function createUnitsMeshRenderObject(group: Unit.SymmetryGroup, mesh: Mes
 export function createUnitsPointsRenderObject(group: Unit.SymmetryGroup, points: Points, locationIt: LocationIterator, theme: Theme, props: PD.Values<StructurePointsParams>) {
     const transform = createUnitsTransform(group)
     const values = Points.createValues(points, transform, locationIt, theme, props)
-    const state = createRenderableState(props)
+    const state = Points.createRenderableState(props)
     return createPointsRenderObject(values, state)
 }
 
@@ -97,7 +97,7 @@ export function createUnitsPointsRenderObject(group: Unit.SymmetryGroup, points:
 export function createUnitsLinesRenderObject(group: Unit.SymmetryGroup, lines: Lines, locationIt: LocationIterator, theme: Theme, props: PD.Values<StructureLinesParams>) {
     const transform = createUnitsTransform(group)
     const values = Lines.createValues(lines, transform, locationIt, theme, props)
-    const state = createRenderableState(props)
+    const state = Geometry.createRenderableState(props)
     return createLinesRenderObject(values, state)
 }
 
@@ -106,6 +106,6 @@ export function createUnitsLinesRenderObject(group: Unit.SymmetryGroup, lines: L
 export function createUnitsDirectVolumeRenderObject(group: Unit.SymmetryGroup, directVolume: DirectVolume, locationIt: LocationIterator, theme: Theme, props: PD.Values<StructureDirectVolumeParams>) {
     const transform = createUnitsTransform(group)
     const values = DirectVolume.createValues(directVolume, transform, locationIt, theme, props)
-    const state = createRenderableState(props)
+    const state = DirectVolume.createRenderableState(props)
     return createDirectVolumeRenderObject(values, state)
 }

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

@@ -17,7 +17,7 @@ import { createTexture } from 'mol-gl/webgl/texture';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
 import { createIdentityTransform } from 'mol-geo/geometry/transform-data';
 import { DirectVolume } from 'mol-geo/geometry/direct-volume/direct-volume';
-import { Geometry, createRenderableState } from 'mol-geo/geometry/geometry';
+import { Geometry } from 'mol-geo/geometry/geometry';
 import { VisualUpdateState } from 'mol-repr/util';
 import { VisualContext, RepresentationContext, RepresentationParamsGetter } from 'mol-repr/representation';
 import { Theme, ThemeRegistryContext } from 'mol-theme/theme';
@@ -175,11 +175,12 @@ export function DirectVolumeVisual(): VolumeVisual<DirectVolumeParams> {
         createRenderObject: (geometry: DirectVolume, locationIt: LocationIterator, theme: Theme, props: PD.Values<DirectVolumeParams>) => {
             const transform = createIdentityTransform()
             const values = DirectVolume.createValues(geometry, transform, locationIt, theme, props)
-            const state = createRenderableState(props)
+            const state = DirectVolume.createRenderableState(props)
             return createDirectVolumeRenderObject(values, state)
         },
         updateValues: DirectVolume.updateValues,
-        updateBoundingSphere: DirectVolume.updateBoundingSphere
+        updateBoundingSphere: DirectVolume.updateBoundingSphere,
+        updateRenderableState: DirectVolume.updateRenderableState
     })
 }
 

src/mol-repr/volume/isosurface-mesh.ts

@@ -14,7 +14,7 @@ import { Mesh } from 'mol-geo/geometry/mesh/mesh';
 import { computeMarchingCubesMesh } from 'mol-geo/util/marching-cubes/algorithm';
 import { LocationIterator } from 'mol-geo/util/location-iterator';
 import { createIdentityTransform } from 'mol-geo/geometry/transform-data';
-import { createRenderableState } from 'mol-geo/geometry/geometry';
+import { Geometry } from 'mol-geo/geometry/geometry';
 import { VisualUpdateState } from 'mol-repr/util';
 import { VisualContext, RepresentationContext, RepresentationParamsGetter } from 'mol-repr/representation';
 import { Theme, ThemeRegistryContext } from 'mol-theme/theme';
@@ -60,11 +60,12 @@ export function IsosurfaceVisual(): VolumeVisual<IsosurfaceParams> {
         createRenderObject: (geometry: Mesh, locationIt: LocationIterator, theme: Theme, props: PD.Values<IsosurfaceParams>) => {
             const transform = createIdentityTransform()
             const values = Mesh.createValues(geometry, transform, locationIt, theme, props)
-            const state = createRenderableState(props)
+            const state = Geometry.createRenderableState(props)
             return createMeshRenderObject(values, state)
         },
         updateValues: Mesh.updateValues,
-        updateBoundingSphere: Mesh.updateBoundingSphere
+        updateBoundingSphere: Mesh.updateBoundingSphere,
+        updateRenderableState: Geometry.updateRenderableState
     })
 }
 

src/mol-repr/volume/representation.ts

@@ -8,7 +8,7 @@ import { Task } from 'mol-task'
 import { Representation, Visual, RepresentationContext, VisualContext, RepresentationProvider, RepresentationParamsGetter } from '../representation';
 import { VolumeData } from 'mol-model/volume';
 import { Loci, EmptyLoci, isEveryLoci } from 'mol-model/loci';
-import { Geometry, updateRenderableState } from 'mol-geo/geometry/geometry';
+import { Geometry } from 'mol-geo/geometry/geometry';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { PickingId } from 'mol-geo/geometry/picking';
 import { MarkerAction, applyMarkerAction } from 'mol-geo/geometry/marker-data';
@@ -21,6 +21,7 @@ import { VisualUpdateState } from 'mol-repr/util';
 import { ValueCell } from 'mol-util';
 import { Theme, createEmptyTheme } from 'mol-theme/theme';
 import { Subject } from 'rxjs';
+import { RenderableState } from 'mol-gl/renderable';
 
 export interface VolumeVisual<P extends VolumeParams> extends Visual<VolumeData, P> { }
 
@@ -38,11 +39,12 @@ interface VolumeVisualGeometryBuilder<P extends VolumeParams, G extends Geometry
     createRenderObject(geometry: G, locationIt: LocationIterator, theme: Theme, currentProps: PD.Values<P>): VolumeRenderObject
     updateValues(values: RenderableValues, newProps: PD.Values<P>): void,
     updateBoundingSphere(values: RenderableValues, geometry: G): void
+    updateRenderableState(state: RenderableState, props: PD.Values<P>): void
 }
 
 export function VolumeVisual<P extends VolumeParams>(builder: VolumeVisualGeometryBuilder<P, Geometry>): VolumeVisual<P> {
     const { defaultProps, createGeometry, getLoci, mark, setUpdateState } = builder
-    const { createRenderObject, updateValues, updateBoundingSphere } = builder
+    const { createRenderObject, updateValues, updateBoundingSphere, updateRenderableState } = builder
     const updateState = VisualUpdateState.create()
 
     let currentProps: PD.Values<P>