Different color values in DepthTexture on Android (Chrome/Firefox) and OSX (Safari)

Questions
, , ,
1

Hey all,

Using THREEJS version 158.

I’m getting different values in the DepthTexture when rendering a scene to a RenderTarget that has that DepthTexture defined.

On my Android Phone in any Browser (Fairphone 4, CPU: Snapdragon 750G, GPU: Adreno 619) and Macbook Pro (2017 Intel, GPU:Radeon Pro 560) only in Safari, but Chrome and Firefox show correctly.

The values are shifter down by around 4%. This is still a factor after using perspectiveDepthToViewZ and viewZToOrthographicDepth in the Fragment shader with same near / far values. I’ve changed the format to DepthStencilFormat and type to UnsignedInt248Type but getting the same results.

I’ve tested the same scene on different devices and browsers, and strikethrough the browsers that show different darker values:

  • iPad Pro - (Safari / Chrome / Firefox)
  • iPhone 11 - (Safari / Chrome / Firefox)
  • Windows 10 PC (GPU: Nvidia 2070s) - (Chrome / Firefox)
  • MacBook Pro 2017 (GPU: Radeon Pro 560) - (Safari / Chrome / Firefox)
  • FairPhone 4 (GPU: Adreno 619) - (Chrome / FireFox )

It seems like a GPU limit set by the system or browser. It could also be a colorspace thing. I’m not sure what is influencing the values. Does anyone have an idea what this could be? Or if this is a result of moving to the new color system?

threejs_depthTexture_different_values
threejs_depthTexture_different_values942×1014 40.8 KB

2

You use the depthTexture with webgl. I saw a similar phenomenon in webgpu with r158 but don’t know if it’s related. The scene becomes darker when I create a depthTexture. Clearing the renderer specifically before I render the actual scene after I have rendered the depthTexture doesn’t help either.