来自 p5.js 画布的 Pixi.js 渲染器答案

【问题标题】：Pixi.js renderer from p5.js canvas来自 p5.js 画布的 Pixi.js 渲染器
【发布时间】：2018-03-22 16:53:15
【问题描述】：

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

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

任何帮助/指针将不胜感激！

HTML：

<!DOCTYPE html>
<html>

<head>
    <title>pixi.js + p5.js displacement filter</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v1.6.1/bin/pixi.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.15/p5.min.js"></script>
    <style>
        #main-container {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="main-container"></div>
    <script type="text/javascript" src="js/program.js"></script>
</body>

</html>

program.js：

// p5.js program

var theCanvas, width, height;

function setup() {
  width = document.getElementById('main-container').offsetWidth;
  height = document.getElementById('main-container').offsetHeight;
  theCanvas = createCanvas(width, height);
    rectMode(CENTER);
}

function draw() {
  background(0, 0, 255);
    translate(width/2, height/2);
    rotate(frameCount*0.01);
  fill(0, 255, 0);
  rect(0, 0, 100, 100);
}

// -_-_-_-_-_-_-_-_-_-_-_-_

// pixi.js

// Renderer
var renderer = PIXI.autoDetectRenderer(width, height);
document.body.appendChild(renderer.view);

// Stage
var stage = new PIXI.Stage(0xd92256);

// Container
var container = new PIXI.DisplayObjectContainer();
stage.addChild(container);

// Background
var bg = PIXI.Sprite.fromImage("https://i.imgur.com/3q3kNGh.png?1");
container.addChild(bg);

// Filter
var displacementTexture = PIXI.Texture.fromImage("http://i.imgur.com/2yYayZk.png");
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);

// Apply it
container.filters = [displacementFilter];

// Animate
requestAnimFrame(animate);

function animate() {
  var offset = 1;

  displacementFilter.offset.x += offset;
  displacementFilter.offset.y += offset;

  renderer.render(stage);
  requestAnimFrame(animate);
}

谢谢！

【问题讨论】：

嗨！最后你成功了吗？

标签： javascript canvas view p5.js pixi.js

【解决方案1】：

我认为最好的办法是采取不同的方法来解决问题，尝试连接 P5 和 Pixi 需要大量工作。我之前尝试过使用这两个库，但它脱离了轨道fast。您尝试做的事情可以单独使用 P5 或 Pixi 完成。 P5 唯一的方法是我最了解的方法，因此我将引导您完成。

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

着色器的第一部分加载到 glsl 代码中。始终在预加载中执行此操作。作为替代方案，您可以使用createShader 和坟墓弦。

let displacementShader;

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

接下来创建WEBGL 模式画布，这与普通画布不同，用于 3d 图形和着色器。您仍然需要在某个地方放置 2d 图形，因此请创建 buffer 来绘制 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
}

如果您想查看除我的演示之外的其他着色器示例，这里有一个可爱的Github repo。在我的演示中，我也

【讨论】：