Volumetric NURBS

[mmoelle1]

Related issue: none

Implementation of volumetric (aka tri-variate) NURBS

Tri-variate NURBS are parametric volumes with variables (u, v, w). Extending the example webgl_geometry_nurbs.html a volumetric NURBS geometry can be generated as follows

        const nsControlPoints = [
        [
          [
            new THREE.Vector4( - 200, - 200, 0, 1 ),
            new THREE.Vector4( - 200, - 200, 100, 1 )
          ],
          [
            new THREE.Vector4( - 200, - 100, 0, 1 ),
            new THREE.Vector4( - 200, - 100, 100, 1 )
          ],
          [
            new THREE.Vector4( - 200,   100, 0, 1 ),
            new THREE.Vector4( - 200,   100, 100, 1 )
          ],
          [
            new THREE.Vector4( - 200,   200, 0, 1 ),
            new THREE.Vector4( - 200,   200, 100, 1 )
          ]
        ],
        [
          [
            new THREE.Vector4( 0, - 200, 0, 1 ),
            new THREE.Vector4( 0, - 200, 100, 1 )
          ],
          [
            new THREE.Vector4( 0, - 100, 0, 1 ),
            new THREE.Vector4( 0, - 100, 100, 1 )
          ],
          [
            new THREE.Vector4( 0,   100, 0, 1 ),
            new THREE.Vector4( 0,   100, 100, 1 )
          ],
          [
            new THREE.Vector4( 0,   200, 0, 1 ),
            new THREE.Vector4( 0,   200, 100, 1 )
          ]
        ],
        [
          [
            new THREE.Vector4( 200, - 200, 0, 1 ),
            new THREE.Vector4( 200, - 200, 100, 1 )
          ],
          [
            new THREE.Vector4( 200, - 100, 0, 1 ),
            new THREE.Vector4( 200, - 100, 100, 1 )
          ],
          [
            new THREE.Vector4( 200,   100, 0, 1 ),
            new THREE.Vector4( 200,   100, 100, 1 )
          ],
          [
            new THREE.Vector4( 200,   200, 0, 1 ),
            new THREE.Vector4( 200,   200, 100, 1 )
          ]
        ]
        ];
        const degree1 = 2;
        const degree2 = 3;
        const degree3 = 1;
        const knots1 = [ 0, 0, 0, 1, 1, 1 ];
        const knots2 = [ 0, 0, 0, 0, 1, 1, 1, 1 ];
        const knots3 = [ 0, 0, 1, 1 ];
        const nurbsVolume = new NURBSVolume( degree1, degree2, degree3, knots1, knots2, knots3, nsControlPoints );

Since ParametricGeometry does not support tri-variate objects arbitrary slices of the NURBS volume can be visualised as follows:

        const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
        map.wrapS = map.wrapT = THREE.RepeatWrapping;
        map.anisotropy = 16;
        map.colorSpace = THREE.SRGBColorSpace;

        function getSurfacePointFront( u, v, target ) {

          return nurbsVolume.getPoint( u, v, 0, target );

        }

        function getSurfacePointBack( u, v, target ) {

          return nurbsVolume.getPoint( u, v, 1, target );

        }

        const geometryFront = new ParametricGeometry( getSurfacePointFront, 20, 20 );
        const materialFront = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
        const objectFront = new THREE.Mesh( geometryFront, materialFront );
        objectFront.position.set( - 200, 100, 0 );
        objectFront.scale.multiplyScalar( 1 );
        group.add( objectFront );

        const geometryBack = new ParametricGeometry( getSurfacePointBack, 20, 20 );
        const materialBack = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
        const objectBack = new THREE.Mesh( geometryBack, materialBack );
        objectBack.position.set( - 200, 100, 0 );
        objectBack.scale.multiplyScalar( 1 );
        group.add( objectBack );

[Mugen87]

Do you mind updating webgl_geometry_nurbs by adding a new mesh to demonstrate the new NURBSVolume module?

[mmoelle1]

@Mugen87 Thank you for the suggestion, I will do. There is one small problem. As described in the commit message ParametricGeometry only supports bi-variate geometries. I can update webgl_geometry_nurbs to have multiple slices as I did in the commit message (and for testing), e.g., the six surfaces of a cube. Or is there a tri-variate version of ParametricGeometry?

[Mugen87]

