javascript - p5.j​​s 图形缓冲区性能与 'normal' 渲染

Question

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

该应用已经发展到拥有许多每帧渲染的组件，如您所料，这对 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();
}

笔here

提前谢谢大家!

Answer 1

Will creating graphics buffers and rendering them via image() be faster than rendering normally?

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

例如，如果我将 nX 和 nY 分别增加到 10000，然后注释掉 image(buffer, 0, 0) 行，这样程序每帧都手动创建场景，然后我得到大约 10 的 FPS。这表明手动绘图会降低 FPS 的问题。

但是如果我随后注释掉 makeGrid(w, h, w, h, nX, nY) 行，那么只有 image(buffer, 0, 0) 正在运行，然后我得到 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);  
    }
}

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

无论您使用什么动画框架，都是如此。切换到另一个框架不会神奇地解决您的问题。