专栏首页QQ音乐技术团队的专栏Unity For Android Cardboard App ( 1 ):基础入门
原创

Unity For Android Cardboard App ( 1 ):基础入门

作者: ericzwhuang

前言

目前Google官方推出的VR设备有DayDream(2016年推出)和Cardboard(2014年推出)两种。

  • Daydream是消费级VR解决方案,提供了手持遥控设备Controller,提高渲染效率,优化延迟。
  • Cardboard是体验级VR解决方案,属于入门级VR设备的首选,物美价廉。

本文针对的VR设备是Cardboard,Google为Cardboard提供的VR SDK主要有四种,分别是Android,iOS,Unity和Unreal。本文主要阐述的是如何在Unity环境下开发VR场景,实现视线与物体的简单交互。

软件准备

工欲善其事,必先利其器,首先介绍开发过程中需要用到的软件环境和开发工具

  • Unity Editor 编辑图形界面的利器,所见即所得,使用的是Unity 5.4.2f2个人版
  • Visual Studio 微软出品的C#开发编辑器,使用的是Visual Studio 2015个人版
  • VR SDK 使用的是Google VR为Unity提供的SDK ,下载得到GoogleVRForUnity.unitypackage文件
  • Android SDK Android开发必备环境,推荐和Android Studio配套下载
  • JDK JAVA开发必备环境,需要配置环境变量
  • Cardboard 最便宜的VR体验设备盒子,可以网购或自行组装

开发流程

本文将通过以下步骤来完成开发过程,使用清晰直观的图片辅助说明

  • 导入资源,构建双目视图
  • 添加交互物体
  • 代码编写
  • 建立物体、代码、事件之间关联关系
  • Android平台打包

导入资源,构建双目视图

新建项目之后,从Assets -> Import Package中引入之前下载完成的 unitypackage 包,Project中的Assets文件夹下会添加两个文件夹GoogleVRPlugins,包含Google为VR提供的一系列模板文件。

目前在Cardboard上展示的视图一般都是双目视图,又称分屏视图,左右眼看见的图片内容略有不同,图像相互叠加形成立体效果。将Assets->GoogleVR->Prefabs->GvrViewerMain.prefab移到结构列表中,选中GvrViewerMain ,在Inpsector中设置Screen Size值为Nexus 5Viewer Type值为Cardboard May 2015

此时在Scene视图中看不出有什么变化,点击运行之后可以看出已经有双目效果

Windows下按住Alt+移动鼠标,可以转动视角,目前还没有添加任何物体,VR中需要和视野范围内的物体进行交互,这就引出了一个问题:如何确定当前看到的是哪个物体。你也许会说是当前视野的视线聚焦的位置,事实也的确如此,如何将他标记出来呢?

为了有更好的用户体验,Google早就为我们提供了良好的呈现方式,称之为Gaze(注视、凝视)。

Assets->GoogleVR->Prefabs->UI->GvrReticlePointer.prefab 移到Main Camera结构下。注意这里Main Camera GvrReticlePointer是上下层级关系,不是并列关系。

添加交互物体

选中Main Camera,在Inspector中的底部选择Add Component ,添加GvrPointerPhysicsRaycaster

这个组件可以让camera与物体进行互动,Raycaster是光线发射的意思,好比摄像头发出的光,如果照射到物体,物体就会做出反应。添加之后如图所示

此时运行项目,就可以看见左右屏幕中间(不是正中间)都会有个白色的点,也就是上面提到的注视的点。移动方向和位置,项目会以第一人称的视角去观察。

项目只需要实现一个最简单的例子:视线聚焦到物体的时候物体变色,视线移开时物体恢复原状。首先我们创建一个球体Sphere,在Hierarchy的空白处鼠标右键点击->3D Object->Sphere,视图中会出现一个球体,位置默认是原点坐标(0,0,0),需要将Sphere移到camera的可见范围内,在Scene模式下可以点击camera查看摄像头的视角和范围,也可以在Game模式观察是否可以看到物体,Game模式下的所见内容就是camera的视野内容。点击Sphere可以看见Inspector中的相关属性,主要有位置、旋转角度和规模等。

代码编写

接下来需要编写代码来实现交互效果了,在Unity中一般使用C#或JavaScript来编写,Unity默认是使用MonoDevelop编辑器,但是一般编写C#是用Visual Studio编辑器,这里我采用的就是Visual Studio来编写C#。

在Assets下创建Script文件夹,主要存放代码文件。

在Script文件夹中鼠标右击创建代码文件,Create->C# Script,命名为GazeToSphere,主要的代码如下所示:

using UnityEngine;
using System.Collections;

public class GazeToSphere : MonoBehaviour {

    // Use this for initialization
    void Start ()
    {
        ChangeColor(false);
    }

    // Update is called once per frame
    void Update ()
    {

    }

    public void GazeEnter()
    {
        ChangeColor(true);
    }

    public void GazeExit()
    {
        ChangeColor(false);
    }

    public void ChangeColor(bool gaze)
    {
        GetComponent<Renderer>().material.color = gazedAt ? Color.black : Color.white;
    }

}

MonoBehaviour是每个脚本的基类,Javascript脚本自动继承MonoBehaviour ,使用C#时,需要显式继承MonoBehaviour,其中Start() ,Update()等方法是可以重写的。

下面对各个方法进行解释:

  • Start() 物体初始化方法,可重写。
  • Update() 物体刷新的方法,可重写。频率是每帧刷新,帧数可以由fps参数得知,如果fps是60,则表示每秒刷新60次,两次update之间的时间间隔是1/60s。
  • GazeEnter() 自定义的方法,表示视线进入物体。
  • GazeExit() 自定义的方法,表示视线离开物体。
  • isGazed() 自定义的方法,表示对当前渲染的物体进行变色处理。

