Three.js: Marching Cubes - Weird Grid Stretching

[jxm-math]

Description of the problem

An applet using Marching Cubes library renders differently in different computers / browsers. The code for the applet is located in https://cdn.rawgit.com/TungstenHub/tngt-threejs/master/scripts/quadrics.html and a StackExchange question https://stackoverflow.com/questions/50304079/marching-cubes-for-quadrics-three-js/50322344 shows two different behaviours on the same applet, both having a GIF exposing the rendered result.

The answer of the SE question reports the right behavior of Marching Cubes, showing accurate parameter-dependent quadrics.

The question reports an anomaly in which the base grid gets strangely stretched and the surfaces linearly distorted. This effect has been observed many times after clearing all browsing cache, both in Chrome and Firefox Quantum.

If more people open the applet above, perhaps some report the same strange behavior and the cause may be detected.

Three.js version

• [ ] Dev
• [x] r92
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome
• [x] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [ ] Windows
• [ ] macOS
• [x] Linux
• [ ] Android
• [ ] iOS

##### Hardware Requirements (graphics card, VR Device, ...)
-

[WestLangley]

Sorry, this is not a help site. Please do not cross-post help question here.

[jxm-math]

@WestLangley The issue has come up from a SE question, but I have posted it here as a potential bug: the same MarchingCubes snippet works differently in different devices. In any case, I'm sorry for the inconvenience if the issue does not match the purpose of this channel.

[WestLangley]

@jxm-math I understand. Unfortunately, plenty of users post here when there is a "potential bug". However, if you can _demonstrate_ a three.js bug, then that is a different matter. Thank you for understanding.

[Mugen87]

I can actually confirm the problem. The following application behaves inconsistent in Chrome and Safari.

https://cdn.rawgit.com/TungstenHub/tngt-threejs/master/scripts/quadrics.html

The visual outcome is different when e.g the value of parameter a11 is increased. In Chrome, the sphere becomes wide. The sphere in Safari gets tighter.

Safari (correct):

Chrome (wrong):

@jxm-math This is the problem you've mentioned at stackoverflow, right?

[jxm-math]

@Mugen87 Exactly! Thank you very much

[Mugen87]

I've exported the field data in Safari in a file. Can you please verify if you have the same data in your browser? You can use this fiddle to export your data: https://jsfiddle.net/srq6qt2z/7/

Maybe there is a problem in the way you generate these data in your application. If so, it's not a bug of MarchingCubes.

~data_safari.txt~

[jxm-math]

There seems to be different values

data-chrome.txt

[Mugen87]

I'm afraid you've used an old fiddle. Can you make a test again with https://jsfiddle.net/srq6qt2z/7/

Parameter a11 should have a value of 3.

[jxm-math]

I think the previous test was done with the newest fiddle, but I'm not sure. Versions 1 and 2 seem the same

data-chrome2.txt

[Mugen87]

Sry, I was the one with the wrong fiddle 😅. These are the data with the correct parametrization.
data_safari.txt

It looks like the values are identical.

[Mugen87]

I don't know why but your demo also works on Firefox and MacOS.

Interestingly, the official marching cubes example works on all browsers: https://threejs.org/examples#webgl_marchingcubes

[Mugen87]

I'm unable to reproduce the problem in Chrome 69. Closing.