# polybaas users guide 2022/12/15 version 0.92 ## polybaas とは polybaas とは WebVRのシーンを作成して公開することのできるサービスです。 [A-Frame](https://aframe.io/) ベースのWebVRシーンとjavascriptを、ブラウザ上のエディタで編集し、作成したものを固有のURLでシェアすることができます。 開発環境としての環境はPC／MacとOculusQuestブラウザで、ターゲットはWebVR(WebXR)対応ブラウザになります。 現時点で動作確認している環境は以下です。 - MetaQuest ブラウザ - Picoブラウザ - Windows Chrome (with oculus link) ## polybaas editor の概要 メインとなる[エディタ画面](/pbe/)は以下のようになっています。  左側にエディタ領域、右側がプレビューの領域です。エディタ領域でシーンやコードを編集し、APPLYボタンを押すことで内容がプレビューに反映されます。 エディタ部分はタブで複数のエディタに分かれています。  SCENEにA-Frameのタグデータを、COMPONENTSとSHADERSにjavascriptのコードを書きます。SETTINGSには外部コードのimport等を書きます。LOGはエラーとデバッグのログ出力、DOCはビュアーで表示される説明を書くことができます。 プレビューはPC上で最低限の確認をするもので、EnterVRボタンで、360度のVRモード(immersive)になります。 ブラウザがARモードに対応している場合は、EnterARボタンが出ます。MetaQuestブラウザの場合はパススルーでのMRになります。実際にパススルー背景を表示させるには床や空のオブジェクトを非表示にする必要があります。 下の部分には、OculsQuest等での利用を想定したソフトキーボードと、入力補助のスニペットがあります。 ## ユーザ登録とログイン ユーザ登録をすると、編集結果を保存できます。  初回の[ログイン画面](/login.html)では、現状githubまたはgoogleのアカウントでログインすることができます。 ここでのログイン連携で取得される個人情報は登録名とメールアドレスのみです。メールアドレスは公開されません。個人情報の扱いについては、[プライバシーポリシー](/policy.html)を参照してください。 ログインすると以下の画面になります。ログアウトするまでログイン状態は保たれます。  user work listリンクで、保存したデータの一覧表示画面になります。  初めての場合は、start with templateからエディタを開くことができます。 保存データの削除もここで行えます。 ログイン状態でのエディタ画面は、メニューが以下のように変化して、編集データのセーブをすることができます。sceneの入力部分を変更してSAVEすると別名保存になります。  ## ビュアー画面とシェア シーン一覧からVIEWのリンクを選ぶと、ビュアー画面になります。  このページは固有のURLがついているので、このURLで作成したシーンをシェアすることができます。 エディタのDOCSタブに説明書きをmarkdownで書くことができます。DOCSに何かが書かれている場合は、最初に開いた時に説明のパネルが表示されます。  ## シーンの作成 各エディタタブにそれぞれシーン作成に必要な情報を書いてシーンを作成します。 ### SETTING ここにはシーン全体の設定項目を書きます。書式はA-Frameのattributeに準じて、名前:値; の形になります。 | 名前 | 値 | | --- | --- | | name | シーンの名前。保存時の名前になる | | import | 外部からimportするjavascriptのパス | | copyright | 著作権等の表示用。プレビュー画面の下に表示される | | background | a-sceneに設定される背景色 | ### SCENE ここにはシーンを構成するA-Frameのタグを記述します。 A-Frameのシーンのベースになるa-sceneタグは、自動的に追加されるため、ここには含めません。a-sceneにコンポーネントを追加したい場合は、後述のsceneinitコンポーネントの中で行ってください。 ### COMPONENTS コンポーネント定義のjavascriptコードを記述します。 コンポーネント定義はA-FrameのregisterComponent関数を使いますが、ここではAFRAME.registerComponentではなく、POXA.registerComponentというラッパー関数を使ってください。 コンポーネント定義以外に地のjavascriptコードを書くこともできます。スコープはnew Functionで作られるのでグローバルにはなりません。 ユーティリティ関数として POXA.log(msg) で、LOGタブにメッセージ(string)を表示させることができます。 ### SHADERS シェーダー定義のjavscriptとGLSLのコードを記述します。 シェーダー定義はA-FrameのregisterShader関数を使いますが、ここではAFRAME.registerShaderの代わりにPOXA.registerShaderを使ってください。 COMPONENTSとSHADERSのタブの中身はどちらもjavascriptとして実行されるので、違いは実質的にはありません。 ### DOCS シーンのドキュメントです。markdownで記述することができ、ビュアーのinfoウィンドウで表示されます。 エディタではプレビュー画面のinfoボタンで表示を確認できます。 ##　テンプレートシーン polybaasのシーン開発のスタート地点となるテンプレートです。このテンプレートには、 - 床と空とxyzの軸を表すオブジェクト - サンプルの回転する立方体 - コントローラによって移動できるカメラ が含まれています。ここに世界を構築できます。不要なものは削除することができます。 COMPONENTソースに、コンポーネント定義のサンプルとして"rot"というコンポーネントを定義しています。サンプルの立方体はこのコンポーネントで回転させています。 またA-Frameの標準コンポーネント以外に、polybaasの標準として用意されているコンポーネントを使用しています。 ## polybaasコンポーネント A-Frameの標準コンポーネント以外に、bolybaas環境では以下のコンポーネントが用意されています。 ### シーンの初期化 シーンの初期化時には、COMPONENTSソースに書かれた"sceneinit"コンポーネントがa-sceneに設定されます。このコンポーネントのinit()メソッドに、シーン初期化の処理を追加することができます。 ### カメラ移動 カメラを移動させるためのオブジェクト(id=camrig)に"padmoved"、コントローラでの操作のためにコントローラー側に"padmove"のコンポーネントを設定しています。 padmoveのattribute | padmove | | | | --- | --- | --- | | move | boolean | スティックでカメラ移動。デフォルトtrue | | turn | boolean | スティックの左右で回転するかどうか。デフォルトtrueで、falseにすると左右移動になる | | gripud | boolean | これをtrueにするとgrip+スティック上下でカメラが垂直移動する | | gripfly | boolean | trueにするとgripを押した時のみflyモードになる。
padmovedのfry=trueの場合のみ有効 | padmovedのattribute | padmoved | | | | --- | --- | --- | | movev | numeric | 移動速度。デフォルト2(m/sec) | | dirlock | boolean | trueにすると移動中に向きを変えない | | fly | boolean | trueにすると顔の向きに上下の移動もする | ### VRモード コントローラに設定されている"exitvr"コンポーネントは、B/YボタンでVRモードを終了するものです。 camrigに設定されている"vrheight"は、プレビュー画面でカメラの高さを調整するためのものです。