javascript - HTML5 Canvas 创意 Alpha 混合

Question

所以我有一个用 javascript 和 HTML5 编码的动画(没有库，没有插件，什么都没有，我希望它保持这种状态)。动画使用物理学(基本上是一堆附在质量上的不寻常的 Spring )来模拟简单的液体。这部分程序的输出是对象的网格(二维数组)，每个对象都有一个 z 值。这很好用。将数据绘制到 HTML5 Canvas 时出现了我的问题。

这就是它的样子。相信我，动画效果更好。

对于每个数据点，程序绘制一个圆圈，其颜色由 z 值决定。然而，仅绘制这些点，网格图案非常明显，很难看到它所代表的流体。为了解决这个问题，我让圆圈更大更透明，以便它们相互重叠并且颜色混合，创建一个简单的卷积模糊。结果既快速又漂亮，但有一个小缺陷:

由于圆圈是按顺序绘制的，因此它们的颜色值不会平均叠加，因此较晚绘制的圆圈会遮盖较早绘制的圆圈。从数学上讲，渲染器正在对圆圈的颜色值进行重复加权平均。这适用于两个圆圈，每个圆圈的值为 0.5*alpha_n，但对于三个圆圈，渲染器采用最新圆圈的平均值与其他两个圆圈的平均值，为最新圆圈提供 0.5*alpha_n 的值，但是前面的每个圆圈的值为 0.25*alpha_n。随着越来越多的圈子重叠，这个过程会继续，从而产生对新圈子和旧圈子的偏见。相反，我想要的是三个或更多圆圈中的每一个都获得 0.33*alpha_n 的值，以便前面的圆圈不会被遮挡。

这是一张 alpha 混合效果图。请注意，后面的蓝色圆圈遮盖了前面绘制的红色和绿色圆圈:

这是问题的实际表现。注意肿 block 左侧的不同外观。

为了解决这个问题，我尝试了多种方法:

• 使用不同的 Canvas “混合模式”。 “乘法”(如上图所示)起到了作用，但造成了不幸的颜色失真。
• 将绘图调用集中在一起。我没有让每个圆圈成为一个单独的 Canvas 路径，而是尝试将它们全部合并为一个。不幸的是，这与具有单独的填充颜色不兼容，而且，路径根本没有与自身融合，从而创建了一个无光泽的单调轮廓。
• 交错绘图顺序。我没有按 0 到 n 的顺序绘制圆圈，而是尝试先绘制偶数，然后再绘制赔率。这只是部分解决了问题，并创建了一个难看的分层模式，其中赔率似乎漂浮在偶数之上。
• 使用 putImageData 构建我自己的混合模式。我尝试使用 javascript 创建一个手动像素着色器来满足我的需求，但正如预期的那样，它太慢了。

在这一点上，我有点卡住了。我正在寻找解决或绕过这个问题的创造性方法，我欢迎你的想法。我对被告知这是不可能的不太感兴趣，因为我可以自己解决这个问题。您将如何从此类数据点优雅地绘制流体？

Answer 1

如果您可以将圆圈分解为两组(偶数组和奇数组)，使得组内的圆圈之间没有重叠，则以下顺序应该会产生预期的效果:

1. 清除背景
2. 绘制 alpha 为 1.0 的均匀部分(不透明)
3. 绘制 alpha 为 1.0 的赔率(不透明)
4. 绘制 alpha 为 0.5 的偶数

既不被偶数也不被奇数覆盖的地方将显示背景。仅被均匀覆盖的那些将以 100% 不透明度显示均匀。赔率覆盖的赔率将以 100% 的不透明度显示。被两者覆盖的将显示 50% 的混合。

还有其他方法可以用来尝试混合三组或更多组对象，但“精确”执行此操作很复杂。如果有三个或更多图像应该根据它们的 alpha channel 均匀混合，另一种方法是重复绘制所有图像，同时全局 alpha 从 1 衰减到 0(请注意，上述过程实际上是这样做的，但它是数字上的当只有两个图像时精确)。数值舍入问题限制了该技术的精度，但即使进行两到三遍也可能会大大降低由排序引起的视觉伪影的严重性，同时使用的步骤少于精确混合所需的步骤。

顺便说一句，如果混合模式是固定的，通过在不同的 Canvas 上绘制偶数和奇数而不是圆形，而是作为不透明的矩形，并从其中一个的 alpha channel 中减去，可能会极大地加快渲染速度绘制固定的“千篇一律” Canvas 或填充图案的内容。如果正确计算千篇一律 Canvas 的内容，则此方法可用于两组以上的 Canvas 。确定 cookie-cutter canvas 的内容可能有点慢，但只需要完成一次。