优化 javascript canvas 以大规模绘制微小物体

Question

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

我已经使用了我所知道的所有技巧来加快速度以提高帧速率，但我怀疑我还可以做其他事情来优化它。

目前的优化包括：

• 用显式转换替换保存/恢复
• 避免比例/尺寸转换
• 明确目标大小而不是让浏览器猜测
• requestAnimationFrame 而不是 set-interval

已尝试但示例中未出现：

• 将对象批量渲染到其他屏幕外画布，然后稍后编译（性能降低）
• 避免浮点位置（由于放置精度而需要）
• 在主画布上不使用 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 === 360 Math.PI === 180等

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

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

• 尽可能进行预先计算。例如，每次渲染图像时，您都会否定并除以宽度和高度。这些值可以预先计算。

• 避免数组查找（索引）。对数组中的对象进行索引比直接引用慢。例如，主循环索引myObject11 次。使用for of循环，以便每次迭代仅进行一次数组查找，并且计数器是性能更高的内部计数器。（参见示例）

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

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

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

  你检查rotation > 360。这不是必需的，因为旋转是循环的。值 360 与 44444160 相同。（Math.PI * 2与 相同的旋转Math.PI * 246912）

非性能点。

每次动画调用都为下一次（即将到来的）显示刷新准备一个帧。在您的代码中，您将显示游戏状态然后更新。这意味着您的游戏状态比客户端看到的提前一帧。始终更新状态，然后显示。

例子

这个例子给对象添加了一些额外的负载

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

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

每 15 帧更新一次（工作）负载。最终它将达到稳定的速度。

不要通过运行此代码片段来衡量性能，因此代码片段位于运行该页面的所有代码下方，代码也会被修改和监视（以防止无限循环）。您看到的代码不是代码片段中运行的代码。仅移动鼠标就会导致 SO 片段中出现数十帧丢帧

为了获得准确的结果，请复制代码并在页面上单独运行它（测试时删除浏览器上可能存在的任何扩展）

使用此工具或类似工具定期测试您的代码，并帮助您获得了解什么对性能有利和不利的经验。

费率文本的含义。

• 1 +/- 下一周期添加或删除的对象数量
• 2上一时期每帧渲染的对象总数
• 3数字 渲染时间的运行平均值（以毫秒为单位）（这不是帧速率）
• 4数字 FPS 是最佳平均帧速率。
• 期间掉落5 个数字帧。丢失的帧是报告的帧速率的长度。IE 中"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>