Introducing: The Lattice

Announcements
21

haha this thread made my monday morning :slight_smile:
For the experimenters around here, you can also use the Lattice in NGE:
Babylon.js Node Geometry Editor (babylonjs.com)

Cone head :wink:

image

3 Likes
22

And now with GPU support:
Add shader rendering support for Lattice by deltakosh · Pull Request #15700 · BabylonJS/Babylon.js (github.com)

// lattice
    var lattice = new BABYLON.Lattice({ 
        resolutionY: 10,
        autoAdaptToMesh: skull, 
        position: BABYLON.Vector3.Zero()
    });

    const latticePlugin = new BABYLON.LatticePluginMaterial(lattice, material);
    
    scene.onBeforeRenderObservable.add(() => {
        // Twist!!
        for (x = 0; x < lattice.resolutionX; x++) {
            for (y = 0; y < lattice.resolutionY; y++) {
                for (z = 0; z < lattice.resolutionZ; z++) {
                    const angle = (y / lattice.resolutionY) * 0.02;
                    const control = lattice.data[x][y][z];
                    const cx = control.x;
                    const cz = control.z;

                    const cosAngle = Math.cos(angle);
                    const sinAngle = Math.sin(angle);

                    // Rotation
                    control.x = cosAngle * cx - sinAngle * cz;
                    control.z = sinAngle * cx + cosAngle * cz;
                }
            }
        }

        // Update texture data
        latticePlugin.refreshData();
    });
4 Likes
23

Is this material meant to visualize the lattice? I am not able to make it work if so.

This lattice addition is a very cool and powerful tool for animation. I’m excited to use it, but it’s a bit of a challenge to animate at the moment. It would be super cool to be able to assign the lattice points to bones or allow keyframe animation to the individual lattice points.

24

nope that PG is supposed to show the lattice deformation on the mesh

The lattice itself is a pure geometric entity. A list of vector3 if you prefer

25

The LatticePluginMaterial is the plugin material used to execute the lattice deformation in the vertex shader instead of doing it at the geometry level with the CPU

1 Like
26

Thanks. That’s kind of what I thought but I wanted to be sure. I’ll have to build my own visualizer. :grin:

27

That being said, it is entirely possible to animate the vector3s if you need animation

No bones but linear animation yeah!

28

Are there any plans for other effectors like bend, melt, makeSpherical, etc?

1 Like
29

Yup:)

2 Likes
30

If you can make it so when you use it with a cloner it can apply to the all the meshes as a unit or make it so it can be nested inside the mesh that is being cloned and have some sort of randomness applied to the properties per instance of the clone then ohhhh boy, that becomes a powerhouse tool.

31

Wanna create a feature request? Describe what you need and I’ll do it after 8.0

1 Like
32

Excellent. I’ll have to figure out how to do this. Applying animation to even a 3x3x3 lattice seems daunting to me, but I’m still learning. If you have a good place for me to see an example or any tips, I would very much appreciate it. I’m an animator with vast Maya experience where it’s rather easy to animate a lattice deformer. I keep hacking my way through all the Javascript.

33

If you look at the sample you share, the lattice is animated:

// Twist!!
        for (x = 0; x < lattice.resolutionX; x++) {
            for (y = 0; y < lattice.resolutionY; y++) {
                for (z = 0; z < lattice.resolutionZ; z++) {
                    const angle = (y / lattice.resolutionY) * 0.02;
                    const control = lattice.data[x][y][z];
                    const cx = control.x;
                    const cz = control.z;

                    const cosAngle = Math.cos(angle);
                    const sinAngle = Math.sin(angle);

                    // Rotation
                    control.x = cosAngle * cx - sinAngle * cz;
                    control.z = sinAngle * cx + cosAngle * cz;
                }
            }
        }

On every frame we take the vector of the lattice and rotate them around z axis.

Does it make sense?

1 Like
34

Yes, the example method is straightforward and understandable, but I was looking for something more artistic and controllable. I came up with this method, but it would be nice to be able to add animation directly to lattice control points instead of using the render loop to update the points based on animated mesh objects.

4 Likes
35

:heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat: :heart_eyes_cat:

36

Hey! that’s super nice!!!

“directly to lattice control points instead of using the render loop to update the points based on animated mesh objects” :=>You can animate the vectors inside the lattice the same way you did, by animating x,y,z individually on the vector itself. Tedious but doable

1 Like
37

Thanks! I used the spheres not only as visual guides, but also a convenient way to connect animation objects (BABYLON.Animation). Since the lattice does not have an animation property to connect to, this was the best way I could think of to animate the lattice points.

I misspoke when I said “directly to lattice control points”. I meant to convey that it would be great to get an animation property on the lattice. I love the ability to construct animation “curves” and then directly connect them to objects via the animation property. The control available (stop, start, frame range, etc) with animation curves is much better than relying on the render loop method.

I look forward to more lattice functionality, especially smooth deformations instead of just linear. One of my goals is to rig a VeggieTales character in BabylonJS, which relies on lattice deformations.

Keep up the great work!

2 Likes