[g] 在 document 上提供 elementsFromPoint 方法

[xiaoiver]

将拾取方法挂载到 document 对象上：

返回该位置最顶层的一个图形：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementFromPoint
返回该位置最顶层的一组图形：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint

const topMostElement = document.elementFromPoint(30, 20); // circle1
const elements = document.elementsFromPoint(30, 20); // [circle1, circle2]

如果点在可视范围外，返回 null 和空数组。

[zhanba]

这个API应用场景是什么，第一次听说。。

[xiaoiver]

这个API应用场景是什么，第一次听说。。

目前有两个场景：

• G2 的新版交互语法需要使用，并不一定由鼠标、触摸屏这类交互事件触发
• 在 WebWorker 中配合 OffscreenCanvas 渲染时，如果要实现交互也需要在主线程中把当前鼠标位置通过 postMessage 传递给 Worker 线程，再通过这样的方式完成拾取（当然也可以在 Worker 中手动触发事件）。

只需要把 G 内部实现的拾取方法暴露出来就行：

• g-canvas 使用 Rbush 空间索引做区域查询后，再使用数学方法 + isPointInPath
• g-svg 直接使用 document.element(s)FromPoint。

考虑到 g-webgl 使用 GPU 拾取是一个异步的流程，因此这俩方法也只能是异步的。

最后在 g-webgl 中实现 “多层拾取” 时，需要将第一个拾取到的对象 encoded color 修改为透明，再进行下一个拾取，直到从这个像素点再也无法读取到颜色编码。

可以参考 luma.gl 的做法：visgl/luma.gl#432
deck.gl 的实现：https://github.com/visgl/deck.gl/pull/1730/files#diff-d4bc662539cc14905f14364c5993222533cab8aeb3cc36a9536618e83ded0b66

[xiaoiver]

目前 g-webgl 在 elementsFromPoint 方法上性能有问题。批量更新 interactive 导致

[xiaoiver]

来自：https://www.khronos.org/events/webgl-meetup-april-2022
在拾取时可以利用相机偏移，仅渲染鼠标（拾取点）周围一小块区域（1 x 1），而非整个屏幕，可以显著提升性能。

在 Three.js 中通过 setViewOffset 对相机进行偏移：
https://r105.threejsfundamentals.org/threejs/lessons/threejs-picking.html

暂时不提供基于 Raycast 的 CPU 拾取。