javascript – p5.js图形缓冲区性能与“正常”渲染

2023年2月27日 198次阅读

我正在开发一个使用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();
}

笔here

谢谢大家！

最佳答案

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

你试过的时候发生了什么？你经历了创建一个例子的所有麻烦,所以为什么不运行它,看看会发生什么？

例如,如果我将nX和nY分别调高到10000,然后注释掉图像(缓冲区,0,0)行,以便程序每帧手动创建场景,那么我得到大约10的FPS.这显示了手动绘制减慢FPS的问题.

但是,如果我然后注释掉makeGrid(w,h,w,h,nX,nY)行,这样只运行图像(缓冲区,0,0),那么我的FPS为60.这表明创建提前缓冲对你的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);  
    }
}

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

无论你使用什么样的动画框架,这都是真的.切换到另一个框架不会神奇地解决您的问题.

点赞