超牛链AI Logo

超牛链博客: 读书|骑行|笔记分享
user
老王不响
@关于博主
2016-02-01

Unity3D for VR 学习(7): 360°全景照片 14 mins read


    在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°照片中的大树、地板吧。

2016-02-01
老王 加冕为王
老王,工作了19年的软件工程师、连续创业者、Blogger(since 2013),微软.net MVP获得者(2015~2016)、 Unity3D UVP获得者 (2017)。 曾任上市公司研发主管、知名外企Social Media Marketing 。 现专注于Instagram、SEO等海外社交媒体营销技术研究与实践。 四十而立的我,有2个可爱的宝宝,喜好骑行、读书、木工, 尤其喜好历史、科幻书籍。
友情链接
超牛链 84天前 2024年3月6日 15:16

老板大大的故事永远那么动人,让人迷恋

最新文章

超牛链AI:Ollama本地LLM LangChain RAG小试--算力为王

算力为王时代: CPU --> GPU

GPU这...
【发刊词】超牛链AI: hello world.

​公元2024年,比2023年的AI风暴,更加寒噤。

《一句顶一万句》 遇见一个能说的上话的人不易

2024年 甲辰龙年春节假期,我看了2本小说,茅盾文学...

2023个人总结: AI、骑行、青椒炒肉丝

后疫情时代,刚褪去口罩。又迎来经济消费降级,我的客户同...

热门文章

C#程序员整理的Unity 3D笔记(六):Git源码管理

对程序员而言,写的代码用源码管理系统管理起来,非常方便...

骑行故事初心--自由的御风而行

2023年,三年疫情过后第一个春天,我开始了骑行: 空...

且行且思:记录一次西安城墙国际马拉松---8公里

百度搜索,输入西安城墙马拉松,有7万2千个结果。 实际...

Unity3D for VR 学习(7): 360&deg;全景照片

    在VR应用中,有一个相对简单的虚拟现实体验,那...

相关【技术杂谈】文章

查看所有相关【技术杂谈】文章
搭建Squid3 密码账号IP代理

上文中,说明了 Squid3 IP Proxy 隐藏原IP,这里就搭建Squid 3密码账号IP代理进行整理,涉及...

不用插件,js脚本显示星号密码

不用插件,js脚本显示星号密码

以前,我是用Chrome插件做这个这的--显示星号密码的。 今天,分享一个不用插件...

执行MySQL报错

今天新采购了柒比贰WordPress主题,安装主题时候报错: MySQL命令行使用sql语句进行建表时,MySQL...