从屏幕弹出浮雕效果webgl？

Question

我在three.js中使用了anaglypheffect anaglyph effect example 并尝试更新着色器方程以使对象从屏幕上移出而不是屏幕内的深度，任何想法都可以帮助吗？

这可能与其他任何3D视觉算法一样吗？

Answer 1

您不需要为立体照片着色器。您只需渲染场景两次，每只眼睛一次。左边只有渲染为红色，右边只有绿色和蓝色。这很容易用gl中的颜色写掩码。通过为这两个通道设置不同的相机矩阵来控制3d效果。通过改变它们，效果将会改变。无需触摸着色器。 http://en.wikipedia.org/wiki/Anaglyph_3D

要改变屏幕后方或屏幕之外的物体的视距，取决于您如何设置两个相机以及两只眼睛看着屏幕的方式。因此，如果你让两个相机更接近它们的原点，那么东西会“弹出”更多。

Answer 2

正如本文Calculating Stereo Pairs所解释的那样，我必须改变focalLength，eyeSep，eyeSepOnProjection以达到预期的效果，操纵其中一个变量改变3D视觉的深度。

Answer 3

在AnaglyphEffect.js中，变量focalLength表示目标在屏幕平面上的显示距离，并在125处定义。其他对象将在屏幕后面查看。您可以从焦距中定义眼睛分离，如您所见：

var eyeSep = focalLength / 30 * 0.5;
var eyeSepOnProjection = eyeSep * _near / focalLength;

焦距可以作为参数添加到主函数中，因此可以直接从主脚本访问和修改焦点：

THREE.AnaglyphEffect = function ( renderer, focalLength, width, height) {

    ...

    if ( focalLength === undefined ) focalLength = 125;
    this.focalLength = focalLength;

    ...

}