Skip to main content

剔除器插件

🌐 Culler Plugin

CullerPlugin 会自动跳过场景中屏幕外对象的渲染。它通过使用渲染器的屏幕边界来判断容器（以及可选的子对象）是否与视图相交来实现这一点。如果不相交，它们会被剔除，从而减少渲染和更新的开销。

🌐 The CullerPlugin automatically skips rendering for offscreen objects in your scene. It does this by using the renderer's screen bounds to determine whether containers (and optionally their children) intersect the view. If they don't, they are culled, reducing rendering and update overhead.

PixiJS 默认不启用此插件。你必须使用 extensions 系统手动注册它。

🌐 PixiJS does not enable this plugin by default. You must manually register it using the extensions system.

何时应该使用它？​

🌐 When Should You Use It?

剔除的理想用途：

🌐 Culling is ideal for:

  • 包含大量屏幕外元素的大型场景
  • 可滚动或相机驱动的环境（例如，图块地图、世界视图）
  • 无需重构场景图即可优化渲染性能

用法​

🌐 Usage

const app = new Application();

await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x222222,
});

extensions.add(CullerPlugin);

const world = new Container();
world.cullable = true;
world.cullableChildren = true;

const sprite = new Sprite.from('path/to/image.png');
sprite.cullable = true; // Enable culling for this sprite
world.addChild(sprite);

app.stage.addChild(world);

启用 Culler 插件​

🌐 Enabling the Culler Plugin

要在应用中启用自动剔除：

🌐 To enable automatic culling in your application:

import { extensions, CullerPlugin } from 'pixi.js';

extensions.add(CullerPlugin);

这将覆盖你 Application 实例上的默认 render() 方法，以在渲染前调用 Culler.shared.cull()：

🌐 This will override the default render() method on your Application instance to call Culler.shared.cull() before rendering:

// Internally replaces:
app.renderer.render({ container: app.stage });
// With:
Culler.shared.cull(app.stage, app.renderer.screen);
app.renderer.render({ container: app.stage });

配置容器进行剔除​

🌐 Configuring Containers for Culling

默认情况下，容器不会被裁剪。要启用容器的裁剪，请设置以下属性：

🌐 By default, containers are not culled. To enable culling for a container, set the following properties:

container.cullable = true; // Enables culling for this container
container.cullableChildren = true; // Enables recursive culling for children

可选：定义自定义剔除区域​

🌐 Optional: Define a Custom Cull Area

你可以定义一个 cullArea 来覆盖默认的边界检查（默认使用全局边界）：

🌐 You can define a cullArea to override the default bounds check (which uses global bounds):

container.cullArea = new Rectangle(0, 0, 100, 100);

这对于具有许多子容器的容器非常有用，因为这些容器的边界框计算成本高昂或不准确。

🌐 This is useful for containers with many children where bounding box calculations are expensive or inaccurate.

使用 Culler 进行手动剔除​

🌐 Manual Culling with Culler

如果你不使用插件，但希望在渲染前手动剔除：

🌐 If you’re not using the plugin but want to manually cull before rendering:

import { Culler } from 'pixi.js';

const stage = new Container();
// Configure stage and children...

Culler.shared.cull(stage, { x: 0, y: 0, width: 800, height: 600 });
renderer.render({ container: stage });

API 参考​

🌐 API Reference