Engine post-effect example doesn't draw depth texture for Mac Chrome and Firefox

On my 3 Macs there is an issue getting the depth texture on Chrome and Firefox, while Safari is OK. ( Mac details the same as in this thread)

The issue is seen in this engine example which displays the depth texture bottom right:

Chrome and Firefox:

Safari is OK.

If I set chrome://flags/#use-angle to Metal rather than the default OpenGL then the depth texture is displayed correctly.

Hi @Kulodo133,

I gave it a quick try on a Macbook Pro (mac OS 12.3), on Chrome, depth texture seems to be displayed.

It runs on the default OpenGL (ANGLE) graphics API.

@mvaligursky any idea?

Hi @Leonidas thanks for checking. My own test project shows the same issue ie OK in Safari but not in Chrome, (unless I set angle to use metal). In case it helps here is a diff of the Spector.js logs from my project for Chrome/OpenGL(Left) and Chrome/Metal(Right).

It’s so odd that my 3 macs have these issues but you and the playcanvas team can’t reproduce. If the Playcanvas team need a mac to repro the issue then I happen to live close by to their office.

1 Like

This issue sounds very similar to the issue I’m seeing https://forum.playcanvas.com/t/depth-buffer-in-macos/19897/26

1 Like

Created a ticket on the engine repo so we don’t lose this: Depth texture is not working correctly on some Macs · Issue #4266 · playcanvas/engine · GitHub

Wondering if it’s related to the anti alias issue you mentioned before?

Hi @yaustar

It looks like multiple issues with support for the specific specs of the 3 Macs I have.

  1. anti-aliasing issues
  2. reading the depth texture

I may be over analysing but when you say “don’t lose” does this mean that you are not going to actively investigate the issue and wait for more issues to be reported? I’m not complaining - just want to know if you have the capacity to investigate :crossed_fingers:

While these issue are frustrating for me as a developer there must be a lot of end users in the world with the same spec Macs as me that could be affected by these issues. Could your team get hold of a mac with the same specs for testing?

In my test project that shows the WebGL error I have disabled the anti-alias and this stops the WebGL lost error.

This then enables me to see the depth texture issue.

I added the following that I copied from the engine post-effect example to show the depthTexture

    if (this.entity.script.bokeh.enabled) {
        this.app.drawDepthTexture(0.7, -0.7, 0.5, 0.5);

Don’t lose as in not leaving it to memory about all the relevant issues, information and project examples. It also means that anybody else having the same issue can add more information on this.

It also allows us to track this within our teams workflows.

At the moment, we don’t have a ways of reproducing the issue with getting hold of that spec of Mac (similar to this issue we had with particle effects and Galaxy devices Rendering Issue with Samsung Exynos CPU on Android 12 · Issue #3967 · playcanvas/engine · GitHub)

Ideally, we would want to verify a repro on same or similar hardware before committing to buying/finding a Mac to ensure it’s the hardware. Honestly, not sure how we are going to do that in practise.

OK thanks for the reply :slight_smile:

I’ve tried running Chrome on non hardware accelerated mode on my Mac and couldn’t repro the issue. Can’t work out a way to disable the discrete graphics card unfortunately to test against Intel

Can you test your Mac against three.js example too to see if it’s an issue just with PlayCanvas: three.js webgl - postprocessing - Screen Space Ambient Occlusion

If you have a Macbook (laptop) and you run it on battery, it will automatically revert to the integrated GPU on these conditions:

  • In OS Batter settings you have the ‘Automatic switch GPU to conserve energy’ to true
  • In your PlayCanvas project you have power preference set to Default.

My 3 Macs that display issues are:

iMac: AMD RadeonPro 580,
iMac: AMD RadeonPro 570X
MacBookPro: Intel(R) HD Graphics 630

1 Like

We have updated the engine examples to use the latest version of the engine. Can you give it another try please? We don’t expect it change but just want to rule out as many variables here

No change I’m afraid. Fail on Chrome/Firefox. OK on Safari

Ok, we are working with our IT department to see if there’s a laptop with Intel 630 that we can try to use to repro the issue

1 Like

Some more info.

The 2 failing iMacs are reporting 1 Graphics card
iMac 2017: AMD RadeonPro 580,
iMac 2019: AMD RadeonPro 570X

The MacBookPro 2017: is reporting two.

If I repeatedly hit reload on webglreport this sometimes it reports Radeon Pro 560 and sometimes Intel 630.

If I also repeatedly reload the engine example then twice in approx 100 reloads the depthMap was actually displayed. I can’t tell if it’s anything to do with flipping between gpus or whether its just successful once in a while.

1 Like

Some interesting news:

On my iMac (Radeon Pro 580 8 GB ):

I updated Chrome to the latest and the issues still exists:
Chrome: Version 102.0.5005.61 (Official Build) (x86_64) (previous: 101.0.4951.64)

I updated Chome Canary to the latest and the depth Map is seen in the engine example.
Chrome Canary: Version 104.0.5083.0 (Official Build) canary (x86_64) (previous 103.0.5060.0 )

Hopefully that will filter through to the stable releases.

I couldn’t find a release note for canary. I had a peek at the commits for this canary release. I guess the answer will be in there somewhere, or one of the previous releases since I last updated canary.

Firefox still doesn’t work though

1 Like

That’s great news. It doesn’t sound like an issue I had in 2017 with my 2011 iMac where one day, a graphical issue just disappeared/fixed.

1 Like

It would interesting to know what the three.js is doing differently to playcanvas to allow current Chrome to work on my Macs, and what has changed in Chrome Canary between 103.0.5060.0 and 104.0.5083.0) to allow the engine example to show the depthMap, and whether that analysis would explain why Firefox isn’t showing the depthMap.