renderable sorting improvements and fixes

src/mol-gl/renderable.ts

@@ -22,6 +22,7 @@ export type RenderableState = {
 
 export interface Renderable<T extends RenderableValues> {
     readonly id: number
+    readonly materialId: number
     readonly values: T
     readonly state: RenderableState
 
@@ -34,6 +35,7 @@ export interface Renderable<T extends RenderableValues> {
 export function createRenderable<T extends Values<RenderableSchema>>(renderItem: RenderItem, values: T, state: RenderableState): Renderable<T> {
     return {
         id: getNextRenderableId(),
+        materialId: renderItem.materialId,
         values,
         state,
 

src/mol-gl/scene.ts

@@ -38,15 +38,19 @@ function calculateBoundingSphere(renderables: Renderable<RenderableValues & Base
 function renderableSort(a: Renderable<RenderableValues & BaseValues>, b: Renderable<RenderableValues & BaseValues>) {
     const drawProgramIdA = a.getProgram('draw').id
     const drawProgramIdB = b.getProgram('draw').id
+    const materialIdA = a.materialId
+    const materialIdB = b.materialId
     const zA = a.values.boundingSphere.ref.value.center[2]
-    const zB = a.values.boundingSphere.ref.value.center[2]
+    const zB = b.values.boundingSphere.ref.value.center[2]
 
     if (drawProgramIdA !== drawProgramIdB) {
-        return drawProgramIdA - drawProgramIdB; // sort by program id to minimize gl state changes
+        return drawProgramIdA - drawProgramIdB // sort by program id to minimize gl state changes
+    } else if (materialIdA !== materialIdB) {
+        return materialIdA - materialIdB // sort by material id to minimize gl state changes
     } else if (zA !== zB) {
         return a.state.opaque
-            ? zA - zB // when opaque draw closer elements first to minimize overdraw
-            : zB - zA // when transparent draw elements last to maximize partial visibility
+            ? zA - zB // when opaque, draw closer elements first to minimize overdraw
+            : zB - zA // when transparent, draw elements last to maximize partial visibility
     } else {
         return a.id - b.id;
     }

src/mol-gl/webgl/render-item.ts

@@ -35,6 +35,7 @@ export function getDrawMode(ctx: WebGLContext, drawMode: DrawMode) {
 
 export interface RenderItem {
     readonly id: number
+    readonly materialId: number
     getProgram: (variant: RenderVariant) => Program
 
     render: (variant: RenderVariant) => void
@@ -133,6 +134,7 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
 
     return {
         id,
+        materialId,
         getProgram: (variant: RenderVariant) => programs[variant].value,
 
         render: (variant: RenderVariant) => {