Say goodbye to mask cropping images and use a high-performance Mesh + Shader. Get the full code at the bottom of the article!

Effect preview:

Usage:

  1. Create an empty node
  2. Add a user script componentmesh-texture-mask
  3. Add images
  4. Added modified polygon vertex coordinates

Realize the principle of

createmesh

What is a mesh? A mesh is what determines the shape of an object. For example, in two dimensions, it can be a square, a circle, a triangle, etc. In three dimensions it can be a cube, a sphere, a cylinder, etc.

Mesh initialization requires a VertexFormat object. This object is a vertex format object.

Where name is the value of the attribute variable corresponding to the vertex shader. Type corresponds to the data type and determines the size of each data.

Num pairs should have several data components. . For example, 2d coordinates and texture UV coordinates usually only have x and Y components, so set it to 2; The three dimensional coordinates have three variables xyz, so the value is 3; Color usually has four rGBA components, so set it to 4.

Normalize means normalize.

For our polygon clipping image, we only need one 2D coordinate and one texture UV coordinate, creating the mesh reference code as follows:

const gfx = cc.gfx;
let mesh = new cc.Mesh();
mesh.init(new gfx.VertexFormat([
    { name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
    { name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2},]),this.vertexes.length, true);
Copy the code

Calculates texture UV coordinates

The texture UV coordinate system is in the upper left corner, the U axis is to the right, the V axis is to the down, the range is 0 ~ 1. And our coordinate system is in the middle, x to the right, y to the up.

So we can figure out the ratio of x to y in the lower left corner, and then invert the y axis to uv. The reference code is as follows.

const vx = (pt.x + this.texture.width / 2 + this.offset.x) / this.texture.width;
const vy = 1.0 - (pt.y + this.texture.height / 2 + this.offset.y) / this.texture.height;
Copy the code

Compute vertex index

The first thing you need to know is that drawing a shape is actually drawing multiple triangles. A polygon can be divided into triangles, and the vertex index tells it how to draw those triangles.

How to cut a polygon into multiple triangles? You can use the ‘ear cut’ method. Cut off one ear of the polygon, then cut the rest of the polygon again.

What kind of ear can be cut? The vertex of the ear needs to be convex and there are no other vertices in the ear.

How do you tell if it’s convex? So the first thing we need to know is the definition of the cross product, the normal vector of a vector. The direction is determined by the right hand rule, that is, the palm stands on vector A of the plane a and B, and the direction of the thumb is the direction of the cross product when the palm moves from A to B.

For cc.Vec2, the cross product is the area, which is positive and negative, also determined by the right hand rule.

If the vertices of a polygon ABCDEF are sorted counterclockwise, AB x BC > 0 indicates that B is convex. The reference code is as follows.

const v1 = p2.sub(p1);
const v2 = p3.sub(p2);
if (v1.cross(v2) >= 0) {
    / / is a convex point
}
Copy the code

Whether point D is in triangle ABC can be determined by calculating the position relation between point and line through the cross product.

// Determine if a point is in a triangle
_testInTriangle(point, triA, triB, triC) {
    let AB = triB.sub(triA), AC = triC.sub(triA), BC = triC.sub(triB), AD = point.sub(triA), BD = point.sub(triB);
    return (AB.cross(AC) >= 0 ^ AB.cross(AD) < 0)  // D,C in the same direction as AB
        && (AB.cross(AC) >= 0 ^ AC.cross(AD) >= 0) // D,B is in the same direction as AC
        && (BC.cross(AB) > 0 ^ BC.cross(BD) >= 0); // D,A in the same direction as BC
},
Copy the code

Finally, put all of these together to calculate the vertex index.

summary

The above is the technical sharing of “Using Mesh to achieve polygon clipping picture” developed by Cocos Creator V2.2.2 without ice for white jade. Have idea welcome message! If this article is helpful to you, please share it with your friends.

Resources: Polygon decomposition into triangles algorithm

Full code original link