利用Google VR教你打造全景图片展示

本文章主要参考Google VR中的文档,如果您能流利的读懂英文开发文档,可以去官网自行查看。

1.介绍VR View

VR view allows you to embed 360 degree VR media into websites on desktop and mobile, and native apps on Android and iOS. This technology is designed to enable developers of traditional apps to enhance the apps with immersive content.

VR视图允许你将360度的VR媒体嵌入桌面和移动的网站,以及Android和iOS上的原生应用。这项技术旨在使传统应用程序的开发者能够通过沉浸式的内容来增强应用程序。

VR view supports mono and stereo 360 images and videos. Images and video need to be stored in the equirectangular-panoramic (equirect-pano) format, which is a common format supported by many capture solutions.

VR视图支持mono和立体图像和视频。图像和视频需要存储在equi矩形-全景(equirect - pano)格式中,这是许多捕获解决方案支持的公共格式。

Image规格

  • VR查看图像可以保存为PNG,JPEG或GIF。Google建议使用JPEG改进压缩。
  • 为了获得最大的兼容性和性能,图像尺寸应该是2的倍数(例如,2048或4096)。
  • 单个图像应为2:1纵横比(例如4096×2048)。
  • 立体图像应为1:1纵横比(例如4096×4096)。
Mono单个图像 Stereo立体图像
vr-1.jpg
vr-2.jpg

先来看看效果:

项目运行效果图

2.使用VrPanoramaView嵌入全景图像

1.build.gradle

在app下的build.gradle中添加panowidget库

    dependencies {
        compile 'com.google.vr:sdk-panowidget:1.10.0'
    }

2.AndroiManifest.xml

在使用VrPanoramaView的Acitivity的intent-filter节点添加过滤分类:
com.google.intent.category.CARDBOARD : 兼容Cardboard纸盒

<activity android:name=".VrPanoramaActivity"  >  
        <intent-filter>  
            <category android:name="com.google.intent.category.CARDBOARD" />  
        </intent-filter>  
    </activity>  

3.布局文件

只需在布局中添加一个控件

 <com.google.vr.sdk.widgets.pano.VrPanoramaView
      android:id="@+id/pano_view"
      android:layout_margin="5dip"
      android:layout_width="match_parent"
      android:scrollbars="@null"
      android:layout_height="250dip" />

4.加载全景图

A.初始化控件

VrPanoramaView vrPanView = (VrPanoramaView) findViewById(R.id.vr_pan_view);

B.读取图片

我们提前将一张选择好的全景图放在assets目录中,aa.jpg,将图片转为bitmap

/**获取assets中的图片,转为流**/
InputStream open = null;
try {
    open = getAssets().open("aa.jpg");
} catch (IOException e) {
    e.printStackTrace();
}
Bitmap bitmap = BitmapFactory.decodeStream(open);

C.设置VrPanoramaView.Options

/**VrPanoramaView.Options 设置**/
VrPanoramaView.Options options = new VrPanoramaView.Options();
options.inputType = VrPanoramaView.Options.TYPE_MONO;

VrPanoramaView.Options有两种类型:

  • TYPE_MONO 360度单图(2:1纵横比)
    图像被预期以覆盖沿着其水平轴360度,而垂直范围是根据图像的宽高比来计算。例如,如果一个1000x250像素的图像,给出所述全景将覆盖360x90度与垂直范围是-45至+45度。

  • TYPE_STEREO_OVER_UNDER 立体图(1:1纵横比)
    包含两个大小相等的投影 全景图垂直叠加。顶部图像被显示给左眼、底部图像被显示给右眼。图像将覆盖沿水平轴360度,而垂直范围是根据图像的宽高比来计算。例如,如果一个1000x500像素的图像中给出(即1000x250像素每个眼睛),全景将覆盖360x90度与垂直范围是-45至+45度。

D.加载全景图

vrPanView.loadImageFromBitmap(bitmap, options);

E.设置加载监听VrPanoramaEventListener

/**设置加载图片监听**/
vrPanView.setEventListener(new VrPanoramaEventListener() {
    /**
    * 显示模式改变回调
    * 1.默认
    * 2.全屏模式
    * 3.VR观看模式,即横屏分屏模式
    */
    @Override
    public void onDisplayModeChanged(int newDisplayMode) {
        super.onDisplayModeChanged(newDisplayMode);
        Log.d(TAG, "onDisplayModeChanged()->newDisplayMode=" + newDisplayMode);
    }

    /**
    * 加载VR图片失败回调
    */
    @Override
    public void onLoadError(String errorMessage) {
        super.onLoadError(errorMessage);
        Log.d(TAG, "onLoadError()->errorMessage=" + errorMessage);
    }

    /**
    * 加载VR图片成功回调
    */
    @Override
    public void onLoadSuccess() {
        super.onLoadSuccess();
        Log.d(TAG, "onLoadSuccess->图片加载成功");
    }

    /**
    * 点击VR图片回调
    */
    @Override
    public void onClick() {
        super.onClick();
        Log.d(TAG, "onClick()");
    }
});

F.在onPause、onResume、onDestroy中做出相应处理

@Override
protected void onPause() {
    super.onPause();
    vrPanView.pauseRendering();//暂停3D渲染和跟踪
}

@Override
protected void onResume() {
    super.onResume();
    vrPanView.resumeRendering();//恢复3D渲染和跟踪
}

@Override
protected void onDestroy() {
    vrPanView.shutdown();//关闭渲染下并释放相关的内存
    super.onDestroy();
}

G.一些其他方法

//是否隐藏左下角信息的按钮
vrPanView.setInfoButtonEnabled(boolean enabled);

//是否隐藏全屏按钮
vrPanView.setFullscreenButtonEnabled(boolean enabled);

未完,如果遇到新的继续添加

最后附上完整代码:

VrPanoramaActivity.java

本文作者: shijiacheng
本文链接: http://shijiacheng.studio/2017/06/30/first-RecyclerView/
版权声明: 本博客所有文章除特别声明外,均为原创文章。请尊重劳动成果,转载注明出处!
转载请注明:转自http://shijiacheng.studio

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容

  • 一、背景简介 Welcome to VR at Google Daydream Cardboard 给我们提供了三...
    唠嗑008阅读 6,874评论 3 5
  • 世界对孩子是有趣的。 世界对大人是有用的。 对生活保持好奇心,热爱生活,生活才能热爱你。 我们也想像孩子那样,让世...
    鲤语_Lee阅读 152评论 0 0
  • 你焦虑吗? 每个人...
    朱欣欣1987阅读 178评论 0 4
  • 2004年读大学,那时大学已经普及,我所受的教育便不再是精英教育。而我个人也一直觉得一个人要有点情趣,陶冶自...
    紫燕风前舞阅读 252评论 0 0
  • 夜如此之静,以至于风滑过的痕迹都飘于耳际; 夜如此之寒,以至于总喜欢高调舞蹈的蚊子,不知去了何方; 深夜的一抹清凉...
    文戈乎乎阅读 128评论 0 0