javascript - 在 HTML5 Canvas 上创建立体 3D 图像

Question

我正在使用 HTML5 canvas 对象创建一个简单的 3D 引擎。它运作良好，但我想实现红/蓝立体图像处理，这样人们就可以使用红/蓝眼镜真正看到 3D。目前，我对 3D 对象进行了两次渲染，第二次是从紧挨着第一个相机位置的相机位置渲染的。

我面临的问题是如何将渲染的两个对象组合成具有正确颜色的浮雕。现在我使用 globalAlpha=0.5 并将第一个渲染为红色，第二个渲染为蓝色。然而，这并不完全有效，因为仅受红色对象影响的像素应该保持红色，但由于我的背景颜色是黑色，它们会变成黑色和红色之间的颜色。

在查看创建 3D 浮雕的应用程序时，我注意到红色和蓝色像素一起计算如下:

 255  0  0
 0    0  255
------------- +
 255  0  255

然而，HTML5 Canvas 使用 alpha 计算所有像素，因此如果背景颜色为黑色，则红色像素会变为暗红色，而它应该保持红色。基本上我需要红色对象的像素只影响每个像素的红色分量，蓝色对象的像素只影响每个像素的蓝色分量。

我可以在每个像素的基础上工作，但这是否可能并且不会破坏性能？我每秒渲染 20 帧，所以我想它不会有任何实际用途。如有任何建议，我们将不胜感激。

我希望这张图片能说明一切:

Answer 1

Canvas 上下文有一个 globalCompositeOperation 属性，您可以更改它来影响此行为。具体来说，将其设置为 'lighter' 会将任何绘图操作的颜色添加到源图像。这也将尊重 alpha 值。如果它是一个复杂的场景，您可能需要绘制场景两次，每次都绘制到一个隐藏的 Canvas 中，然后将它们分别复制到可见的 Canvas 中，并将复合操作设置为“打火机”。