sync picking

src/mol-canvas3d/canvas3d.ts

@@ -57,7 +57,7 @@ interface Canvas3D {
     requestDraw: (force?: boolean) => void
     animate: () => void
     pick: () => void
-    identify: (x: number, y: number) => Promise<PickingId | undefined>
+    identify: (x: number, y: number) => PickingId | undefined
     mark: (loci: Representation.Loci, action: MarkerAction) => void
     getLoci: (pickingId: PickingId) => Representation.Loci
 
@@ -263,7 +263,8 @@ namespace Canvas3D {
             }
         }
 
-        async function identify(x: number, y: number): Promise<PickingId | undefined> {
+        const readBuffer = new Uint8Array(4)
+        function identify(x: number, y: number): PickingId | undefined {
             if (isIdentifying) return
 
             pick() // must be called before setting `isIdentifying = true`
@@ -273,27 +274,22 @@ namespace Canvas3D {
             y *= webgl.pixelRatio
             y = canvas.height - y // flip y
 
-            const buffer = new Uint8Array(4)
             const xp = Math.round(x * pickScale)
             const yp = Math.round(y * pickScale)
 
             objectPickTarget.bind()
-            // TODO slow in Chrome, ok in FF; doesn't play well with gpu surface calc
-            // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
-            webgl.readPixels(xp, yp, 1, 1, buffer)
-            const objectId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
+            webgl.readPixels(xp, yp, 1, 1, readBuffer)
+            const objectId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
             if (objectId === -1) { isIdentifying = false; return; }
 
             instancePickTarget.bind()
-            // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
-            webgl.readPixels(xp, yp, 1, 1, buffer)
-            const instanceId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
+            webgl.readPixels(xp, yp, 1, 1, readBuffer)
+            const instanceId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
             if (instanceId === -1) { isIdentifying = false; return; }
 
             groupPickTarget.bind()
-            // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
-            webgl.readPixels(xp, yp, 1, 1, buffer)
-            const groupId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
+            webgl.readPixels(xp, yp, 1, 1, readBuffer)
+            const groupId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
             if (groupId === -1) { isIdentifying = false; return; }
 
             isIdentifying = false

src/mol-canvas3d/helper/interaction-events.ts

@@ -38,9 +38,9 @@ export class Canvas3dInteractionHelper {
     private buttons: ButtonsType = ButtonsType.create(0);
     private modifiers: ModifiersKeys = ModifiersKeys.None;
 
-    private async identify(isClick: boolean, t: number) {
+    private identify(isClick: boolean, t: number) {
         if (this.lastX !== this.cX && this.lastY !== this.cY) {
-            this.id = await this.canvasIdentify(this.cX, this.cY);
+            this.id = this.canvasIdentify(this.cX, this.cY);
             this.lastX = this.cX;
             this.lastY = this.cY;
         }

src/tests/browser/render-shape.ts

@@ -40,8 +40,8 @@ parent.appendChild(info)
 let prevReprLoci = Representation.Loci.Empty
 const canvas3d = Canvas3D.create(canvas, parent)
 canvas3d.animate()
-canvas3d.input.move.subscribe(async ({x, y}) => {
-    const pickingId = await canvas3d.identify(x, y)
+canvas3d.input.move.subscribe(({x, y}) => {
+    const pickingId = canvas3d.identify(x, y)
     let label = ''
     if (pickingId) {
         const reprLoci = canvas3d.getLoci(pickingId)