我正在使用 HTML5 画布对象创建一个简单的 3D 引擎。它运行良好，但我想实现红/蓝立体图处理，这样人们就可以使用红/蓝眼镜真正看到 3D。目前，我将 3D 对象渲染了两次，第二次是从靠近第一个相机位置的相机位置渲染的。
我面临的问题是如何将渲染的两个对象组合成具有正确颜色的浮雕。现在我使用 globalAlpha=0.5 并将第一个渲染为红色，第二个渲染为蓝色。然而，这并不完全有效，因为仅受红色对象影响的像素应该保持红色，但它们正在变成黑色和红色之间的颜色，因为我的背景颜色是黑色。
在查看 3D 立体图创建应用程序时，我注意到红色和蓝色像素一起计算如下：
255 0 0
0 0 255
------------- +
255 0 255
然而，HTML5 画布使用 alpha 计算所有像素，因此如果背景颜色为黑色，则红色像素变为深红色，而应保持红色。基本上我需要红色对象的像素只影响每个像素的红色分量，而蓝色对象的像素只影响每个像素的蓝色分量。
我可以在每个像素的基础上工作，但这是否可行并且不会破坏性能？我每秒渲染 20 帧，所以我想它没有任何实际用途。任何建议，将不胜感激。
我希望这张图片能澄清整体：
