如何使用VIDEO作为位移图在PIXI.js中修改位移图参数？

Question

---

[更新]：

它在PIXI.js上没有明确记录，但是我设法弄清楚了；我必须编辑置换过滤器 scale 。请参阅以下内容：

    app.renderer.view.style.transform = 'scale(1.1)';
    displacementSprite.scale.x = 2;
    displacementSprite.scale.y = 2;
    displacementFilter.scale.x = 200;
    displacementFilter.scale.y = 200;

我还不得不放大基础图像的比例，以掩盖由于位移水平较高而导致的边缘变形。

尽管如此，我仍在寻找循环位移.mp4的方法，对此将提供任何帮助。

---

我正在尝试对网站的一部分进行编码，其中页面背景是静态.jpg图像，该图像会被我的轮廓的灰度视频所取代（请参见下面的示例），但是在处理位移重量。

尽管我很难找到任何资源或教程来编写此类代码-我设法使其与PIXI.js一起使用，但就目前而言似乎非常有限操纵位移权重等参数（我似乎只能编辑位移图像的比例）。

就我在浏览器中了解到的

这是Touchdesigner（未编码）样机

如您所见，我已经能够在浏览器中重新创建的位移权重比我在Touchdesigner中能够实现的位移权重弱得多。

Here is a link to the displacement map MP4 I'm using.

我的问题如下：

1. 如何调整位移权重以增加滤镜效果？
2. 如何使此代码灵活适用于不同的浏览器/设备？

3. 如何制作位移视频循环？

   <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
   
   <script>
   
   var app;
   function initPixi() {
     app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
     document.body.appendChild(app.view);
   
     var image = new PIXI.Sprite.from("bliss.jpg");
     image.width = window.innerWidth;
     image.height = window.innerHeight;
     app.stage.addChild(image);
   
   
   
   
     displacementSprite = new PIXI.Sprite.from("blurred2.mp4");
     displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
   
     app.stage.addChild(displacementSprite);
     app.stage.filters = [displacementFilter];
   
     app.renderer.view.style.transform = 'scale(1.01)';
     displacementSprite.scale.x = 2;
     displacementSprite.scale.y = 2;
   
     animate() 
   }
   
   
   initPixi();