在HTML5画布上创建立体3D图像

Question

我正在使用HTML5画布对象创建一个简单的3D引擎。它运行良好，但我想实现红/蓝的立体图处理，这样一个人可以真正看到使用红/蓝眼镜的3D。目前，我将3D物体渲染两次，第二次是从第一个摄像机位置旁边的摄像机位置开始。

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

在查看3D立体照片创建应用程序时，我注意到红色和蓝色像素的计算结果如下：

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

然而，HTML5画布使用alpha计算所有像素，因此如果背景颜色为黑色，则红色像素变为深红色，而应保持红色。基本上我需要红色物体的像素只影响每个像素的红色分量，蓝色物体的像素只影响每个像素的蓝色分量。

我可以按像素工作，但这是可能的，而不是破坏性能？我每秒渲染20帧，所以我猜它不会有任何实际用途。任何建议将不胜感激。

我希望这张照片澄清整体：

Answer 1

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