复刻 Vision Pro 的 3D 空间影像体验
00 分钟
2023-9-13
2023-12-31
category
AI summary
tags
password
summary
date
icon
status
字数统计
type
slug
orgsrc
URL
我们在上一篇中讨论了 iPhone 将成为 Vision Pro 空间计算的内容创作工具,昨天的 Apple 产品发布会上,iPhone 15 Pro 系列将可以同时使用主摄和超广角摄像头同时拍摄 3D 立体视频,用户可以在 Apple Vision Pro 上观看!
iPhone 15 Pro - Spatial Video
iPhone 15 Pro - Spatial Video
本文我们将在 WebXR 中复刻 visionOS 的 3D 空间影像体验,体验地址详见文章结尾。

双目视差与立体视觉

首先说明一下所谓 3D 空间影像的原理,简单来说,由于人的两个眼睛在水平方向上有一定间距,因此双眼看到的画面会有一定的误差,称为双目视差(Parallax);由于双目视差的存在,大脑视觉皮层会对这些差异进行处理,从而产生带有深度信息的立体视觉(Stereopsis)
Parallax
Parallax
用两只眼睛观看真实的三维场景时自然会出现双眼差异,但也可以用一种叫做立体成像(Stereoscopy)的方法,人为地将两幅不同的图像分别呈现在每只眼睛上,从而模拟出双眼差异,观看立体图像的原理早于19世纪已经存在,下图所示手持立体成像镜装置可能是最原始形态的 VR 眼镜。
立体成像镜
立体成像镜
立体成像镜
立体成像镜
为了获得符合双眼视差的两张不同角度的照片(或影像),最简单的方法就是用两个和人眼间距(IPD)相同的相机同时拍摄。 iPhone 15 Pro 虽然具备两个摄像头的条件,但由于相距只有 2cm 左右,远低于一般人眼瞳距(约 6cm 左右),拍摄出来的立体效果如何,只能等拿到真机之后才能测试体验。
Kodak Stereo Camera
Kodak Stereo Camera

WebXR 中实现双目成像

three.js 中通过控制对象与 Camera 的 Layer 属性来实现左右 Camera 渲染不同的内容:
https://threejs.org/docs/#api/en/core/Layers
https://threejs.org/docs/#api/en/core/Layers
通过着色器实现平行图像素材的偏移贴图渐变效果
fragmentShader
fragmentShader
 视差图像素材示例
视差图像素材示例
效果如下(当然,截屏没办法呈现出立体效果,需要在 VR 设备中才可以):
浏览器 AR 模式
浏览器 AR 模式
理论上来说,当你设置好 VR 现实设备的瞳距,双目渲染的内容自然与每只眼睛对齐,但是并不确定图像的拍摄设备所使用的瞳距参数,因此在上方添加了瞳距调节选项,你可以尝试增加或减少左右成像的间距,以达到最立体的视觉效果:
notion image

总结

必需说明的是,通过模仿双目视差产生的立体视觉,无论是在立体镜还是 VR 设备中,都会让人产生一种“比现实更加立体”的感觉,而长时间暴露在这样的视觉条件下,非常容易产生视觉疲劳、眩晕;这种眩晕与拍摄设备的条件(如镜头间距)和呈现设备的条件(如虚拟成像距离)都有非常直接的关系。从目前 iPhone 15 Pro 的相机组合和博主反馈的 Vision Pro 体验效果来看,能否达到我们所期待的打通虚拟和现实的边界,还有待后续真机体验验证!
 

 
✨ 这是《Lets HackVision Pro》系列的第 2 篇,本系列将会基于 WebXR 复刻苹果 visionOS 交互。你可以在 VR 设备浏览器中访问 lets.hackvision.pro 体验。
在 VR 浏览器中访问:https://lets.hackvision.pro/memory/
上一篇:

参考