代码之家 › 专栏 › 技术社区 › pimvdb

在HTML5画布上创建anaglyph 3D图像

html5-canvas 3d colors javascript

pimvdb · 技术社区 · 15 年前

我正在使用HTML5画布对象创建一个简单的3D引擎。它工作得很好,但是我想实现红色/蓝色的anaglyph处理,这样人们就可以用红色/蓝色的眼镜真正看到3D。现在我已经渲染了两次3D对象,第二次是从第一个摄影机位置旁边的摄影机位置。

我面临的问题是如何将渲染的两个对象组合起来,使其具有正确的反义词颜色。现在我使用globalpha=0.5,将第一个渲染为红色,第二个渲染为蓝色。但这并不完全有效,因为只有受红色对象影响的像素应该保持红色,但是它们正在变成黑色和红色之间的颜色,因为我的背景色是黑色。

在查看3D anaglyph创建应用程序时,我注意到红色和蓝色像素一起计算如下:

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

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

我可以在每像素的基础上工作,但这是可能的,而不是性能破坏?我每秒渲染20帧,所以我想这不会有任何实际用途。任何建议都将不胜感激。

我希望这张图片能澄清整体:

Example

1 回复 | 直到 14 年前

matja 15 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前