优化javascript画布，以便大规模绘制微小对象

Question

我一直在开发一款游戏，该游戏要求每帧渲染和旋转数千个非常小的图像(20^20像素)。提供了一个示例片段。

我已经用了我所知道的每一个技巧来提高帧速率，但我怀疑我还可以做其他事情来优化这一点。

当前的优化包括：

• 用显式转换替换保存/恢复
• 避免缩放/大小转换
• 明确目的地大小，而不是让浏览器猜测
• requestAnimationFrame而不是设置间隔

已尝试但未出现在示例中：

• 将对象批量渲染到其他屏幕外画布，然后稍后编译(降低性能)
• 避免浮点位置(由于放置精度要求)
• 未在主画布上使用alpha(由于SO代码段渲染，代码段中未显示)

//initial canvas and context
var canvas = document.getElementById('canvas');
canvas.width = 800; 
canvas.height = 800;
var ctx = canvas.getContext('2d');
//create an image (I) to render
let myImage = new OffscreenCanvas(10,10);
let myImageCtx = myImage.getContext('2d');
myImageCtx.fillRect(0,2.5,10,5);
myImageCtx.fillRect(0,0,2.5,10);
myImageCtx.fillRect(7.5,0,2.5,10);

//animation 
let animation = requestAnimationFrame(frame);
//fill an initial array of [n] object positions and angles
let myObjects = [];
for (let i = 0; i <1500; i++){
myObjects.push({
x : Math.floor(Math.random() * 800),
y : Math.floor(Math.random() * 800),
angle : Math.floor(Math.random() * 360),
});
}
//render a specific frame 
function frame(){
ctx.clearRect(0,0,canvas.width, canvas.height);

//draw each object and update its position
for (let i = 0, l = myObjects.length; i<l;i++){
drawImageNoReset(ctx, myImage, myObjects[i].x, myObjects[i].y, myObjects[i].angle);
myObjects[i].x += 1; if (myObjects[i].x > 800) {myObjects[i].x = 0}
myObjects[i].y += .5; if (myObjects[i].y > 800) {myObjects[i].y = 0}   
myObjects[i].angle += .01; if (myObjects[i].angle > 360) {myObjects[i].angle = 0}   

}
//reset the transform and call next frame
ctx.setTransform(1, 0, 0, 1, 0, 0);
requestAnimationFrame(frame);
}
//fastest transform draw method - no transform reset
function drawImageNoReset(myCtx, image, x, y, rotation) {
myCtx.setTransform(1, 0, 0, 1, x, y);
myCtx.rotate(rotation);
myCtx.drawImage(image, 0,0,image.width, image.height,-image.width / 2, -image.height / 2, image.width, image.height);
}

<canvas name = "canvas" id = "canvas"></canvas>

Answer 1

使用2D API和单个线程，您已经非常接近最大吞吐量，但也有一些小问题可以提高性能。

WebGL2

不过，首先，如果您想要使用javascript获得最佳性能，则必须使用WebGL

使用WebGL2，您可以绘制比2D API多8倍或更多的2D精灵，并具有更大范围的FX(例如颜色、阴影、凹凸、单调用智能瓷砖地图…)

WebGL非常值得付出努力

性能相关要点

• globalAlpha应用于每次drawImage调用，1以外的值不会影响性能。

• 避免调用rotate这两个数学调用(包括一个刻度)比rotate快一点。例如ax = Math..cos(rot) * scale; ay = Math.sin(rot) * scale; ctx.setTransform(ax,ay,-ay,ax,x,y)

• 与其使用多个图像，不如将所有图像放在一个图像(精灵表)中。在这种情况下不适用

• 不要在全球范围内乱扔垃圾。使对象尽可能靠近函数范围，并通过引用传递对象。访问全局范围的变量比访问本地范围的变量慢得多。

  最好使用模块，因为它们有自己的本地范围

• 使用弧度。将角度转换为度和角度是在浪费处理时间。学会使用弧度Math.PI * 2 === 360Math.PI === 180等

• 对于正整数，不要使用Math.floor，使用逐位运算符，因为它们会自动将Doubles转换为Int32，例如Math.floor(Math.random() * 800)比Math.random() * 800 | 0更快(|是OR)

  请注意使用的数字类型。如果每次使用整数时都将其转换回双倍，则转换为整数将花费周期。

