基于WEBGL的文字飞溅特效
今年的梅雨很敬业，上海已经下了一个月的雨，仍然没有要停下来的意思，前一秒还是大太阳，下一秒被浇成落汤鸡，大家管这叫暴力梅。
蹭下暴力梅的热度，今天给大家带来一阵文字雨，先来看下效果。
灵感来源于LeoSans中的一个示例，LeoSans是一个开源的文字动画库，
作者是Google的创意开发者，有兴趣可以在github上搜下。
文字撞击水面后飞溅的效果被业界称为Gooey Effect，翻译过来就是粘液特效，是前端小伙伴用来模拟液体效果的利器，也催生出了很多玩法。
用来做UI交互特效
用来做大屏互动特效
看起来花里胡哨，实现起来只需要两个简单的步骤：
- 对效果区域添加模糊滤镜
- 在模糊效果的基础上增加图像对比度
是不是很简单？而且用css或者是svg，可以轻松的实现这样的效果，而我们今天介绍的是第三种方案，也是运行效率最高的一种，用webgl的shader来实现。
这次我们使用pixi.js动画库，相信很多前端小伙伴对这个老牌动画库已经很熟悉了，它的最新版本已经默认采用webgl渲染模式，在现代浏览器上有较高性能提升。
下面介绍程序的几个要点，具体细节可以参考文末的源代码。
创建应用
先来创建一个pixijs应用，并将画布设置充满整个屏幕。
initScene() {
this.app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
backgrondColor: 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)
}添加滤镜
刚才说过，要实现Gooey效果有两个步骤。我们先对整个画布应用模糊滤镜，然后在应用一个自定义滤镜来增加对比度，pixijs中的滤镜都是对webgl shader的封装。
addFilter() {
const blurFilter = new PIXI.filters.BlurFilter(3) //模糊滤镜
//自定义片段着色器，增加alpha区域对比度
const fs = `
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
vec4 color = 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);
}
}
`
const thresholdFilter = new PIXI.Filter(undefined, fs, {})
this.app.stage.filters = [blurFilter, thresholdFilter]
this.app.stage.filterArea = this.app.renderer.screen
}文字效果
要实现文字撞击水面的飞溅效果，首先要取得汉字的字形路径，然后用一些粒子填充路径，最后对粒子做简单的物理运动，实现触底碰撞效果。
每个汉字都是背景透明的png图片，我们只要通过canvas API对这些图片进行像素采样，就能获得每个文字的点阵坐标。
getImageData() {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
img.onload = () => {
ctx.drawImage(img, 0, 0, size, size)
const imgData = ctx.getImageData(0, 0, size, size)
for(let i = 0; i < imgData.data.length; i+=4) {
const alpha = imgData.data[i+3]
const index = i / 4
if(alpha > 0) {
this.data.push({
x: index % size,
y: index / size | 0
})
}
}
this.createChar()
}
img.src = src
}粒子弹性碰撞
每个粒子垂直方向有一个重力加速度，每次触底碰撞的能量损失，使反弹高度降低。
update() {
this.vy += this.gravity
this.x += this.vx
this.y += this.vy
if(this.y > this.bottom) {
this.vy *= this.bounce
this.hit = true
}
}总结
现在你已经掌握粘性特效的原理，发挥你的想象力尝试做出一些有趣的效果吧！欢迎在留言区分享你的成果。
github源码：
https://github.com/imokya/word-splash
原文链接：
https://dev.xingway.com/character-splash/
