Apple Vision Pro の WebXR対応について

2024年秋頃に正式にリリースされる visionOS 2 は現在、ベータ版)としてリリースされます。visionOS 2から WebXRは誰でも利用可能になります。

visionOS 1.x ではWebXRの利用可能にする設定を行う必要がありました。

visionOS 2.0 ではWebXRの利用可能にする設定はデフォルトでONになってます。今回、Apple Vision ProのWebXR開発ポイントについて紹介します。

Apple Vision Pro (visionOS2) におけるWebXRのユーザー保護について

通常のWebXRによるユーザー保護だけでなく、visionOS特有のジェスチャー操作についてやDigital Crownで、いつでも離脱可能など、開発までに知っておくべき事があります。詳細は以下の記事をご覧ください。

Apple Vision Pro（visionOS 2）におけるWebXRの開発フレームワークの紹介とWebXRのライフサイクルについて

Apple Vision Pro の WebXR開発を可能にするフレームワークが存在します。また、visionOSのWebXRによるNatural Inputのライフサイクルを理解する前にWebXRのライフサイクルを事前にキャッチアップしておくことも重要になってきます。こちらについての詳細は以下の記事をご覧ください。

Apple Vision Pro（visionOS2）WebXRのNatural Inputとハンドトラッキングについて

Apple Vision Pro はコントローラーが存在しない、Natural Inputによる操作形態であるのが特徴です。WebXRにおいてもNatural Inputによる操作になります。また、ハンドトラッキングもサポートしてます。Natural Inputとハンドトラッキングを併用して使用することも可能です。こちらについての詳細は以下の記事をご覧ください。

Apple Vision Pro（visionOS2）におけるWebXRのテスト方法

Mac の Safariに搭載しているWeb Inspectorを使って、Apple Vision ProによるWebXRのデバッグやテストを実施することができます。visionOSシミュレーターでもテストが可能です。こちらについての詳細は以下の記事をご覧ください。

Apple Vision Pro (visionOS2) の Safari と A-Frame を使ったシンプルな WebXR アプリの作成

A-Fremeを使用したApple Vision Pro (visionOS2)のWebXRのサンプルコードです。こちらを実行できるサイトも公開しています。

visionos2-webxr-helloworld.html

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Apple Vision Pro (visionOS2) Hello World</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
    <a-scene cursor="rayOrigin:xrselect;" raycaster="objects: [mixin=mouseover]">
        <a-mixin id="mouseover" 
            animation__c1="property:color; to:#ff44ff; type:color; startEvents:mouseenter; dur:300;"
            animation__c2="property:color; type:color; startEvents:mouseleave; dur:400;"
            animation__click="property:object3D.position.y; to:2; startEvents:click; dur:1000;">
        </a-mixin>

        <a-box 
            position="-2 1.25 -3.5" 
            rotation="0 45 0" 
            color="#4CC3D9"
            shadow
            mixin="mouseover"
            animation__c1="from:#4CC3D9" 
            animation__c2="to:#4CC3D9">
        </a-box>
        
        <a-sphere 
            position="0 1.25 -4" 
            radius="1.0" 
            color="#FF0000"
            shadow
            mixin="mouseover"
            animation__c1="from:#FF0000" 
            animation__c2="to:#FF0000">
        </a-sphere>

        <a-cylinder 
            position="1.5 1.25 -2" 
            radius="0.5" 
            height="1.5" 
            color="#FFC65D"
            shadow
            mixin="mouseover"
            animation__c1="from:#FFC65D" 
            animation__c2="to:#FFC65D">
        </a-cylinder>
            
        <a-plane position="0 -0.5 -5" rotation="-90 0 0" width="8" height="8" color="#7BC8A4" shadow></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>
</html>

詳細については以下をご覧ください。