1年間WebXRに触れてみて
この記事は WebXR Advent Calendar 2025 の12日目の記事です。
はじめに
普段はReactをメインに扱っている、バックエンド1年・フロントエンド3年目のエンジニアです。
この記事では、私がWebXRの世界に飛び込んで実際に作ったものと、そこから見えた課題と可能性、便利なサイトやアカウントについて紹介します。
WebXRに出会ったきっかけ
自分用のモバイルアプリをReact Nativeで作って遊んでいた延長で以下の投稿に出会い、3Dの世界にワクワクしてThree.jsやReact Three Fiberを学習するようになりました。
そんな中、昨年末に以下の動画でWebXRに出会いました。
今まで学習した知識が最先端技術に活かせるワクワク感で胸がいっぱいになり、その日のうちにMeta Quest3を購入しました。
作ったもの
WebXRの手軽さとできる事の多さに触れてほしいと考え、Githubにjsのみで動くサンプルリポジトリなど複数公開しています。
また、今年の9月にはLODGE XR Talkにて個人開発したMRアプリを展示しました。
WebXRの強みや活かし方について考え実践する良い機会となりました。
現在は私が作曲した曲をARで聞けるラジカセアプリを楽しく開発中です。(Safari対応が難しい…)
発信は得意ではないのですが、こうしたアウトプットを通じて微力ながらコミュニティを盛り上げていきたいと考えています。
WebXRの課題と妄想
課題
WebXRへの追い風は確実に吹いていると感じています。
特に、Three.jsアプリの精度の高さで度々バズっているGemini 3や各種コーディング支援ツールの登場により、開発のハードルは劇的に下がりました。
一方で、普及に向けては以下の2点が大きな課題だと感じています。
-
マネタイズ：企業のプロモーション利用などはあるものの、アプリ単体での収益化モデルが確立されていない点
-
アクセス性：デバイスを装着した状態でブラウザを開き、サイトにアクセスしてセッションを開始するという導線は、ユーザーにとって手間と感じる点
妄想
マネタイズについては、XR空間のセッション内で表示できる広告モデルが登場することで、Webのエコシステムがそのまま適用できるようになるのではと期待しています。
そして、私がWebXRが盛り上がるために必要だと勝手に期待しているのが、「React NativeのXR版」のようなフレームワークの登場です。
WebGPUが正式にサポートされたことで、今やブラウザ上でもネイティブ並みの高レベルな描画が可能になりました。
そこで、もしReactのコードベース1つでQuestやVision Pro、AIグラス向けの「ネイティブアプリ」と「Webアプリ」を同時に出力できるようになったらどうでしょう。
ネイティブアプリとしてストアに並べられればマネタイズの道が開けますし、ホーム画面からアイコン1つで起動できるためアクセス性の課題も解消されます。
そんな未来がくれば、この界隈はもっと面白くなると妄想(期待)しています。
まとめ
「これは飛び込むしかない！」と始めたWebXRですが、コミュニティやXでの投稿、関連ニュースどれも追っていて楽しかったです。
また、年間を通して沢山のイベントに参加でき、見たことのない体験や多くの方とお話できたりアピールができて刺激的でした。
これからもWebXRを追いつつ、自分がワクワクする領域に容赦なく飛び込んでいきたいと思います。
ここまで読んでいただきありがとうございました。
最後に、私が使用している便利なサイトや、インスピレーションを受けている海外のアカウントをまとめました。
興味がある方はぜひチェックしてみてください。
Debug
・iwe：WebXRをブラウザで手軽にエミュレートできる開発者向け拡張機能
・iwer：WebXRの挙動を検証できるブラウザベースのエミュレーション環境
・troika three text：Three.jsでテキスト描画を実現できるライブラリ
3D Assets/Tools
・Womp：ブラウザ上で粘土遊びのように直感的に3Dモデリングができるツール
・Mixamo：自動リギング/アニメーションツール
・Mesh2Motion：より柔軟な自動リギング/アニメーションツール
・Anything World：AIで3Dモデルやアニメーションを生成できるサービス
・Sketchfab：3Dモデルを閲覧/配布/購入できるプラットフォーム
・Ready Player Me：カスタムアバターを簡単に生成できるサービス
・Kenney：高品質アセットを豊富に提供する素材サイト
Study
・Three.js Journey：Three.jsを体系的に深く学べる有名コース
・R3F Ultimate Guide：React Three Fiberを網羅的に学べるコース
X
・Xavier (Jack)
・Morten Haulik ᯅ
・Oleg Frolov
・Scott Petrovic
・Thomas van den Berge
・mrdoob
・TonyVT SkarredGhost
・XR# —WebXR with .NET, C# & XAML
・dmvrg
・Kat ⊷ the Poet Engineer
・BrilliantSole
・Phil Traut ᯅ
・Kevin
・Wawa sensei
Discussion