WebGLRenderTarget depth in Chrome vs Firefox


I have some issues with my scene. It looks OK in Firefox, but also looks completely wrong in Chrome.

Each of those “tiles” is a portal to a different scene. Each has a different WebGLRenderTarget assigned to it. Each has its own camera, which is framed using CameraUtils.frameCorners.

It renders as expected in Firefox. The order of objects in each tile is: object → terrain → skybox

In Chrome it looks off, it’s something like: object → skybox → terrain (also faces of the objects on top of terrain are mixed up).

Everything looks fine when I’m not using portals and WebGLRenderTarget.

I tried fiddling with WebGLRenderTarget and Mesh parameters, but to no avail. Is this a browser bug? Is there a workaround?

I would appreciate any ideas on how to approach fixing this.


Chrome (I resized the skybox here to better show the issue and rendering order - I made it a bit smaller vs Firefox so it does not cover the tiles):

Ok, nevermind. I think I figured out. Manually setting DepthTexture in WebGLRenderTarget fixed it in Chrome. It’s strange though that it worked in Firefox out of the box and didn’t work in Chrome

Cheers! : D

edit 2: also setting perspectiveCamera.near to 1 instead of 0.1 helped with some geometry faces flickering in Chrome inside the WebGLRenderTarget

1 Like