Jump to content
Search Community

3D Mesh Animated in Greensock

BeckBeach test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi @BeckBeach

 

A mesh is like the geometry and the appearance/surface of something. 

 

Image an image. Now divide that image up into a grid. Each grid cell is split into two triangles. That's essentially what a mesh is.

 

Animating a 2d mesh with PixiJS. The vertices are the corners of the grid cells, which are represented by the red dots. The vertices are stored inside a single array, which isn't a convenient object to animate, so I map the vertices to point objects. I then animate the point objects with GSAP, and then on every animation frame, map the point object values back to the vertices array.

 

See the Pen zJgOpN by osublake (@osublake) on CodePen

 

 

 

That might be easier to do with three.js, but the concept is still the same. You can animate the points (vectors) of a mesh. Check out this demo. It's not using GSAP, but it's the same effect you're asking about.

 

See the Pen pyGJQr by Mamboleoo (@Mamboleoo) on CodePen

 

 

This is what the burger looks like.

 

h1sBnV4.png

 

 

They are using canvas to convert that image into a mesh. They loop through the image data, getting the rgba value of a pixel at a certain interval, and use those values to set the color and xyz value of a vector.

 

To learn more about image data, check out this tutorial...

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

 

And this post...

https://codepen.io/rachsmith/post/getting-getimagedata

 

 

 

 

  • Like 6
Link to comment
Share on other sites

18 hours ago, BeckBeach said:

Is there a tutorial explaining how to create an image like the hamburger image into a mesh?

 

No. Finding a tutorial that covers stuff like that is pretty rare. That demo is probably going to be one of the best sources to learn from.

 

Knowing how to work with image data is probably the most important part of that demo, and it has nothing to do with three.js. They are using rgba values of a pixel to create the mesh, much like I'm using rgba values to create particles in this demo.

 

See the Pen yRBOKB by osublake (@osublake) on CodePen

 

 

The image data loop in my demo would look like this if I weren't animating it.

 

for (var y = 0; y < height; y += grid) {
  for (var x = 0; x < width; x += grid) {
      
    var i = (y * width + x) * 4;
    
    var r = data[i];
    var g = data[i + 1];
    var b = data[i + 2];
    var a = data[i + 3];
                  
    var alpha = a / 255;
    
    if (!alpha) {
      continue;
    }
    
    var particle = {
      color: "rgba(" + r + "," + g + "," + b + "," + alpha + ")",  
      size: size,
      x: x,
      y: y
    };
      
    particles.push(particle);
  }    
}

 

 

If you look at line 100 in that three.js demo, you'll see that they are doing something very similar that.

 

The guy who made that demo also has a post about image data with some three.js demos that are similar to my demo.

https://codepen.io/Mamboleoo/post/how-to-convert-an-image-into-particles

 

 

 

  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...