javascript - P5.JS 3D 点图渲染极慢

Question

我正在尝试将普通的 2D 图像(简单的 JPEG)转换为用户可以移动的 3D 点图。但是在尝试渲染那个点图时，程序变得非常慢。谁能指出我哪里出错了？

var x = [];
var y = [];
var z = [];
var colors = [];
var a = 0;
var counter = 0;

let img;

function preload() {
  img = loadImage('https://www.paulwheeler.us/files/clooney.jpeg');
}

function setup() {
  createCanvas(720, 400, WEBGL);
  background(0);

  img.resize(width / 3, height / 2);

  for (let col = 0; col < img.width; col += 3) {
    for (let row = 0; row < img.height; row += 3) {
      let c = img.get(col, row);
      let rgb_val = c[0] + c[1] + c[2]
      colors[a] = c
      x[a] = map(col, 0, 255, -125, 125)
      y[a] = map(row, 0, 255, -125, 125)
      z[a] = map(rgb_val, 0, 765, -50, 0)
      stroke(c)
      push();
      a++
    }
  }

}

function draw() {
  translate(0, 0, -50);
  rotateY(frameCount * 0.1);
  background(0);

  for (var i = 0; i < a; i++) {
    stroke(colors[i])
    push();
    translate(x[i], y[i], z[i]);
    sphere(1);
    pop();
  }

  orbitControl();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Answer 1

正如我在上面的评论中提到的，在 p5.js 中绘制大量单个基元相对较慢。当从大型顶点缓冲区中绘制三 Angular 形时，3d 图形得到最佳优化(基本上您预先计算 3d 空间中的点，它们的法线向量用于照明，以及通过索引将这些点引用到缓冲区中的三 Angular 形列表)。所以这里真正的赢家是第二个草图，它为您的点网格生成一些 p5.Geometry，并使用纹理坐标为每个点实现所需的颜色。

试验球体的细节，并在球体的描边和填充之间切换(对我的系统影响最小):

var x = [];
var y = [];
var z = [];
var colors = [];
var a = 0;

let img;

let fpsDisplay;
let strokeCheckbox;
let detailSlider;
let lastTime = 0;

function preload() {
  img = loadImage('https://www.paulwheeler.us/files/clooney.jpeg');
}

function setup() {
  createCanvas(720, 400, WEBGL);
  background(0);

  img.resize(width / 3, height / 2);

  for (let col = 0; col < img.width; col += 3) {
    for (let row = 0; row < img.height; row += 3) {
      let c = img.get(col, row);
      let rgb_val = c[0] + c[1] + c[2];
      colors[a] = c;
      x[a] = map(col, 0, img.width, -125, 125);
      y[a] = map(row, 0, img.height, -125, 125);
      z[a] = map(rgb_val, 0, 765, -50, 0);
      a++;
    }
  }

  fpsDisplay = createInput('0');
  fpsDisplay.position(10, 10);
  strokeCheckbox = createCheckbox('Stroke', false);
  strokeCheckbox.position(10, 50);
  strokeCheckbox.style('color', 'red');
  detailSlider = createSlider(1, 24, 24);
  detailSlider.position(10, 90);
}

function draw() {
  // translate(0, 0, -50);
  // rotateY(frameCount * 0.1);
  background(0);
  orbitControl(2, 1, 0.1);

  noStroke();
  noFill();
  let useStroke = strokeCheckbox.checked();
  let detail = detailSlider.value();
  for (var i = 0; i < a; i++) {
    if (useStroke) {
      stroke(colors[i]);
    } else {
      fill(colors[i]);
    }
    push();
    translate(x[i], y[i], z[i]);
    sphere(1, detail, detail);
    pop();
  }
  
  let t = millis();
  fpsDisplay.value(`${1000 / (t - lastTime)}`);
  lastTime = t;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

使用 p5.Geometry、UV 坐标和纹理(这在我的系统上达到 60 FPS):

const dotRadius = 1;
const detail = 4;

let img;

let fpsDisplay;
let lastTime = 0;

let geom;

function preload() {
  img = loadImage('https://www.paulwheeler.us/files/clooney.jpeg');
}

function setup() {
  console.log('Initializing');
  createCanvas(720, 400, WEBGL);
  // Because the spheres are so small, the default stroke makes them all black.
  // You could also use strokeWeight(0.1);
  noStroke();

  img.resize(width / 3, height / 2);

  const dotGrid = function() {
    const sliceCount = this.detailX + 1;
    let dotNumber = 0;
    for (let col = 0; col < img.width; col += 3) {
      for (let row = 0; row < img.height; row += 3) {
        let c = img.get(col, row);
        let rgb_val = c[0] + c[1] + c[2];
        let xOff = map(col, 0, img.width, -125, 125);
        let yOff = map(row, 0, img.height, -125, 125);
        let zOff = map(rgb_val, 0, 765, -50, 0);
        for (let i = 0; i <= this.detailY; i++) {
          const v = i / this.detailY;
          const phi = PI * v - PI / 2;
          const cosPhi = cos(phi);
          const sinPhi = sin(phi);

          for (let j = 0; j <= this.detailX; j++) {
            const u = j / this.detailX;
            const theta = 2 * PI * u;
            const cosTheta = cos(theta);
            const sinTheta = sin(theta);
            const p = createVector(
              xOff + dotRadius * cosPhi * sinTheta,
              yOff + dotRadius * sinPhi,
              zOff + dotRadius * cosPhi * cosTheta
            );
            this.vertices.push(p);
            this.vertexNormals.push(p);
            // All vertices in each dot get the same UV coordinates
            this.uvs.push(map(col, 0, img.width, 0, 1), map(row, 0, img.height, 0, 1));
          }
        }

        // Generate faces for the current dot

        // offset = number of vertices for previous dots.
        let offset = dotNumber * (this.detailX + 1) * (this.detailY + 1);
        let v1, v2, v3, v4;
        for (let i = 0; i < this.detailY; i++) {
          for (let j = 0; j < this.detailX; j++) {
            v1 = i * sliceCount + j + offset;
            v2 = i * sliceCount + j + 1 + offset;
            v3 = (i + 1) * sliceCount + j + 1 + offset;
            v4 = (i + 1) * sliceCount + j + offset;
            this.faces.push([v1, v2, v4]);
            this.faces.push([v4, v2, v3]);
          }
        }

        dotNumber++;
      }
    }
    console.log(`Dots: ${dotNumber}`);

    console.log(`Vertices: ${this.vertices.length}`);
    console.log(`Faces: ${this.faces.length}`);
  };

  geom = new p5.Geometry(detail, detail, dotGrid);
  geom.gid = 'dot-grid';

  fpsDisplay = createInput('0');
  fpsDisplay.position(10, 10);
}

function draw() {
  background(0);
  orbitControl(2, 1, 0.1);

  texture(img);
  model(geom);

  let t = millis();
  fpsDisplay.value(`${1000 / (t - lastTime)}`);
  lastTime = t;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>