Firefox does not render the depth correctly?

Questions
1

Hi,

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:

// https://github.com/yandeu/enable3d/blob/ff0b75f0f262e6e8abe1da3eb8b5e34545914343/packages/enable3d/src/threeWrapper/index.ts
// root.sys.game comes from the Phaser game
this.renderer = new WebGLRenderer({
  canvas: root.sys.game.canvas as HTMLCanvasElement,
  context: root.sys.game.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:

2

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.

3

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

https://jsfiddle.net/yandeu/Lagcz78t/

4

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

https://jsfiddle.net/4bgo9zvs/1/

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…

2 Likes
5

@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.

https://jsfiddle.net/g1zbLrkm/

4 Likes
6

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
7

Do you use enable3d.io?

This is how enable3d does it.