Google ストリートビューを使ったアプリをVRゴーグルで見れるようにしたい

[上野順二]

ストリートビューの機能を使って世界旅行の疑似体験ができるアプリケーションを作ろうと思っています。

そのアプリはスマホで実行し、VRゴーグルで映像を見るような形にしたいと思っています。(※厳密に立体表示はできなくても構いません）

それで2眼VR風に「StreetViewPanoramaFragment」で風景を表示する窓を左右に配置したレイアウトを定義して表示しようと試みていますが1つの窓しか映像は表示できず、片方は黒い画像になります。

同じ要領で「SupportMapFragment」で地図を2つの窓に表示はできるのに何故か「StreetViewPanoramaFragment」でストリートビューの表示は１つしかできないのです。

ネットでAPIを調べる限り、「StreetViewPanoramaFragment」を1画面で複数使えないというような制限は見たことがないのですが、どなたかアドバイスいただけないでしょうか？

[Masashi.K]

StreetViewFragmentを表示する場合、viewを作成するときに画面に表示される範囲(viewport)内ないと黒くなります。

(私はこれはOpenGLのバグだと思ってます)

なのでViewの作成時に画面上で見える位置に2つ重ねて表示して、作成したら移動すればいいと思います。

--
このメールは Google グループのグループ「Google-Maps-API-Japan」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには google-maps-api-...@googlegroups.com にメールを送信してください。
このグループに投稿するには google-map...@googlegroups.com にメールを送信してください。
https://groups.google.com/group/google-maps-api-japan からこのグループにアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

[老プログラマ]

Masashi.K 様

回答有り難うございます。

お教え頂いた「Viewの作成時に画面上で見える位置に2つ重ねて表示」の方法が知識不足でわからず苦戦しております。

で、指摘された「画面に表示される範囲」を検証するために下記のレイアウト定義に示すように

　「マップビュー1」「ストリートビュー1」「ストリートビュー2」「マップビュー2」

と4つの窓を並べて表示させた場合、ストリートビュー2の所だけが正常に表示されず黒くなってしまいます。

ストリートビュー2の部分も「画面に表示される範囲(viewport)」に入っていると思っているのですが、何か勘違いしてますでしょうか？

それとも「画面に表示される範囲(viewport)」とは「ストリートビュー1」や「ストリートビュー2」の個々の窓の事を指していますでしょうか？

もしそうであれば下記のようなXMLのレイアウト定義で「重ねる」という事はどうすれば実現できますでしょうか？

また、「重ねた」２つのストリートビューを表示位置を動的に「ずらす」ってどうすれば良いでしょうか？

なにから何まで質問してしまいましたが、よろしくお願いいたします。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical"

tools:context=".VRActivity" >

    <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="wrap_content"

        android:orientation="horizontal">

        <fragment

            android:id="@+id/streetviewpanorama1"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:name="com.google.android.gms.maps.SupportMapFragment"/>

        <fragment

            android:id="@+id/streetviewpanorama2"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"/>

        <fragment

            android:id="@+id/streetviewpanorama3"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"/>

        <fragment

            android:id="@+id/streetviewpanorama4"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:name="com.google.android.gms.maps.SupportMapFragment"/>

    </LinearLayout>

</LinearLayout>

[Masashi.K]

FrameLayoutを使えば重ねられますよ

[老プログラマ]

Masashi.K 様

回答有り難うございます。

お教え頂いた「FrameLayout」でパノラマビューを重ねて表示後、片方のビューを移動して重なりをなくすようにしましたが

やはり片方（右眼用）でXMLのレイアウトの定義では後の方のfragmentは黒く表示されます。

下記に主要な部分のソースを示します。

１．レイアウトでは左・右眼用のビューを画面左上に重ねて表示するように定義

２．アクティビティのonCreateにて

　　①左右の眼用のビューを初期化する

　　②示右眼用のビューの表示位置を画面右端に移動する

結果は上記に書いたように、左眼用の窓には指定された場所の風景が表示されますが、

右眼用の窓は真っ黒のままでした。

こんな状況で次にどのような手を打つべきか手詰まりの状態です。

すみませんがまたアドバイスいただけないでしょうか？

【レイアウト】

----*----*----*----*----*----*----*----*----*----*----

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

tools:context=".VRActivity" >

    <fragment

        android:id="@+id/streetviewpanorama1"

        android:layout_width="400px"

        android:layout_height="400px"

        android:layout_gravity="left|top"

        android:layout_marginLeft="10px"

        android:layout_marginTop="10px"

        android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"/>

    <fragment

        android:id="@+id/streetviewpanorama2"

        android:layout_width="400px"

        android:layout_height="400px"

        android:layout_gravity="left|top"

        android:layout_marginLeft="10px"

        android:layout_marginTop="10px"

        android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"/>

</FrameLayout>

【処理ロジック】

----*----*----*----*----*----*----*----*----*----*----

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_vr);

:

