在使用p5.js进行图形绘制时，尤其是在WEBGL模式下，首次调用涉及图像处理的函数（如image()）往往比后续调用耗时更多。这主要是因为首次调用时，p5.js需要为图像分配显存并进行纹理上传等初始化操作。理解这一机制有助于优化p5.js程序的性能。
深入理解p5.js的图像处理机制
在p5.js中，当使用image()函数，特别是在WEBGL渲染器下，指定的图像会被用作纹理，传递给GLSL着色器程序。这个着色器程序负责将纹理的像素绘制到基于指定坐标创建的三角形上。
p5.Texture实例会对指定的图像进行缓存。此外，p5.Texture本身也包含缓存逻辑，以避免在p5.Image未被修改时重新复制纹理数据。
首次调用耗时较长的原因
本质上，为了将p5.Image实例用作WEBGL纹理，必须分配图形内存并将图像数据从源复制到已分配的缓冲区。事实证明，这个过程比仅仅绘制几个从该缓冲区渲染像素的三角形要昂贵得多。
简单来说，首次调用image()函数，p5.js需要执行以下步骤：
- 显存分配： 在GPU上分配用于存储图像数据的内存。
- 纹理上传： 将图像数据从CPU内存复制到GPU显存。
- 着色器编译（如果需要）： 编译用于处理纹理的GLSL着色器。
- 纹理绑定： 将纹理绑定到WebGL上下文，以便后续绘制操作可以访问它。
这些初始化操作只在首次调用时执行，后续调用可以直接使用缓存的纹理数据，因此速度会快很多。
代码示例与分析
以下代码演示了这个问题，并提供了一个可能的解决方案。
let img;
let NROWS = 55;
let NCOLS = 29;
const TILE_WIDTH_HALF = 32;
const TILE_HEIGHT_HALF = 16;
const HALF_WIDTH = 950;
const HALF_HEIGHT = 450;
let start, end;
let bg;
function preload() {
img = loadImage("tile.png");
}
// Populates the background graphics
function populateBackground() {
bg = createGraphics(HALF_WIDTH*2, HALF_HEIGHT*2);
for (let row=0; row<NROWS; row++) {
for (let col=0; col<NCOLS; col++) {
x = col*TILE_WIDTH_HALF*2 + (TILE_WIDTH_HALF * (row%2)+1)
y = row*TILE_HEIGHT_HALF;
bg.image(img, x, y);
}
}
}
// draws tile by tile into the canvas
function drawTileByTile() {
background(100);
start = millis();
for (let row=0; row<NROWS; row++) {
for (let col=0; col<NCOLS; col++) {
x = col*TILE_WIDTH_HALF*2 + (TILE_WIDTH_HALF * (row%2)+1) - HALF_WIDTH;
y = row*TILE_HEIGHT_HALF - HALF_HEIGHT;
image(img, x, y);
}
}
end = millis();
return (end-start);
}
// draws the prepopulated graphics as a single image
function drawAsImage() {
background(100);
start = millis();
image(bg,-HALF_WIDTH,-HALF_HEIGHT);
end = millis();
return (end-start);
}
function setup()
{
createCanvas(HALF_WIDTH*2, HALF_HEIGHT*2, WEBGL);
populateBackground();
// Draw tile by tile 10 times
let elapsed_ms = [];
for (let n=0; n<10; n++) {
elapsed_ms.push(drawTileByTile().toFixed(3));
}
console.log(elapsed_ms);
// Draw as image 10 times
elapsed_ms = [];
for (let n=0; n<10; n++) {
elapsed_ms.push(drawAsImage().toFixed(3));
}
console.log(elapsed_ms);
noLoop();
}
function draw()
{
}在上述代码中，drawTileByTile()函数逐个绘制瓦片，而drawAsImage()函数则绘制预先填充的背景图像。通过测量每个函数的执行时间，可以观察到首次调用drawTileByTile()或drawAsImage()函数时，耗时明显高于后续调用。
优化策略
针对首次调用耗时较长的问题，可以采取以下优化策略：
-
预热（Warm-up）： 在正式开始计时或动画之前，先调用一次相关函数，让p5.js完成初始化操作。这样可以避免首次调用时的额外开销影响性能测量或动画效果。
function setup() { createCanvas(400, 400, WEBGL); img = loadImage("myImage.png", () => { // Pre-warm the image function image(img, 0, 0); // Now start your actual drawing loop or performance measurement // ... }); noLoop(); } 批量处理： 尽量将多个图像绘制操作合并成一次操作，减少image()函数的调用次数。例如，可以将多个小图像拼接成一个大图像，然后一次性绘制整个大图像。
使用createGraphics()： 如果需要频繁绘制相同的图像，可以先使用createGraphics()创建一个离屏缓冲区，将图像绘制到缓冲区中，然后将缓冲区作为图像进行绘制。这样可以避免重复的纹理上传操作。如上面代码中的例子。
考虑渲染器的选择: 如果没有使用WEBGL的必要，使用默认的P2D渲染器可能更高效，因为它避免了与WEBGL纹理相关的开销。
总结
在p5.js中使用image()函数时，尤其是在WEBGL模式下，需要注意首次调用时的性能开销。通过理解p5.js的图像处理机制，并采取适当的优化策略，可以有效提升程序的性能，获得更流畅的用户体验。 预热、批量处理和使用createGraphics()是常用的优化手段。
