VR开发--Cardboard项目四:全景浏览与相册功能实现方式

之前我就已经写过这样的东西,今天通过另一种方式实现.

利用鱼眼图片制作VR全景漫游:
http://www.jianshu.com/p/d2f31771a072

效果图:

1.gif

1、VR场景漫游

关于使用工具切图的方法不再讲述,请看上面的链接文章,里面就有就有第一种方法,通过天空盒子制作.虽然是基于HTC,但是对于CardBoard同样适用.

2、实现场景漫游

首先将图片修改为CubeMap,其原理就是六张图贴起来

可以看到图片转换后还是很大的

创建方块体,修改内部材质为具有CubeMap贴图的材质球

将摄像机导入

最后打包,编译成手机APK文件,运行到手机上.效果还不错. 注意:手机的横竖屏要区分开,然后要通过手机盒子进行.

3、全景相册

实现原理

全景相册-其实通过制作上面的功可以知道,我们只需要切换材质球或者图片

1-两种方式:

(1)切换材质: 这样就简单了,但是我们刚才看到材质球转换后大约是16MB,对于手机的应用来说一个材质16MB有点big,所以需要热更新,缓存文件,再展示.类似于预加载. (2)切换材质的图片: 设置图片的类型为Cubemap,然后修改材质球内部"_MainText"就可以做到全景照片切换了.这个_MainText其实就是获取材质的图片.

2-交互

具体查看我前面的博客

3D物体交互,
http://www.jianshu.com/p/643890e4c57d
UI交互
http://www.jianshu.com/p/3696bc837551

看完后,我们就具备了事件交互功能的制作,然后我们要通过一些特定操作进行,例如2秒后进入下一张图片等 我们就在方块上添加脚本,并根据摄像机的指向来响应事件

OnClick就是点击鼠标后

通过事件触发进行操作

上面论述过全景相册的原理,所以我们就根据事件的响应方法来制作我们的相册, (1)切换材质: 这个太简单,就不论述了.

(2)切换材质的图片:

当 2s后，会动态替换material的Texture来实现替换360°照片，代码如下
public void OnClick() {   
 Renderer render1 = this.GetComponent<Renderer>();    
 Renderer render2 = pano.GetComponent<Renderer>();  
 Texture tex = render1.materials[0].GetTexture(“_MainTex”);   
 render2.materials[0].SetTexture(“_MainTex”, tex);
 }