Question

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

接下来的任务是确保此Feed正常进入，因此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);
}

谢谢！

Answer 1

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

Pixi对其进行过滤的方式是使用 webGL着色器，它们是在GPU上运行以处理图像的小程序。它们以称为glsl的C语言编写。 P5支持webGL着色器（过滤器），因此，我们编写了自己的置换着色器。我不会在这里介绍glsl部分，但是我制作了一个带有很多评论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。在我的演示中，我也

来自p5.js canvas

1 个答案: