diff --git a/src/mol-canvas3d/helper/bounding-sphere-helper.ts b/src/mol-canvas3d/helper/bounding-sphere-helper.ts index 57540217aac5624d43d261f4ae15bb0d2916ef29..1bcc024c7aa0fdffe96c1dfd98737c398c8e5291 100644 --- a/src/mol-canvas3d/helper/bounding-sphere-helper.ts +++ b/src/mol-canvas3d/helper/bounding-sphere-helper.ts @@ -159,5 +159,5 @@ const instanceMaterialId = getNextMaterialId(); function createBoundingSphereRenderObject(mesh: Mesh, color: Color, materialId: number, transform?: TransformData) { const values = Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform); - return createRenderObject('mesh', values, { visible: true, alphaFactor: 1, pickable: false, opaque: false }, materialId); + return createRenderObject('mesh', values, { visible: true, alphaFactor: 1, pickable: false, opaque: false, writeDepth: false }, materialId); } \ No newline at end of file diff --git a/src/mol-geo/geometry/base.ts b/src/mol-geo/geometry/base.ts index 6433278a92015384697084d328dfc7e9144457d7..bd196173397170d3945fa4a7e57ee551c425324f 100644 --- a/src/mol-geo/geometry/base.ts +++ b/src/mol-geo/geometry/base.ts @@ -72,15 +72,18 @@ export namespace BaseGeometry { } export function createRenderableState(props: Partial<PD.Values<Params>> = {}): RenderableState { + const opaque = props.alpha === undefined ? true : props.alpha === 1; return { visible: true, alphaFactor: 1, pickable: true, - opaque: props.alpha === undefined ? true : props.alpha === 1 + opaque, + writeDepth: opaque, }; } export function updateRenderableState(state: RenderableState, props: PD.Values<Params>) { state.opaque = props.alpha * state.alphaFactor >= 1; + state.writeDepth = state.opaque; } } \ No newline at end of file diff --git a/src/mol-gl/_spec/renderer.spec.ts b/src/mol-gl/_spec/renderer.spec.ts index 8861f6214ce1df6699088bb1ba4d16936cffed2d..716364b2d3e1e58a5cd48ddf984b906db8e4940b 100644 --- a/src/mol-gl/_spec/renderer.spec.ts +++ b/src/mol-gl/_spec/renderer.spec.ts @@ -86,7 +86,8 @@ function createPoints() { visible: true, alphaFactor: 1, pickable: true, - opaque: true + opaque: true, + writeDepth: true }; return createRenderObject('points', values, state, -1); diff --git a/src/mol-gl/renderable.ts b/src/mol-gl/renderable.ts index 12639b8dd7d6b7a9ed1a34238eb87c48e92f35ad..a2b95c61bb3dd063a27e9d75cd64ceebb3f83a48 100644 --- a/src/mol-gl/renderable.ts +++ b/src/mol-gl/renderable.ts @@ -18,6 +18,7 @@ export type RenderableState = { alphaFactor: number pickable: boolean opaque: boolean + writeDepth: boolean, } export interface Renderable<T extends RenderableValues> { diff --git a/src/mol-gl/renderer.ts b/src/mol-gl/renderer.ts index 334251f7f0ac4ef8bd33652b06d119a233deada6..321174a7c6cce4d22b0c1367523c4261875a3620 100644 --- a/src/mol-gl/renderer.ts +++ b/src/mol-gl/renderer.ts @@ -212,6 +212,10 @@ namespace Renderer { state.cullFace(gl.BACK); } + if (variant === 'color') { + state.depthMask(r.state.writeDepth); + } + r.render(variant); } }; @@ -245,11 +249,11 @@ namespace Renderer { state.disable(gl.SCISSOR_TEST); state.disable(gl.BLEND); - state.depthMask(true); state.colorMask(true, true, true, true); state.enable(gl.DEPTH_TEST); if (clear) { + state.depthMask(true); if (variant === 'color') { state.clearColor(bgColor[0], bgColor[1], bgColor[2], transparentBackground ? 0 : 1); } else { @@ -268,10 +272,11 @@ namespace Renderer { state.enable(gl.BLEND); for (let i = 0, il = renderables.length; i < il; ++i) { const r = renderables[i]; - if (!r.state.opaque) { - state.depthMask(false); - renderObject(r, variant); - } + if (!r.state.opaque && r.state.writeDepth) renderObject(r, variant); + } + for (let i = 0, il = renderables.length; i < il; ++i) { + const r = renderables[i]; + if (!r.state.opaque && !r.state.writeDepth) renderObject(r, variant); } } else { // picking & depth for (let i = 0, il = renderables.length; i < il; ++i) { diff --git a/src/mol-gl/scene.ts b/src/mol-gl/scene.ts index 2aa4bec6abbaa15c66b3d8ae9f476fb903fa6e9a..e24891e5f9af496e579217e5105839124e30503d 100644 --- a/src/mol-gl/scene.ts +++ b/src/mol-gl/scene.ts @@ -50,9 +50,11 @@ function renderableSort(a: Renderable<RenderableValues & BaseValues>, b: Rendera const materialIdB = b.materialId; if (drawProgramIdA !== drawProgramIdB) { - return drawProgramIdA - drawProgramIdB; // sort by program id to minimize gl state changes + // sort by program id to minimize gl state changes + return drawProgramIdA - drawProgramIdB; } else if (materialIdA !== materialIdB) { - return materialIdA - materialIdB; // sort by material id to minimize gl state changes + // sort by material id to minimize gl state changes + return materialIdA - materialIdB; } else { return a.id - b.id; }