improved scene commit handling for canvas3d and debug-helper

src/mol-canvas3d/canvas3d.ts

@@ -139,7 +139,6 @@ namespace Canvas3D {
         const postprocessing = new PostprocessingPass(webgl, camera, drawPass, p.postprocessing)
         const multiSample = new MultiSamplePass(webgl, camera, drawPass, postprocessing, p.multiSample)
 
-        let isUpdating = false
         let drawPending = false
         let cameraResetRequested = false
 
@@ -206,7 +205,7 @@ namespace Canvas3D {
         }
 
         function render(variant: 'pick' | 'draw', force: boolean) {
-            if (isUpdating || scene.isCommiting) return false
+            if (scene.isCommiting) return false
 
             let didRender = false
             controls.update(currentTime);
@@ -266,8 +265,21 @@ namespace Canvas3D {
             return pickPass.identify(x, y)
         }
 
+        function commit(renderObjects?: readonly GraphicsRenderObject[]) {
+            scene.update(renderObjects, false)
+
+            runTask(scene.commit()).then(() => {
+                if (cameraResetRequested && !scene.isCommiting) {
+                    camera.focus(scene.boundingSphere.center, scene.boundingSphere.radius)
+                    cameraResetRequested = false
+                }
+                if (debugHelper.isEnabled) debugHelper.update()
+                requestDraw(true)
+                reprCount.next(reprRenderObjects.size)
+            })
+        }
+
         function add(repr: Representation.Any) {
-            isUpdating = true
             const oldRO = reprRenderObjects.get(repr)
             const newRO = new Set<GraphicsRenderObject>()
             repr.renderObjects.forEach(o => newRO.add(o))
@@ -281,18 +293,7 @@ namespace Canvas3D {
                 repr.renderObjects.forEach(o => scene.add(o))
             }
             reprRenderObjects.set(repr, newRO)
-            scene.update(repr.renderObjects, false)
-            if (debugHelper.isEnabled) debugHelper.update()
-            isUpdating = false
-
-            runTask(scene.commit()).then(() => {
-                if (cameraResetRequested && !scene.isCommiting) {
-                    camera.focus(scene.boundingSphere.center, scene.boundingSphere.radius)
-                    cameraResetRequested = false
-                }
-                requestDraw(true)
-                reprCount.next(reprRenderObjects.size)
-            })
+            commit(repr.renderObjects)
         }
 
         handleResize()
@@ -313,21 +314,9 @@ namespace Canvas3D {
                 }
                 const renderObjects = reprRenderObjects.get(repr)
                 if (renderObjects) {
-                    isUpdating = true
                     renderObjects.forEach(o => scene.remove(o))
                     reprRenderObjects.delete(repr)
-                    scene.update(void 0, false)
-                    if (debugHelper.isEnabled) debugHelper.update()
-                    isUpdating = false
-
-                    runTask(scene.commit()).then(() => {
-                        if (cameraResetRequested && !scene.isCommiting) {
-                            camera.focus(scene.boundingSphere.center, scene.boundingSphere.radius)
-                            cameraResetRequested = false
-                        }
-                        requestDraw(true)
-                        reprCount.next(reprRenderObjects.size)
-                    })
+                    commit()
                 }
             },
             update: (repr, keepSphere) => {

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

@@ -81,7 +81,8 @@ export class BoundingSphereHelper {
             }
         })
 
-        this.scene.update(void 0, false);
+        this.scene.update(void 0, false)
+        this.scene.syncCommit()
     }
 
     syncVisibility() {

src/mol-gl/scene.ts

@@ -61,6 +61,7 @@ interface Scene extends Object3D {
     update: (objects: ArrayLike<GraphicsRenderObject> | undefined, keepBoundingSphere: boolean) => void
     add: (o: GraphicsRenderObject) => void // Renderable<any>
     remove: (o: GraphicsRenderObject) => void
+    syncCommit: () => void
     commit: () => Task<void>
     has: (o: GraphicsRenderObject) => boolean
     clear: () => void
@@ -151,6 +152,13 @@ namespace Scene {
             remove: (o: GraphicsRenderObject) => {
                 toRemove.push(o)
             },
+            syncCommit: () => {
+                for (let i = 0, il = toRemove.length; i < il; ++i) remove(toRemove[i])
+                toRemove.length = 0
+                for (let i = 0, il = toAdd.length; i < il; ++i) add(toAdd[i])
+                toAdd.length = 0
+                renderables.sort(renderableSort)
+            },
             commit: () => {
                 const params = { toAdd: [ ...toAdd ], toRemove: [ ...toRemove ] }
                 toAdd.length = 0