If your WebGL application has a very large scene that is only partially visible at any instant, then you can immediately improve performance by culling display-objects that are not visible.

You’re reading a chapter of “Inside PixiJS: WebGL Renderer”.

Culling

In computer graphics, there are multiple meanings of “culling”. The term here is used to describe the process of evaluating whether an object is “visible” and should be rendered at all. This allows the renderer to skip objects that do not need to be drawn, and reduces the number of draw calls per tick. It’s the first optimization to try for 60 FPS.

The original idea was inspired by David Fignater’s pixi-cull package; however, that did not provide a recursive & robust solution based on world bounds. Rather, it was designed for usage with the pixi-viewport plugin and culled based on local-bounds comparison.

@pixi-essentials/cull

I built the [@pixi-essentials/cull](https://github.com/SukantPal/pixi-essentials/tree/master/packages/cull) package specifically for recursive culling. It uses an optimized algorithm to evaluate which objects need to be culled.

For most basic applications, you can cull the entire scene graph — starting from the stage, on each render cycle.

import { Application } from 'pixi.js';
import { Cull } from '@pixi-essentials/cull';

const app = new Application({ });
// These options are the default.
const cull = new Cull({ recursive: true, toggle: 'renderable' });
// Cull the entire scene graph, starting from the stage
cull.add(app.stage);
// "prerender" is fired right before the renderer draws the scene
app.renderer.on('prerender', () => {
    // Cull out all objects that don't intersect with the screen
    cull.cull(app.renderer.screen);
});

The above snippet will evaluate whether each display-object should be “culled” and set their renderable property accordingly.

#software-development #web-development #pixijs #webgl #javascript #programming