You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The [PixiJS v8 release](https://github.com/pixijs/pixijs/releases/tag/v8.0.0) introduced WebGPU support to leverage modern GPU capabilities when rendering rather than just WebGL. Unfortunately, this has come with a rendering issue where certain devices seemingly fail to render anything when WebGPU is used.
12
+
13
+
>This is still a bug as of [v8.9.2](https://github.com/pixijs/pixijs/releases/tag/v8.9.2), with issue [#11389](https://github.com/pixijs/pixijs/issues/11389) raised detailing the cause and potential fix. This note summarises the cause as well as a workaround for versions with the issue.
14
+
15
+
For example, the example PixiJS script at https://pixijs.com/8.x/playground outputs the following:
16
+
17
+
![[pixijs-playground.gif|350]]
18
+
19
+
This works on all devices since it defaults to using WebGL. However, if we were to modify the call to `app.init` to prefer WebGPU like so:
the script would only render on *some* devices. A known example of this are Google Pixel 9 phones.
24
+
## Root cause
25
+
The cause of this actually boils down to how PixiJS batches display objects for rendering. To optimise performance, PixiJS groups compatible display objects, such as sprites sharing similar textures and shaders, into batches. These batches are then rendered in a single GPU draw call, significantly reducing overhead.
26
+
27
+
A critical constraint in the batching process is the maximum number of textures that can used in a single draw call. Versions of PixiJS with the rendering issue falsely assume that the WebGPU limit for maximum textures is the same as the WebGL limit on a given device.
28
+
29
+
Unfortunately, there are some WebGPU supported devices where the WebGL limit is greater than the WebGPU limit. This causes rendering to fail and the console logs to show something similar to the following:
30
+
31
+
```log
32
+
The number of sampled textures (32) in the Fragment stage exceeds the maximum per-stage limit (16).
33
+
- While validating binding counts
34
+
- While validating [BindGroupLayoutDescriptor]
35
+
- While calling [Device].CreateBindGroupLayout([BindGroupLayoutDescriptor]).
36
+
37
+
Invalid BindGroupLayout (unlabeled)] is invalid.
38
+
- While calling [Device].CreatePipelineLayout([PipelineLayoutDescriptor]).
39
+
40
+
[Invalid PipelineLayout (unlabeled)] is invalid.
41
+
- While calling [Device].CreateRenderPipeline([RenderPipelineDescriptor ""PIXI Pipeline""]).
42
+
43
+
[Invalid BindGroupLayout (unlabeled)] is invalid.
44
+
- While validating [BindGroupDescriptor] against [Invalid BindGroupLayout (unlabeled)]
45
+
- While calling [Device].CreateBindGroup([BindGroupDescriptor]).
46
+
47
+
WebGPU: too many warnings, no more warnings will be reported to the console for this GPUDevice.
48
+
```
49
+
50
+
In the above example, WebGL's limit (`gl.MAX_TEXTURE_IMAGE_UNITS`) is 32 whereas WebGPU's limit (`device.limits.maxSampledTexturesPerShaderStage`) is 16. Specifically, the code in [getTextureBatchBindGroup.ts](https://github.com/pixijs/pixijs/blob/v8.9.2/src/rendering/batcher/gpu/getTextureBatchBindGroup.ts#L31):
51
+
52
+
```ts
53
+
if (!maxTextures)maxTextures=getMaxTexturesPerBatch();
54
+
```
55
+
and in [Batcher.ts](https://github.com/pixijs/pixijs/blob/v8.9.2/src/rendering/batcher/shared/Batcher.ts#L358):
Both call [getMaxTexturesPerBatch()](https://github.com/pixijs/pixijs/blob/v8.9.2/src/rendering/batcher/gl/utils/maxRecommendedTextures.ts#L13) which relies on `gl.MAX_TEXTURE_IMAGE_UNITS`
60
+
## Workaround
61
+
Until PixiJS provides a fix for this, the best thing to do is check for mismatched limits and fallback to WebGL if there is a discrepancy. This can be done like so:
0 commit comments