Javascript p5.js图形缓冲区性能与'；正常'；翻译

我正在开发一个应用程序，它的前端使用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();
}

var画布；
var缓冲区；
var w=200，
h=200；
var nX=100，
nY=100；
函数设置（）{
canvas=createCanvas（400400）；
画布背景（0）；
buffer=makeGridBuffer（w，h，nX，nY）；
}
函数绘图（）{
图像（缓冲区，0，0）；//
创建图形缓冲区并通过image（）进行渲染会比正常渲染更快吗

当您尝试时发生了什么？您在创建一个示例时经历了所有的困难，那么为什么不运行它，看看会发生什么

例如，如果我将
nX
和
nY
分别拖动到
10000
，然后注释掉
图像（缓冲区，0，0）
行，以便程序每帧手动创建一个场景，那么我会得到大约10的FPS。这表明手动绘制会降低FPS的问题

但是如果我随后注释掉
makeGrid（w，h，w，h，nX，nY）
行，这样只有
图像（buffer，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);  
    }
}

var缓冲区；
var=10000；
函数设置（）{
createCanvas（400400）；
缓冲区=createGraphics（宽度、高度）；
makeCircleBuffer（）；
}
函数绘图（）{
如果（按下鼠标）{
图像（缓冲区，0，0）；
}
否则{
画圈（）；
}
文本大小（36）；
文本（帧率（），50，高度/2）；
}
函数drawCircles（）{
随机种子（0）；
对于（变量i=0；i<圆；i++）{
椭圆（随机（宽度），随机（高度），20,20）；
}
}
函数makeCircleBuffer（）{
随机种子（1）；
对于（变量i=0；i<圆；i++）{
椭圆（随机（宽度），随机（高度），20,20）；
}
}

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

无论你使用什么动画框架，这都是事实。切换到另一个框架并不能神奇地解决你的问题。
谢谢你的回答，我以前没有想过用这种方法测试它。我想我问这个问题，因为要真正看到缓冲区的效果，我必须进行一些重大的重构，但我想我会倾向于无论如何，rds都会这样做（只需将所有元素预渲染一次，而不是每一帧），另一方面，我也想看看是否有不同的方法来解决这个问题。