Problem getting DOF post process on old Android device

Questions
1

Hi, I’m trying to get the depth of field effect working in a project that should run on mobile devices but I can not make it work properly in the test device I have. I’m using the default render pipeline as in the guide here:
Using the Default Rendering Pipeline | Babylon.js Documentation

but for some reason the image appears completely blurred in these examples in my device (they work fine on desktop and in other newer mobile devices I have for testing):
https://playground.babylonjs.com/#8F5HYV#9

It doesn´t work properly also with the lens rendering pipeline (but it’s ok in other devices):
https://playground.babylonjs.com/#DX6AV#4

I think it may be something related to the Depth Renderer not generating the right depth texture due to some hardware limitations. The device specs are:
Android 7.0
Chrome 91
glRenderer: “Mali-T720”
glVendor: “ARM”

Is there a way to detect if the device is supporting the right texture format for the depth renderer to work for the DOF effect? Or to change the way the depth renderer is generated by the DOF effect so it can work in old devices?

Thanks

2

Adding @julien-moreau

3

@Deltakosh I think it’s more related to the default rendering pipeline and it’ll be easier for you as I’m not the author of this pipeline ^^

4

@Danim unfortunately it looks like a driver issue on those ARM MALI devices :frowning: we have seen already in the past.

You mentioned it could be around the depthRenderer and I would be more than happy to introduce a workaround in babylon if you figure the root cause for it ?

5

Thanks for your replies. I’ve made some tests in this playground from a previous post ( https://www.babylonjs-playground.com/#T5YWJQ#18 ) and these are the results of the depth buffer in the Android device:

image
image606×883 45.5 KB

In my PC I see the depth buffer right:

image
image939×1019 23.1 KB

I’m assuming that the standard render pipeline is enabling a depth buffer when I activate the depth of field, but it is providing a wrong image in the Android device and that’s why the image is completely blurred.

Can that be because of some gl extension incompatiblity on the device? If so, is there a way to detect it and generate a depth map in a different way so it can be used by the Depth of field post process?

Thanks

6

Can you try with webgl2 off?

7

Yes, and in v 5.0.0 alpha:

image
image609×938 54.1 KB

8

ok so definitely a driver issue unfortunately.

How does this one looks like?
RenderTargetTexture example | Babylon.js Playground (babylonjs.com)

I want to check if this is an issue with RTT or simply with float textures

9

image
image607×950 47.9 KB

10

ok so this is not the rtt :slight_smile:
What about this one: Custom shadow depth wrapper | Babylon.js Playground (babylonjs-playground.com)

11

image
image603×936 75.7 KB

It seems correct! so… maybe there’s still hope :slight_smile:

12

Let me ping a few folks to see if we can repro
@Cedric @syntheticmagus @PolygonalSun @sebavan

If someone in the team has an android to test:)

13

Tested OK on my Android device. webgl1 and 2, 4.2.0 and 5.0.0

14

Likewise, doesn’t seem to repro on a Moto G7.

15

I can’t repro it either on Pixel 5 (Android 11)

16

Thanks everyone for your time and testing this. So, it seems to be a problem in that particular device hardware. Do you know if there’s any gl attribute or something that can be causing that depth texture corruption that I can check through code to block that postprocess from being executed if that attribute is not compatible in a device? Or maybe just blacklist that “Mali” hardware on my end.

17

Just one last try:
Depth Test | Babylon.js Playground (babylonjs-playground.com)

if it does not work I will recommend blacklisting the GPU :frowning:

18

Thanks for trying! But unfortunately I’m getting the same results, so I’m going to blacklist it then :upside_down_face::

image
image604×939 51.1 KB

19

I am not sure it is related to the depth texture, the color being different is expected. You could try forcing webGL1 by using the special flag in the engine option to ensure there is no R texture availble on your platform. At least you d compare our way to store depth in colored texture on both hardware ?

20

How to force the use of webgl1?