Visual Studio默认不会自动保存文件,所以编写完代码之后记住要手动保存文件,否则在后面关联过程会出现问题。目前实现的功能是视线进入球体,球体变成黑色,视线离开物体,球体变成白色。

建立物体、代码、事件之间关联关系

下一步是将物体、代码、事件之间关联起来,选中Sphere,在Inspector中点击Add Component ,搜索创建的C#文件的名字GazeToSphere,添加相关部件。

首先建立视线与物体之间的关联关系,需要添加事件系统,在Hierarchy的空白处鼠标右键点击->UI->Event System ,选中Event System 之后,在Inspector中点击Add Component 按钮,然后在输入框中搜索GvrPointertInputModule ,添加对应模块。

接下来就要将之前写的GazeToSphere 和这个module关联在一起,再回到Sphere 上,继续添加component,搜索Event Trigger并添加。

然后要添加触发的事件类型,点击Add New Event Type ,选择添加Pointer Enter ,表示进入事件,然后点击+ 按钮,

None(Object) 中点击右侧的小圆圈,

会弹出框中选择当前的Sphere 对象,

然后点击No Function 这一栏,在下拉框中选择GazeToSphere->GazeEnter ,这里需要注意之前提到的要主动保存文件,否则在这里无法索引到GazeToSphere的GazeEnter方法。

上面的操作主要实现的内容就是当视线进入球体时,会触发GazeEnter方法,而GazeEnter 方法执行的就是将球体的颜色变成黑色。因此还需要添加离开事件,按照同样的方法,再添加一个Event Type ,这次选择添加Pointer Exit ,表示离开事件,关联的是GazeToSphere的GazeExit 方法,结果如图所示。

在pc上测试的效果如图所示,焦点在球体外的时候,球体显示白色。

当焦点进入球体时,焦点会从白点变成一个圆圈,表示Gaze状态变化,球体变成黑色。

Android平台打包

将项目保存成.scene 类型文件,然后点击File->Build Settings ,选择Android平台,首次移植到Android时会显示如下图片。

点击Open Download Page ,会自动下载一个UnitySetup-Android-Support-for-Editor 文件,点击安装,会提示先关闭Unity编辑器,安装完成之后再次打开Unity编辑器。目前还只是在PC端上测试,下面需要打包成可以在Android系统上运行的apk文件。这里需要配置SDK和JDK的路径,点击Edit->Preferences->External Tools ,勾选默认使用VS打开C#文件,配置SDK和JDK路径,NDK路径可以先暂时不用配置。

点击File->Build Settings ,点击Add Open Scenes ,选中保存的项目,在平台中选择Android,点击底部的Player Settings

在这些位置需要编辑包名,主要是公司名称和产品名称,注意不能有数字。

在Resolution and Presentation 中勾选Landscape Left 或者Landscape Right,因为Cardboard 中默认手机是横向放置,所以默认选择横屏,一般习惯是Left。

然后点击Build And Run ,选择安装包的位置,等待手机运行即可(当然手机要通过usb连着电脑了,而且只能连一台手机,因为没有可以选择安装在哪一台手机上的过程),第一次编译过程会比较慢,之前一直是在Windows平台编译,这次转换平台,很多资源需要重新转换。接下来就把手机放在Cardboard中,感受一下VR的效果吧。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 追根溯源解杂音之谜,臻于至善得完美音质

    不久前,团队发现其Android平台App在播放MV视频《凤凰花开的路口》时,会带有如电流声一般的杂音,这影响了用户体验。

    QQ音乐技术团队
  • Android Studio 2.2 Native 开发新特性

    在本文所述新特性之外,参考资料中还提供了利用向导工具创建具有 Native 支持的 Android 新项目的方法。由于这个新特性比较明显,本文未做详述。

    QQ音乐技术团队
  • Android Auto开发初探

    一、Android Auto 概述 最近物联网是比较热门的话题,做为物联网重要的一部份车联网也被众多汽车厂商越来越重视,纷纷推出自己的车联网系统。谷歌也是看到了...

    QQ音乐技术团队
  • Android P 开发者预览版首发!

    Android 开发者
  • Android P 行为变更

    Android 开发者
  • adb shell无法连接到Genymotion上的虚拟设备的问题

    在《安装Genymotion模拟器运行Android studio的工程》一文中,我们实践了在Genymotion上运行Android studio的工程,在实...

    程序员欣宸
  • WPF 使用 SharpDx 异步渲染 使用方法绑定渲染为什么空白等待画完异步渲染多线程渲染

    本文告诉大家如何通过 SharpDx 进行异步渲染,但是因为在 WPF 是需要使用 D3DImage 画出来,所以渲染只是画出图片,最后的显示还是需要 WPF ...

    林德熙
  • 关于移动互联网的跨平台技术演进

    随着移动互联网的普及和快速发展,手机成了互联网行业最大的流量分发入口。以及随着5G的快速发展,未来越来越多的“端”也会如雨后春笋般快速兴起。而“快”作为互联网的...

    Android技术干货分享
  • 跨平台技术演进

    随着移动互联网的普及和快速发展,手机成了互联网行业最大的流量分发入口。以及随着5G的快速发展,未来越来越多的“端”也会如雨后春笋般快速兴起。而“快”作为互联网的...

    用户2356368
  • 智能电视智而不能,谁来破局?

    华数传媒从2月25日停牌至今,源于阿里巴巴将入股华数,或持有后者20%的股份。阿里抢占客厅的心情愈发急切。百度、腾讯、小米、360甚至苏宁在客厅领域都有所布局...

    罗超频道

扫码关注云+社区

领取腾讯云代金券