【Android】Google VR SDKを使った360°写真表示機能の作り方

概要

Androidで360°写真（またはパノラマ写真）を表示させるためのサンプルや、日本語の解説が少なかったため、備忘録としてサンプルを作成してみました。

【完成サンプルコード】
GitHub - Android VrViewSample

開発準備

新規プロジェクトを作成

新しくプロジェクトを作成する。
Activityは特に指定がなければEmptyActivityを選択。

Google VR SDK をプロジェクトに追加

Android Studioのターミナルから以下のコマンドで追加

AndroidStudio/terminal

$ git clone https://github.com/googlevr/gvr-android-sdk.git

【上記の方法がうまくいかない場合】
こちらよりGoogle VR SDKをダウンロードし、解凍する
解答したフォルダ（gvr-android-sdk）をプロジェクトの直下に追加する

開発

setting.gradleに追記

setting.gradle

include ':app'
include ':gvr-android-sdk/libraries:audio'
include ':gvr-android-sdk/libraries:base'
include ':gvr-android-sdk/libraries:common'
include ':gvr-android-sdk/libraries:commonwidget'
include ':gvr-android-sdk/libraries:panowidget'
include ':gvr-android-sdk/libraries:videowidget'

上記を追加したらSync Nowをする

もし、Unregistered VCS root detectedというメッセージが出てきたら、ignoreを選択する

app/build.gradleに追記

dependenciesに以下を追加する

app/build.gradle

compile project(':gvr-android-sdk/libraries:common')
compile project(':gvr-android-sdk/libraries:commonwidget')
compile project(':gvr-android-sdk/libraries:panowidget')

入力したら、SyncNowをする

※minSdkVersionが19以上になっていないと、エラーが出るので注意

xmlにVrPanoramaViewを追加

表示したいレイアウトにVrPanoramaViewを追加する

activity_main.xml

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

ImageLoaderTask.java を追加

ImageLoaderTask.java

public class ImageLoaderTask extends AsyncTask<AssetManager, Void, Bitmap> {
    private static final String TAG = "ImageLoaderTask";
    private final String assetName;
    private final WeakReference<VrPanoramaView> viewReference;
    private final VrPanoramaView.Options viewOptions;
    private static WeakReference<Bitmap> lastBitmap = new WeakReference<>(null);
    private static String lastName;

    @Override
    protected Bitmap doInBackground(AssetManager... params) {
        AssetManager assetManager = params[0];

        if (assetName.equals(lastName) && lastBitmap.get() != null) {
            return lastBitmap.get();
        }

        try(InputStream istr = assetManager.open(assetName)) {
            Bitmap b = BitmapFactory.decodeStream(istr);
            lastBitmap = new WeakReference<>(b);
            lastName = assetName;
            return b;
        } catch (IOException e) {
            Log.e(TAG, "Could not decode default bitmap: " + e);
            return null;
        }
    }

    @Override
    protected void onPostExecute(Bitmap bitmap) {
        final VrPanoramaView vw = viewReference.get();
        if (vw != null && bitmap != null) {
            vw.loadImageFromBitmap(bitmap, viewOptions);
        }
    }

    public ImageLoaderTask(VrPanoramaView view, VrPanoramaView.Options viewOptions, String assetName) {
        viewReference = new WeakReference<>(view);
        this.viewOptions = viewOptions;
        this.assetName = assetName;
    }
}

MainActivity.javaにメソッドを追加

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private VrPanoramaView panoWidgetView;
    private ImageLoaderTask backgroundImageLoaderTask;

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

        panoWidgetView = (VrPanoramaView) findViewById(R.id.vr_view);

        loadPanoImage();
    }
    
    @Override
    public void onPause() {
        panoWidgetView.pauseRendering();
        super.onPause();
    }

    @Override
    public void onResume() {
        panoWidgetView.resumeRendering();
        super.onResume();
    }

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

    private synchronized void loadPanoImage() {
        ImageLoaderTask task = backgroundImageLoaderTask;
        if (task != null && !task.isCancelled()) {
            // Cancel any task from a previous loading.
            task.cancel(true);
        }

        // pass in the name of the image to load from assets.
        VrPanoramaView.Options viewOptions = new VrPanoramaView.Options();
        viewOptions.inputType = VrPanoramaView.Options.TYPE_MONO;

        // use the name of the image in the assets/ directory.
        String panoImageName = "YOUR_PANORAMA_IMAGE_NAME.jpg";

        // create the task passing the widget view and call execute to start.
        task = new ImageLoaderTask(panoWidgetView, viewOptions, panoImageName);
        task.execute(getAssets());
        backgroundImageLoaderTask = task;
    }
}

assetsフォルダを app/src/main 配下に追加

このフォルダにパノラマ画像素材を追加する

パノラマ写真の表示設定について

パノラマ写真の設定には、

VrPanoramaView.Options.TYPE_MONO

VrPanoramaView.Options.TYPE_STEREO_OVER_UNDER

上記の2種類があります。
写真の設定が合っていないと…

このように表示されたりします（空の上に芝生が…）

上記は、TYPE_STEREO_OVER_UNDER用の写真なのに、TYPE_MONOで表示を設定している事が原因です

TYPE_MONOで表示がおかしい場合はTYPE_STEREO_OVER_UNDERに変えてみると上手く表示されるかもしれません

【TYPE_MONOの写真例】

【TYPE_STEREO_OVER_UNDERの写真例】

同じ写真が上下半分で分かれて表示されている感じ

参考サイト

GoogleCodelabs - Getting started widh VR View for Android

GoogleCodeLabs GitHub - vr_view_app_101