利用Google VR教你打造全景图片展示
2017-09-08 09:13
666 查看
本文章主要参考Google VR中的文档,如果您能流利的读懂英文开发文档,可以去官网自行查看。
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)。
先来看看效果:
2.使用
B.读取图片
我们提前将一张选择好的全景图放在assets目录中,aa.jpg,将图片转为bitmap
C.设置VrPanoramaView.Options
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.加载全景图
E.设置加载监听VrPanoramaEventListener
F.在onPause、onResume、onDestroy中做出相应处理
G.一些其他方法
//是否隐藏左下角信息的按钮
vrPanView.setInfoButtonEnabled(boolean enabled);
//是否隐藏全屏按钮
vrPanView.setFullscreenButtonEnabled(boolean enabled);
未完,如果遇到新的继续添加
本文作者: shijiacheng
本文链接: http://shijiacheng.studio/2017/06/30/first-RecyclerView/
版权声明: 本博客所有文章除特别声明外,均为原创文章。请尊重劳动成果,转载注明出处!
转载请注明:转自http://shijiacheng.studio
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立体图像 |
---|---|
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
相关文章推荐
- Google VR全景图片与视频功能开发详解
- 全景拍摄,全景视频拍摄,全景VR拍摄,VR全景拍摄,360全景图片拍摄
- 全景智慧城市-打造国内VR全景商业平台,720全景逛街
- windows平台VR全景播放器,支持图片视频,rtsp,rtmp,http,udp,hls等网络格式
- vr全景智慧城市,VR全景展示的具体应用
- canvas 利用getImageData与putImageData将一个canvas 内的图片展示在另一个canvas里
- googlevr for unity 快速制作全景视频播放器
- 谷歌VR展示360度全景图
- 小赢科技参展金博会 VR全景展示金融科技
- VR全景智慧城市-打造顶尖三维全景VR样板间
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动 - 郭晓
- 手机商城第四天,利用GridView和viewpager实现频道按钮和热门活动图片的展示
- Vr技术VR全景展示-全景智慧城市
- VR全景智慧城市-3D全景制作。VR全景展示加盟代理
- OpenGL ES_手把手教你打造VR全景播放器
- UITableViewCell添加UICollectionView,能够左右滚动用于展示不同图片。利用UICollectionView的优点,从而性能上有很大优化
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- JavaScript实现360度全景图片展示效果
- 【Android开发VR实战】一.给用户呈现一个360°全景图片
- 【精心挑选】推荐几款非常棒的 jQuery 全景图片展示插件