pixi.js实现水波纹效果

吐槽君 分类:javascript

创建场景

PIXI.JS是个超快的2D渲染引擎,你可以用JavaScript或者其他HTML5技术来显示媒体,创建动画或管理交互式图像,从而制作一个游戏或应用。

首先让我们从github下载最新版本的Pixi.js。然后在html引入

    <script src="./js/pixi.min.js"></script>
 

css样式

     * {
        margin: 0;
        padding: 0;
     }
 

创建一个名叫app的PIXI应用对象

     const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight })
     document.body.appendChild(app.view)
 

PIXI.Application算出了应该使用Canvas还是WebGL去渲染图象,它取决于你正在使用的浏览器支持哪一个。
我们传入浏览器的内部宽度和高度,它决定了canvas的宽和高。 然后使用app.view将场景添加到HTML页面作为Canvas元素

现在有了一个画布,现在需要往画布上放图像。所有想在画布上显示的东西必须被加进一个被称作舞台的PIXI对象中。

    app.stage
 

创建精灵图,然后设置精灵图的宽高,然后将精灵图加入舞台

    let img = new PIXI.Sprite.from('img/4.jpeg')
    img.width = window.innerWidth
    img.height = window.innerHeight
    app.stage.addChild(img)
 

置换贴图

使用photoshop创建纹波效果,我们需要将图像像素远离原始位置移动以产生失真。 使用PIXI.JS,可以使用位移映射完成。创建黑白图案的随机变化,并使用它与原始图像映射。

在photoshop上创建一个1024*1024的画布,选择滤镜-渲染-云彩。如下图,将文件导出为命名为cloud.png

iShot2021-06-03 13.02.43.png

将新建的图像再次创建一个精灵。 然后从Sprite创建一个位移滤波器。 设置WRAPMODE以重复以确保位移覆盖整个图像。 然后将其添加到舞台上并应用过滤器。

    displacementSprite = new PIXI.Sprite.from("cloud.png");
    displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
    displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
    app.stage.addChild(displacementSprite);
    app.stage.filters = [displacementFilter];
 

设置动效

创建动画函数并移动位移映射,调用RequestAnimationFrame来启动动画循环。

function animate() {
      displacementSprite.x += 10;
      displacementSprite.y += 4;
      requestAnimationFrame(animate);
}
 

通过缩小一点来解决边缘周围失真

     displacementSprite.scale.x = 4
     displacementSprite.scale.y = 4
 

通过缩放解决波纹密集

     app.renderer.view.style.transform = 'scale(1.02)'
 

最终效果:https://wutao.work/work-plugin-library/pixi.html

完整代码:https://www.pixiplayground.com/#/edit/-WP9vXHbw2ajyRVvsxID-

回复

我来回复
  • 暂无回复内容