三、OpenGL粒子效果实现思路

效果图：

粒子效果.GIF

一、背景简介

这次的粒子效果实现是在美摄SDK自定义滤镜中实现，所以在实现的过程中需要考虑如何跟美摄的SDK相结合。

二、思路历程

1.在美摄SDK的基础上画一点东西
2.画出一个点
3.画出一个会自动移动的点
4.画出一个跟着手移动的点
5.补点

三、实践

3.1基本概念

如何把CPU上的数据传递到GPU, glsl的语法和一些默认参数如：gl_PointSize、gl_Position、gl_FragColor。OpenGL的坐标系，UIKit的坐标系，商汤识别出来的点所依赖的坐标系，这些坐标系之间的转换。

3.2在美摄SDK上画一点东西

创建自己的顶点着色器和片源着色器，并且加载到应用程序中。注意在加载过程中一定要进行错误捕获，出问题的时候便于直接定位，iOS推荐使用NSAssert。美摄每捕捉到一帧画面都会给出一个回调，在这个回调中，我们先把美摄捕捉到的画面绘制出来，然后再绘制我们自己的点。如何区分是美摄的顶点还是自定义的顶点，我在给GPU传入顶点的时候多传了一个标记位。

3.3画会动的点

类比客户端的动画，其实就是一个视图随着时间的推移一点一点移动的效果。在OpenGL上也是一样，其实就是一个点，每次绘制的时候这个点的位置都在改变。于是只需要在第一次创建这个点的时候传入一个创建时间、位置、速度，今后在每次绘制这个点的时候再传入当前时间，两个时间的差值再乘上一个速度，我们就可以得到当前这个点相比最开始的位置需要移动多少，这就形成了一个可以移动的点。

3.4跟着手移动

每次获取到手的触摸点，然后将这个点转换成OpenGL的点，当成顶点传给GPU就可以。

/// 将UIKit的点转换成OpenGL的点
- (CGPoint)glPoint:(CGPoint)point {
    CGFloat halfW = self.view.bounds.size.width * 0.5;
    CGFloat halfH = self.view.bounds.size.height * 0.5;
    
    CGFloat newX = (point.x - halfW) / halfW;
    CGFloat newY = (halfH - point.y) / halfH;
    
    return CGPointMake(newX, newY);
}

3.5补点

虽然可以跟着手移动，但是当手移动很快，或者有丢帧现象的时候，粒子效果的连续性就没有了。这个问题的解决方法就是手动补点。
上一次要绘制的点是A，这一次要绘制的点是B,那么A到B之间这条直线上所有的点就用代码补上。

参考文档：https://learnopengl-cn.github.io/