动画揭秘:VR视频播放原理

VR视频播放时全景相机拍摄的逆过程

全景相机拍摄时,把水晶球的表面分成多份,每份就是一个鱼眼镜头,多个鱼眼镜头把真实世界映射成水晶球的表面贴图;

全景相机

球体表面贴图

播放时,VR播放器用3D技术构建出一个虚拟的球体,观众身处这个虚拟球体的内部中心,所看到的就是拍摄时水晶球映射的球体表面。

3D虚拟球体和摄像机

为了模拟人类的双眼视觉,两台虚拟摄像机以人眼间距的间隔并排排列,并对焦于正前方的同一点,把看到的球体表面贴图投影成两幅具有透视效果的平面图像。

双眼成像

用户带上VR眼镜后,这两幅图像通过凸透镜分别投影于用户的左右眼,由于光线在通过透镜时发生折射,图像会被扭曲并产生色差,VR播放器通过数学逆向处理修正图像,最终人眼能看到当初鱼眼镜头所拍摄的图像。

图像扭曲

用户头部转动时,VR眼镜内的陀螺仪和加速度传感器数据先经过信号平滑处理

信号平滑

再预测头部运动,计算出旋转矩阵更新虚拟摄像机并更新图像,让用户看到的画面和自身运动高度统一,产生“身临其境”的错觉。

头部运动预测

延展阅读:HTML5-网页如何播放VR视频?

时间: 2024-11-02 15:13:01

动画揭秘:VR视频播放原理的相关文章

Weex Android 动画揭秘

背景 在目前常见的交互方式中,动画扮演了一个重要的角色. 在 Weex 框架下,Weex 的动画需要屏蔽 CSS/JS 动画与 Android 动画系统的差异,并尽可能的达到60FPS. 本文阐述了在 Android 上实现高性能CSS/JS动画过程中所遇到的问题/相关数学知识及解决方案.本文使用的前端 DSL 为 Weex vue 1.0或 Weex Vue 2.0. 现状与问题 在 Weex 环境下, 一个典型的动画在前端DSL中的写法如下: animation = weex.require

浅析JavaScript动画模拟拖拽原理_javascript技巧

模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定.移动鼠标之后,我们用鼠标当前的位置即x4.y4减去x2-x1.y2-y1就可以得到方块现在的位置. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

网友揭秘畅无线破解原理:内置大量WLAN账号

昨日有消息称,一款名为"畅无线"的应用利用中国移动的WiFi管理漏洞,为使用者提供免费的无线上网服务.对此,有微博 网友称,畅无线软件内置了大量的WLAN电子卡账号免费让用户使用,而非媒体所称的"破解".据了解,该应用的开发商为上海云联计算机系统有限公司(以下简称"云联"),这款软件使用户跳过运营商设置的"WLAN用户登录的验证界面",免输入用户名或密码直接使用运营商的WiFi热点,并且免除一切费用.有报道称,该软件极有可能是

一张图揭秘谷歌眼镜工作原理

http://www.aliyun.com/zixun/aggregation/17197.html">北京时间4月10日上午消息, 美国科技博客Gizmodo发布了一张图片,揭示了谷歌智能眼镜(Google Glass)的工作原理. 简单地说,谷歌眼镜通过一个微型投影仪和半透明棱镜,将图像投射在人体视网膜上.镜架还嵌入了处理芯片和电池. 去年6月,谷歌在I/O开发者大会上正式发布谷歌眼镜.这款产品采用虚拟现实技术,将图像直接投射在眼球上,可实现搜索.短信.拍照.摄像.社交分享等众多功能.

HTML5:网页如何播放VR视频?

VR视频和普通视频有什么区别? VR即虚拟现实,VR视频又名全景视频,是指使用全景摄像机拍摄的,观看时可以自由变换视角的视频. 戴上VR眼镜,随着头部转动看到的图像也随之变化,仿佛身处一个虚拟的世界中. 没有VR眼镜,通过手指触摸或体感控制,也能随意切换视角. 与传统视频相比,VR最大的优势就是赋予每个观看者以导演的权利," 一千个人心中有一千个哈姆雷特",同一个虚拟世界,每个人也能走出属于自己的轨迹. VR视频的播放原理? VR视频播放是全景相机拍摄的逆过程. 拍摄时,想象把一个水晶

XNA入门教程(三) 简单的动画

继续我们的XNA之旅... 上周,我们简单的介绍了XNA的相关控制器,并且实现了鼠标和键盘对屏幕内的 某个Sprite(精灵)进行简单的位置控制. 但是,美中不足的,我们并没有实现Sprite人物的移动动作,即Animation. 现在,我们继续上周所讲的, 实现简单的动画. 关于Animation 对动画有所了解的朋友对于逐帧动画一定不会陌生.其以最简单的形式,将各 动画元件相邻单位时间的动作位置记录在每个帧里.这样,当我们 一帧帧播放时,由于视觉暂留现象,我们便能看到相对"运动"的

教你如何让界面动画自然流畅

  编者按:扁平化让界面动画越来越流行,但想要做出自然流畅的动效,懂软件还不行,你得学点函数.(哎喂,先别跑!)腾讯的史蒂夫同学直接从产品出发,聊聊如何用科学的方法地让动画更自然.语言浅显易懂,文末附动效小惊喜,学习下. 随着软硬件技术的发展,界面动画在我们的日常生活中随处可见.桌面软件.移动应用.云服务等,此刻环顾四周,我相信你一定能发现他们. 在产品中动画未必越多越好,也未必越炫越好.不同的产品类型对动画的要求也不同.常见的动画主要承担向用户解释界面与界面之间的关系,元素与元素间的关系以及特

iOS自定义转场动画实战讲解

转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

CADisplayLink+弹簧动画实现果冻效果

项目中在Tabbar中间的按钮要从底部弹出视图并有果冻效果,在CocoaChina中找了一篇博客用 UIBezierPath 实现果冻效果,github,自己就按着上面的demo修改了一下( 之前也是想着自己一行一行动手敲代码,小伙伴总是说我不要重复造轮子),也正好通过这个学习一下CADisplayLink. CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器.我们在应用中创建一个新的 CADisplayLink 对象,把它添加到一个runloop中,并给它