3D Mesh Animated in Greensock

[BeckBeach 2 Likes (Newbie)]

I saw this site on awwwards: https://loveiko.com/

It has 3D mesh objects that animate. Is this being done with Greensock? What program makes these 3D mesh objects? One of them looks like an emoticon that was made into mesh. Any help is appreciated.

[PointC 8,599 Likes (Superhero)]

Looks like they are using GSAP for their animation engine. For the 3D part of it they are using Three.js.

 

https://threejs.org/

 

Happy tweening.

 

[OSUblake 9,990 Likes (Superhero)]

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.

 

 

 

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

 

 

 

 

[OSUblake 9,990 Likes (Superhero)]

10 hours ago, BeckBeach said:

One of them looks like an emoticon that was made into mesh. 

 

You can draw an emoji on a canvas, which means you can get image data for it.

 

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

 

 

 

 

 

[BeckBeach 2 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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