在p5js中优化渲染大量对象

Question

我正在尝试使用p5.js创建一个场景，该场景可以在三维空间中创建许多不同的对象。它对少数对象运行良好，但对成千上万的对象运行速度非常慢。对象及其相对位置将保持不变，所以我想知道是否可以渲染一次，然后只使用鼠标旋转视角或控件，而不必在每次绘制迭代中再次绘制每个对象。我已经厌倦了noloop和在绘制循环外创建对象，以及在绘制循环内更改透视图，但场景保持静止。非常感谢！

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库。