0

I have tried to implement an applet showing the distinct types of space quadrics with the Marching Cubes library of three.js to render implicit surfaces. The shapes that appear though are not right and I guess I am not implementing the properties of THREE.MarchingCubes as needed. The core of the applet has the following code

        quadricData = {
            a11: 1,
            a22: 1,
            a33: 1,
            a12: 0,
            a13: 0,
            a23: 0,
            a1: 0,
            a2: 0,
            a3: 0,
            a: -1
        };

        quadValue = function (data, x, y, z) {
            return data.a11*x*x+
                   data.a22*y*y+
                   data.a33*z*z+
                   data.a12*2*x*y+
                   data.a13*2*x*z+
                   data.a23*2*y*z+
                   data.a1*x+
                   data.a2*y+
                   data.a3*z+
                   data.a;
        }

        var res = 50;
        var material = new THREE.MeshPhongMaterial( {
            color: '#1565C0', // blue 800
            transparent: true,
            opacity: 0.8,
            side: THREE.DoubleSide,
            flatShading: true
        } );

        quadric = new THREE.MarchingCubes( res, material );
        quadric.isolation = 0;

        for ( var k = 0 ; k < res ; k++ ) {
            for ( var j = 0 ; j < res ; j++ ) {
                for ( var i = 0 ; i < res ; i++ ) {

                var x = 8*(i-res/2)/res;
                var y = 8*(j-res/2)/res;
                var z = 8*(k-res/2)/res;

                quadric.field[ i + j*res + k*res*res ] = quadValue(quadricData,x,y,z);

                }
            }
        }

but the full code may be inspected here. I suppose that the field attribute has to be filled with the values of a function, but perhaps this is not the correct way to proceed. Strange effects appear, for instance, when making a11 large, which expands the ellipsoid instead of shrinking it; the 'marching cubes grid' seems also to expand, which is sort of funny.

enter image description here

Many other configurations do not match the expected result. Which is the right way to use THREE.MarchingCubes?

Jjm
  • 261
  • 2
  • 10

1 Answers1

2

To use THREE.MarchingCubes:

  • Include MarchingCubes.js via <script src="https://threejs.org/examples/js/MarchingCubes.js"></script>

  • Allocate the volume with resolution R, which will be a voxel cube with resolution R x R x R, via V = new THREE.MarchingCubes( R, material )

  • Fill in the voxel values, which are a linear array of float values. The index for a voxel at location [X,Y,Z] is (X + (Y * R) + ( Z * R * R)). Set the values via V.field[ i + j*R + k*R*R ] = f

  • Set the isolation value. The displayed volume will be all voxels less than this value, so this could all be called iso-surface value. Set the value via V.isolation = s.

It seems your code is working correctly. Increasing a11 does reduce the volume in the x dimension as expected.

enter image description here

The only thing I noticed is the code multiplying a12 and a13 and a23 by 2. If a quadric equation is expressed as:

Ax^2 + By^2 + Cz^2 + Dxy + Exz + Fyz + Gz + Hy + Iz + J = 0

And the calculation is: data.a11*x*x + data.a22*y*y + data.a33*z*z + data.a12*2*x*y + data.a13*2*x*z + data.a23*2*y*z + data.a1*x + data.a2*y + data.a3*z + data.a, then it seems to multiply D E and F by two for no reason?

Otherwise, was there a bug you've resolved since posting the question? Or could you be more specific about the problem?

Bug report: There's a bug report 14060 logged against three.js here. As of May 2018, with three.js version r92, it appears the Marching Cubes library is working in (1) Firefox in Windows and MacOS, (2) Safari on MacOS. It appears buggy in Firefox on Linux, and in Chrome on any system. Turning off flat shading may resolve the problem.

MichaelsonBritt
  • 976
  • 6
  • 9
  • Thank you very much! It is funny, but my code does not work properly; I have added a gif for clarity. If you download the code from GitHub, do you get right results? Perhaps it depends on the browser or something else? In https://cdn.rawgit.com/TungstenHub/tngt-threejs/master/scripts/quadrics.html there still are wrong results. As for the 2 factor, it has to do with the coefficients coming from a symmetric matrix: http://mathworld.wolfram.com/QuadraticSurface.html – Jjm May 14 '18 at 04:59
  • In Firefox version >= 59 on Windows 7, the results look correct to me. – MichaelsonBritt May 14 '18 at 05:15
  • I've tried in Firefox 60 and it does not work, also clearing browsing data and in incognito mode. Incrementing a11 makes the ellipsoid in the x direction. Could you upload a picture of a working example? Very funny indeed – Jjm May 14 '18 at 05:31
  • 1
    Edited with GIF. Don't think the code has any modifications other than removing the multiply-by-two, which I agree shouldn't make a difference. You don't see any problems with the demos [here](https://webglsamples.org/blob/blob.html) or [here](https://threejs.org/examples/webgl_marchingcubes.html)? – MichaelsonBritt May 14 '18 at 07:40
  • Really, I can't believe it. In your GIF it works perfectly. How does https://cdn.rawgit.com/TungstenHub/tngt-threejs/master/scripts/quadrics.html appear to you? Could you check this link? If it appears ok for you, perhaps it is a bug in the library; it has no sense that there are different results for the same code. I've opened an issue in https://discourse.threejs.org/t/marching-cubes-for-quadrics/2823 and I'll draw their attention about this funny fact. Thank you very much!! – Jjm May 14 '18 at 10:38
  • It is working the same for me, at the [link you provided](https://cdn.rawgit.com/TungstenHub/tngt-threejs/master/scripts/quadrics.html), meaning, it seems to work fine. For your question on threejs.org (and here) I'd recommend including details of your browser, hardware, and operating system, and to try on a few different setups. As with any browser-based technology it's important to stay alert for inconsistencies across different environments. – MichaelsonBritt May 14 '18 at 11:30
  • Actually a (strange) bug: https://github.com/mrdoob/three.js/issues/14060#issuecomment-388894564 you may include this in your answer in case it helps other people. Thanks again!! – Jjm May 16 '18 at 09:05
  • 1
    Added bug report details. Please let me know if you see any inaccuracy. – MichaelsonBritt May 16 '18 at 13:45