メタバース(少なくともOculus Questブラウザーのための)のための2 Dウェブサイトを構築すること
9801 ワード
長年のウェブ開発者と非ゲームVRファンとして、私は本当にOculus Questのような仮想現実プラットホームの上でウェブの可能性に興奮しています.先週、私は2、3時間、一緒にいじって過ごしたmy 2D tetris clone Oculusクエストブラウザで実際にそれを私のヘッドセット上のプログレッシブWebアプリとしてインストールしました.私は、私がどのように働くためにこれを得たか、そして、私がプロセスで学んだものを示すために興奮しています.
Oculusクエストは本質的にAndroidデバイスです
Oculusクエストは、基本的にあなたの顔にストラップAndroidのスマートフォンです.クエストの開発を開始するには、Web上でも、あなたがダウンロードしたいと思っているAndroid Studio とAndroid SDK Platform Tools . あなたが使用されます
Oculusはいくつかのデスクトップソフトウェアを提供しますOculus Developer Hub これは、あなたの接続を検証するようなキー開発者のタスクの数を簡素化、保護者を無効にするキャストやスクリーンショットを取る.
それは間違いなく多くの手順ですが、すべてのこのセットアップを持っている後、あなたはよく2 DでWeb技術を使用してOculus VRアプリを構築する方法にしている.それはエキサイティングです!
VRで2 Dウェブをブラウズすること
ときに、通常のWebブラウザに比べてそれについてのユニークないくつかのことに気づくかもしれない初めてのOculusブラウザを開きます.最初の3つのブラウザのウィンドウ側の側で可能です.それで、あなたは幅の3000ピクセル以上を測定するブラウザ・ウインドウのこの180度の壁に直面しています.各ウィンドウのデフォルト幅oculus browser specs 5050 px高で1000 pxワイドでユニークです.そして今のところ、あなたはそれらをサイズ変更することができます、しかし、幅だけ.あなたはその奇妙な高さで立ち往生している.(編集:2021年12月13日)
いくつかのウェブサイトをプルアップしてください.それが私のようなインタラクティブであるならばtetris game それはかなり動作しない良いチャンスがある!
一方、標準的なニュースサイト、ブログ、あるいは何かのように最適化されたものをプルアップする場合React Three Fiber Demo App 彼らはすべて見て、偉大な仕事をする必要があります.
ローカルコードのデバッグ
あなたのローカルコンピュータ上であなたのアプリケーションを構築していると仮定すると、おそらく、Oculusのブラウザですぐにそれらの更新プログラムを参照してください.そのためには、お使いのコンピュータのOculusデバイスのポートからすべてのトラフィックをコンピュータに転送するリバースプロキシを設定する必要があります.
あなたのファイルをホストするためにCodesandboxまたはGlitchのような何かを使っているならば、それはあなたがURLに入ることができて、それをあなたのヘッドセットの上で自動的に開くことができるOculus Developer Hubのこの機能を使うのに本当に役立つことができます.
現在、心は部分を吹いています.あなたはGoogle Chromeの中からあなたのOculusブラウザウインドウを調べることができます.あなたは単に
をクリックして、デバイスのインスタンスに“検査”.それは本当に魔法のような感じです.
大抵中古
UXとWeb APIの問題
✅ 今、あなたは、Oculusブラウザで表示されるアプリを持っているし、あなたのローカルコンピュータ上でそのアプリを更新し、デバッグすることができます.ここでVRで実行するためのアプリケーションを最適化するためのいくつかの基本的なヒントがあります 使用するPointerEvents API ユーザー入力 ボタンとテキストを大きくする ワイドスクリーン用に最適化する 私の最初のテトリスの実装は、キーボードの入力に依存して物事を移動する.最初にそれを移植するとき、私はマウスイベントを使用し始めました
したら、適切にあなたの対話型の要素を大きくするようにあなたのユーザー入力を正しく動作させる.モバイルWebブラウジングとして10年前に、アップルとGoogleの両方を提供し始めたUI guidelines どのようにユーザーのデバイスとの対話.主なものの1つは、ユーザーがタッチすると予想されるボタン＆他のコントロールに多くのパディングを与えることでした.これは誰かの指をかなりのターゲットをあなたのアプリは、とにかく彼らは何を望んで与えることを確認していた.あなたのコントローラが一定の運動状態にあるVRで、これはさらに重要です.それらの入力を大きくして、我々がまだVRに持っているぼやけたテキストを与えて、同様にあなたのテキストを大きくしてください.
私の最後の実現は、Oculusブラウザで持っている画面の不動産を考慮することです.あなたは1000 px広いが、唯一の5050 px高を扱っている.それはかなり広いスクリーンです、しかし、それは本当に短いです.Oculusのブラウザでのスクロールはうまく動作しますが、私は個人的にスクロールすることなく、ワイドスクリーンの設計をお勧めします.確かにほとんどのゲームやインタラクティブなアプリの場合は、アクションのいくつかの重要な部分を参照してスクロールする必要はありません.あなたのアプリをストレッチできる方法について考えてください.多くのタブレットアプリは、風景モードでスペースを活用するように設計されており、私はどのようにVRのためにこれを行う方法を把握する自信がある.
もっと学ぶ
マイtetris clone まだVRのために完全に最適化されていないが、私は多くのボタンを大きくし、タッチイベントAPIを使用するように移動するように移動しながら、彼らが落ちている部分を移動することができます.私もそれを得たinstalled as a PWA だから私は自分のライブラリ内の他のアプリの横にそれを実行することができます.私の次のステップは、ポインタイベントAPIに移行し、その水平画面の不動産のすべてを最適化する方法を把握することです!
一度私は確かに私が飛び込むしたいいくつかのより多くの質問です.私は必要WebXR Gamepads API 様々なボタンをキャプチャし、Oculusタッチコントローラからトリガ入力?フォローアップ:nope、彼らはimmersive-vr モード3台のブラウザウィンドウにまたがる超ワイドゲームを作れますかpostMessage またはWeb Storage API ? そしてそれを超えて、VRのための2 Dウェブも追求する価値があるものでもありますか?どのようにハードそれは何かを使用するかa-frame or React Three Fiber with use cannon 完全に没入型3 Dの世界を作るには?People are doing it , では、なぜあなたと私は?
Web開発の世界でたった今熱心さを生み出している多くのテクノロジーがあります、しかし、私はVRのためにウェブアプリを構築することに関して眠りません!メタはすでに1000万クエスト2デバイスを販売しており、その成長は持続可能であるようだ.これが起こっている.仮想現実といわゆるメタバースにおける2次元ウェブの役割アバウトWebXR そして、3 Dウェブ?我々が見たい未来を築くのは我々次第だ.だからビルを開始! https://techcrunch.com/2021/10/28/facebook-opens-oculus-store-to-2d-progressive-web-apps/ https://www.theverge.com/2021/11/16/22785469/meta-oculus-quest-2-10-million-units-sold-qualcomm-xr2 https://developer.oculus.com/documentation/web/browser-remote-debugging/ https://reactjs.org/blog/2018/05/23/react-v-16-4.html https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/gestures/ https://www.w3.org/TR/webxr-gamepads-module-1/
Oculusクエストは本質的にAndroidデバイスです
Oculusクエストは、基本的にあなたの顔にストラップAndroidのスマートフォンです.クエストの開発を開始するには、Web上でも、あなたがダウンロードしたいと思っているAndroid Studio とAndroid SDK Platform Tools . あなたが使用されます
adb あなたのデバイスを確認するために時間からコマンドを適切に接続され、あなたのPISをインストールし、他の高度な構成変更を確認します.また、お使いの携帯電話にOculusアプリから行う必要があるデバイスの開発者モードを有効にする必要があります.また、USBのデバッグを有効にする必要がありますOculusの設定メニューの別のステップがあります.Oculusはいくつかのデスクトップソフトウェアを提供しますOculus Developer Hub これは、あなたの接続を検証するようなキー開発者のタスクの数を簡素化、保護者を無効にするキャストやスクリーンショットを取る.
それは間違いなく多くの手順ですが、すべてのこのセットアップを持っている後、あなたはよく2 DでWeb技術を使用してOculus VRアプリを構築する方法にしている.それはエキサイティングです!
VRで2 Dウェブをブラウズすること
ときに、通常のWebブラウザに比べてそれについてのユニークないくつかのことに気づくかもしれない初めてのOculusブラウザを開きます.最初の3つのブラウザのウィンドウ側の側で可能です.それで、あなたは幅の3000ピクセル以上を測定するブラウザ・ウインドウのこの180度の壁に直面しています.各ウィンドウのデフォルト幅oculus browser specs 5050 px高で1000 pxワイドでユニークです.そして今のところ、あなたはそれらをサイズ変更することができます、しかし、幅だけ.あなたはその奇妙な高さで立ち往生している.(編集:2021年12月13日)
いくつかのウェブサイトをプルアップしてください.それが私のようなインタラクティブであるならばtetris game それはかなり動作しない良いチャンスがある!
一方、標準的なニュースサイト、ブログ、あるいは何かのように最適化されたものをプルアップする場合React Three Fiber Demo App 彼らはすべて見て、偉大な仕事をする必要があります.
ローカルコードのデバッグ
あなたのローカルコンピュータ上であなたのアプリケーションを構築していると仮定すると、おそらく、Oculusのブラウザですぐにそれらの更新プログラムを参照してください.そのためには、お使いのコンピュータのOculusデバイスのポートからすべてのトラフィックをコンピュータに転送するリバースプロキシを設定する必要があります.
adb reverse tcp:3000 tcp:3000
あなたのファイルをホストするためにCodesandboxまたはGlitchのような何かを使っているならば、それはあなたがURLに入ることができて、それをあなたのヘッドセットの上で自動的に開くことができるOculus Developer Hubのこの機能を使うのに本当に役立つことができます.
現在、心は部分を吹いています.あなたはGoogle Chromeの中からあなたのOculusブラウザウインドウを調べることができます.あなたは単に
をクリックして、デバイスのインスタンスに“検査”.それは本当に魔法のような感じです.
大抵中古
console.log 私のイベントリスナーをログ出力するには、ネットワークと要素の検査者と一緒に完全なJavaScriptデバッガを伝えることができる限り.あなたのコンピュータとあなたのヘッドセットの間を行ったり来たりすることは明らかに一種の痛みであるので、私は検査官ウィンドウの中の小さいプレビュー・アプリケーションと相互作用することによってテストが実際に多くの時間を節約したとわかりました.UXとWeb APIの問題
✅ 今、あなたは、Oculusブラウザで表示されるアプリを持っているし、あなたのローカルコンピュータ上でそのアプリを更新し、デバッグすることができます.ここでVRで実行するためのアプリケーションを最適化するためのいくつかの基本的なヒントがあります
mousedown and mousemove そして、彼らが働かなかったとき、驚きました.私は驚いたにちがいない.OculusブラウザはAndroidデバイス上で動作しています.マウスイベントの代わりにTouch Events 少しクリーナーPointerEvents API . ポインタイベントを使用すると、両方のタッチやマウスイベントのための単一のイベントを与えます.彼らは完全に反応してサポートされているタッチのイベントは、複数のタッチから同時に入力をサポートするよりも簡単に動作するように見える.したら、適切にあなたの対話型の要素を大きくするようにあなたのユーザー入力を正しく動作させる.モバイルWebブラウジングとして10年前に、アップルとGoogleの両方を提供し始めたUI guidelines どのようにユーザーのデバイスとの対話.主なものの1つは、ユーザーがタッチすると予想されるボタン＆他のコントロールに多くのパディングを与えることでした.これは誰かの指をかなりのターゲットをあなたのアプリは、とにかく彼らは何を望んで与えることを確認していた.あなたのコントローラが一定の運動状態にあるVRで、これはさらに重要です.それらの入力を大きくして、我々がまだVRに持っているぼやけたテキストを与えて、同様にあなたのテキストを大きくしてください.
私の最後の実現は、Oculusブラウザで持っている画面の不動産を考慮することです.あなたは1000 px広いが、唯一の5050 px高を扱っている.それはかなり広いスクリーンです、しかし、それは本当に短いです.Oculusのブラウザでのスクロールはうまく動作しますが、私は個人的にスクロールすることなく、ワイドスクリーンの設計をお勧めします.確かにほとんどのゲームやインタラクティブなアプリの場合は、アクションのいくつかの重要な部分を参照してスクロールする必要はありません.あなたのアプリをストレッチできる方法について考えてください.多くのタブレットアプリは、風景モードでスペースを活用するように設計されており、私はどのようにVRのためにこれを行う方法を把握する自信がある.
もっと学ぶ
マイtetris clone まだVRのために完全に最適化されていないが、私は多くのボタンを大きくし、タッチイベントAPIを使用するように移動するように移動しながら、彼らが落ちている部分を移動することができます.私もそれを得たinstalled as a PWA だから私は自分のライブラリ内の他のアプリの横にそれを実行することができます.私の次のステップは、ポインタイベントAPIに移行し、その水平画面の不動産のすべてを最適化する方法を把握することです!
一度私は確かに私が飛び込むしたいいくつかのより多くの質問です.私は必要WebXR Gamepads API 様々なボタンをキャプチャし、Oculusタッチコントローラからトリガ入力?フォローアップ:nope、彼らはimmersive-vr モード3台のブラウザウィンドウにまたがる超ワイドゲームを作れますかpostMessage またはWeb Storage API ? そしてそれを超えて、VRのための2 Dウェブも追求する価値があるものでもありますか?どのようにハードそれは何かを使用するかa-frame or React Three Fiber with use cannon 完全に没入型3 Dの世界を作るには?People are doing it , では、なぜあなたと私は?
Web開発の世界でたった今熱心さを生み出している多くのテクノロジーがあります、しかし、私はVRのためにウェブアプリを構築することに関して眠りません!メタはすでに1000万クエスト2デバイスを販売しており、その成長は持続可能であるようだ.これが起こっている.仮想現実といわゆるメタバースにおける2次元ウェブの役割アバウトWebXR そして、3 Dウェブ?我々が見たい未来を築くのは我々次第だ.だからビルを開始!
Reference
この問題について(メタバース(少なくともOculus Questブラウザーのための)のための2 Dウェブサイトを構築すること), 我々は、より多くの情報をここで見つけました https://dev.to/xjamundx/building-2d-websites-for-the-metaverse-or-at-least-for-the-oculus-quest-browser-3j5eテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol