VR全景視圖 Google VrPanoramaView

時間 2019-11-07

標籤全景視圖 google vrpanoramaview 欄目 Google 简体版

原文原文鏈接

1、背景簡介

Welcome to VR at Googleandroid

進入Google VR主頁，發現官方給咱們提供了兩套解決觀看VR視頻的方式：ios

Daydreamgit
Cardboardgithub

給咱們提供了三個平臺的API，分別是：Unity 3D 、Android、IOS；面試

下面看一下官方給這兩種方式的描述（
Daydream小程序

Daydream is a platform for high quality, mobile virtual reality.api

白日夢是高質量，移動虛擬現實的平臺。在主頁上方官方也描述它爲：低延遲，身臨其境的，互動的移動VR的新平臺性能優化

Cardboard網絡

Cardboard lets you experience virtual reality in a simple, fun, and affordable way.架構

紙板可讓你在負擔得起的狀況下，體驗一個簡單,有趣的虛擬現實。在主頁上方官方也描述它爲：是世界上最流行的和方便的移動VR平臺(多是經濟成本低吧）

2014年：Google在當年的Google I/O大會上宣佈，其將開發紙盒版的HMD（頭盔式顯示器），年末該設備銷量達到了50萬。
2015年：Cardboard被大公司所接受，Google將那些刻上了品牌商標的Cardboard分發給了各大合做商，消費者繼續購買主題化的HMD。此時，Cardboard的發展又到了另外一個高度：銷量達到100萬。
2016年：在今年的Google I/O大會上，Google宣佈Cardboard銷量已達到500萬部，但與此同時，Google推出了Daydream——一個更高級的移動VR HMD，並將於今年11月進入市場。現在市場上已經產生了成千上萬的Cardboard應用，Google Play store上的Cardboard app安裝量達到50萬至100萬次。

Daydream is a much higher end VR experience. I have Cardboard, and it's neat, but in some ways, it feels like a tech demo. （白日夢是一個更高的終端虛擬現實體驗。紙板,它很簡潔,但在某些方面,感受技術演示。）
那麼就此看來，應該是這樣的狀況：Cardboard是Google先推出的簡陋版/測試版/經濟適用版，如今佔用了很大市場；Daydream 是今年新推出的豪華版/完善版/高端玩家版，會衝擊Cardboard的市場。也就是說Cardboard短時間不會死，Daydream還在發展中。

介紹

官方在這裏介紹了VR view 、支持平臺等。我挑幾個相對重要的介紹一下：

一、圖像規格
VR查看圖像能夠保存爲PNG，JPEG或GIF。Google建議使用JPEG改進壓縮。爲了得到最大的兼容性和性能，圖像尺寸應該是2的倍數（例如，2048或4096）。單個圖像應爲2：1縱橫比（例如4096×2048）。立體圖像應爲1：1縱橫比（例如4096×4096）。

如圖：

案列

首先下載Demo，
https://github.com/googlevr/gvr-android-sdk

項目(gvr-android-sdk )中有幾個主要目錄能夠留意一下：

libraries
ndk-beta
samples
samples目錄中有四個Demo，分別是：
SDK-controllerclient（Daydream的控制端）
SDK-simplepanowidget（全景圖）
SDK-simplevideowidget（全景視頻也就是VR視頻）
SDK-treasurehunt（尋寶項目）

注意：運行環境必須是api19以上的手機，也就是Android4.4及以上

VrPanoramaView（VR全景視圖）的實現

一、添加依賴

compile 'com.google.vr:sdk-panowidget:1.40.0'

二、權限

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

三、佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.zx.vrview.MainActivity">

    <com.google.vr.sdk.widgets.pano.VrPanoramaView
        android:id="@+id/vrPanoramaView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scrollbars="none"/>


</LinearLayout>

四、activity

/**
 * VR全景視圖（圖片查看器）
 */
public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";
    private VrPanoramaView paNormalView;
    private VrPanoramaView.Options paNormalOptions;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initVrPaNormalView();
    }

    @Override
    protected void onPause() {
        super.onPause();
        paNormalView.pauseRendering();
    }

    @Override
    protected void onResume() {
        super.onResume();
        paNormalView.resumeRendering();
    }

    @Override
    protected void onDestroy() {
        // Destroy the widget and free memory.
        super.onDestroy();
        paNormalView.shutdown();
    }


    //初始化VR圖片
    private void initVrPaNormalView() {
        paNormalView = (VrPanoramaView) findViewById(R.id.vrPanoramaView);
        paNormalOptions = new VrPanoramaView.Options();
        paNormalOptions.inputType = VrPanoramaView.Options.TYPE_STEREO_OVER_UNDER;
//        paNormalView.setFullscreenButtonEnabled (false); //隱藏全屏模式按鈕
        paNormalView.setInfoButtonEnabled(false); //設置隱藏最左邊信息的按鈕
        paNormalView.setStereoModeButtonEnabled(false); //設置隱藏立體模型的按鈕
        paNormalView.setEventListener(new ActivityEventListener()); //設置監聽
        //加載本地的圖片源
        paNormalView.loadImageFromBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.andes), paNormalOptions);
        //設置網絡圖片源
