Yuhao Kang GISer

Menu

Cardboard开发教程:使用Unity制作Cardboard全景图片浏览器

这两年,虚拟现实(VR)领域很火,很多人认为这将会是下一个手机般改变人们生活的技术。目前全球最领先的还是Facebook旗下的Oculus,HTC VIVE,以及最流行的Cardboard。国内多家厂商也在此领域发力,暴风魔镜就是其中的翘楚。今天这篇文章,就将从Cardboard入手,结合Google Cardboard for Unity SDK,在Unity中开发一个最简单的全景图片浏览器。

首先,能让我在今天动手写下这么多的文字,要感谢以下几篇文章,阅读了这些文章作者的经验之后,对我受益匪浅。以下是相关文章:

http://blog.csdn.net/column/details/cardboardvr.html

http://www.cnblogs.com/donghua/p/5060969.html

接下来进入正题,我将以Cardboard自带的案例为基础,在Unity中开发一个全景图片浏览器。

要开发Cardboard,需要先去下载Android SDK,Cardboard SDK和Unity。Unity版本5.2.1之后并且能够开发安卓平台的游戏即可。目前由于Google推出了Daydream平台,一些内容和我当初开发的时候已经有一些不同了。下面是引导网址:

API Guide: https://developers.google.com/vr/unity/get-started-android

Cardboard SDK可以使用git下载:

git clone https://github.com/googlevr/gvr-unity-sdk.git

导入资源:菜单栏上Assets->Import Package->Custom Package,将SDK和Demo都导入进来,导入时点击import即可。

导入后,从Project窗口中打开DemoScene:

在根目录下,即Assets,创建一个文件夹photo用来存放照片。Create->Folder:

同理创建Scripts用来存放脚本。

将照片拖入Photo文件夹中。导入完毕后,分别点击每一幅照片,在右边导航栏选择texture type为texture:

删除Hierarchy窗口中左边红框范围内的几个物体。

再在Hierarchy窗口中新建两个Sphere,分别命名为sphereleft和sphereright,代表左右眼看到的东西。右边调整参数,将Rotation的Y值设为270度,这样打开后看到的是正面的图片,否则是侧面的。

在Inspector窗口中的Layer那里点击,选择add,添加图层left和right,添加后,将sphere的图层一一对应。

将photo中的照片分别拖动到sphere上,会自动生成materials文件夹。在Inspector窗口中设置sphere的shader属性为cardboard/UnlitTexteture。

或者进入Materials文件夹,分别点击照片,修改Shader为Cardboard/UnlitTexture。

分别点击main camera left 和 right,设置cardboard eye属性中,toggle culling mask。这个属性的意思是遮盖。因此,如图,左眼应把右眼的图层遮盖看不见,所以左眼选择right,同理,右眼选择left。

主屏幕上,注意2D不要勾选,否则不太好调试。

现在,点击播放按钮,就可以看看效果了。

在Project窗口中,找到前面创建的Scripts文件夹,点击Create创建一个C# Script。命名为ChangePhoto,用来控制更新照片。

输入代码如下:

public class ChangePhoto:MonoBehaviour
{
    public Material[] m_material=new Material[5];
    int photoID=0;

    public void PhotoAdd()// Next photo
    {
        if (photoID+1<=m_material.Length)
        {
            this.GetComponent().material=m_material[++photoID];
        }
    }

    public void PhotoMinus()// Last photo
    {
        if(photoID-1>=0)
        {
            this.GetComponent().material=m_material[--photoID];
        }
    }
}

  

修改Hierarchy窗口中的按钮,保留两个,修改。分别点击text,修改文字,再修改Inspector窗口中的position,将Y值修改到合适的数字。

将写好的脚本分别拖动到sphereleft和sphereright上右边如果Inspector窗口出现了ChangePhoto这个函数,说明成功。

分别设置两个Sphere里的ChangePhoto函数,Material的size为照片数目,再将AssetsàPhotoàMaterials文件夹里的材质依次拖动到Element里即可。

选择Hierarchy窗口中的按钮,看Inspector,有On Click()函数,点击+,添加一个对象,分别将sphereleft和sphereright拖动到下面,将按钮和物体关联,设置右边的函数为相应的函数,即ChangePhotoàPhotoAdd

如果一切设置完毕,点击播放按钮,看看效果。

最后是打包成apk。点击File,选择Build Settings,在跳出来的窗口中选择Android,并选择Player Settings,在Inspector窗口中可以设置company name和product name。接着在下方找到Identification,修改Bundle Identifier,把Company和ProductName修改了。这个必须修改。设置好了就可以点击Build输出了~

— Written in
— Tags: