HTML5 Canvas 仅绘制可见图像答案

【问题标题】：HTML5 Canvas draw only visible imagesHTML5 Canvas 仅绘制可见图像
【发布时间】：2017-06-10 09:27:03
【问题描述】：

是否可以“检测”并仅在 HTML5 Canvas 上绘制可见图像？这将在我的游戏中进行巨大的性能优化，例如如果图像 1 被图像 2 覆盖，我怎样才能只绘制图像 2？

【问题讨论】：

是的，有很多工作和代码。光线投射，遮挡剔除，熊，哦，我的！您是否考虑过使用像 Unity3D 这样的现有引擎？
您似乎正在使用 '2d' 上下文并渲染简单的 2D 图形，例如瓷砖。如果您对此提供更多信息，我们可以为您提供更好的建议。
@DaveS 我的游戏是 2D 的，所以我不需要 Unity3D，但是我正在使用 PIXI.JS 库使用 WebGL 进行快速渲染
@le_m 我的游戏是使用 Pixi.JS 构建的 2D 等距游戏。它可以包含很多可以相互覆盖的实体/对象，所以我想在我的游戏中添加这个优化，以在有很多对象时提高性能。
使用下面给出的答案。 10000 个 Sprite 渲染全部 142 毫秒。剔除和渲染，在 1567ms 中剔除 2096 渲染剩余 114ms，性能损失 1100% 。对于 1000 个精灵，渲染所有 18 毫秒，剔除和渲染，剔除 27 个，在 47 毫秒内渲染剩余 17 毫秒性能损失 300% 您需要能够在绘制大约 10% 的精灵所需的时间内进行剔除，然后您刚刚收支平衡。查找 CPU 周期的最佳位置是在您编写的代码中，斜线和刻录，内联尽可能多的函数，不要分配不要删除。如果那不起作用。随时重写计数 CPU 滴答声。

【解决方案1】：

这是愚蠢的遮挡剔除，而不是像原始 DOOM 等那样的花哨的树状对象集合。

我不知道这种方法的开销是否会得到回报，你需要试试看。可能缺少 ;或 {} 或两个。

count = count of all objects
for (i = 1; i < count; i++)
    visible[i] = true;
for i = 0; i < count; i++
{
    not_hidden = true;
    for (j = 0; j < count && not_hidden; j++)
    {
        if ((i!= j) && visible[j] 
            // if j is closer/on top -- reverse this if increased depth = -z not +z
            && (z-order[j] < z-order[i]) 
            // bounding rectangles 0,0 = top-left of screen
            && (obj[i].left <= obj[j].right) && (obj[i].right <= obj[j].right) && (obj[i].left >= obj[j].left)
            && (obj[i].top <= obj[j].bottom) && (obj[i].bottom <= obj[j].bottom) && (obj[i].top >= obj[j].top) )
        {
            visible[i] = false;
            not_hidden = false;
        }
    }
}

现在只绘制可见[ix] 为真的对象

【讨论】：