优化p5js中大量对象的渲染

Question

我正在尝试使用p5.js创建一个场景，它在3d空间中创建了许多不同的对象。它对少数对象很好，但对于数千个对象来说却非常慢。对象和它们的相对位置将保持不变，所以我想知道是否可以渲染一次，然后用鼠标旋转视角或控件，而不必为每次绘制迭代再次绘制每个对象。我已经厌倦了在画图循环之外创建对象和画图循环中的透视变化，但是场景仍然是静态的。事先非常感谢！

var Sz = 300;
var N = 1000;
var x = [];
var y = [];
var z = [];
// noprotect

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  background(0);

  for (var i = 0; i < N; i++) {
    x[i] = random(-Sz, Sz);
    y[i] = random(-Sz, Sz);
    z[i] = random(-Sz, Sz);
  }
}

function draw() {
  background(0, 0, 0);
  //translate(0,0,-100);
  rotateY(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateZ(frameCount * 0.01);
  orbitControl();

  for (var i = 0; i < N; i++) {
    push();
    translate(x[i], y[i], z[i]);
    R = 255 * abs(x[i] / max(x));
    G = 255 * abs(y[i] / max(y));
    B = 255 * abs(z[i] / max(z));
    stroke(R, G, B);
    sphere(Sz / 50, 8);
    pop();
  }
}

Answer 1

如果需要这种控制或优化，可以开始查看Three.js或其他WebGL库。