Utilisez Canvas pour réaliser une triangulation d'image (LOW POLY) effect_javascript skills

J'ai accidentellement vu Ovilia utiliser threejs pour créer un LOW POLY, qui est l'effet de la triangulation plane d'images. J'ai trouvé cela incroyable, alors j'ai passé du temps à l'essayer moi-même.

Je n'ai pas beaucoup utilisé threejs, j'ai donc simplement utilisé l'API de dessin 2D de Canvas pour le faire, car il semble que threejs ne puisse pas être utilisé pour cet effet.

Accédez d'abord directement à la démo : http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html (Vous pouvez également la regarder sur mobile terminal, mais à cause du calcul Le montant est relativement important, et il faudra plus de temps à calculer sur un appareil mobile que sur un PC)

Pour obtenir cet effet, vous devez principalement trianguler l'image et effectuer une détection des contours sur l'image. Parmi ces deux, le premier utilise l'algorithme de triangulation de Delaunay et le second utilise l'algorithme de détection de bord de Sobel. Cela semble très haut de gamme, mais les deux algorithmes ont des composants open source correspondants qui peuvent être utilisés directement : le composant delaunay d'Ironwallaby et le composant sobel de Miguel Mota.

De ces deux algorithmes, sobel est meilleur, mais delaunay est un peu compliqué. Nous pourrons l'étudier dans le futur. Cependant, si vous souhaitez uniquement créer un effet pour le moment, vous pouvez toujours utiliser ces composants.

Maintenant que les deux éléments les plus importants sont en place, le reste est très simple :

Dessinez d'abord l'image sur la toile :

canvas.width = (img.width > 800) ? 800 : img.width;
canvas.height = img.height * canvas.width/img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 

Ensuite, récupérez les imgData de Canvas, puis renvoyez les nouvelles imgData via le calcul Sobel

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

Si nous mettons newImgData sur le canevas, nous constaterons que l'image couleur devient une image en niveaux de gris comme ceci :

Comme le composant Sobel mentionné ci-dessus n'est pas très adapté à mon utilisation, et que le code est également inapproprié, j'ai apporté les modifications et optimisations appropriées, optimisé la méthode de boucle, accéléré la vitesse de calcul et ajouté une fonction de rappel. Pour plus de détails, veuillez consulter le fichier sobel.js dans le github du projet

Lors du parcours de imgData.data dans la méthode Sobel, la fonction de rappel sera appelée et les points de coordonnées avec une valeur de couleur supérieure à 40 (c'est-à-dire que l'échelle de gris est supérieure à rgb(40,40,40)) seront enregistré dans le rappel. Descendez. Obtenez ensuite au hasard une partie des points de bord, puis ajoutez des coordonnées aléatoires et les valeurs de coordonnées des quatre coins. De cette façon, nous pouvons obtenir les points de coordonnées dont nous avons besoin

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 收集色值大于40的边缘像素点
var collectors = [];
Sobel(imgData , function(value , x , y){
if(value > 40){collectors.push([x , y]);}
});
// 添加一些随机点
for(var i=0;i<300;i++){particles.push([Math.random()*canvas.width , Math.random()*canvas.height]);}
// 添加随机边缘点，数量为边缘点数量除于50
var length = ~~(collectors.length/50), random;
for(var l=0;l<length;l++){
random = (Math.random()*collectors.length)<<0;
particles.push(collectors[random]);
collectors.splice(random , 1);
}
// 添加四顶点坐标
particles.push([0,0] , [0,canvas.height] , [canvas.width,0] , [canvas.width,canvas.height]);

Après avoir obtenu les points de coordonnées, vous pouvez utiliser le composant delaunay pour calculer et obtenir le tableau de coordonnées triangulaires dans le bon ordre. En connectant les points de ces tableaux, vous pouvez avoir l'effet suivant :

Bien sûr, l'effet que nous souhaitons n'est pas de connecter des lignes, mais de remplir tous les triangles par des couleurs, c'est-à-dire d'obtenir les trois coordonnées du triangle, puis de calculer les coordonnées du point central, puis d'obtenir le correspondant coordonnées dans imgData en fonction de la valeur de couleur RVB des coordonnées du point central, puis remplissez-la dans la zone triangulaire :

// 使用delaunay三角化获取三角坐标
var triangles = Delaunay.triangulate(particles);
var x1,x2,x3,y1,y2,y3,cx,cy;
for(var i=0;i < triangles.length; i+=3) {
x1 = particles[triangles[i]][0];
x2 = particles[triangles[i+1]][0];
x3 = particles[triangles[i+2]][0];
y1 = particles[triangles[i]][1];
y2 = particles[triangles[i+1]][1];
y3 = particles[triangles[i+2]][1];
// 获取三角形中心点坐标
cx = ~~((x1 + x2 + x3) / 3);
cy = ~~((y1 + y2 + y3) / 3);
// 获取中心点坐标的颜色值
index = (cy*imgData.width + cx)*4;
var color_r = imgData.data[index];
var color_g = imgData.data[index+1];
var color_b = imgData.data[index+2];
// 绘制三角形
ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
ctx.fillStyle = "rgba("+color_r+","+color_g+","+color_b+",1)";
ctx.fill();
ctx.restore();
}

Une chose à noter ci-dessus est que les coordonnées du point central obtenues doivent être arrondies pour obtenir les paramètres de couleur corrects. Si vous souhaitez ne pas arrondir, mais arrondir lors de l'obtention de l'indice RVB, vous pouvez obtenir La valeur de couleur est erronée. Parce que le pixel obtenu de cette manière n’est pas le pixel central souhaité.

Une fois la couleur obtenue, il s'agit d'une simple opération de raccordement puis de remplissage. L'effet final est :

Le contenu ci-dessus vous présente l'utilisation de Canvas pour obtenir l'effet de triangulation d'une image (LOW POLY). J'espère que cela vous sera utile !