在 HTML5 画布上创建浮雕 3D 图像
我正在使用 HTML5 画布对象创建一个简单的 3D 引擎。它运行良好，但我想实现红/蓝浮雕处理，这样人们就可以使用红/蓝眼镜真正看到 3D。目前，我将 3D 对象渲染了两次，第二次是从紧邻第一个相机位置的相机位置渲染的。
我面临的问题是如何将渲染的两个对象组合起来以获得浮雕的正确颜色。现在我使用 globalAlpha=0.5 并将第一个渲染为红色，第二个渲染为蓝色。然而，这并不完全有效，因为仅受红色对象影响的像素应该保持红色，但它们正在变成黑色和红色之间的颜色，因为我的背景颜色是黑色。
在查看 3D 浮雕创建应用程序时，我注意到红色和蓝色像素一起计算如下：
255 0 0
0 0 255
------------- +
255 0 255
然而，HTML5 画布使用 Alpha 计算所有像素，因此如果背景颜色为黑色，则红色像素将变为深红色，而它应该保持红色。基本上我需要红色对象的像素仅影响每个像素的红色分量，蓝色对象的像素仅影响每个像素的蓝色分量。
我可以在每个像素的基础上工作，但这可能并且不会破坏性能吗？我每秒渲染 20 帧，所以我猜它没有任何实际用途。任何建议将不胜感激。
我希望这张图片能够澄清整个问题：
I'm creating a simple 3D engine using the HTML5 canvas object. It is working well but I'd like to implement red/blue anaglyph processing, so that one could really see 3D using red/blue glasses. At the moment I have the 3D object rendered twice, the second time from a camera position just next to the first camera position.
The problem I'm facing is how to combine the two objects rendered to have the correct color for an anaglyph. Now I'm using globalAlpha=0.5 and rendering the first in red and the second in blue. This is however not completely working, as pixels only affected by the red object should stay red, but they are becoming the color between black and red as my background color is black.
When taking a look at a 3D anaglyph creating application, I noticed that red and blue pixel together are calculated as following:
255 0 0
0 0 255
------------- +
255 0 255
The HTML5 canvas is however calculating all pixels using alpha, so if the background color is black a red pixel becomes dark-red while it should stay red. Basically I need the pixels of the red object only affect the red component of each pixel, and the pixels of the blue object affect only the blue component of each pixel.
I could be working on a per-pixel basis but would this be possible and not performance-breaking? I'm rendering 20 frames a second so I guess it would not be of any practical use. Any suggestions would be appreciated.
I hope this image clarifies the whole:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
画布上下文有一个 globalCompositeOperation 属性，您可以更改该属性来影响此行为。具体来说，将其设置为“更亮”会将任何绘图操作的颜色添加到源图像中。这也将尊重 alpha 值。如果这是一个复杂的场景，您可能需要将场景绘制两次，每次绘制到隐藏的画布上，然后将它们复制到可见的画布中，并将复合操作设置为“更亮”。
There is a globalCompositeOperation property of the canvas context that you can change to affect this behavior. Specifically, setting it to 'lighter' will add the colours of any drawing operations to the source image. This will also respect the alpha value. If it is a complex scene, you may have to draw the scene twice, each to a hidden canvas, then copy them each into the visible canvas with the composite operation set to 'lighter'.