谷歌VR展示360度全景图

一、先看下效果图

二、使用

这个是谷歌官方为移动平台下VR解决方案，有兴趣的可以看看

Google VR主页：https://developers.google.com/vr/
github地址：https://github.com/googlevr/gvr-android-sdk

1. 在 build.gradle 文件中添加库依赖：

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

2. 创建布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activitys.OpenGLActivity">

    <com.bj.bs.utils.GLPanorama
        android:id="@+id/mgl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

3. AndroidManifest中添加权限

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

4. Activity中初始化组件

private void initVrPaNormalView() {

        vr_myshow = (VrPanoramaView) findViewById(R.id.vr_myshow);
        paNormalOptions = new VrPanoramaView.Options();
        paNormalOptions.inputType = VrPanoramaView.Options.TYPE_STEREO_OVER_UNDER;
//      vr_myshow.setFullscreenButtonEnabled (false); // 隐藏全屏模式按钮
        vr_myshow.setInfoButtonEnabled(false); // 设置隐藏最左边信息的按钮
        vr_myshow.setStereoModeButtonEnabled(false); // 设置隐藏立体模型的按钮
        vr_myshow.setEventListener(new VrPanoramaEventListener() { // 设置监听

            @Override
            public void onLoadSuccess() { // 图片加载成功
            }

            @Override
            public void onLoadError(String errorMessage) { // 图片加载失败
            }

            @Override
            public void onClick() { // 当我们点击了VrPanoramaView 时候触发 super.onClick();
            }

            @Override
            public void onDisplayModeChanged(int newDisplayMode) { // 改变显示模式时候触发（全屏模式和纸板模式）
                super.onDisplayModeChanged(newDisplayMode);
            }
        });

        // 加载本地的图片源
        vr_myshow.loadImageFromBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.andes), paNormalOptions);

        // 设置网络图片源
        // vr_myshow.loadImageFromByteArray();
    }

好了，接下来点运行就可以了，是不是很简单呢。接下来大体说一下VR全景的原理。

二、原理简述

**1. VR内容制作 **
　全景拍摄的流程

• 第一步 摄制团队在实景进行视频或全景拍摄，输出全景视频或全景图。
• 第二步 设计师进行视频剪辑或全景图拼接，不管是拍摄或者建模，得到的图片是分离的，比如6张照片or 12张照片等，这些照片涵盖了一个场景中的所有内容。后期处理的就是使用全景合成软件，对这些分离的素材进行合成，使之成为一张360度的全景图片。
• 第三步 设计师制作交互动画及VR里的2d界面输出交互动画png序列，2d界面元素切图。
  

２. VR播放器的简单原理
　　首先我们需要了解全景图是什么东西，全景图是一种广角图。通过全景播放器可以让观看者身临其境地进入到全景图所记录的场景中去，通常标准的全景图是一张2：1的图像，其背后的实质就是等距圆柱投影。等距圆柱投影是一种将球体上的各个点投影到圆柱体的侧面上的一种投影方式，投影完之后再将它展开就是一张2：1的长方形的图像。比较常见的就是应用在地图上的投影。

关于全景图一篇文章介绍 在OpenGL ES中基本上所有的立体图像都是通过一个个的小三角形拼接而成我们知道球面上面的每一个点（P(x,y,z)）都会满足方程组（球的极坐标方程）： x = r sin(a) cos(b) y = r cos(a) z = r sin(a)*sin(b) 其中 r为球的半径,a为线段 OP与 z轴正方向所夹角，b为 OP在xoy平面的投影 OP‘ 与x的正方向所夹角 tim_shadow大佬的示意图 我们可以根据这个方程组，通过控制∠a和∠b的变化，从上到下，逆时针的取得我们需要用来组合称三角形的点，然后我们需要将全景图片上的点与我们在球上面选取的点一一对应起来（注意：球的坐标是3维坐标，图片的坐标是2维坐标） 球上面的点与图片上面的点一一对应起来。

三、源码

里面还包含了一个webview实现VR全景的demo
http://download.csdn.net/download/u010302765/10164674