Meet Safari for spatial computing

ハイライト

Safari は、visionOS 上の iPad/macOS と同じ WebKit エンジンを使用しており、Web サイトは変更せずに実行できます。中心的な変更は、入力モデル (目と手の融合) とインタラクティブ領域 (インタラクティブ領域) のビジュアル フィードバック システムにあり、AR クイック ルック、HTML もサポートしています。<model>Elements と WebXR は、Web ページに 3D コンテンツを表示する 3 つの方法です。

主要内容

既存の Web サイトはそのまま使用できます

visionOS 上の Safari は完全な WebKit エンジンです。すべての Web 標準ベースのサイトはすぐに使用でき、レスポンシブ デザインは iPhone の手のひらサイズから部屋全体に広がるサイズまで適応します。

既存のベスト プラクティスが引き続き適用されます。

• CSS ビューポート ユニットとメディア/コンテナ クエリを使用してウィンドウの変更に応答します
• ウィンドウが近づいても読みやすいように、最初に SVG が UI 要素に使用されます。
• ビットマップマッチングdevicePixelRatio正しい解像度での応答性の高い画像の読み込み

（01:02）

目と手の融合のための入力モデル

visionOS の主な操作方法は、目とピンチの組み合わせです。

• ユーザーが要素を見ると、Safari はその要素を自動的に強調表示します。
• ユーザーが指をつまんでクリックをトリガーします。
• ピンチが開始されると、目の位置が方向付けに使用されますpointerdownイベント
• 捏ねる過程で、pointermove手の動きを追跡する
• 指を離すと分配されますpointerup

指でウィンドウを直接タッチすることもできます。

• 指がウィンドウと交差すると送出されますpointerdown- 指の位置がイベントのターゲットを決定します
• 指がウィンドウから離れると送出されますpointerup

メディア クエリ レベルでは、この入力モデルは粗いポインターとして扱われ、タッチ スクリーンと同様にホバーをサポートしません。ただし、Bluetooth 接続のトラックパッドまたはキーボードも機能します。

（03:33）

インタラクティブな領域

閲覧中のハイライトは、Safari が自動的に生成する「インタラクティブ領域」によって行われます。 WebKit は、アクセシビリティ タグと CSS スタイルに基づいてインタラクティブな要素を自動的に識別します。

• ARIA 文字に対応するボタン、リンク、メニュー、要素が自動的に強調表示されます。
• 入力ボックスとフォーム要素も自動的に強調表示されます
• カスタムのインタラクティブ要素を設定する必要がありますcursor: pointer- CSS を利用した強調表示された形状border-radiusコントロール

内部サブ要素を個別に強調表示する必要がない場合は、それらを設定できます。pointer-events: noneこれにより、強調表示効果が簡素化されるだけでなく、イベント処理の目標も統一されます。

（05:09）

アニメーションのパフォーマンスの最適化

visionOS 上のアニメーションは、デバイスでサポートされている最高のフレーム レートで実行されます。これは、iPad で可能なものよりも高速です。アニメーションがフレームごとの固定増分に基づいている場合、高フレーム レートのデバイスでは加速が速すぎます。

正しいアプローチは次のとおりですrequestAnimationFrameコールバックで、各フレーム間の時間差を測定し、その時間差を使用してアニメーションの進行状況を計算します。

let lastTime = 0;

