image - 使用任意 QML 项作为缓存图像源

Question

编辑:原来的问题仍然包含在下面，但我决定重新命名为一种在​​各种情况下对开发人员更有用的表格，其中一些在我下面的回答中有所描述，作为解决原来的问题提供了更广泛的应用领域。

---

我有一组应用程序的灰度图标，并且要求用户可以更改图标颜色。

因此，显而易见的解决方案是使用 QtGraphicalEffects 中的常用 Colorize 元素。

效果本身有一个 cached 属性——它缓存那个特定效果的结果，这样它就不会被连续计算。然而，这仅适用于该效果的特定实例，这意味着如果有多个图标实例，并且每个图标实例都有着色效果，则此缓存将不会在不同实例之间共享。

显然，一个缓存就足够了，考虑到所有图标的大小和颜色都相同，来自 VRAM 的数据可以重复使用，从而节省 VRAM 和 GPU 时间。

所以最大的问题是如何重用单个效果的单个缓存并在没有任何开销的情况下多次显示它。

此外，上一个问题是关于我目前学习的图标着色类(class)。但是，我可能还缺少另一种方法。

当然，效率是关键，但也需要简单，我的意思是我可以想出几种低级的方法来非常有效地做到这一点，但它们都需要更复杂的低级实现，它们在 QML 中是不可能实现的。

Answer 1

事实证明，解决方案出乎意料地简单。

在这种情况下，特定于 OP - 即为图标着色，最有效的方法是简单地使用自定义 ShaderEffect 和 trivial 片段着色器 - 设置 gl_FragColor 到所需的颜色，作为 vec4 和来自源图像的 alpha 值传递。真的不需要缓存任何东西，因为着色器非常简单和快速，尽可能快。

只有一件事需要考虑——QML 场景图可能会在纹理图集中分配原始图像，默认实现会将纹理从图集中复制到另一个纹理。我们不希望这样做，因为它违背了目的——VRAM 的使用会增加，因为这将对每个“实例”完成，并且新分配的纹理也有可能比它们需要的更大是的，因为在某些平台上，纹理可以有多小是有限制的，在这种情况下我们谈论的是图标，所以它们不会那么大。

解决方案是将 supportsAtlasTextures 显式设置为 true。这意味着您还必须在图集中传递纹理的偏移量并计算偏移量——开销仍然很小。这将确保效率，来自图集的纹理不会在内存中重复，此外，渲染引擎实际上将允许使用来自同一图集的不同纹理的不同着色器效果在一次调用中一起批处理。

---

可以使用类似的方法来缓存几乎所有内容，并使用该缓存来显示“图像”——使用 ShaderEffectSource 来“捕获”所需的图像，然后使用 ShaderEffect 具有更简单的片段着色器 - 只需从源采样器输出数据。立即想到几个非常有用的用例:

• 它可用于“实例化”图像，这是计算密集型着色器的结果，请记住 ShaderEffectSource 和 ShaderEffect 可以按任意顺序链接
• 它可以用来实例化程序生成的图像，再次使用着色器，可以用作平铺纹理，甚至可以非常有效地制作动画
• 它可以与 QML Canvas 一起使用，以将复杂的 Canvas 绘图用作多个“图像”的缓存和源

• 它可以用作图像，由复杂的 QML Item 组合生成 - 这些实际上占用大量 RAM，想象一下您有 1000 个对象的场景，并且它们中的每一个都由 20 个不同的 QML 项目组成——矩形、文本、图像、上帝保佑动画，这是内存中的 20000 个对象——根据我的测试，这相当于 500 MB 的 RAM 使用，但如果它们相同，单个对象可以用于提供缓存，所有其他对象只能使用单个着色器效果来显示该缓存。它对 CPU 时间也有影响——比如你的设计必然会改变值——这是一个非常常见的场景，如果你在内存中有 20000 个对象，那就是 20000 个评估的绑定(bind)——即使是微不足道的表达式，这在移动设备上也可能需要几秒钟，在这段时间内卡住屏幕。将卡住时间减少 1000 倍的缓存，几乎不存在。

• 它也可以用来缓存和实例化动画，显着减少所需的 CPU 时间，它也可以处理视频