この WebXR コンテンツがすごい “Shopify Live Globe 2024”
whoami
@ikkou a.k.a HEAVEN chan です。長らく WebXR 周辺の動向を追いながら発信を続けています。例年 1 日目は『現状確認』エントリを投下していますが、12 月中に何かしらのアップデートが入る可能性があることも考慮して、今年の『現状確認』エントリは最終日 Day 25 に回します。
この WebXR コンテンツがすごい “Shopify Live Globe 2024”
何も買わないのがもっともお得に過ごせると言われることもあるブラックフライデーですが、eコマースプラットフォームの Shopify は 2018 年から期間中のさまざまなデータを可視化する特設サイトを公開しています。今年もご多分に漏れず 2024 年バージョンが公開されました。
10 秒足らずの YouTube 動画を見るだけでも、3D でインタラクティブなウェブサイトに仕上がっていることがわかると思います。
このウェブサイトについて 2024-11-29 付けの Latest from Shopify で触れられています。
本文中には以下のように記載されています。
Virtual reality: Pop on a VR headset and truly immerse yourself in the Live Globe experience. Live Globe supports Apple Vision Pro and Quest 3/3S.
記載されている通り Shopify Live Globe 2024 は Apple Vision Pro と Meta Quest 3/3S に対応した WebXR コンテンツに仕上がっています。
まだ見ていない人は、まず一度この記事を読むのをやめ、手元にあるであろう Apple Vision Pro または Meta Quest 3/3S の電源を入れ、ブラウザを起動して https://bfcm.shopify.com/ にアクセスしましょう！
通常のデスクトップ / スマートフォンのブラウザでは表示されない ENTER VR のボタンが表示されているのでクリックしましょう。宇宙空間から地球を眺めているような状況なので、Full Immersive になるとはいえ、部屋の電気を暗くしておくとより雰囲気が出ます。
Meta Quest 3 の Browser でアクセスした状態
Full Immersive な VR モードでは WebXR Hand Input Module - Level 1 によりハンドトラッキングでさまざまなインタラクションを楽しめます。先の記事にも記載されていますが、左の方に 3 つ並んでいるトグルの内 Gravity を無効化すると、無重力状態になりさまざまなオブジェクトが浮遊します。
Meta Quest 3 の Browser でアクセスした状態 (VR Mode)
さらに右側にある Synthesizer パネルもそれだけで十分に遊べます！
そして実際に試している人がいますが、まさかの MIDI OUT 機能も備わっているので MIDI 機器をお持ちの方はぜひ試してみてください。
MIDI OUTPUT TOGGLE を ON にすると MIDI の接続許可が表示される
他にもさまざまな体験が待っていますが ネタバレ厳禁 なので探してみてください:)
Easter eggs: The more you play around in the cockpit, the more you’ll discover. No spoilers!
Apple Vision Pro をお持ちの方は Meta Quest 3/3S よりも高精細に見えますが、ハンドトラッキングの癖なのか、あくまで個人的な体感ではありますが 一部の操作は Meta Quest 3 方がやりやすかったように感じました。
Shopify Live Globe 2024 の技術的背景
Shopify の Principal AR / VR Engineer である @pushmatrix が X にポストしている内容によれば 3D 表現は定番の three.js をベースとして React っぽく three.js を扱う @react-three/fiber (R3F) で全体を構成している他、Synthesizer 機能には Web Audio フレームワークの Tone.js、そして本記事としてもっとも重要な WebXR 機能は前述した @react-three/fiber の XR ライブラリである @react-three/xr が用いられているようです。
もちろん JavaScript を中心とする Web フロントエンドの仕込みだけではなく、3D モデルをはじめとする各種アセットの完成度の高さや、ケーブルのうにょうにょした表現も最高で、そしてそれをわずか 7MB 且つ 120fps で動作させる Shopify チームの技術力はさすがです:)
Black Friday (BF) からCyber Monday (CM) 期間中にリアルタイムで動作するコンテンツ なので、WebXR 屋は見逃さないようにしてください！
明日の Day 2 は @wakufactory san の『SPATHAL SHELLとはなにか』です！現場からは以上です！
Discussion