p5.j​​s 图形缓冲区性能与“正常”渲染

Question

我正在开发一个使用 p5.js 作为前端的应用程序。它是一个覆盖整个屏幕的画布，并有许多不同的组件。

该应用程序已经发展成为每帧渲染的许多组件，正如您所料，这对 CPU 使用率有很大影响。

我使用面向对象的方法。这允许我在构建元素时计算渲染元素所需的所有属性，因此在 draw() 期间完成了非常少量的计算。性能问题显然来自渲染，渲染有时会出现类似上面示例的循环。

我正在寻找优化渲染的方法。一种想法是将图形缓冲区用于需要循环的元素，例如网格和图形（或 p5.js 中的形状），以及用于静态元素（颜色、大小等很少改变的元素）。

另一种选择是使用 noLoop() 和 redraw() 方法，但这会使多个动画的实现成为一场噩梦。

有没有人在渲染大量元素时使用 p5.js 遇到性能问题（低 fps、高 CPU 使用率）？

是否可以解决这些问题或以某种方式优化渲染？

创建图形缓冲区并通过 image() 渲染它们会比正常渲染更快吗？例如：

var canvas;
var buffer;
var w = 200,
    h = 200;

var nX = 100,
    nY = 100;

function setup() {
  canvas = createCanvas(400, 400);
  canvas.background(0);
  buffer = makeGridBuffer(w, h, nX, nY);
}

function draw() {
  image(buffer, 0, 0);          // <- Will this be faster than
  makeGrid(w, h, w, h, nX, nY); // <- this?
}

function makeGridBuffer(w, h, nLinesX, nLinesY) {
  var pd = pixelDensity();
  var b = createGraphics(w, h, w/2, h/2);
  var v = null;

  b.background(255);
  b.stroke(255, 0, 0);

  // Make vertical lines
  for (var i = 0; i < nLinesX; i++) {
    v = map(i, 0, nLinesX, 0, w);
    b.line(v, 0, v, h);
  }

  // Make horizontal lines
  for (i = 0; i < nLinesY; i++) {
    v = map(i, 0, nLinesY, 0, w);
    b.line(0, v, w, v);
  }

  return b;
}

function makeGrid(x, y, w, h, nLinesX, nLinesY) {
  push();
  translate(x, y);
  fill(0, 255, 0);
  stroke(0);
  rect(0, 0, w, h);
  var v = null;
  // Make vertical lines
  for (var i = 0; i < nLinesX; i++) {
    v = map(i, 0, nLinesX, 0, w);
    line(v, 0, v, h);
  }

  // Make horizontal lines
  for (i = 0; i < nLinesY; i++) {
    v = map(i, 0, nLinesY, 0, w);
    line(0, v, w, v);
  }

  pop();
}

笔在这里

谢谢大家！

Answer 1

创建图形缓冲区并通过 image() 渲染它们会比正常渲染更快吗？

当你尝试时发生了什么？您在创建示例时经历了所有这些麻烦，那么为什么不运行它并看看会发生什么呢？

例如，如果我启动nX并向nY上到10000每个，然后注释掉该image(buffer, 0, 0)行，以便程序在每一帧手动创建场景，那么我得到的 FPS 约为 10。这显示了手动绘制减慢速度的问题。 FPS。

但是，如果我随后注释掉该makeGrid(w, h, w, h, nX, nY)行，以便仅image(buffer, 0, 0)运行 FPS，那么我会得到 60 的 FPS。这表明提前创建缓冲区对于 FPS 来说更好。

您的示例程序根据运行的线路绘制两个不同的东西，但希望它具有直观意义：如果您有一个非常复杂的场景，那么最好预先渲染它。

这是一个简单的示例，显示了每帧绘制一堆内容与使用缓冲区之间的速度差异：

var buffer;
var circles = 10000;

function setup() {
   createCanvas(400, 400);
   buffer = createGraphics(width, height);
   makeCircleBuffer();
}

function draw() {
    if(mouseIsPressed){
        image(buffer, 0, 0);
    }
    else{
        drawCircles();  
    }

    textSize(36);
    text(frameRate(), 50, height/2);

}

function drawCircles(){
    randomSeed(0);
    for(var i = 0; i < circles; i++){
        ellipse(random(width), random(height), 20, 20); 
    }
}

function makeCircleBuffer() {
    randomSeed(1);
    for(var i = 0; i < circles; i++){
        buffer.ellipse(random(width), random(height), 20, 20);  
    }
}

按鼠标切换到缓冲方法，并注意它的速度有多快。

无论您使用什么动画框架，这都是事实。切换到另一个框架并不能神奇地解决你的问题。