wip, render-object, depth-mask

src/mol-app/ui/transform/spacefill.tsx

@@ -17,7 +17,6 @@ import { SpacefillUpdate } from 'mol-view/state/transform'
 import { StateContext } from 'mol-view/state/context';
 import { ColorTheme } from 'mol-geo/theme';
 import { Color, ColorNames } from 'mol-util/color';
-import { Query, Queries as Q } from 'mol-model/structure';
 import { Slider } from '../controls/slider';
 
 export const ColorThemeInfo = {
@@ -36,6 +35,7 @@ interface SpacefillState {
     colorValue: Color
     visible: boolean
     alpha: number
+    depthMask: boolean
 }
 
 export class Spacefill extends View<Controller<any>, SpacefillState, { transform: SpacefillUpdate, entity: SpacefillEntity, ctx: StateContext }> {
@@ -45,7 +45,8 @@ export class Spacefill extends View<Controller<any>, SpacefillState, { transform
         colorTheme: { name: 'element-symbol' } as ColorTheme,
         colorValue: 0x000000,
         visible: true,
-        alpha: 1
+        alpha: 1,
+        depthMask: true
     }
 
     update(state?: Partial<SpacefillState>) {
@@ -151,7 +152,16 @@ export class Spacefill extends View<Controller<any>, SpacefillState, { transform
                                 />
                             </div>
                         </div>
-                        {/* <div className='molstar-control-row molstar-options-group'>
+                        <div className='molstar-control-row molstar-options-group'>
+                            <div>
+                                <Toggle
+                                    value={this.state.depthMask}
+                                    label='Depth write'
+                                    onChange={value => this.update({ depthMask: value })}
+                                />
+                            </div>
+                        </div>
+                        <div className='molstar-control-row molstar-options-group'>
                             <div>
                                 <Slider
                                     value={this.state.alpha}
@@ -162,7 +172,7 @@ export class Spacefill extends View<Controller<any>, SpacefillState, { transform
                                     onChange={value => this.update({ alpha: value })}
                                 />
                             </div>
-                        </div> */}
+                        </div>
                     </div>
                 </div>
             </div>

src/mol-geo/representation/structure/index.ts

@@ -32,7 +32,8 @@ export const DefaultStructureProps = {
     colorTheme: { name: 'instance-index' } as ColorTheme,
     alpha: 1,
     visible: true,
-    doubleSided: false
+    doubleSided: false,
+    depthMask: true
 }
 export type StructureProps = Partial<typeof DefaultStructureProps>
 

src/mol-geo/representation/structure/point.ts

@@ -22,7 +22,8 @@ export const DefaultPointProps = {
     colorTheme: { name: 'instance-index' } as ColorTheme,
     sizeTheme: { name: 'vdw' } as SizeTheme,
     alpha: 1,
-    visible: true
+    visible: true,
+    depthMask: true
 }
 export type PointProps = Partial<typeof DefaultPointProps>
 
@@ -63,7 +64,7 @@ export default function Point(): UnitsRepresentation<PointProps> {
                 _units = group.units
                 _elements = group.elements;
 
-                const { colorTheme, sizeTheme, alpha, visible } = curProps
+                const { colorTheme, sizeTheme, alpha, visible, depthMask } = curProps
                 const elementCount = _elements.length
                 const unitCount = _units.length
 
@@ -90,6 +91,7 @@ export default function Point(): UnitsRepresentation<PointProps> {
                     objectId: 0,
                     alpha,
                     visible,
+                    depthMask,
 
                     position: ValueCell.create(vertices),
                     id: ValueCell.create(fillSerial(new Float32Array(elementCount))),

src/mol-geo/representation/structure/spacefill.ts

@@ -17,6 +17,7 @@ import { MeshBuilder } from '../../shape/mesh-builder';
 import { createTransforms, createColors } from './utils';
 import VertexMap from '../../shape/vertex-map';
 import { icosahedronVertexCount } from '../../primitive/icosahedron';
+import { deepEqual } from 'mol-util';
 
 export const DefaultSpacefillProps = {
     ...DefaultStructureProps,
@@ -80,7 +81,7 @@ export default function Spacefill(): UnitsRepresentation<SpacefillProps> {
             return Task.create('Spacefill.create', async ctx => {
                 renderObjects.length = 0 // clear
 
-                const { detail, colorTheme, alpha, visible, doubleSided } = { ...DefaultSpacefillProps, ...props }
+                const { detail, colorTheme, alpha, visible, doubleSided, depthMask } = { ...DefaultSpacefillProps, ...props }
 
                 const mesh = await createSpacefillMesh(group.units[0], detail).runAsChild(ctx, 'Computing spacefill mesh')
                 // console.log(mesh)
@@ -98,6 +99,7 @@ export default function Spacefill(): UnitsRepresentation<SpacefillProps> {
                     alpha,
                     visible,
                     doubleSided,
+                    depthMask,
 
                     position: mesh.vertexBuffer,
                     normal: mesh.normalBuffer as ValueCell<Float32Array>,
@@ -119,13 +121,13 @@ export default function Spacefill(): UnitsRepresentation<SpacefillProps> {
 
             return Task.create('Spacefill.update', async ctx => {
                 if (!spheres) return false
-                if (props.detail !== currentProps.detail) return false
-                if (props.colorTheme !== currentProps.colorTheme) return false
-                if (props.detail !== currentProps.detail) return false
+                if (newProps.detail !== currentProps.detail) return false
+                if (!deepEqual(newProps.colorTheme, currentProps.colorTheme)) return false
 
                 spheres.props.alpha = newProps.alpha
                 spheres.props.visible = newProps.visible
                 spheres.props.doubleSided = newProps.doubleSided
+                spheres.props.depthMask = newProps.depthMask
 
                 currentProps = newProps
                 return true

src/mol-geo/representation/volume/surface.ts

@@ -39,7 +39,8 @@ export const DefaultSurfaceProps = {
     visible: true,
     flatShaded: true,
     flipSided: true,
-    doubleSided: true
+    doubleSided: true,
+    depthMask: true
 }
 export type SurfaceProps = Partial<typeof DefaultSurfaceProps>
 
@@ -54,7 +55,7 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
             return Task.create('Point.create', async ctx => {
                 renderObjects.length = 0 // clear
                 curProps = { ...DefaultSurfaceProps, ...props }
-                const { alpha, visible, flatShaded, flipSided, doubleSided } = curProps
+                const { alpha, visible, flatShaded, flipSided, doubleSided, depthMask } = curProps
 
                 const mesh = await computeVolumeSurface(volume, curProps.isoValue).runAsChild(ctx)
                 if (!flatShaded) {
@@ -65,6 +66,7 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
                     objectId: 0,
                     alpha,
                     visible,
+                    depthMask,
 
                     position: mesh.vertexBuffer,
                     normal: mesh.normalBuffer,

src/mol-gl/renderable.ts

@@ -12,6 +12,7 @@ export type BaseProps = {
     objectId: number
     alpha: number
     visible: boolean
+    depthMask: boolean
 
     flatShaded?: boolean
     doubleSided?: boolean

src/mol-gl/renderer.ts

@@ -71,20 +71,6 @@ namespace Renderer {
         const drawObject = (r: Renderable<any>, o: RenderObject) => {
             if (o.props.visible) {
                 if (currentProgramId !== r.program.id) {
-                    if (o.props.doubleSided) {
-                        gl.disable(gl.CULL_FACE)
-                    } else {
-                        gl.enable(gl.CULL_FACE)
-                    }
-
-                    if (o.props.flipSided) {
-                        gl.frontFace(gl.CW)
-                        gl.cullFace(gl.FRONT)
-                    } else {
-                        gl.frontFace(gl.CCW)
-                        gl.cullFace(gl.BACK)
-                    }
-
                     r.program.use()
                     r.program.setUniforms({
                         model,
@@ -100,6 +86,22 @@ namespace Renderer {
                     })
                     currentProgramId = r.program.id
                 }
+                if (o.props.doubleSided) {
+                    gl.disable(gl.CULL_FACE)
+                } else {
+                    gl.enable(gl.CULL_FACE)
+                }
+
+                if (o.props.flipSided) {
+                    gl.frontFace(gl.CW)
+                    gl.cullFace(gl.FRONT)
+                } else {
+                    gl.frontFace(gl.CCW)
+                    gl.cullFace(gl.BACK)
+                }
+
+                gl.depthMask(o.props.depthMask)
+
                 r.draw()
             }
         }
@@ -116,7 +118,6 @@ namespace Renderer {
 
             gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
             gl.enable(gl.BLEND)
-            gl.depthMask(false)
             scene.eachTransparent(drawObject)
         }