Firefox does not render the depth correctly?


I’m about to create a three.js implementation for Phaser 3.

Everything works great except that Firefox does not render the depth correctly.

Screenshot from 2020-01-02 14-29-34
The cube should obviously be in front.

Here is the example. In Chrome it works fine.

I’m using version 0.111.0

I initialize the renderer like so:

// comes from the Phaser game
this.renderer = new WebGLRenderer({
  canvas: as HTMLCanvasElement,
  context: as WebGLRenderingContext,
  antialias: true

Just a quick question: Is this normal and I simply have to add one or two property to fix it? Or do I have to dig deeper to resolve this issue?

(I just started using three.js few days ago)

Thanks a lot :blush:

No, definitely not^^. Please try to reproduce the glitch with plain three.js code.

This will make it easier to debug the issue and eventually report the issue to Mozilla.

Sorry that it took so long. I have never used jsfiddle before.

I can’t reproduce the issue in Firefox with plain three.js code.

I was actually looking for such an example since I think the problem is caused by the way you have implemented your demo. Unfortunately, I don’t know what’s going wrong so far…


@Mugen87 Thanks for you help. I figured it out. Was actually easy to solve.

The problem is that the WebGL context created by Phaser does not meed the requirements of three.js.

I just create custom canvas and merged the default contextAttributes from three.js into Phaser’s default contextAttributes.

This is how it is done.


Thanks for having this conversation. I recently used Phaser with three.js and was running into this issue and unsure where to start with debugging.

1 Like

Do you use

This is how enable3d does it.