# WebGLRenderTarget depth in Chrome vs Firefox

**URL:** <https://discourse.threejs.org/t/webglrendertarget-depth-in-chrome-vs-firefox/53362>\
**Category:** Questions\
**Tags:** render-target, depth\
**Created:** [June 29, 2023, 6:11pm UTC](https://discourse.threejs.org/t/webglrendertarget-depth-in-chrome-vs-firefox/53362 "2023-06-29T18:11:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcharytoniuk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mcharytoniuk/32/17151_2.png) [@mcharytoniuk](https://discourse.threejs.org/u/mcharytoniuk)\
**Post date:** [June 29, 2023, 6:11pm UTC](https://discourse.threejs.org/t/webglrendertarget-depth-in-chrome-vs-firefox/53362/1 "2023-06-29T18:11:03Z")

</div>

Hello!

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.

* * *

Firefox:

 ![2023-06-29_195654_130631273](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/d/1dded1d6e68cec740d1544394b073c49b77300d8.jpeg)

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):

 ![2023-06-29_195820_993252634](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/9/49e25dc89a6426b514037a71920b014a57680e98.jpeg)

---

<div class="post-metadata">

**Author:** ![mcharytoniuk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mcharytoniuk/32/17151_2.png) [@mcharytoniuk](https://discourse.threejs.org/u/mcharytoniuk)\
**Post date:** [June 29, 2023, 6:43pm UTC](https://discourse.threejs.org/t/webglrendertarget-depth-in-chrome-vs-firefox/53362/2 "2023-06-29T18:43:40Z")

</div>

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`