Or is there a tri-variate version of ParametricGeometry?

No there isn't. But as a start the mentioned code example would be good.

[mmoelle1]

@Mugen87 Would this example be sufficient? If so, I will implement it into webgl_geometry_nurbs and update the PR.

[Mugen87]

LGTM!

Maybe you can add a comment that explains why several instances of ParametricGeometry are created and what they represent.

[mmoelle1]

I have updated webgl_geometry_nurbs as requested.

[Mugen87]

Do you mind updating the E2E screenshot? Otherwise the CI fails.

You can do that with the following command:

npm run make-screenshot webgl_geometry_nurbs

[Mugen87]

For testing: https://rawcdn.githack.com/mmoelle1/three.js/c12b41f3ab8a94e7a507e95315a6ffdc23b6b852/examples/webgl_geometry_nurbs.html

[Mugen87]

Do you mind updating the screenshot one more time? It seems the new screenshot does not honor the changes I have added to your branch (see c12b41f).

[mmoelle1]

I took the screenshot too quickly :-) Shot be fixed now. Thanks for implementing the changes.

BTW, I would not mind working on a tri-variate ParametricGeometry but I might need some help from three.js experts.

[Mugen87]

Feel free to give this a try. Now with having NURBSVolume an enhanced version of ParametricGeometry makes sense.

[mmoelle1]

@Mugen87 There is another feature that I would like to contribute to three.js - adaptive splines. More precisely, truncated hierarchical B-splines (THB). Their basic definition is like NURBS but without the weights. On the plus side, THB splines make it possible to refine the surface/volume adaptively, see here.

As a starting point a would "duplicate" NURBSSurface.js and NURBSVolume.js to THBSplineSurface.js and THBSplineVolume.js thereby removing the weights and adding a function refine(...) where one can specify which regions should be refined. Secondly, I would have to add evaluation functions in NURBSUtils.js. Would that be of interest to three.js?

[Mugen87]

We are trying to keep the scope of the repository manageable so I would see a NURBS alternative maintained in a separate repository. That said, it is of course okay to add an external example (e.g. webgl_geometry_thb) that uses THB modules to showcase their usage. We do this for other third-party components as well like BVH, CSG or the IFC loader. Check out the examples here and how they include external libs in their import map:

https://threejs.org/examples/?q=external

[mmoelle1]

I was more thinking of implementing the THB core functionality in three.js (two single JS files for surfaces and volumes). The link to Gismo was just meant for illustration purposes. Not to include it as external dependency. Am 23.01.2024 um 19:48 schrieb Michael Herzog ***@***.***>:  We are trying to keep the scope of the repository manageable so I would see a NURBS alternative maintained in a separate repository. That said, it is of course okay to add a so called external example (e.g. webgl_geometry_thb that uses THB modules to showcase their usage. We do this for other components as well like BVH, CSG or the IFC loader. Check out the examples here and how they include external libs in their import map: https://threejs.org/examples/?q=external<https://urldefense.com/v3/__https://threejs.org/examples/?q=external__;!!PAKc-5URQlI!7LQ_kkSoYy4BlSPy96XfrrTH__KS0lMvHdSuM65H10RvoHH69iN3KqGo35XEyI-HL1RD1b3kHKajTjbWze9ojTnSoO8$> — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https://github.com/mrdoob/three.js/pull/27601*issuecomment-1906712542__;Iw!!PAKc-5URQlI!7LQ_kkSoYy4BlSPy96XfrrTH__KS0lMvHdSuM65H10RvoHH69iN3KqGo35XEyI-HL1RD1b3kHKajTjbWze9orohAEig$>, or unsubscribe<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AAPGPI4RQKHXIOOTPXV5WPTYQAAYHAVCNFSM6AAAAABCECXXFKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBWG4YTENJUGI__;!!PAKc-5URQlI!7LQ_kkSoYy4BlSPy96XfrrTH__KS0lMvHdSuM65H10RvoHH69iN3KqGo35XEyI-HL1RD1b3kHKajTjbWze9ovXLpaQk$>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Mugen87]

I was more thinking of implementing the THB core functionality in three.js (two single JS files for surfaces and volumes).

It really depends on how complex the THB core functionality is. The number of files is not that much of a matter.

If it is comparable to the compact NURBSVolume class, it would be probably okay to add the code here. Otherwise using an external repository is the better choice.