# Sphere gets distorted when rendering

**URL:** <https://discourse.threejs.org/t/sphere-gets-distorted-when-rendering/72418>\
**Category:** Questions\
**Tags:** webgl-renderer, geometry\
**Created:** [October 5, 2024, 3:26am UTC](https://discourse.threejs.org/t/sphere-gets-distorted-when-rendering/72418 "2024-10-05T03:26:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ixistudio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ixistudio/32/52448_2.png) [@ixistudio](https://discourse.threejs.org/u/ixistudio)\
**Post date:** [October 5, 2024, 3:26am UTC](https://discourse.threejs.org/t/sphere-gets-distorted-when-rendering/72418/1 "2024-10-05T03:26:02Z")

</div>

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:

> **[responsive bouncy 3d - JSFiddle - Code Playground](https://jsfiddle.net/ixistudio/L5sn10xd/33/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

The problem Im having is that the 3D sphere gets distored when rendering:  
 ![sphere-1.](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/7/b72013aa465eee862cc45f4a6e5187edc020c4ca.png)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/6/96415894d82fcb605f43f80a2ab1be6684b88ce9.png)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/e/7ea92ca7ca4a4922a6044d5180555558d51af712.png)

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!

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [October 5, 2024, 3:34am UTC](https://discourse.threejs.org/t/sphere-gets-distorted-when-rendering/72418/2 "2024-10-05T03:34:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ixistudio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ixistudio/32/52448_2.png) [@ixistudio](https://discourse.threejs.org/u/ixistudio)\
**Post date:** [October 9, 2024, 5:39am UTC](https://discourse.threejs.org/t/sphere-gets-distorted-when-rendering/72418/3 "2024-10-09T05:39:15Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/7/b7b58dc093d30df53084c61af05cc9a1193518de.png)

---

<div class="post-metadata">

**Author:** ![ixistudio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ixistudio/32/52448_2.png) [@ixistudio](https://discourse.threejs.org/u/ixistudio)\
**Post date:** [October 10, 2024, 6:19pm UTC](https://discourse.threejs.org/t/sphere-gets-distorted-when-rendering/72418/4 "2024-10-10T18:19:54Z")

</div>

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.

> [@R163+ workaround to keep supporting webgl-1?](https://discourse.threejs.org/t/r163-workaround-to-keep-supporting-webgl-1/63547):
>
> Is there any extension or workaround to keep supporting WebGL-1 within r163+? I understand that can cause a chain of issues and be a burden in some cases, yet it would be great to have an optional workaround!

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

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [October 11, 2024, 2:41am UTC](https://discourse.threejs.org/t/sphere-gets-distorted-when-rendering/72418/5 "2024-10-11T02:41:32Z")

</div>

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:

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

```