アプリに空間オーディオ動画を追加する

Jetpack XR SDK は、ステレオスコピックのサイドバイサイド動画を平面に再生することをサポートしています。ステレオスコピック動画では、各フレームが左目用と右目用の画像で構成され、視聴者に奥行き感(立体視とも呼ばれます)を与えます。

他のフォーム ファクタでの Android 開発で使用される標準のメディア API を使用して、Android XR アプリで非ステレオスコピック 2D 動画をレンダリングできます。

Jetpack SceneCore を使用して並列動画を再生する

サイドバイサイド動画では、各ステレオスコピック フレームが、横に並んだ 2 つの画像として表示されます。上下の動画フレームが垂直方向に隣接して配置されます。

サイドバイサイド動画はコーデックではなく、ステレオスコピック フレームを整理する方法です。つまり、Android でサポートされているコーデックのいずれかでエンコードできます。

Media3 Exoplayer を使用して並列動画を読み込み、新しい SurfaceEntity を使用してレンダリングできます。SurfaceEntity を作成するには、次の例に示すように SurfaceEntity.create を呼び出します。

val stereoSurfaceEntity = SurfaceEntity.create(
    xrSession,
    SurfaceEntity.StereoMode.SIDE_BY_SIDE,
    Pose(Vector3(0.0f, 0.0f, -1.5f)),
    SurfaceEntity.CanvasShape.Quad(1.0f, 1.0f)
)
val videoUri = Uri.Builder()
    .scheme(ContentResolver.SCHEME_ANDROID_RESOURCE)
    .path("sbs_video.mp4")
    .build()
val mediaItem = MediaItem.fromUri(videoUri)

val exoPlayer = ExoPlayer.Builder(this).build()
exoPlayer.setVideoSurface(stereoSurfaceEntity.getSurface())
exoPlayer.setMediaItem(mediaItem)
exoPlayer.prepare()
exoPlayer.play()

Jetpack SceneCore を使用して MV-HEVC 動画を再生する

MV-HEVC コーデック標準は、立体視動画向けに最適化および設計されており、アプリで高品質の没入型動画を効率的に再生できます。MV-HEVC ファイルには、通常は左目であるプライマリ ストリームと、もう一方の目であるステレオ ストリームがあります。

サイドバイサイド動画と同様に、Media3 Exoplayer を使用して読み込み、SurfaceEntity を使用してレンダリングできます。SurfaceEntity.create を呼び出すときに、MV-HEVC ファイルのプライマリが左か右かを stereoMode パラメータで指定する必要があります。

// Create the SurfaceEntity with the StereoMode corresponding to the MV-HEVC content
val stereoSurfaceEntity = SurfaceEntity.create(
    xrSession,
    SurfaceEntity.StereoMode.MULTIVIEW_LEFT_PRIMARY,
    Pose(Vector3(0.0f, 0.0f, -1.5f)),
    SurfaceEntity.CanvasShape.Quad(1.0f, 1.0f)
)
val videoUri = Uri.Builder()
    .scheme(ContentResolver.SCHEME_ANDROID_RESOURCE)
    .path("mvhevc_video.mp4")
    .build()
val mediaItem = MediaItem.fromUri(videoUri)

val exoPlayer = ExoPlayer.Builder(this).build()
exoPlayer.setVideoSurface(stereoSurfaceEntity.getSurface())
exoPlayer.setMediaItem(mediaItem)
exoPlayer.prepare()
exoPlayer.play()

Jetpack SceneCore を使用して 180° 動画と 360° 動画を再生する

SurfaceEntity は、半球サーフェスでの 180° 動画の再生と、球体サーフェスでの 360° 動画の再生をサポートします。radius パラメータは、デフォルトでは、各サーフェスの半径サイズをメートル単位で表します。

次のコードは、180° 半球と 360° 球体で再生するために SurfaceEntity を設定する方法を示しています。これらのキャンバス シェイプを使用する場合は、ユーザーの頭のポーズを活用してサーフェスを配置し、没入感のあるエクスペリエンスを提供します。

// Set up the surface for playing a 180° video on a hemisphere.
val hemisphereStereoSurfaceEntity =
    SurfaceEntity.create(
        xrSession,
        SurfaceEntity.StereoMode.SIDE_BY_SIDE,
        xrSession.scene.spatialUser.head?.transformPoseTo(
            Pose.Identity,
            xrSession.scene.activitySpace
        )!!,
        SurfaceEntity.CanvasShape.Vr180Hemisphere(1.0f),
    )
// ... and use the surface for playing the media.

// Set up the surface for playing a 360° video on a sphere.
val sphereStereoSurfaceEntity =
    SurfaceEntity.create(
        xrSession,
        SurfaceEntity.StereoMode.TOP_BOTTOM,
        xrSession.scene.spatialUser.head?.transformPoseTo(
            Pose.Identity,
            xrSession.scene.activitySpace
        )!!,
        SurfaceEntity.CanvasShape.Vr360Sphere(1.0f),
    )
// ... and use the surface for playing the media.

高度な SurfaceEntity 制御

カスタム マテリアル エフェクトの適用など、動画や画像のレンダリングをより高度に制御するには、SceneCore ライブラリの SurfaceEntity を直接操作します。

以降のセクションでは、SurfaceEntity で使用できる高度な機能について説明します。

エッジのフェザー処理を適用する

edgeFeather プロパティを設定して、サーフェスのエッジを柔らかくし、環境に溶け込ませます。

// Create a SurfaceEntity.
val surfaceEntity = SurfaceEntity.create(
    session = xrSession,
    pose = Pose(Vector3(0.0f, 0.0f, -1.5f))
)

// Feather the edges of the surface.
surfaceEntity.edgeFeather =
    SurfaceEntity.EdgeFeatheringParams.SmoothFeather(0.1f, 0.1f)

アルファ マスクを適用する

アルファ マスクを適用して、長方形以外のサーフェスを作成したり、透明度効果を追加したりします。まず、アセットから Texture を読み込み、primaryAlphaMaskTexture プロパティに割り当てます。

// Create a SurfaceEntity.
val surfaceEntity = SurfaceEntity.create(
    session = xrSession,
    pose = Pose(Vector3(0.0f, 0.0f, -1.5f))
)

// Load the texture in a coroutine scope.
activity.lifecycleScope.launch {
    val alphaMaskTexture =
        Texture.create(
            xrSession,
            Paths.get("textures", "alpha_mask.png"),
            TextureSampler.create()
        )

    // Apply the alpha mask.
    surfaceEntity.primaryAlphaMaskTexture = alphaMaskTexture

    // To remove the mask, set the property to null.
    surfaceEntity.primaryAlphaMaskTexture = null
}

Jetpack Compose for XR を使用して空間動画を再生する

Jetpack Compose for XR を使用して動画を再生する方法について学習する場合は、画像または動画コンテンツのサーフェスを追加する方法をご覧ください。