• 只要可能，总是预先计算。例如，每次渲染图像时，都会对宽度和高度进行否定和除法运算。这些值可以预先计算。

• 避免数组查找(索引)。索引数组中的对象比直接引用慢。主循环对CCD_ 12进行了11次索引。使用for of循环，这样每次迭代只有一个数组查找，并且计数器是一个性能更高的内部计数器。(参见示例)

• 尽管这会带来性能损失，但如果在较慢的渲染设备上分离更新和渲染循环，则可以通过为每个渲染帧更新两次游戏状态来获得性能。例如，如果检测到两次更新状态并渲染一次，慢速渲染设备将降至30FPS，游戏速度将降至一半。游戏仍将以30FPS的帧速率呈现，但仍以正常速度播放(甚至可以保存偶尔下垂的帧，因为渲染负载减半)

  不要试图使用增量时间，这会带来一些负面的性能开销(对于许多可以是Ints的值，强制加倍)，并且实际上会降低动画质量。

• 尽可能避免条件分支，或者使用性能更高的替代方案。EG在您的示例中，使用if语句跨边界循环对象。这可以使用余数运算符%(参见示例)来完成

  您检查rotation > 360。这是不需要的，因为旋转是循环的。360的值与44444160相同。(Math.PI * 2与Math.PI * 246912旋转相同)

非性能点

您正在为下一次(即将到来的)显示刷新准备帧的每个动画调用。在您的代码中，您将显示游戏状态，然后进行更新。这意味着你的游戏状态比客户端看到的要早一帧。始终更新状态，然后显示。

示例

此示例为对象添加了一些额外的负载

• 可以进入任何方向
• 具有单独的速度和旋转
• 不要在边缘眨眼

该示例包括一个实用程序，它试图通过改变对象数量来平衡帧速率。

每15帧更新一次(工作)负载。最终它将达到一个稳定的速率。

不要通过运行这个代码段来衡量性能，所以代码段位于运行页面的所有代码下面，代码也会被修改和监控(以防止无限循环)。您看到的代码不是代码段中运行的代码。只需移动鼠标就可以在SO代码段中导致数十个丢帧

为了获得准确的结果，复制代码并在页面上单独运行(在测试时删除浏览器上的任何扩展)

使用此功能或类似功能定期测试代码，并帮助您获得了解性能好坏的经验。

费率文本的含义

• 1+/-为下一周期添加或删除的对象数
• 2上一期间每帧渲染的对象总数
• 3数字渲染时间的运行平均值(以毫秒为单位)(这不是帧速率)
• 4数量FPS是最佳平均帧速率
• 5期间丢弃的帧数。丢弃帧是报告的帧速率的长度。即"30fps 5dropped"，五个丢弃帧的速率为30fps，丢弃帧的总时间为5 * (1000 / 30)

