P5.JS将2D图片转为可交互3D点图时渲染极度缓慢问题排查

卡顿核心原因定位 #

• 每帧渲染大量高面数几何体：你现在给每个像素点都生成一个sphere(1)球体，p5.js默认的球体由几十上百个三角面拼接而成，即使球体很小，几千个球体同时渲染也要处理数万甚至数十万个三角面，算力开销直接拉满
• 冗余的矩阵操作：每个点渲染时都调用push()、pop()、translate()做单独的坐标变换，几千次重复的矩阵计算会额外占用大量渲染资源
• 逐像素读取效率低：setup里用get()逐点取像素色值，相比直接读取像素缓存数组速度慢很多，虽然不是卡顿的核心原因，但也可以优化
• 原代码还存在坐标映射错误：map(col, 0, 255, -125, 125)里将输入范围固定为255，实际应该对应图像的实际宽高，会导致坐标映射偏差

优化方案 #

改完之后帧率可以直接拉满到60帧，核心改动点：

1. 把sphere(1)换成point()，直接渲染3D空间点，不需要生成几何体，开销极低，可通过strokeWeight()调整点的大小模拟原来的球体视觉效果
2. 删掉所有冗余的push()/pop()/translate()调用，直接给point()传入坐标参数即可，省去大量重复矩阵计算
3. 用loadPixels()直接读取图像像素数组，替代逐点get()操作，大幅提升像素读取效率
4. 修正坐标映射错误的问题
5. 可自由调整步长step参数，步长越大渲染的点越少，运行越流畅

优化后完整代码：

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

let img;

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

function setup() {
  createCanvas(720, 400, WEBGL);
  background(0);
  // 调整点的大小，替换原来的球体视觉效果
  strokeWeight(2);

  img.resize(width / 3, height / 2);
  // 加载像素数组，提高读取效率
  img.loadPixels();
  
  // 步长可以自己调，越大点越少越流畅
  const step = 3;
  for (let col = 0; col < img.width; col += step) {
    for (let row = 0; row < img.height; row += step) {
      // 直接从pixels数组取色，比get()快很多
      const index = (row * img.width + col) * 4;
      const r = img.pixels[index];
      const g = img.pixels[index + 1];
      const b = img.pixels[index + 2];
      const rgb_val = r + g + b;
      
      colors[pointCount] = [r, g, b];
      x[pointCount] = map(col, 0, img.width, -125, 125);
      y[pointCount] = map(row, 0, img.height, -125, 125);
      z[pointCount] = map(rgb_val, 0, 765, -50, 0);
      pointCount++;
    }
  }
}

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

  for (let i = 0; i < pointCount; i++) {
    stroke(colors[i]);
    // 直接渲染3D点，不需要额外变换
    point(x[i], y[i], z[i]);
  }
}

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

内容的提问来源于stack exchange，提问作者tcjon