# WebGLRenderTarget depthTexture behaves differently in Safari, Chrome and Firefox

**URL:** <https://discourse.threejs.org/t/webglrendertarget-depthtexture-behaves-differently-in-safari-chrome-and-firefox/7356>\
**Category:** Questions\
**Tags:** render-target, shader-material, depth-texture\
**Created:** [May 3, 2019, 2:00pm UTC](https://discourse.threejs.org/t/webglrendertarget-depthtexture-behaves-differently-in-safari-chrome-and-firefox/7356 "2019-05-03T14:00:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![al-ro](https://avatars.discourse-cdn.com/v4/letter/a/7ea924/32.png) [@al-ro](https://discourse.threejs.org/u/al-ro)\
**Post date:** [May 3, 2019, 2:00pm UTC](https://discourse.threejs.org/t/webglrendertarget-depthtexture-behaves-differently-in-safari-chrome-and-firefox/7356/1 "2019-05-03T14:00:31Z")

</div>

Hey

I am running into behaviour I don’t understand using WebGLRenderTarget. I am trying to code shadow casting following a tutorial. The algorithm is:

1. Render the scene into a render target from the point of view of a light source, storing the depth data in a texture
2. Render the scene on canvas using the main camera and read the depthTexture data to decide light/shadow colors for fragments

According to the examples I have seen this can be achieved by:

```auto
var shadowTarget = new THREE.WebGLRenderTarget(textureSize, textureSize);
shadowTarget.depthBuffer = true;
shadowTarget.depthTexture = new THREE.DepthTexture();

//Render depth information from light
renderer.setRenderTarget(shadowTarget);
renderer.render(scene, shadowCamera);
  
//Render main scene
renderer.setRenderTarget(null);  
renderer.render(scene, camera);

```

An example:

[https://codepen.io/anon/pen/OGKKKa](https://codepen.io/anon/pen/OGKKKa)

On some machines/browsers, I get wrong behaviour which I suspect comes from misunderstanding textures.

1. In Safari on a Macbook and Chrome on Linux, the scene is correctly rendered

2. In Chrome on my Macbook, the scene initially displays lines across the geometry which is a known error of the shadow algorithm. The shader code solves it with a bias variable but the scene is not updated correctly. One of the several things that results in correct visuals is adding a camera helper (checkbox in the example). Does adding the helper trigger some scene/renderer update that I could call explicitly?

3. In Firefox, the resulting depthTexture is not used at all and an error in the console says:  
`Error: WebGL warning: drawElements: Texture level 0 would be read by TEXTURE_2D unit 0, but written by framebuffer attachment DEPTH_ATTACHMENT, which would be illegal feedback.`

As I understand, read and write textures can’t be the same within the same shader. When it comes to reading the texture, I am rendering to canvas. The error is only visible in FF and not in Chrome and Safari.

My questions:

1. Why does the code give an error in FF but not in Chrome?
2. What is the update/change that adding a helper triggers?
3. Can I unbind the depthTexture from the material/program so I can use it for reading without undefined behaviour?
4. How to properly clone depthTexture data if I need to use two WebGLRenderTarget objects?
5. Am I the only one seeing this behaviour?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 3, 2019, 3:48pm UTC](https://discourse.threejs.org/t/webglrendertarget-depthtexture-behaves-differently-in-safari-chrome-and-firefox/7356/2 "2019-05-03T15:48:00Z")

</div>

I have debugged your code and the problem is that you render the depth pass (the first invocation of `render()`) with the same material that is intended for the actual render pass. By specifying a cheap override material you can fix the errors in Chrome and Firefox 🎉

https://codepen.io/anon/embed/preview/MdgexB?height=300&slug-hash=MdgexB&default-tabs=js,result&host=https://codepen.io

Besides, you should init your render loop not with `requestAnimationFrame()`. A simple call of `draw()` is sufficient. Also consider to optimize the render target for the depth texture. You don’t need a stencil buffer, you can use `NearestFilter` and `RGB` as format.

---

<div class="post-metadata">

**Author:** ![al-ro](https://avatars.discourse-cdn.com/v4/letter/a/7ea924/32.png) [@al-ro](https://discourse.threejs.org/u/al-ro)\
**Post date:** [May 3, 2019, 4:30pm UTC](https://discourse.threejs.org/t/webglrendertarget-depthtexture-behaves-differently-in-safari-chrome-and-firefox/7356/3 "2019-05-03T16:30:57Z")

</div>

That fixed everything. Thank you!

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [May 3, 2019, 6:29pm UTC](https://discourse.threejs.org/t/webglrendertarget-depthtexture-behaves-differently-in-safari-chrome-and-firefox/7356/4 "2019-05-03T18:29:32Z")

</div>

> [@Mugen87](#):
>
> You don’t need a stencil buffer

This is for this specific use case? Depth textures could utilize stencil buffers very well, the problem is they cannot be shared between targets 🙁

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 3, 2019, 8:36pm UTC](https://discourse.threejs.org/t/webglrendertarget-depthtexture-behaves-differently-in-safari-chrome-and-firefox/7356/5 "2019-05-03T20:36:01Z")

</div>

> [@pailhead](#):
>
> This is for this specific use case?

That’s right.