OptiPixel library

Useful Resources
1

Introducing playcanvas-opti-pixel — a powerful library for optimizing graphics rendering in the PlayCanvas Engine. It is specifically designed to boost the performance of WebGL2 and WebGPU applications using advanced techniques such as occlusion queries, HZB, and efficient GPU buffer management.

Key Features

  • Occlusion Queries (WebGL2): Fast culling of invisible objects using occlusion queries, reducing GPU load and increasing FPS in complex scenes.

  • HZB Construction (WebGL2 | WebGPU): Hierarchical Z-Buffer for hierarchical depth testing, delivering accurate occlusion with minimal computation.

  • Quad Data Textures: Store structured data (e.g., positions or attributes) in compact square textures for fast shader access.

  • Index Upload to GPU Buffers: Optimized index transfer to storage buffers with support for dynamic updates and minimal copying.

npm i playcanvas-opti-pixel

npm i playcanvas-opti-pixel-examples

image
image1513×942 275 KB

image
image380×444 9.04 KB

6 Likes
Terrain Component for Editor
2
  • Split tester shader to chunks
  • Add WebGPU HZB Tester
  • Add extra data for WebGL HZB tester queue
  • Add more examples
3
4

Update: Added Webgl2 an example of calculating simultaneously occlusion, LOD, and visibility by pixels (maximum rect on the screen)

1 Like
5

Update:

  1. The HZB construction algorithm was further simplified: unnecessary conditions were removed, and the resolution was adjusted to a power of two. The occlusion test formula was also revised. This reduced the time required to build the HZB, although it slightly increased the complexity of the test itself. As a result, a trade-off was achieved that improved overall performance.

Additionally, as an experiment, buffer construction was moved to a microtask after requestAnimationFrame. This approach allows the frame to be released while building the HZB between frames. However, further testing is required, as this may affect input event handling. On the devices tested, this approach showed a performance improvement of up to 30%.

  1. Add float16 supports for mobile devices.
  2. Remove branching conditions.
1 Like
6

The algorithm for WebGPU has been reworked using this approach. Thanks to this, HZB generation now uses batching—up to 4 mip levels are processed in a single pass. The method is based on the HZB generation approach used in Unreal Engine.

As a result, the number of compute shader dispatches has been reduced by 4×.

I will share performance benchmarks and comparisons later.

2 Likes