时间戳

首页 > 解决方案 > 当我绘制多个具有大尺寸性能下降的图标时

webgl - 当我绘制多个具有大尺寸性能下降的图标时

问题描述

我正在使用 javascript 和 webgl 制作 3D 应用程序。当我绘制 1000 个 32x32 像素的图标时，fps 为 60，但是当我绘制 1000 个 256x256 像素的图标时，fps 为 10，执行 drop。

我应该怎么做才能通过绘制 1000 个大小为 256x256 的图标来增加 FPS？

标签： webgldrawframe-rate

解决方案

GPU 受填充率限制。这意味着他们可以在 60fps 时每帧绘制的最大像素数有限制。每个 GPU 都不同，但如果应用程序尝试绘制太多像素，运行速度很慢是很常见的。

因此，如果您要绘制 1000 个 32x32 四边形，则大约为 100 万像素。如果您要绘制 1000 个 256x256 的四边形，大约是 6500 万像素，所以工作量是 65 倍。

有些事情你可以做。

  1. 打开深度测试并从前到后绘制

    这仅适用于您的图标是 100% 不透明或可选地具有一些 100% 透明像素并且您discard用于不绘制这些像素的情况。如果你有不同级别的 alpha（你正在混合），那么你不能使用这种技术。

    这将有助于它绘制更少的像素，但仍远远超过 32x32 的情况。

  2. 尝试找出不需要绘制的四边形。

    4k 显示器只有 800 万像素，为什么要画 6500 万像素？这意味着平均每个像素都被透支了 7 次！

    如果无论如何你知道你可以跳过一些四边形跳过它们。

  3. 如果纹理大于它们被绘制的大小，请确保使用 mips。

    使用没有 mips 的 1024x1024 纹理绘制 2x2 四边形比使用 mips 更慢。原因是没有 mips，GPU 必须在像素之间跳跃很长的距离，这可能是缓存未命中。使用 mips，它将获取适当的 mip 级别，并且彼此相邻的像素将在缓存中。

以我的 2018 年末配备 Intel UHD Graphics 617 的 Macbook Air 为例，我在 WebGL 中以 60fps 的速度每帧只能绘制约 500 万像素。

推荐阅读