Unity3D for VR 学习(7): 360°全景照片
在VR应用中,有一个相对简单的虚拟现实体验,那就是360°全景照片浏览器, 他可以使得手机拍照的”全景”照片, 得以”恢复”当时拍照的场景全貌, 这个创意的确比单纯的2d图片更有震撼力一些,故本文就制作360全景照片的过程进行简单小结。
Step 1:预期需求
可以通过手机的陀螺仪,在魔镜中查看360°图片;不用依赖任何蓝牙输入,仅通过Gaze Input进行选择下一张360°图片(盯着缩放图2s,进度条旋转完成后,就切换图片;用Gear VR的磁铁触发功能也可以实现选择下一张图片)。
Step 2: 准备材料
硬件:暴风魔镜4 + 小米Note顶配版(2K屏幕)
SDK:魔镜手柄、反畸变SDK_Unity版,或者 Google cardboard-unity,本文使用的是Googe CardBoard
Step 3: 创建材质球
360°照片,展开看就是一个投影的2D照片,这个在初中学习世界地理的时候将类似投影球形地图到2维平面上,原理类似,只不过一个360°照片的投影失真会小很多.
为了复原,需要建立一个3D Object\Sphere, 我们通过把图片贴到这个球体上,从内侧看效果。 然后拖放照片到Sphere上,球体放大10倍; 这个时候,发现一个问题在Game视图中看不到东西了,因为Camera没有在球心位置,修改Camera坐标为(0,0,0)位于球心。
我们依然看不到图片,因为Spere默认用的是Unlit/Transparent Shade,他为了渲染高效,把背面给剔除了,而在这里,我们洽洽需要渲染背面,故得从新写个shade–关闭cull off。
DoubleSided.Shader文件
Shader "Unlit/DoubleSided"
{
Properties
{
_Color("Main Color", Color) = (1,1,1,1)
_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(.5,.5,.5)
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(.5,.5,.5)
combine constant lerp(texture) previous
}
SetTexture[_MainTex]
{
Combine texture *previous DOUBLE, texture *primary
}
}}
FallBack "Diffuse", 1
}
替换了新的Shade后,效果好了很多了,唯一有问题的是我们看到的照片是反的,故修改Spere的.Z为-10.
通过在Unity.Editor上Play效果,已经很不错了,至此完成了大部分的工作,下面开始”移植”到VR设备上
Step 4: 添加VR Camera
先禁用掉默认的MainCamera、light。
然后添加VR摄像机—导入Google的CardboardSDKForUnity.unitypackage后,拖入CardboardMain.prefab到场景中。 这时候点击Play启动UnityEditor,即可看到双VR Camera的效果,点击调试快捷键:Alt + 移动鼠标,即可看到模拟的陀螺仪效果。
这个时候打包为apk,安装到手机,用真机的陀螺仪体验,效果更酷。
Step 5: 添加Gaze-and-Tap 用户界面
完成《Step 4: 添加VR Camera》后,实际上已经完成了360°全景照片功能,但是这个仅仅是一个demo,有一个致命的痛点:只有1张照片,如果我有4张照片,每次独立打包为一个apk,这显然不合理。 故需要做一些VR交互。
这里,我们添加4个Plane,通过上面章节的《Unity3D for VR 学习(5): VR Gaze Input》,期望可以实现通过Gaze一个Plane 3s,然后能够切换新的照片功能。
添加Plane,坐标修改如下:
添加一个脚本,实现响应EventSystem,可通过2种办法
方法1: 添加Event Trigger脚本,响应PointerEnter、PointerExit等方法,如图
方法2:脚本直接继承IPointerDownHandler、IPointerExitHandler等接口,这个看起来更符合程序员胃口
我们通过控制Plan的Color.a来实现高亮选择,代码如下
public void SetGazeAt(bool gazeAt)
{
Debug.Log("SetGazeAt: " + gazeAt);
Renderer render = this.GetComponent<Renderer>();
Color cor = render.material.color;
cor.a = gazeAt ? 1f : 0.5f;
render.material.color = cor;
}
另外,当Gaze 2s后,会动态替换material的Texture来实现替换360°照片,代码如下
public void OnClick()
{
Renderer renderSrc = this.GetComponent<Renderer>();
Renderer renderDst = pano.GetComponent<Renderer>();
Texture tex = renderSrc.materials[0].GetTexture("_MainTex");
renderDst.materials[0].SetTexture("_MainTex", tex);
}
备注:
360°全景照片,非常大,有好几M,这个对手机app来说会造成文件太大,实际商用中,需要采用AB(AssetBundle)实现动态从网络侧更新360图片,那样会更酷一些(轻量级)。
本文用到的完整的 demo Git地址: Git.OSChina.net
昨天网上一个朋友问了一个VR问题:
可否像3D Max那样,动态替换材质,如替换房间地板材质,实现全景照片替换?
回答:不行,只能动态替换整个的全景照片;我昨晚细细思索,好像还是不行,除非建立3D模型,采用动态换装才能实现动态换360°照片中的大树、地板吧。
转载请注明转自《Unity3D for VR 学习(7): 360°全景照片》
Unity3D for VR 学习(7): 360°全景照片相关推荐
- Unity3D for VR 学习(5): VR Gaze Input
在VR中,最"贴切"的输入方式是眼神,即 VR Gaze Input,如盯着某UGUI UI.某GameObject,2s后触发事件– 显示ToolTip或者切换场景等. 因为这 ...
- Unity3D for VR 学习(6): 再次温故知新-3D数学
一年前,系统学习过3D数学,并记录了一篇博客<C#程序员整理的Unity 3D笔记(十):Unity3D的位移.旋转的3D数学模型>. 一年后,再次温习之. 坐标系:Unity3D使用左手 ...
- Unity3D for VR 学习(1): 又一个新玩具 暴风魔镜 4(Android)
2016年伊始,有了VR虚拟现实硬件设备: 暴风魔镜4–好奇者的新玩具 . 2015年下半年的朋友圈中各种VR.AR的新闻层次不穷,搞的我也心痒痒的:好歹咱也是职业的Unity3D程序员,高大上的O ...
- 从一点儿不会开始——Unity3D游戏开发学习(一)
一些废话 我是一个windows phone.windows 8的忠实粉丝,也是一个开发者,开发数个windows phone应用和两个windows 8应用.对开发游戏一直抱有强烈兴趣和愿望,但奈何 ...
- 菜鸟在线教你用Unity3D开发VR版的Hello World
大家好,我是菜鸟在线的小编.这篇短文将告诉大家如何用Unity3D开发VR版的Hello World. 1开启SteamVR并连接Vive设备 (a)登录Steam客户端,并点击右上角的VR按钮,这时 ...
- Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇
前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系.前两天又读 ...
- 720环物全景制作_拍摄360全景照片多少钱?全景图片用什么软件看?
相较于传统式的宣传展示,360全景照片凭借着沉浸式的交互体验博得了大众的欢迎,那么拍摄360全景照片多少钱呢?本地全景图片用什么软件看呢?相信很多人对此都很疑惑.下面就来一起看看吧. 拍摄360全景照 ...
- Unity VR学习:第一人称射击游戏(1)
Unity VR学习:第一人称射击游戏(1) 1.封装标签和场景淡入淡出效果实现 (1) 封装标签 1.标签有Player,Enemy,GameController,Fader(画布),MainCam ...
- 我不是九爷 带了解 Unity3D与VR虚拟现实
对于大多数人来说,可能不知道Unity3D是什么,但是却知道VR虚拟现实是什么,更不会把VR虚拟现实和Unity3D联系在一起,外行的人根本不知道这两者之间有什么关系.那么,今天来给你讲解一下Unit ...
最新文章
- spring cloud集成 consul源码分析
- php简单实用的操作文件工具类(创建、移动、复制、删除)
- DNS服务器 安装部署 以及子域授权和转发
- Ubuntu中zabbix 4.2.6监控postgresql数据库
- TensorFlow :HelloWorld
- 【ENVI解决经验】裁剪后背景改为白色(透明)
- 基于RFM模型的Kmeans聚类算法实现
- 东北大学大物实验思考题答案解析
- android webview 跳转系统浏览器,webview 调用系统浏览器怎么解决
- android opengl 简书,Android OpenGL入门
- 计算机地理绘图软件叫什么,地理教师如何选择理想的绘图软件 ──基于对常用绘图软件的比较与分析...
- java inet aton_IP处理函数inet_aton()和inet_ntoa()使用说明
- 第四届传智杯(初赛B组) | python题解思路
- easyui中在datagrid中右键出现菜单
- 【去雾】|GMAN 去雾
- 毫秒和微秒分别和秒怎么换算?
- 抖音的配音段子在哪里搜到,抖音上录段子的配音都在哪里能找到
- Python3.8的下载与安装
- 像中本聪一样消失,Grin创始人宣布暂时离开该项目
- 微信小程序下拉刷新、上拉加载
热门文章
- Sapphire应用场景剖析 | 基于行业首个隐私EVM构建DApp
- C++习题--实数的输出格式
- spyder设置显示编码_OBS编码器选择“硬件(NVENC)”导致无法录屏解决办法
- 英文事件抽取论文整理
- gazebo机器人电池仿真
- 黑麦4k可以安装Linux,全高清屏你就满足了?GTX1050Ti+4K屏麦本本黑麦5X颠覆你的视界...
- 前端工程化实战 - 开发脚手架
- java配置文件起名规范_Mybatis注解和配置文件命名规范所引发的问题
- 欧姆龙 CP系列PLC以太网通讯处理器的应用连接组态王步骤
- 流星滑落-第13届蓝桥杯Scratch省赛1真题第2题