pixijs解析frag并应用在图片上实例页面

HTML代码：

<canvas width="640" height="431"></canvas>

JS代码：

(async () => {
    // 素材资源准备
    const fragUrl = './scale.frag';
    const sourceUrl = './source.jpg';
    // 加载frag资源，作为字符串
    const frag = await fetch(fragUrl).then(res => res.text());

    // 滤镜动画需要的uniform变量
    const uniforms = {
        scale: 1.0,
        horzIntensity: 0.5,
        vertIntensity: 0.5
    };

    // 目标缩放scale
    // 可以使用 Tween.js 等库来实现动画
    // https://github.com/zhangxinxu/Tween
    // 这里呢，使用枚举的方式逐帧变化实现动画
    const scale = [1.0,1.07,1.1,1.13,1.17,1.2,1.2,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0];

    // 创建pixi绘制实例
    const canvas = document.querySelector('canvas');
    const view = canvas.transferControlToOffscreen()
    // app 初始化
    const viewWidth = canvas.width;
    const viewHeight = canvas.height;
    const app = new PIXI.Application({
        view,
        width: viewWidth,
        height: viewHeight,
        resolution: 1
    });

    // 创建图像绘制容器
    const imgContainer = new PIXI.Container();
    app.stage.addChild(imgContainer);

    // 图片素材加载
    const sprite = PIXI.Sprite.from(sourceUrl);
    sprite.width = viewWidth;
    sprite.height = viewHeight;
    imgContainer.addChild(sprite);

    // 创建自定义滤镜
    const filter = new PIXI.Filter(null, frag, uniforms);
    imgContainer.filters = [filter];

    // 动画
    let start = 0;
    app.ticker.add(() => {
        // 每帧更新滤镜的uniform变量
        filter.uniforms.scale = scale[start++ % scale.length];
    });
})()