mirror of
https://github.com/galacean/engine.git
synced 2026-05-08 15:57:13 +08:00
42 lines
1.3 KiB
Plaintext
42 lines
1.3 KiB
Plaintext
---
|
|
order: 4
|
|
title: 帧缓冲拾取
|
|
type: 交互
|
|
label: Interact
|
|
---
|
|
|
|
在三维应用中时常需要拾取场景中的物体，[射线包围盒](docs/physics/query/raycast)是一种常用的方法，在 CPU 中进行拾取，**性能较好，但是精度较差**，因为包围盒比较简单，不能拾取复杂的模型。
|
|
|
|
当拾取频率不高时，可以考虑使用**像素级精度**的 `FramebufferPicker` 组件；当拾取频率过高时，需要开发者评估好性能开销是否适合业务场景，因为该组件底层会进行 CPU-GPU 通信，即调用 `gl.readPixels` 。
|
|
|
|
## 创建帧缓冲拾取
|
|
|
|
```typescript
|
|
import { FramebufferPicker } from "@galacean/engine-toolkit-framebuffer-picker";
|
|
|
|
const framebufferPicker = rootEntity.addComponent(FramebufferPicker);
|
|
framebufferPicker.camera = camera;
|
|
```
|
|
|
|
## 注册拾取事件
|
|
|
|
```typescript
|
|
class ClickScript extends Script {
|
|
onUpdate(): void {
|
|
const inputManager = this.engine.inputManager;
|
|
if (inputManager.isPointerDown(PointerButton.Primary)) {
|
|
const pointerPosition = inputManager.pointerPosition;
|
|
framebufferPicker.pick(pointerPosition.x, pointerPosition.y).then((renderElement) => {
|
|
if (renderElement) {
|
|
// ...
|
|
} else {
|
|
// ...
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
cameraEntity.addComponent(ClickScript);
|
|
```
|