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

Question

我一直在尝试在 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>

程序.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);
}

谢谢！

Answer 1

我认为最好的办法是对问题采取不同的方法，尝试连接 P5 和 Pixi 需要做很多工作。 我之前曾尝试使用这两个库，但它很快就出轨了。 您尝试做的事情可以单独使用 P5 或 Pixi 来完成。 P5 的唯一方法是我最了解的方法，所以我会引导您完成它。

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

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

let displacementShader;

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

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

如果你想看看我的演示之外的一些着色器示例，有一个可爱的Github 存储库。 在我的演示中，我也

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

问题描述

1 个解决方案

解决方案1
0 2020-08-01 20:02:30

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

问题描述

1 个解决方案

解决方案1 0 2020-08-01 20:02:30

解决方案1
0 2020-08-01 20:02:30