OpenGLES_实战01_弹幕

学习是一件开心的额事情

• 学习目标

从零打造直播视频弹幕框架

• 主要用到的技术

OpenGL ES 2.0

• 核心思路

文字转图片-> 图片通过OpenGL渲染

• 已实现功能
  1.支持文字弹幕
  2.支持图片弹幕
  3.支持Gif动画弹幕
  4.支持弹幕缓冲
  5.支持碰撞检测
  6.弹幕速度可调节
  7.弹幕的大小和颜色设置
  8.弹幕特效

• 架构方案

设计图

弹幕基类

弹幕的顶点数据和图片数据属性,以及一些方法设置顶点坐标位置的方法

文字弹幕，图片弹幕，gif弹幕

生成对应弹幕数据的方法

弹幕信息类

包含用户信息，等级，时间,弹幕速度，弹幕类等

弹幕加工厂

处理弹幕先屏幕中显示的位置，以及缓存弹幕的数量等

渲染类

负责配置OpenGL,如帧率,深度格式等

目前的进度

1.支持文字弹幕和图片弹幕
2.用户等级排序
3.支持弹幕碰撞效果和重叠效果
4.支持自定义字体大小和颜色
5.支持多种特效弹幕
6.速度可调节

• 重叠效果

让学习成为一种习惯

• 碰撞检测

让学习成为一种习惯

• 做了几种特效

  
  
  

  有木有很爽

让学习成为一种习惯

让学习成为一种习惯

让学习成为一种习惯

让学习成为一种习惯

• 图片弹幕

让学习成为一种习惯

让学习成为一种习惯

• gif动画弹幕

让学习成为一种习惯

• 支持淡入,淡出,淡入淡出效果

只是其中一种

遇到的问题

1.在异步计算,弹幕顶点的位置,在主线程计算渲染计算后的数据,导致两个线程同时竞争一个数组对象,计算的时候,不能显示, 显示的时候不能计算,导致了出现卡顿现象

解决方案: 让移步计算每次触发的间隔时间变长,降低竞争的概率,但有时还是会竞争,不过概率大大减小,牺牲了弹幕的移动速度。
解决方案二:使用了一种快速排序算法,每一帧同步计算弹幕的位置,检测碰撞,去掉弹幕数组的线程锁,弹幕运行效率明显提高,所以最终选择了方案2.

2.在将纹理数据加载到GPU 中去后,调用下面的方法不能释放,导致内存不断增高!

解决:发现内存增高的问题不是纹理导致的,而是自己获取图片RGBA 数据的时候,不小心多申请了一次内存

• 总结
  弹幕框架继续完善中,如果你想要代码,请到这里下载,如果你觉得那些地方不合理,烦请直言指出!万分感谢。框架持续更新中,敬请关注!