现在的VR似乎没有之前那么火热了,于是乎我居然开始了VR征程。。。

  说起VR,对于没有接受过相关知识的人来说可能看起来比较高大上,但是VR的原理却没有想象中那么复杂。总的来说,VR之所以能够产生立体感,是因为人有两只眼睛。其实现在有很多自称VR的视频或者图片严格来讲并不能算是VR,因为它只是将一平面图变成了360°的图,其实和平面图是一样的,并没有深度信息,只是你可以转转小脑袋来全方位观察而已。如下图:

  可以看到图片是扭曲的,至于为什么人眼在VR眼镜中看到的图像是正常的,是因为这张图片并不是直接看的,它需要把整个图像投影到一个球体的内表面(可以想象一下把地球仪展开成一个平面图并且补充裂开的部分),然后摄像头位于球体内部的中心,这时候从VR眼镜中看到的就只是这个球的一小部分,当然,可以转动你的小脑袋来全方位观察,当转动的时候通过陀螺仪的读书来计算相机的转动角度。这种VR的原理大概就是如此了,是不是觉得很简单!

  真正有深度信息的VR图片/视频其实是有两部分的,其中比较多的是左右屏和上下屏,这时候就不能把它直接投影到一个球上了,而是投影到两个球上,并且需要有两个摄像机分别来提供左眼和右眼的图像,此时左眼和右眼看到的图像并不是完全一致的,有一定的错位,就跟我们睁开眼看这个世界一样,所以此时看到的图像就是立体的,有深度信息的。如下图:

(图像比较渣,将就看)

上图中上下看起来是差不多的,但是实际上是有差别的,投影的时候会把上半部分投影到左眼,把下半部分投影到右眼,具体如何实现会在后面讲。除了上下分屏其实还有左右分屏的,原理都差不多了。

  原理讲得差不多了下面讲开发:

  首先你要准备开发环境:Unity#D5.6(最新),安卓SDK(5.1以上),JDK,Visualstudio 2017(可选),Andoridstudio(可选)。Unity插件:EasyMovieTexture3.59(商用就买,个人爱好可以去搜搜其他人的分享)。

  首先来看普通的全景图(没有分屏的),这里强行假设你已经搭建好了所有的环境,打开Unity3D,新建一个3D Project,这时候你将得到一个miancamera和一个平行光,将平行光删掉(喜欢也可以留着)。新建一个球体,然后导入一张全景图,将图片拖到刚刚创建的球体上,可以看到现在的球体已经被你的图片包围了,然后将球的Scale属性xyz分别设置为5,5,-5(其它等比例也行,但是要保证比相机要大). 至于为什么z轴是-5,等会讲到。将相机和该球的位置都设为0,0,0. 这时点击相机,你将会在预览窗口什么都看不到,因为你的图片是贴在了外表面。需要想办法把图片贴到内表面去,感谢王文刚老铁提供的Sharder。

Shader "Unlit/DoubleSided"
{
Properties
{
_Color("Main Color", Color) = (,,,)
_MainTex("Texture", 2D) = "white" {}
}
SubShader
{
//Ambient pass
Pass
{
Name "BASE"
Tags {"LightMode" = "Always" /* Upgrade NOTE: changed from PixelOrNone to Always */}
Color[_PPLAmbient]
SetTexture[_BumpMap]
{
constantColor(.,.,.)
combine constant lerp(texture) previous
}
SetTexture[_MainTex]
{
constantColor[_Color]
Combine texture * previous DOUBLE, texture *constant
}
}
//Vertex lights
Pass{
Name "BASE"
Tags {"LightMode" = "Vertex"}
Material
{
Diffuse[_Color]
Emission[_PPLAmbient]
Shininess[_Shininess]
Specular[_SpecColor]
}
SeparateSpecular On
Lighting On
cull off
SetTexture[_BumpMap]
{
constantColor(.,.,.)
combine constant lerp(texture) previous
}
SetTexture[_MainTex]
{
Combine texture *previous DOUBLE, texture *primary
}
}
}
FallBack "Diffuse",
}

这个Shader的意思其实就是让球两边都贴上纹理。这时候再点击摄像机你就能看到图像了,但是你可能会发现这图像是反的(你可能也会发现不了,但是它确实是反的),所以我们要将球的Scale.z值设基本为负数。到这里基本就完成了,接下来就是打包发布了,点击file-build and setting 选择安卓,点击player setting,在other setting里将VR surport选上,选择一个sdk(建议Google cardboard),然后build就可以了。不出意外的话生成了一个apk文件,安装到你的大手机上就可以看到效果了。这时你会发现和想象中不太一样,顶部和底部的形变比较严重,产生这样的原因是因为Unity自带的球体模型比较粗糙,这时候你可以在3dsmax中自己建一个球,把分段设大一点,建好后还可以将球的法线翻转下,翻转后就可以不用那个DoubleShader了。

  好了,一个简单而不简约的VR图片观察器就完成了,欲知后事如何,且听下回BB!

