裸眼 3D 是什么效果？

作者：沙因，腾讯 IEG 前端开发工程师

介绍一种裸眼 3D 的实现方式，代码以 web 端为例。

平常我们都是戴着 3D 眼镜才能感受 3D 效果，那裸眼能直接看 3D 么？可以看看下面这个视频：

感兴趣可以扫描这个二维码实际体验下：

以上效果是基于 threejs 封装了个相机组件：

<script
src="https://game.gtimg.cn/images/js/sign/glassfree3d/js/GlassFree3dCamera.js"
></script>
new THREE.GlassFree3dCamera(x, y, z, width, height);

使用 GlassFree3dCamera 代替正常的相机，其中 xyz 为裸眼 3d 相机的坐标，width，height 为投影平面的宽高。

实现原理

这种裸眼 3d 实际上是基于一种视觉误差产生的，与传统的双眼产生的不同的图像差形成距离感不同，这种裸眼是依赖 3d 的“离轴投影”，离轴投影将产生“非对称相机”视锥体。

不过离轴投影与非对称相机并不是已有的专业名词，这是 TheParallaxView 作者提出的一个概念。

视频中，作者利用 ARkit 的 faceid 功能，定位到眼睛的位置，然后将裸眼 3d 的相机位置替代到人眼球位置。

除去 ARkit 的功能，这个效果的核心技术在其实现的“非对称的镜头”上。当时觉得这个看起来不难，就尝试的实现了一下，将传统相机的轴锁定（lookAt)在“盒子”的正中心。

传统相机效果：

虽然也有“立体感”，但那是平常我们常见的“全景”专题的 3d。

实际上的裸眼 3d 效果应该是下面这种：

“盒子”的四个角始终“粘”在画面的四个角上。

为什么会有这种区别？

首先，我们要了解 3d 相机的工作机制。

3d 相机机制

3d 相机的算法核心是投影矩阵：