CODEWITHSUNDEEP
javascript3dthree.jsmarching-cubes
Jjm
Jjm

Reputation: 281

Marching Cubes for Quadrics - Three.js

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?

Upvotes: 2

Views: 1154

Answers (1)

MichaelsonBritt
MichaelsonBritt

Reputation: 986

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.

Upvotes: 3

Related Questions