基于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