Sphere gets distorted when rendering

Questions
,
1

Hello,

Im working in a demo rebuild where I combine Phaser v3.85.2 and ThreeJS r169 in a 2d/3d mini game. In this case Im working on rebuilding the game and making it compatible with latest releases of each library plus adding responsive design.

Check out the jsfiddle here:

The problem Im having is that the 3D sphere gets distored when rendering:
sphere-1.

Now, if you go to the demo code on the link below and comment out line 549, this.ball3D.renderOrder = 1;, you’ll see the 3D ball rendered correctly, but now the 3D platforms don’t render:
sphere-2

If you change the ThreeJS version on the importmap on the HTML to 117, the rendering order is correct even if the material for the platforms is missing:
sphere-3

I suspect it may have something to do with the WEBGL2 rendering update, but how can I fix it to display the sphere correctly and the platforms?

Any help is much appreciated.
Thanks!

2

Some observation. Even if line 549 is commented, when you start playing and miss a platform, it happens the same as if the line is not commented.

1 Like
3

That’s correct @PavelBoytchev. Line 549, this.ball3D.renderOrder = 1;, has nothing to do with the problem. In fact, I’m almost certain the problem is the WEBGL2 update and the drop of WEBGL support, as I suspected before. To test that in the fiddle, change to version 162 on the HTML importmap, and in the JS line 611, change webgl2 to webgl1, and we get a proper render.

Version 162 is the last version to support WEBGL, after that only WEBGL2 is supported.

render
render726×397 15.4 KB

4

I found this other post where they are talking about keeping support for WEBGL1 on r163+. I guess someone would need to maintan THREE.WebGL1Renderer.

That does not solve this problem tho, which is why is the sphere getting distored when rendering in WEBGL2?

5

This not a solution but if you replace geometry with the following then you could at least get the shadow of the blue ball together with platforms:

        const geometry = new THREE.IcosahedronGeometry(
            this.ball.displayWidth * gameOptions.gameScale, // radius
            3
        );