老规矩先上预览地址:cocos-model-explosion
思路是从这个文章学到的:如何假装WebGL拥有几何着色器
代码很简单,核心点就是使用 gl_VertexId
从纹理中获取到所在三角形的顶点数据,大概有以下几个需要注意的点:
-
首先得要能获取到
gl_VertexId
,引擎已经帮我们做好了:enableVertexIdChannel
在shader里面直接把getVertexId
的代码拷贝一下: -
将模型mesh的三角形全部改为独立的三角形,这样才能通过
gl_VertexId
推算出三角形的其他两个顶点: -
将顶点位置信息储存在纹理中,首先将坐标归一化到0到1的范围,然后就可以储存在
Texture2D.PixelFormat.RGBA32F
格式纹理的rgb通道里: -
准备工作做好以后,我们就可以在shader里面通过顶点id减去3取余的值得到三角形index,然后通过纹理获取到三角形完整的顶点信息:
-
加点简单的动画:沿三角形法线方向移动移动,加点位移,模型直接爆炸
最后是广告: