在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属性，您可以对其进行更改以影响此行为。具体地说，将其设置为'lighter‘会将任何绘制操作的颜色添加到源图像中。这也将与alpha值相关。如果它是一个复杂的场景，你可能需要绘制两次场景，每次绘制到一个隐藏的画布，然后将它们分别复制到可见的画布中，并将合成操作设置为“lighter”。