Android移動開發-VR全景照片簡單實作

VR技術的熱度每年都在增長，在購物、旅游等方面運用度很高，該專案參考了Google的vr:sdk-panowidget依賴庫，通過VrPanoramaView，簡單實作在手機上查看全景照片，下面是專案介紹，


build.gradle(Module:app)需要匯入依賴：

dependencies {
implementation ‘com.google.vr:sdk-panowidget:1.30.0’
}

布局檔案 activity_main.xml，呼叫Google的VrPanoramaView，在運行時支持觸摸水平滑動瀏覽全景，不支持垂直方向；實作自動呼叫手機陀螺儀傳感器，進行同步旋轉全景圖片，

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">
    <com.google.vr.sdk.widgets.pano.VrPanoramaView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/my_vr_view">
    </com.google.vr.sdk.widgets.pano.VrPanoramaView>
</RelativeLayout>

MainActivity檔案，在應用運行時，讀取assets檔案中的素材pic.jpg，呼叫makeimageToByte方法轉換格式，
Options是VrPanoramaView所需的設定，設定TYPE_MONO，影像被預期以覆寫沿著其水平軸360度，使圖片可以360水平旋轉，
若使用VR設備，可以設定TYPE_STEREO_OVER_UNDER，將圖片分割成重合度很高兩部分，分別對應左眼與右眼，

public class MainActivity extends AppCompatActivity {

    /**
     * vr控制元件
     */
    private VrPanoramaView vrpview;

    /**
     * byte格式
     */
    private Bitmap bitmap = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vrpview = (VrPanoramaView) findViewById(R.id.my_vr_view);

        VrPanoramaView.Options options = new VrPanoramaView.Options();
        options.inputType = VrPanoramaView.Options.TYPE_MONO;
        vrpview.setStereoModeButtonEnabled(false);//隱藏全屏模式
        vrpview.setInfoButtonEnabled(false);//隱藏資訊按鈕

        String uri = "pic.jpg";
        vrpview.loadImageFromByteArray(makeimageToByte(uri), options);

        vrpview.setEventListener(new VrPanoramaEventListener(){
            @SuppressLint("ShowToast")
            @Override
            public void onLoadSuccess() {
                //加載成功
                super.onLoadSuccess();
                Toast.makeText(MainActivity.this, "加載完成", Toast.LENGTH_SHORT).show();
            }

            @SuppressLint("ShowToast")
            @Override
            public void onLoadError(String errorMessage) {
                //加載失敗
                super.onLoadError(errorMessage);
                Toast.makeText(MainActivity.this, "加載失敗", Toast.LENGTH_SHORT).show();
            }

            @SuppressLint("ShowToast")
            @Override
            public void onClick() {
                //點擊事件
                super.onClick();
                Toast.makeText(MainActivity.this, "點擊了全景", Toast.LENGTH_SHORT).show();
            }

            @SuppressLint("ShowToast")
            @Override
            public void onDisplayModeChanged(int newDisplayMode) {
                //切換模式
                super.onDisplayModeChanged(newDisplayMode);
                Toast.makeText(MainActivity.this, "改變顯示模式", Toast.LENGTH_SHORT).show();
            }
        });

    }

makeimageToByte方法，通過getAssets()讀取assets檔案，

public byte[] makeimageToByte(String path){
        byte[] data = null;
        InputStream input = null;
        ByteArrayOutputStream output = null;
        try {
            input = getAssets().open(path);
            output = new ByteArrayOutputStream();
            byte[] buf = new byte[1024];
            int numBytesRead;
            while ((numBytesRead = input.read(buf)) != -1) {
                output.write(buf, 0, numBytesRead);
            }
            data = output.toByteArray();
        } catch (IOException ex1) {
            ex1.printStackTrace();
        } finally {
            try {
                if (input != null) {
                    input.close();
                }
                if (output != null) {
                    output.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return data;
    }

需要注意的是，assets檔案的目錄一定要與res和java同級，否則素材無法被讀取，軟體運行時沒有對應的圖片顯示，
查看方法：切換到Project->app->src->main

最后，復寫處理資源的方法，加載圖片與回收資源等

 /**
     * 渲染3D
     */
    @Override
    protected void onResume() {
        super.onResume();
        if (vrpview != null){
            vrpview.resumeRendering();
        }
    }
    /**
     * 暫停渲染
     */
    @Override
    protected void onPause() {
        super.onPause();
        if (vrpview != null){
            vrpview.pauseRendering();
        }
    }

    /**
     * 釋放資源
     */
    @Override
    protected void onDestroy() {

        vrpview.shutdown();
        if (bitmap != null && !bitmap.isRecycled()){
            bitmap.recycle();
            System.gc();
        }
        super.onDestroy();
    }

assets中放入素材：pic.jpg

運行效果：

水平觸摸滑動

陀螺儀傳感

作者 石文禧
原文鏈接
參考資料