Skip to content
Snippets Groups Projects
Commit 31c45f4b authored by Alexander Rose's avatar Alexander Rose
Browse files

sync picking

parent 49fd7091
Branches
Tags
No related merge requests found
...@@ -57,7 +57,7 @@ interface Canvas3D { ...@@ -57,7 +57,7 @@ interface Canvas3D {
requestDraw: (force?: boolean) => void requestDraw: (force?: boolean) => void
animate: () => void animate: () => void
pick: () => 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 mark: (loci: Representation.Loci, action: MarkerAction) => void
getLoci: (pickingId: PickingId) => Representation.Loci getLoci: (pickingId: PickingId) => Representation.Loci
...@@ -263,7 +263,8 @@ namespace Canvas3D { ...@@ -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 if (isIdentifying) return
pick() // must be called before setting `isIdentifying = true` pick() // must be called before setting `isIdentifying = true`
...@@ -273,27 +274,22 @@ namespace Canvas3D { ...@@ -273,27 +274,22 @@ namespace Canvas3D {
y *= webgl.pixelRatio y *= webgl.pixelRatio
y = canvas.height - y // flip y y = canvas.height - y // flip y
const buffer = new Uint8Array(4)
const xp = Math.round(x * pickScale) const xp = Math.round(x * pickScale)
const yp = Math.round(y * pickScale) const yp = Math.round(y * pickScale)
objectPickTarget.bind() objectPickTarget.bind()
// TODO slow in Chrome, ok in FF; doesn't play well with gpu surface calc webgl.readPixels(xp, yp, 1, 1, readBuffer)
// await webgl.readPixelsAsync(xp, yp, 1, 1, buffer) const objectId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
webgl.readPixels(xp, yp, 1, 1, buffer)
const objectId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
if (objectId === -1) { isIdentifying = false; return; } if (objectId === -1) { isIdentifying = false; return; }
instancePickTarget.bind() instancePickTarget.bind()
// await webgl.readPixelsAsync(xp, yp, 1, 1, buffer) webgl.readPixels(xp, yp, 1, 1, readBuffer)
webgl.readPixels(xp, yp, 1, 1, buffer) const instanceId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
const instanceId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
if (instanceId === -1) { isIdentifying = false; return; } if (instanceId === -1) { isIdentifying = false; return; }
groupPickTarget.bind() groupPickTarget.bind()
// await webgl.readPixelsAsync(xp, yp, 1, 1, buffer) webgl.readPixels(xp, yp, 1, 1, readBuffer)
webgl.readPixels(xp, yp, 1, 1, buffer) const groupId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
const groupId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
if (groupId === -1) { isIdentifying = false; return; } if (groupId === -1) { isIdentifying = false; return; }
isIdentifying = false isIdentifying = false
......
...@@ -38,9 +38,9 @@ export class Canvas3dInteractionHelper { ...@@ -38,9 +38,9 @@ export class Canvas3dInteractionHelper {
private buttons: ButtonsType = ButtonsType.create(0); private buttons: ButtonsType = ButtonsType.create(0);
private modifiers: ModifiersKeys = ModifiersKeys.None; 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) { 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.lastX = this.cX;
this.lastY = this.cY; this.lastY = this.cY;
} }
......
...@@ -40,8 +40,8 @@ parent.appendChild(info) ...@@ -40,8 +40,8 @@ parent.appendChild(info)
let prevReprLoci = Representation.Loci.Empty let prevReprLoci = Representation.Loci.Empty
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas, parent)
canvas3d.animate() canvas3d.animate()
canvas3d.input.move.subscribe(async ({x, y}) => { canvas3d.input.move.subscribe(({x, y}) => {
const pickingId = await canvas3d.identify(x, y) const pickingId = canvas3d.identify(x, y)
let label = '' let label = ''
if (pickingId) { if (pickingId) {
const reprLoci = canvas3d.getLoci(pickingId) const reprLoci = canvas3d.getLoci(pickingId)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment