3D 浮雕图像中的颜色
我正在尝试探索如何制作 3D 浮雕图像(具有红色/青色)。我使用 HTML5 元素来进行绘图。
问题是我无法找出到底应该使用什么颜色。另外,我不太确定如何组合颜色。
目前我有以下代码:http://jsfiddle.net/eGjak/15/。问题是我无法为红色部分使用正确的颜色。无论我选择多少红色,我的眼镜仍然让红色透过眼镜的红色部分。然而,青色并没有穿过我眼镜的青色部分。似乎它也取决于背景颜色 - 有人可以解释一下吗?
其次,红色和青色应该如何组合?我目前将颜色相加,但结果是白色,因为红色是 (255,0,0)
,青色是 (0,255,255)
。在示例图像上,看起来它们加起来就是黑色 - 这是怎么回事可能的?
那么,红色部分应该使用什么颜色呢?如何将彼此重叠的红色和青色部分组合起来?
I'm trying to explore how a 3D anaglyph image (with red/cyan colors) can be made. I'm using the HTML5 <canvas>
element to do the drawing.
The problem is that I cannot find out what colors exactly should be used. Also, I'm not really sure as to how to combine the colors.
Currently I have the following code: http://jsfiddle.net/eGjak/15/. The problem is that I cannot manage to use the correct color for the red part. No matter how much red I choose, my glasses are still letting the red through the red part of the glasses. The cyan however is not going through the cyan part of my glasses. It seems like it also depends on the background color - could someone shed some light on this?
Secondly, how should I combine the red and cyan? I currently add up the colors, but this results in white because red is (255,0,0)
and cyan is (0,255,255)
. On a sample image, it seems like they add up to black - how is that possible?
So, what color should I use for the red part? And how do I combine the red and cyan parts where they are overlapping each other?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
首先,这里有一些开源浮雕图像实现,您可以查看:
http:// /www.schrammel.org/stereo-plascolin.php
http://www.leebyron.com/else/redblue/#redblue
也就是说,我不认为查看某些代码是解决这个问题的最佳方法。您需要在更高的层次上了解代码背后发生的事情。
所以我建议查看此页面上的教程;这些是如何在图像编辑程序中手动创建浮雕图像的说明:
http:// Graphicssoft.about.com/od/3danaglyphs/Making_3D_Anaglyphs.htm
首先尝试在 Photoshop 或 GIMP 中完成本教程或其他任何方式来确保生成的图像是您想要的,然后尝试以编程方式实现该技术。
Well first off, here are a couple open-source anaglyph image implementations that you could look at:
http://www.schrammel.org/stereo-plascolin.php
http://www.leebyron.com/else/redblue/#redblue
That said, I don't think looking at some code is the best way to figure this out. You need to understand at a higher level what's going on behind the code.
So I would suggest looking at the tutorials on this page; these are explanations of how to create an anaglyph image manually in an image editing program:
http://graphicssoft.about.com/od/3danaglyphs/Making_3D_Anaglyphs.htm
First try doing the tutorial in Photoshop or GIMP or whatever to make sure the resulting image is what you want, and then try to implement that technique programmatically.
对于 3D 图像,您首先必须考虑:您希望左眼看到什么图像,以及您希望右眼看到什么图像?然后您可以使用一些技术将图像组合成 3D 图像。
对于红/青色眼镜来说,组合图像并不像看起来那么简单;例如,红色塑料实际上可以让一点绿光透过。幸运的是,Eric Dubois 考虑了如何最好地创建 3D 红/青色立体图的问题,他开发了一种数学优化技术,用于将左/右图像组合成单个红/青色立体图。
有关此算法的详细信息已在另一个问题。您可能还想访问一个有效的 JavaScript 演示,它将两个图像组合成一个浮雕HTML5 画布。
With a 3D image you first have to consider: what image do you want the left eye to see, and what image do you want the right eye to see? Then you can use some technique to combine the images into a 3D image.
For red/cyan glasses combining the images isn't as simple as it seems; for example red plastic actually lets a bit of green light through. Fortunately, the problem of how best to create 3D red/cyan anaglyphs was considered by Eric Dubois, who developed an mathematically optimal technique for combining left/right image into a single red/cyan anaglyph.
Details on this algorithm was discussed in another question. You may also want to go to a working JavaScript demo that combines two images into a single anaglyph on a HTML5 canvas.