Javascript p5.js画布上的Pixi.js渲染器

我一直在尝试用Pixi编写一个脚本，它使用p5.js程序中的画布作为整个“视图”来应用置换过滤器。我已经通过将一个图像添加为sprite（见下文）实现了这一点，但我不知道如何与p5.js的输出接口，并将其用作Pixi的AutoDetectTrenderer（）的视图。我使用了p5的.parent（）函数将画布附加到特定元素，但这似乎没有帮助。理想情况下，这一切都会存在于我的#main container div中

下一个任务是确保这个提要是实时的，因此来自p5.js程序的动画元素会不断地被送入Pixi并被过滤

如有任何帮助/建议，将不胜感激

HTML:

---

谢谢大家!

我认为最好的办法是对这个问题采取不同的方法，试图将P5和Pixi联系起来需要做很多工作。我以前尝试过使用这两个库，但它很快就出轨了。你想做的事情可以通过P5或Pixi单独完成。P5唯一的方法是我最了解的方法，所以我会带你走过去

Pixi制作过滤器的方式是使用webGL着色器，它们是在GPU上运行的用于处理图像的小程序。它们是用一种类似C的语言编写的，称为P5支持webGL着色器（过滤器），因此，我们编写了自己的置换着色器。我不打算在这里讨论glsl部分，但我已经做了一个带有很多评论的演示

着色器的第一部分加载到glsl代码中。始终在预加载时执行此操作。作为一种替代方法，您可以使用with和grave字符串

let displacementShader;

function preload() {
    displacementShader = loadShader("displacement.vert", "displacement.frag");
}

接下来创建一个模式画布，它与普通画布不同，用于三维图形和着色器。你仍然需要为你的2d图形找个地方，所以也可以做一个绘制2d图形的工具

let buffer;

function setup(){
    createCanvas(windowWidth, windowHeight, WEBGL);
    buffer = createGraphics(windowWidth, windowHeight);
}

现在一切都设置好了，只需运行着色器

function draw(){
    buffer.circle(100, 100, 50, 50) // draw stuff to the buffer
    shader(displacementShader);
    // pass variables into the shader, it will need to buffer to distort it
    displacementShader.setUniform("buffer", buffer);
    rect(0, 0, width, height); // some geometry for the shader to draw on too
}

---

如果你想看一些着色器的例子，我的演示有一个很好的例子。在我的演示中，我也

我认为最好的办法是对问题采取不同的方法，尝试将P5和Pixi连接起来需要大量的工作。我以前尝试过使用这两个库，但它很快就出轨了。你想做的事情可以通过P5或Pixi单独完成。P5唯一的方法是我最了解的方法，所以我会带你走过去

Pixi制作过滤器的方式是使用webGL着色器，它们是在GPU上运行的用于处理图像的小程序。它们是用一种类似C的语言编写的，称为P5支持webGL着色器（过滤器），因此，我们编写了自己的置换着色器。我不打算在这里讨论glsl部分，但我已经做了一个带有很多评论的演示

着色器的第一部分加载到glsl代码中。始终在预加载时执行此操作。作为一种替代方法，您可以使用with和grave字符串

let displacementShader;

function preload() {
    displacementShader = loadShader("displacement.vert", "displacement.frag");
}

接下来创建一个模式画布，它与普通画布不同，用于三维图形和着色器。你仍然需要为你的2d图形找个地方，所以也可以做一个绘制2d图形的工具

let buffer;

function setup(){
    createCanvas(windowWidth, windowHeight, WEBGL);
    buffer = createGraphics(windowWidth, windowHeight);
}

现在一切都设置好了，只需运行着色器

function draw(){
    buffer.circle(100, 100, 50, 50) // draw stuff to the buffer
    shader(displacementShader);
    // pass variables into the shader, it will need to buffer to distort it
    displacementShader.setUniform("buffer", buffer);
    rect(0, 0, width, height); // some geometry for the shader to draw on too
}

---

如果你想看一些着色器的例子，我的演示有一个很好的例子。在我的演示中，我也

嗨！最后你成功了吗？嗨！你最后在这方面成功了吗？