마스크와 작물 이미지는 안녕, 사용의 고성능 + 쉐이더 메쉬. 기사의 하단에 대한 완전한 코드를!
효과 미리보기 :
사용 방법 :
- 빈 노드를 만듭니다
- 사용자 추가 스크립트 구성 요소
mesh-texture-mask - 사진 추가
- 다각형의 수정 된 정점 좌표를 추가
원리
만들기 mesh
mesh무엇입니까? mesh객체는 사물의 모양을 결정하는 것입니다. 2 차원 예컨대 사각형, 원형, 삼각형 등이 될 수 들어, 삼차원 입방체, 구형, 실린더 등을들 수있다.
mesh필요가 초기화 VertexFormat객체를. 이 객체는 객체의 정점 형식입니다.
상기 name정점 셰이더 해당 attribute변수의 값. type데이터 형식에 대응하여, 각 데이터의 크기를 결정한다.
num에 해당하는 여러 데이터 구성 요소가 있습니다 (추측 하는!). 예를 들어, 2 차원 좌표 및 텍스처 좌표 만 일반적으로 자외선 x과 y3 차원 좌표를 가지고, 두 개의 구성 요소, 2로 설정된 xyz세 개의 변수들, (3)의 값과, 상기 색상은 일반적으로이 rgba세 구성 요소, 이것은 4로 설정된다.
normalize 그것은 정상화 나타냅니다.
우리 폴리곤 클리핑 사진, 단지 2 차원 좌표 및 UV 텍스처 좌표를 들어, 생성 mesh은 다음과 같이 기준 코드이다 :
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);UV 텍스처 좌표 계산
좌상에서 UV 텍스처 좌표, u샤프트 맞아, v축 아래쪽으로, 0 내지 1 범위이다. 중간에 우리의 좌표 x를 오른쪽으로 축, y축 방향이다.
우리가 먼저 찾을 수 있도록 x,y왼쪽 아래에 비율을, 다음은 반대 y축하는로 전환 uv좌표계. 참조 코드는 다음과 같습니다.
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;계산 정점 인덱스
개념을 알고 먼저 필요가 무승부 실제로 삼각형 모양의 복수를 그리는 것입니다. 그것은 삼각형 다각형의 복수로 분할 할 수 있으며, 정점 인덱스는 어떻게 삼각형을 그리는 방법을 알려줍니다.
如何将一个多边形切割成多个三角形？可以采用'耳切法'的方式。把多边形的一个耳朵切掉，然后再对剩下的多边形再次切割。
怎么样的耳朵才能切呢？这个耳朵的顶点需要满足是凸顶点且没有其他顶点在这个耳朵里。
如何判断是凸顶点呢？首先要知道向量外积的定义，表示向量的法向量。方向根据右手法则确定，就是手掌立在a、b所在平面的向量a上，掌心由a转向b的过程中，大拇指的方向就是外积的方向。
对于cc.Vec2的外积就是面积，有正负之分，也是根据右手法则确定。
若多边形ABCDEF顶点以逆时针顺序排序的话，AB x BC > 0 表示B点是凸顶点。参考代码如下。
const v1 = p2.sub(p1);
const v2 = p3.sub(p2);
if (v1.cross(v2) >= 0) {
// 是凸点
}判断点D是否在三角形ABC内，可以通过外积计算点与线的位置关系判断出。
// 判断一个点是否在三角形内
_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 在AB同同方向
&& (AB.cross(AC) >= 0 ^ AC.cross(AD) >= 0) // D,B 在AC同同方向
&& (BC.cross(AB) > 0 ^ BC.cross(BD) >= 0); // D,A 在BC同同方向
},最后把以上综合起来就可以计算出顶点索引。
小结
以上为白玉无冰使用 Cocos Creator v2.2.2 开发"使用 mesh 实现多边形裁剪图片"的技术分享。有想法欢迎留言！如果这篇对你有点帮助，欢迎分享给身边的朋友。
参考资料:
多边形分解成三角形算法