Blit和涡卷

Question

有谁能向我解释一下关于滚动画是如何工作的吗？

假设有一个窗口，它有一个可以画到的区域(“画布”)。这张帆布有两份吗？一个用于CPU，一个用于GPU？我的意思是，我知道用OpenGL可以非常快地将主存复制到图形卡内存，所以一种绘制方法是先用主存中的软件进行绘图，然后将"blit“绘制到GPU，对吗？

现在，我假设当窗口滚动时，会有一些GPU功能，它可以在不离开GPU的位置上快速复制非脏部件，然后要求CPU重新绘制脏/缺失的部件。但现在我有两份未经同步的画布！那么它是如何工作的呢？我是否在软件的主内存中做滚动操作，并第一次将整个画布上传到GPU？或者我滚动画布在GPU和“下载”，然后下载到CPU-土地和“修理”它在那里？或者完全是别的什么？也许不知何故，我不需要关心副本是不是不同步的？

Answer 1

传统上，在屏幕上显示某物的方法有两种：

1. 从零开始重新绘制每一帧(或者，每次有变化时)
2. 跟踪屏幕的各个部分.更改每个帧的“脏矩形”，并且只更新这些部分。

第一种选择是大多数现代游戏/动画会做什么。每一帧，你重新提交所有的绘图调用/重新上传任何纹理到GPU已经改变，然后要求GPU绘制所有的东西，并显示在屏幕上。

第二个选择是大多数旧的2D游戏所做的，以及大多数窗口应用程序(即。GUI程序并没有太多的变化)。一种实现是拥有屏幕的本地CPU副本、GPU副本和一系列缓冲区来在它们之间传输数据。因此，对于每一个有变化的帧：

1. 将脏矩形区域的像素数据混合到数据传输缓冲区之一。
2. 将缓冲区复制到GPU
3. 使用GPU将数据传输缓冲区中的像素数据混合到GPU副本。
4. 现在时

要了解更多信息，我建议查看一些窗口管理器是如何组合的。对于WPF如何工作这里有一个很好的解释。还有一篇关于Chrome如何加速浏览器渲染这里的优秀文章。

Answer 2

让我们以web浏览器为例。在手机上，Chrome和Firefox都会在GPU上绘制页面内容，它们通常都有大量的滚动，所以这是一个相关的例子。

它们的工作方式有点像谷歌地图( Google )或开放街道地图( Open )的分配器。他们将页面分割成瓷砖，并将每个瓷砖绘制成一个纹理。(纹理很可能在纹理图谱中，恐怕我不知道具体细节。)绘制最后的屏幕简单地包括在正确的位置绘制少量的纹理方块。这种方法使滚动变得非常容易。

当您滚动时，它不需要从DOM (相当于场景图的网页)开始重新生成整个页面:它只是移动四边形，以便每个纹理块在视图端口周围移动。当新的一行或一列瓷砖即将进入视图时，页面呈现程序必须先绘制新的瓷砖，然后才能看到它们。在屏幕的另一端，您可以保存不再在视图中的块，但是如果您开始耗尽纹理内存，则可以将它们处理掉。因为所有的瓷砖都是相同的大小，你可以简单地画新的瓷砖在旧的纹理，你不想要更多。

这和Google一样:当你滚动时，你通常可以看到一个占位符纹理，如果新的瓷砖在完成下载之前是可见的。该页面保存了一个您以前看过的块的缓存，但是它可以销毁任何不再可见的块，以便在必要时释放一些内存。

平铺技术还允许渐进精化，这是重要的，让您滚动60 fps在移动平台上，没有足够的计算能力。如果它呈现的瓷砖太慢，它可以先绘制低分辨率的纹理(当你滚动)，然后重新绘制他们在完全分辨率以后，如果他们留在屏幕上。

简而言之，没有任何特殊的功能可以将最后的一些帧裁剪到新帧中的一个新位置，但是通过呈现到纹理，我们可以从下一个帧访问相同的纹理，丢弃不再有用的任何部分。一些游戏也使用这种技术，大多数静态的内容背景，2D世界地图，&c。

如果您必须更新滚动内容的小部分，这很容易:只需重新绘制更改的瓷砖即可。更新瓷砖的代码并不关心显示它们的屏幕位置，因为最后的框架渲染器将每个瓷砖放置在正确的位置。您没有“两个未同步的画布副本”，不管您是在CPU或GPU (或两者都绘制)上绘制每个瓷砖。

“静态”这个词很重要。如果很多背景都在改变每一帧，那么您就无法从tiles中获得任何优势，因为您必须更新每一个框架。在这种情况下，你应该扔掉旧的框架，从零开始画新的框架。这就是为什么很多2D游戏不使用这种技术，即使他们显示滚动内容(例如，马里奥游戏)。

概述：

• 如果你的滚动内容是完全静态的，足够小，适合在内存中，画它在一个大的纹理，并渲染一个纹理四帧。
• 如果你的滚动内容太大，不适合内存，或者它的小区域有时需要更新，画它在瓷砖，渲染所有可见的瓷砖每帧，并添加一些东西来加载和卸载瓷砖在必要时。
• 如果大多数瓷砖更改了大多数帧，只需绘制每个帧的可见区域。

了解您所处的情况，并能够将静态部分与更改部分分开，构成了图形开发人员的大量工作：