const IMAGE_SIZE = 10;
const IMAGE_DIAGONAL = (IMAGE_SIZE ** 2 * 2) ** 0.5 / 2;
const DISPLAY_WIDTH = 800;
const DISPLAY_HEIGHT = 800;
const DISPLAY_OFFSET_WIDTH = DISPLAY_WIDTH + IMAGE_DIAGONAL * 2;
const DISPLAY_OFFSET_HEIGHT = DISPLAY_HEIGHT + IMAGE_DIAGONAL * 2;
const PERFORMANCE_SAMPLE_INTERVAL = 15;  // rendered frames
const INIT_OBJ_COUNT = 500;
const MAX_CPU_COST = 8; // in ms
const MAX_ADD_OBJ = 10;
const MAX_REMOVE_OBJ = 5;
canvas.width = DISPLAY_WIDTH; 
canvas.height = DISPLAY_HEIGHT;
requestAnimationFrame(start);
function createImage() {
const image = new OffscreenCanvas(IMAGE_SIZE,IMAGE_SIZE);
const ctx = image.getContext('2d');
ctx.fillRect(0, IMAGE_SIZE / 4, IMAGE_SIZE, IMAGE_SIZE / 2);
ctx.fillRect(0, 0, IMAGE_SIZE / 4, IMAGE_SIZE);
ctx.fillRect(IMAGE_SIZE * (3/4), 0, IMAGE_SIZE / 4, IMAGE_SIZE);
image.neg_half_width = -IMAGE_SIZE / 2;  // snake case to ensure future proof (no name clash)
image.neg_half_height = -IMAGE_SIZE / 2; // use of Image API
return image;
}
function createObject() {
return {
x : Math.random() * DISPLAY_WIDTH,
y : Math.random() * DISPLAY_HEIGHT,
r : Math.random() * Math.PI * 2,
dx: (Math.random() - 0.5) * 2,
dy: (Math.random() - 0.5) * 2,
dr: (Math.random() - 0.5) * 0.1,
};
}
function createObjects() {
const objects = [];
var i = INIT_OBJ_COUNT;
while (i--) { objects.push(createObject()) }
return objects;
}
function update(objects){
for (const obj of objects) {
obj.x = ((obj.x + DISPLAY_OFFSET_WIDTH + obj.dx) % DISPLAY_OFFSET_WIDTH);
obj.y = ((obj.y + DISPLAY_OFFSET_HEIGHT + obj.dy) % DISPLAY_OFFSET_HEIGHT);
obj.r += obj.dr;       
}
}
function render(ctx, img, objects){
for (const obj of objects) { drawImage(ctx, img, obj) }
}
function drawImage(ctx, image, {x, y, r}) {
const ax = Math.cos(r), ay = Math.sin(r);
ctx.setTransform(ax, ay, -ay, ax, x  - IMAGE_DIAGONAL, y  - IMAGE_DIAGONAL);    
ctx.drawImage(image, image.neg_half_width, image.neg_half_height);
}
function timing(framesPerTick) {  // creates a running mean frame time
const samples = [0,0,0,0,0,0,0,0,0,0];
const sCount = samples.length;
var samplePos = 0;
var now = performance.now();
const maxRate = framesPerTick * (1000 / 60);
const API = {
get FPS() {
var time = performance.now();
const FPS =  1000 / ((time - now) / framesPerTick);
const dropped = ((time - now) - maxRate) / (1000 / 60) | 0;
now = time;
if (FPS > 30) { return "60fps " + dropped + "dropped" };
if (FPS > 20) { return "30fps " + (dropped / 2 | 0) + "dropped" };
if (FPS > 15) { return "20fps " + (dropped / 3 | 0) + "dropped" };
if (FPS > 10) { return "15fps " + (dropped / 4 | 0) + "dropped" };
return "Too slow";
},
time(time) { samples[(samplePos++) % sCount] = time },
get mean() { return samples.reduce((total, val) => total += val, 0) / sCount },
};
return API;
}
function updateStats(CPUCost, objects) {
const fps = CPUCost.FPS;
const mean = CPUCost.mean;            
const cost = mean / objects.length; // estimate per object CPU cost
const count =  MAX_CPU_COST / cost | 0;
const objCount = objects.length;
var str = "0";
if (count < objects.length) {
var remove = Math.min(MAX_REMOVE_OBJ, objects.length - count);
str = "-" + remove;
objects.length -= remove;
} else if (count > objects.length + MAX_ADD_OBJ) {
let i = MAX_ADD_OBJ;
while (i--) {
objects.push(createObject());
}
str = "+" + MAX_ADD_OBJ;
}
info.textContent = str + ": "  + objCount + " sprites " + mean.toFixed(3) + "ms " + fps;
}
function start() {
var frameCount = 0;
const CPUCost = timing(PERFORMANCE_SAMPLE_INTERVAL);
const ctx = canvas.getContext('2d');
const image = createImage();
const objects = createObjects();
function frame(time) {
frameCount ++;
const start = performance.now();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, DISPLAY_WIDTH, DISPLAY_WIDTH);
update(objects);
render(ctx, image, objects);
requestAnimationFrame(frame);
CPUCost.time(performance.now() - start);
if (frameCount % PERFORMANCE_SAMPLE_INTERVAL === 0) {
updateStats(CPUCost, objects);
}
}
requestAnimationFrame(frame);
}

#info {
position: absolute;
top: 10px;
left: 10px;
background: #DDD;
font-family: arial;
font-size: 18px;
}

<canvas name = "canvas" id = "canvas"></canvas>
<div id="info"></div>