Using canvas to achieve a picture triangulation (low POLY) effect

Have you seen Oviliabefore? With Threejs did a low POLY, that is, the image of the triangular effect of the plane, feel very stunning, and then they took a little time to try.

I did not use the Threejs, so I directly use the canvas 2d drawing API to do, because it feels like this effect is not threejs.

Directly on the demo first:http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html?? (can also be seen on the mobile side, but because the computational capacity is larger , the mobile device will take more time to calculate than the PC. ）

To do this, it is necessary to triangulate the images and to detect the edges of the images. These two, the first used Delaunay triangulation algorithm, the second use of the Sobel edge detection algorithm. It sounds like a big steal. Two algorithms have the corresponding open source components can be directly used: Ironwallaby Delaunay components? And? The Sobel component of the Miguel Mota.

These two algorithms Sobel fortunately a bit, Delaunay is a bit complicated, can be studied later. But for now, these components can be used only to make an effect.

The two most important components are there, and the rest is simple:

First draw the picture onto the canvas:

Canvas.width = (Img.width > 800)? : img.width; canvas.height = img.height * canvas.width/img.width; ? ctx.drawimage (IMG, 0, 0, canvas.width, canvas.height);

　Then get to the canvas's imgdata, and then return the new Imgdata by Sobel calculation

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); ? var newImgData = Sobel(imgData);

　 If we put the newimgdata on the canvas, we will find that the color image becomes such a grayscale image:

Using canvas to achieve a picture triangulation (low POLY) effect