byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11051鑫空间-鑫生活本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。一、前言视频剪辑软件,无论是桌面端还是手机端,都已经被剪映称霸。其中,有个“特效”的标签页,里面有各式各样的效果,如下图所示:本文会以pixi.js为基础工具,介绍这里面的特效如何在Web网页中实现。这里面的特效分为了两种:一种是直接改变当前绘制的滤镜,主要是通过解析.frag后缀的文件后渲染实现,例如模糊,扭曲等效果。另外一种是混合滤镜,专门实现一些氛围特效效果,主要是通过解析MP4视频资源(本质是图片序列),然后使用滤色混合模式实现,例如下雨起雾,烟花绽放等效果。好,系好安全带,准备发车了。二、frag滤镜的解析与渲染frag文件其实上不能叫做滤镜,而是一个片段着色器,它的作用是改变当前绘制的颜色,从而实现一些特殊的效果。frag文件的格式如下:uniform sampler2D uSampler; // 采样器
varying vec2 vTextureCoord; // 纹理坐标
void main(void) {
vec4 color = texture2D(uSampler, vTextureCoord); // 采样
gl_FragCol
...
继续阅读
(163)