:

        // パノラマビューの制御オブジェクトを生成

        mStreetViewControl = new StreetViewControl(this, "panorama1");

        // 左眼用の表示オブジェクトにパノラマビューを表示するように設定

        StreetViewPanoramaFragment streetViewPanoramaFragment1 = (StreetViewPanoramaFragment)getFragmentManager().findFragmentById(R.id.streetviewpanorama1);

        streetViewPanoramaFragment1.getStreetViewPanoramaAsync(mStreetViewControl);

        // 右眼用の表示オブジェクトにパノラマビューを表示するように設定

        StreetViewPanoramaFragment  streetViewPanoramaFragment2 = (StreetViewPanoramaFragment)getFragmentManager().findFragmentById(R.id.streetviewpanorama2);

        streetViewPanoramaFragment2.getStreetViewPanoramaAsync(mStreetViewControl);

        // パノラマビューの視点を指定された緯度・経度に設定

        mStreetViewControl.setLocation(mLatLng);

        // 画面左上に重なっている表示右眼用の表示オブジェクトを画面の右側に移動

        View view = (View)findViewById(R.id.streetviewpanorama2);

        FrameLayout layout = new FrameLayout(this);

        FrameLayout.LayoutParams layoutParams1 = new FrameLayout.LayoutParams(400, 400);

        layoutParams1.gravity = Gravity.RIGHT|Gravity.TOP;

        layoutParams1.topMargin = 10;

        layoutParams1.rightMargin = 10;

        view.setLayoutParams(layoutParams1);

    }

    public class StreetViewControl implements

        OnStreetViewPanoramaReadyCallback,

        StreetViewPanorama.OnStreetViewPanoramaChangeListener,

        StreetViewPanorama.OnStreetViewPanoramaCameraChangeListener,

        StreetViewPanorama.OnStreetViewPanoramaClickListener,

        StreetViewPanorama.OnStreetViewPanoramaLongClickListener{

：

：

StreetViewPanoramaオブジェクトのイベント処理や表示制御を処理

:

:

    }

[老プログラマ]

自己レスします

GoogleのストリートビューのAPIを解説するページを良く読み直してみたら

「注: Google Maps Android API では、1 つのアクティビティで複数の StreetViewPanoramaFragment オブジェクトはサポートされません。」

って書いてありました。そもそも無理なようです...、万事休す。

[Masashi.K]

ああ、Fragmentだとそうかも知れませんね。

私はStreetViewPanoramaViewを直接作ってしまっています。これだと複数表示できます。

https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/src/android/plugin/google/maps/PluginStreetViewPanorama.java#L141

ただし複数表示するとメモリを結構使うのか、クラッシュしやすくはなります

[老プログラマ]

Masashi.K 様

回答有り難うございます。

お教え頂いた「StreetViewPanoramaViewを直接作る」という手法をGoogleのサンプルコードをベースに作って確かめてみました。

結果、以下のような動作になりました。

①アプリの起動直後は画面の左側にはハワイのストリートの情景が表示されるものの、右側は映像は出ず真っ黒

②この状態で左側の表示された映像をタッチして指をスライドしてカメラビューの方向を変える操作をすると表示される映像も追随する

③スマホの画面を閉じるボタンで一旦、閉じて再度ボタンを押して画面表示すると画面の左右ともハワイのストリートの情景が表示されるが

　今度は左側の映像をタッチしても反応なしで、右側はタッチして指をスライドする操作に反応する

　

また、色々条件を変えて確かめてみると①のケースの右側や③のケースの左側のように表示されないか、表示されていても表示が凍り付いた

ような状態になっているといくらロジックでストリートビューのロケーション等を変えて表示画像を更新しようとしても反応がないということ。

上記の③のように何とか左右2画面にストリートビューを表示するところまでは実現しましたが実質は片方はまともに表示できていない状態です。

どこに問題があるかご指摘いただけませんか？

--- * --- (ソース抜粋) --- * --- --- * --- --- * --- --- * --- --- * --- 

public class MainActivity extends AppCompatActivity implements

        OnStreetViewPanoramaReadyCallback,

            :

private static final LatLng LatLng_HAWAII = new LatLng(21.2753757, -157.8249444);   

            :

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        StreetViewPanoramaOptions options = new StreetViewPanoramaOptions();

        if (savedInstanceState == null) {

            options.position(LatLng_HAWAII);

        }

        FrameLayout frameLayout = new FrameLayout(this);

        setContentView(frameLayout);

        mStreetViewPanoramaView = new StreetViewPanoramaView(this, options);

        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(620, 450, Gravity.LEFT);

        frameLayout.addView(mStreetViewPanoramaView, layoutParams);

        mStreetViewPanoramaView2 = new StreetViewPanoramaView(this, options);

        layoutParams = new FrameLayout.LayoutParams(620, 450, Gravity.RIGHT);

        frameLayout.addView(mStreetViewPanoramaView2, layoutParams);

        Bundle mStreetViewBundle = null;

        if (savedInstanceState != null) {

            mStreetViewBundle = savedInstanceState.getBundle(STREETVIEW_BUNDLE_KEY);

        }

        mStreetViewPanoramaView.onCreate(mStreetViewBundle);

        mStreetViewPanoramaView2.onCreate(mStreetViewBundle);

    }

            :

            :

            

[Masashi.K]

そう言われても抜粋されたコードだけ見ても何も指摘はできません。

同じ機種を持っているわけでもないので検証もできません。

[老プログラマ]

Masashi.K 様

そうですか、無茶な質問にお付き合い頂き申し訳ございません。

これ以降は自力で頑張ってみます。