graphics - 为类似 Photoshop 的图像编辑器高效地合成/渲染多个图层

Question

我正在制作一个类似 Photoshop 的应用程序，它有 5 个左右的 1600x1200 图层。每层可以有不同的混合模式，如正常混合、异或混合、加法混合等，其中正常混合是最常见的。在我的目标平台上将所有层混合在一起大约需要 0.3 秒(此处有硬件加速选项)。

我的问题:当用户对图层执行编辑操作时，如何有效地更新屏幕以显示拼合/混合在一起的所有图层？

例如，一个简单的操作可能是将一个图层转换为灰度。更复杂的操作是在其中一个图层的多个位置实时绘制画笔图像。具体来说，如果我尝试重新混合所有用户使用的画笔，我的界面将变得 react 迟钝。

我能想到的唯一优化是:

1. 缓存拼合图像，并且当发生更改时，仅更新已更改的拼合图像的矩形。例如，对于小画笔图像来说，这会很快。
2. 编辑图层时，缓存事件图层下方所有图层的拼合图像。当更新完全展平的图像时，我们只需将事件图层和该缓存图像上的图层混合即可。

如果您正在编辑底层，则 2 没有帮助，而且我看不到如何预展平事件图层上方的所有图层。

Answer 1

在不知道您的目标平台的情况下，强烈建议使用某种硬件加速。 OpenGL 2.0+(或 ES 2.0+)是最有可能提供帮助的——使用 GLSL，您将获得一种 C 风格的语言，其中有趣的一点是提供片段程序，这就是 GPU 应该基于每个像素执行的操作在输入纹理上以产生输出颜色。您输出到的位置是隐式的，但您可以输出到图像，然后使用该图像作为输入，这将直接融入您的想法 (2)。根据您所针对的具体硬件，Direct3d 在 HLSL 中具有非常相似的构造，并且 NVidia 提供了一个更专有的等效项，称为 Cg，我认为现在可以将其编译为 GLSL 或 HLSL，这可能是相关的。

否则:想法(1)是一个聪明的举动，特别是如果允许用户打开任意大小的图像。它导致所花费的时间是画笔大小的函数，而不是图像的函数。如果您以亚像素精度做事，您的思维就需要相当精确。

想法 (2) 可能具有精确的影响(尤其是与硬件耦合时)。为了保持完全相同的结果，显然您的中间缓冲区需要与中间变量具有相同的精度，这在典型的面向消费者的绘图应用程序中通常意味着文件输入为 8bpp/ channel ，但中间存储需要至少为 16bpp/channel 如果您不希望错误累积。这可能是硬件加速的最大潜在障碍，因为较旧的硬件往往会将您限制为 8bpp/ channel 中间缓冲区。现代硬件可以实现相当精度的浮点缓冲区。

可以从随后应用的层上的预计算中获得优势，但是每个像素的信息通常需要比仅仅颜色更复杂，并且最终可能并不比仅仅存储原始缓冲区更简单。也许明智的做法是窥视孔优化。因此，如果您有两个叠加的添加剂层，您可以轻松地将其替换为单个添加剂层。两个乘法或两个异或也是如此。因此，您将实现一个循环来查看效果队列，找到它知道如何转换为更简单形式的任何模式并进行这些替换。并重复直到找不到替代品。出于优化目的，您甚至可能想要实现一些不直接提供给用户的复合操作。不过，您再次需要考虑精度。

在常见情况下，将正常混合应用于所有图层时，您最终会对上面的任意多个图层执行一次操作。