//        panoWidgetView.loadImageFromByteArray();
    }

    private class ActivityEventListener extends VrPanoramaEventListener {
        @Override
        public void onLoadSuccess() {//圖片加載成功
            Log.i(TAG, "onLoadSuccess------------>");
        }


        @Override
        public void onLoadError(String errorMessage) {//圖片加載失敗
            Log.i(TAG, "Error loading pano:------------> " + errorMessage);
        }

        @Override
        public void onClick() {//當咱們點擊了VrPanoramaView 時候出發
            super.onClick();
            Log.i(TAG, "onClick------------>");
        }

        @Override
        public void onDisplayModeChanged(int newDisplayMode) {
            //改變顯示模式時候出發（全屏模式和紙板模式）
            super.onDisplayModeChanged(newDisplayMode);
            Log.i(TAG, "onDisplayModeChanged------------>" + newDisplayMode);
        }
    }
}

代碼分析

這個栗子中須要注意幾個知識點：

VrPanoramaView //Google提供給咱們現實全景圖片的View
 Options //VrPanoramaView 所需的設置
 VrPanoramaEventListener//爲 VrPanoramaView 設置監聽
 loadImageFromBitmap//加載圖片的主要方法

Options

接下來看看剛剛的VrPanoramaView.Options吧，上文中是這麼設置的

panoOptions.inputType = Options.TYPE_STEREO_OVER_UNDER;

那麼爲何要這樣設置呢？先看官方對Options中標籤的介紹：

public static final int TYPE_MONO = 1;
圖像被預期以覆蓋沿着其水平軸360度，而垂直範圍是根據圖像的寬高比來計算。例如，若是一個1000x250像素的圖像，給出所述全景將覆蓋360x90度與垂直範圍是-45至+45度。
public static final int TYPE_STEREO_OVER_UNDER = 2;
包含兩個大小相等的投影全景圖垂直疊加。頂部圖像被顯示給左眼、底部圖像被顯示給右眼。//看下圖你就懂了

圖像將覆蓋沿水平軸360度，而垂直範圍是根據圖像的寬高比來計算。例如，若是一個1000x500像素的圖像中

這裏寫圖片描述

我要顯示的圖片是下圖這樣的，因此就要設置爲 'TYPE_STEREO_OVER_UNDER'

這裏寫圖片描述

那麼什麼樣的圖片設置爲 'TYPE_MONO' 呢？請看：

這裏寫圖片描述

不知道有沒有眼神好的同窗發現這個問題：TYPE_STEREO_OVER_UNDER類型的圖片每次切換模式時候圖片中間都會有一條垂直於水平線的分割線（很淺很淺而後逐漸消失），