基于WEBGL的文字飞溅效果今年的美语很用心。上海已经下了一个月的雨，依旧没有停的意思。前一秒太阳还很热，下一秒就倾盆大雨，程若雨，大家都叫这暴梅。趁着暴力梅的热情，今天给大家带来了一场文字雨，先来看看效果吧。灵感来自LeoSans中的一个例子，这是一个开源的文本动画库。作者是谷歌创意开发者。有兴趣的可以去github上搜索一下。文字碰到水面后飞溅的效果，业内称为GooeyEffect，翻译过来就是粘液特效。是前端小伙伴用来模拟液体效果的利器，也催生了很多玩法。用于UI交互特效用于大屏交互特效看起来很花哨，但实现起来只需要简单两步：在效果区域添加模糊滤镜。基于模糊效果增加图像对比度容易吗？而使用css或者svg，就可以轻松实现这样的效果，而我们今天介绍的是第三种方案，也是运行效率最高的一种方案，是用webgl的shader实现的。这次我们使用pixi.js动画库。相信很多前端小伙伴已经对这个老牌的动画库不陌生了。其最新版本默认采用了webgl渲染模式，在现代浏览器中具有更高的性能。下面介绍该方案的几个要点。详情请参考文末源码。创建一个应用程序首先，创建一个pixijs应用程序，并将画布设置为填满整个屏幕。initScene(){this.app=newPIXI.Application({width:window.innerWidth,height:window.innerHeight,backgroundColor:0xffffff})this.app.view.style.width='100%'this.app.view.style.height='100%'this.app.view.style.position='absolute'this.el.appendChild(this.app.view)}添加filter刚才说了分两步实现粘糊糊的效果。我们首先对整个画布应用模糊滤镜，然后应用自定义滤镜来增加对比度。pixijs中的滤镜都是对webglshader的封装。addFilter(){constblurFilter=newPIXI.filters.BlurFilter(3)//blurfilter//自定义片段着色器，增加alpha区域的对比度constfs=`varyingvec2vTextureCoord;统一采样器2DuSampler；voidmain(void){vec4color=texture2D(uSampler,vTextureCoord);if(color.a>0.6){gl_FragColor=vec4(1.0,1.0,1.0,1.0);}else{gl_FragColor=vec4(0.0,0.0,0.0,1.0);}`constthresholdFilter=newPIXI.Filter(undefined,fs,{})this.app.stage.filters=[blurFilter,thresholdFilter]this.app.stage.filterArea=this.app.renderer.screen}文本效果到实现文字撞击水面的飞溅效果，首先获取汉字的字形路径，然后在路径中填充一些粒子，最后对粒子进行简单的物理运动，实现触底碰撞效果。每个汉字都是一张背景透明的png图片。我们只需要通过canvasAPI对这些图片的像素点进行采样，就可以得到每个字符的点阵坐标。getImageData(){constcanvas=document.createElement('canvas')constctx=canvas.getContext('2d')img.onload=()=>{ctx.drawImage(img,0,0,size,size)constimgData=ctx.getImageData(0,0,size,size)for(leti=0;i
