先看一张友商的效果图 某品牌的AI效果

可以看到效果还是比较华丽的，不仅有半透明贴图，顶部还有渐变填充，目标框的周围还有线和点，兼顾了美观与简洁，作为流媒体开发的我不禁奇怪，这是如何做到的？

经过半个月的摸索，终于实现了这个效果，现将心得分享给。

先上最终效果

webgl有很强的性能，对于目标量较多的实时渲染，只有webgl这条路，所以首要是要让视频帧和AI渲染帧同步。

为此需要能够前端得到裸的解码后的图像，并且能够用webgl叠加在上面。最终我选择了 https://github.com/langhuihui/jessibuca 这个播放器为基础。在此上面开发。并且用了游戏中传统的9宫格贴图的方式实现了最简洁的目标渲染。

9宫格贴图的原理就不在这过多说明了，想了解的同学自行搜索，和用矢量的方式对比，优势就是快，就是把素材按照一定的比例平铺到目标框上，这对擅长贴图的opengl来说简直小菜一碟。实际效果确实很理想，无论是渲染速度还是美观程度。都达到了预期。

开发的难点集中在 webgl sharder的编写，以及后端c++视频服务器的配合。

avpacket.com
7956968@qq.com