UNITY VR 视频/图片 开发心得(一)的更多相关文章

  1. UNITY VR 视频/图片 开发心得(二)

    上回说到了普通的全景图片,这回讲真正的VR. 由于这种图片分为两部分,所以我们需要两个Camera对象以及两个球体.首先新建一个Camera对象,并将其命名为RightEye(其它名字也无妨,只要你自 ...

  2. NutUI 视频组件开发心得

    引子 说到在项目中引入一个视频,我们肯定会想到 HTML5 为我们提供的 Video 标签,它为我们提供了许多属性和方法,使用起来很方便,当然直接使用也会遇到各种兼容问题,在最初学习 Video 标签 ...

  3. 优分享VR开源啦,优分享VR是基于Google VR开发的一款手机VR视频资源的聚合软件

    欢迎来到优分享VR开源项目 优分享VR 开源中国Git地址: http://git.oschina.net/xumingwang/youkes_vr 优分享VR是 优分享安卓APP VR视频播放开源部 ...

  4. 《转》iOS音频视频初级开发

    代码改变世界 Posts - 73, Articles - 0, Comments - 1539 Cnblogs Dashboard Logout HOME CONTACT GALLERY RSS   ...

  5. NodeJS版本EasyDarwin开源流媒体服务器开发心得

    title: Node版本EasyDarwin开发心得 date: 2018-03-27 22:46:15 tags: 年后着手Node版本EasyDarwin的开发工作,截止到今天2018年03月2 ...

  6. VR视频原理

    VR视频,这里指的是沉浸式全景视频,基本场景是观影者戴上显示头盔(如cardboard),在其中通过头部的转动可以看到全景视频的每个方向的图像.同时也能听到来自各个方向的声音,声音也会随着头部的转动而 ...

  7. 【Java SE】使用Javacv截取视频图片

    [Java Web开发学习]使用Javacv截取视频图片 转载:https://www.cnblogs.com/yangchongxing/p/9482935.html github地址:https: ...

  8. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  9. Jaunt登陆索尼PSVR,为其提供大量VR视频

    索尼PS VR自从推出就广受用户青睐,当然不仅仅是其低于高端VR头显的价格,还在于PS VR提供的丰富游戏内容.近日,国外视频网站Jaunt还专门为PSVR推出了专版APP,为其提供超过 150 个沉 ...

随机推荐

  1. PHP. 03 .ajax传输XML、 ajax传输json、封装

    XML简介 XML 指可扩展标记语言 EXtensible Markup Language .射击的时候是用来船体数据的,虽然格式跟HTML类似 xml示例 <?xml version=&quo ...

  2. 6、Java包的命名与划分

    6.包的命名与划分 (一)使用Java包的目的 在了解做一件事之前,需要了解做这件事的目的.而使用Java包的目的大概如下: 1    对类进行归类,便于开发查找. 2    将软件在代码层面上模块化 ...

  3. 2-LPC1778之GPIO

    其实这篇文章主要是介绍自己为其写的GPIO库,自己借鉴了原子写的STM32,野火写的K60,还有LPC官方库,然后按照自己平时用的,然后写了一个..其实写库的主要目的是为了方便(主要是方便操作)以后自 ...

  4. 开涛spring3(5.1&5.2) - Spring表达式语言 之 5.1 概述 5.2 SpEL基础

    5.1  概述 5.1.1  概述 Spring表达式语言全称为“Spring Expression Language”,缩写为“SpEL”,类似于Struts2x中使用的OGNL表达式语言,能在运行 ...

  5. JQuery版评分控件

    Hi All, 分享一个学习JQuery做的一个评分控件. 需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果:当鼠标推出 ‘ ...

  6. TensorFlow for R

    TensorFlow™ is an open source software library for numerical computation using data flow graphs. Nod ...

  7. 织梦dedecms列表页dede:pagelist分页问题

    pagelist是dede定义的一个分页标签.有时直接引用这个标签的时候,会出现分页标签变形问题.我在使用非默认模板的时候就遇到过两次. pagelist本身就有一些样式是在include/arc.l ...

  8. canvas动画——粒子系统(1)

    这个动画在很早之前就见过,当时就没迷住了.最近在学canavs动画,动手实现了一下.代码在这里.展示效果在这里. 这属于粒子系统的一种,粒子系统就是需要管理一堆粒子嘛,动画实现的关键在于,遍历这些粒子 ...

  9. $(obj).index(this)与$(this).index()异同讲解

    $(this).index()在使用jQuery时出镜率非常高,在编写选项卡及轮播图等特效时经常用到,但$(obj).index(this)似乎有点陌生. 为便于理解,以下分两个使用场景加以分析. 场 ...

  10. nodejs零基础详细教程2:模块化、fs文件操作模块、http创建服务模块

    第二章  建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...