diff --git a/src/mol-app/ui/transform/spacefill.tsx b/src/mol-app/ui/transform/spacefill.tsx
index 315f61d31244942541896551336b564ad0582675..62cd9f9a43fbee44e64e23c17b3d312c0c2c017e 100644
--- a/src/mol-app/ui/transform/spacefill.tsx
+++ b/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>
diff --git a/src/mol-geo/representation/structure/index.ts b/src/mol-geo/representation/structure/index.ts
index 0c59898054c003624fe018aebdc1c0930d503f44..e04aea07c9af74a779019441afe966b5fd464e41 100644
--- a/src/mol-geo/representation/structure/index.ts
+++ b/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>
diff --git a/src/mol-geo/representation/structure/point.ts b/src/mol-geo/representation/structure/point.ts
index 5828e518c5fe5f325a0fcdf477c28ef83150eea9..edfdb6cd760707ba3367d7994d7f4acdb0082f8b 100644
--- a/src/mol-geo/representation/structure/point.ts
+++ b/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))),
diff --git a/src/mol-geo/representation/structure/spacefill.ts b/src/mol-geo/representation/structure/spacefill.ts
index 0311cff73dbd20ff5b39c9f31edce1ae795bcea9..0f50f33065a678f3c18beb33c4bc77dd1f1935b3 100644
--- a/src/mol-geo/representation/structure/spacefill.ts
+++ b/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
diff --git a/src/mol-geo/representation/volume/surface.ts b/src/mol-geo/representation/volume/surface.ts
index bc9531ead7527fed500969d8bf22aa1a966c2c9f..3965e54172d1ff1c53b7e11b1afa71d0b874aa24 100644
--- a/src/mol-geo/representation/volume/surface.ts
+++ b/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,
diff --git a/src/mol-gl/renderable.ts b/src/mol-gl/renderable.ts
index d889f89c64a18487b75f82524ed125813dfec47e..48c7f074d6041e555cd04a49091d4eb3bf6d9456 100644
--- a/src/mol-gl/renderable.ts
+++ b/src/mol-gl/renderable.ts
@@ -12,6 +12,7 @@ export type BaseProps = {
objectId: number
alpha: number
visible: boolean
+ depthMask: boolean
flatShaded?: boolean
doubleSided?: boolean
diff --git a/src/mol-gl/renderer.ts b/src/mol-gl/renderer.ts
index 5aa260f1248e25744c7a3d32da4624bb3e20da4c..69de95fac41565873e79e852f7fdb9b7245925a3 100644
--- a/src/mol-gl/renderer.ts
+++ b/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)
}