function animate(currentTime) {
    const deltaTime = currentTime - lastTime;
    lastTime = currentTime;
    
    // 用 deltaTime 计算进度，而不是固定增量
    const progress = deltaTime * speed;
    element.style.transform = `translateX(${currentX + progress}px)`;
    
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

キーポイント:

• currentTimeはいrequestAnimationFrameコールバックで渡される高精度のタイムスタンプ -deltaTime2 つのフレーム間で経過した実際のミリ秒数を表します。
• アニメーションの進行状況deltaTime異なるフレームレートのデバイスでも一貫した速度を確保するための比例
• スクロールイベントリスナーが使用する必要があります{ passive: true }、スクロールのブロックを避けるため

（10:56）

全画面動作の違い

visionOS で全画面表示になると、ウィンドウはデフォルトのサイズに調整され、このサイズはウィンドウとしても使用されます。screenオブジェクトの寸法は JavaScript に報告されます。これにより期待が保証されますwindowそしてscreenサイズが一致するサイトは引き続き機能します。

ただし、visionOS ではユーザーが全画面ウィンドウのサイズを変更でき、おそらく報告されているサイズを超えてサイズ変更することもできます。screenサイズ。 Web サイトでは、全画面表示時にウィンドウ サイズが固定されると想定すべきではありません。

（10:05）

詳細

Web ページに 3D コンテンツを埋め込む

Session では、Web ページに 3D コンテンツを表示する 3 つの方法を紹介します。

AR Quick Look: iOS 12 で導入された AR Quick Look と同じですが、アンカー リンクは USDZ ファイルを指します。

<a rel="ar" href="model.usdz">
    <img src="preview.jpg" alt="3D Model Preview">
</a>

visionOS では、クリックすると、RealityKit の高度なライティングとレンダリングを利用して、ユーザー空間に 3D オブジェクトが表示されます。

（12:13）

HTML <model>要素: 「3D オブジェクトの img タグ」と同等の W3C 標準案:

<model src="model.usdz" interactive></model>

• src3Dオブジェクトのソースファイルを指定します -interactiveプロパティによりユーザー対話が可能になります
• JavaScript API はカメラ制御、アニメーション再生、その他の機能を提供します
• Safari の機能フラグによって有効化

この要素は、通常の 2D ビューから立体ビューや周囲照明まで、さまざまなデバイス上で最適なレンダリングを提供します。

（13:27）

WebXR: 完全に没入型の Web シーンを構築するための W3C 標準:

// 请求沉浸式 WebXR 会话
const session = await navigator.xr.requestSession('immersive-vr');

• WebGL に基づいており、多くの人気のある WebGL ライブラリにはサポートが組み込まれています -visionOS Safariの詳細設定で機能フラグを有効にします。
• ユーザーはマウスでドラッグするのではなく、実際にシーンに「入る」ことになります。

（14:25）

デバッグインタラクティブ領域

xrOS エミュレータの場合:

• マウスの動きで視線位置をシミュレート
• クリックしてピンチジェスチャーをシミュレートします
• インタラクティブな領域は Web Inspector で検査できます

よくある質問と修正:

1. ボタンが強調表示されていない: グローバル設定が有効かどうかを確認します。cursorスタイルはデフォルトをオーバーライドしますcursor: pointer2. 強調表示された領域が間違っている: リンク内にテキストのみが含まれている可能性がありますが、ボタン自体はリンクの一部ではありません。道を譲るべきだ<a>ラベルがボタン全体を包みます
2. ハイライトの丸い角が一致しません: 同じ視覚スタイルをインタラクティブ要素に追加しますborder-radius4. 内部サブ要素は個別に強調表示されます: インタラクションを必要としないサブ要素に設定しますpointer-events: none

（07:12）

重要ポイント

1. 電子商取引 Web サイトに 3D 製品プレビューを追加します

対処法: 製品詳細ページで AR クイック ルックを使用するか、<model>この要素は製品の 3D モデルを表示します。

実行する価値がある理由:visionOS ユーザーは、自分の空間で製品を直接見ることができるため、平面的な写真よりも説得力があります。 AR Quick Look のコードは、iOS とvisionOS で完全に互換性があります。

開始方法: Reality Composer Pro または Object Capture を使用して USDZ ファイルを生成し、製品画像に追加します。<a rel="ar">リンク。すでに iOS AR Quick Look を備えている Web サイトには変更を加える必要はありません。

2. カスタム コンポーネントの対話型フィードバックを最適化する

対処方法: サイト内のすべてのカスタム インタラクティブ要素 (カード、リスト項目、カルーセルなど) を確認して、visionOS で正しい強調表示フィードバックが得られることを確認します。

価値がある理由:visionOS ユーザーは、視線ターゲットを確認するためにハイライトを利用しています。カスタムコンポーネントがそうでない場合cursor: pointer、ユーザーは正しい要素を見ているかどうかを確信できません。

開始方法: カスタム クリック イベント処理要素をグローバルに検索して追加します。cursor: pointer。内部の子要素が必要かどうかを確認するpointer-events: none。 xrOS シミュレータでそれぞれを確認します。

3. 没入型​​の WebXR エクスペリエンスを構築する

やるべきこと: WebXR と Three.js/Babylon.js を使用して、仮想ショールーム、没入型データの視覚化、3D ストーリーテリングなどの完全に没入型の 3D シーンを作成します。

価値がある理由:visionOS 上の WebXR により、ユーザーは実際に現場に入ることができます。これは、Web がこれまで経験したことのない次元のエクスペリエンスです。

開始方法: Three.js を使用して Safari で WebXR 機能フラグを有効にしますWebXRManager聞くimmersive-vrセッションでは、単純な 360 度のパノラマから反復されます。

4. フレームレートに依存しないアニメーション システム

やるべきこと: すべてをベースにして作成します。requestAnimationFrameProMotion ディスプレイおよびvisionOS 高フレーム レート デバイスで一貫した速度を確保するために、アニメーションが時間駆動に変更されました。

価値がある理由:visionOS のレンダリング パイプラインはより高いフレーム レートで実行される可能性があり、固定増分のアニメーションが高速化されます。時間駆動アニメーションは、どのフレーム レートでも一貫して動作します。

開始方法: すべてを横断するrequestAnimationFrameコールバック、固定増分を入れます (例:x += 2) に基づいて に変更されますdeltaTime計算（など）x += speed * deltaTime）。

関連セッション

• 最初のイマーシブ アプリを開発する — 初めてのイマーシブ アプリを開発し、visionOS アプリケーション開発の基本を理解します。
• USD エコシステムを探索する — USD エコシステムを探索し、3D モデルを作成および最適化する方法を学びます。
• CSS の新機能 — コンテナ クエリや新しいレイアウト機能などの新しい CSS 機能