非常好gl_VertexId,使我模型爆炸!如何在Cocos中模拟几何着色器?

老规矩先上预览地址:cocos-model-explosion

思路是从这个文章学到的:如何假装WebGL拥有几何着色器

代码很简单,核心点就是使用 gl_VertexId 从纹理中获取到所在三角形的顶点数据,大概有以下几个需要注意的点:

  1. 首先得要能获取到 gl_VertexId,引擎已经帮我们做好了:enableVertexIdChannel
    在shader里面直接把 getVertexId 的代码拷贝一下:

    image

  2. 将模型mesh的三角形全部改为独立的三角形,这样才能通过 gl_VertexId 推算出三角形的其他两个顶点:

  3. 将顶点位置信息储存在纹理中,首先将坐标归一化到0到1的范围,然后就可以储存在Texture2D.PixelFormat.RGBA32F 格式纹理的rgb通道里:

  4. 准备工作做好以后,我们就可以在shader里面通过顶点id减去3取余的值得到三角形index,然后通过纹理获取到三角形完整的顶点信息:

    image

  5. 加点简单的动画:沿三角形法线方向移动移动,加点位移,模型直接爆炸

源码地址:cocos-model-explosion

最后是广告:

yet another 3D鱼竿模拟组件
yet another 伤害飘字组件

9赞

很棒的,请继续坚持创作!:heart:来自bilibili

有点高级,先mark