はじめに

OculusQuest 用に WebVR + A-Frame で何か作るとき，簡単なUIが欲しくなることが多いのですが，WebGL上で動いてA-Frameと相性の良いUIフレームワークがなかなか見つからなかったので実装しました．

最初は他のライブラリに頼りつつ足りないものを自作していたら，いつの間にか色々作ってしまったので同じようなことで困っている誰かの助けになればと思います．

A-Frame xyLayout

以下のような特徴があります．

素直なレイアウトコンポーネント
- CSS Flexbox風のレイアウトコンポーネント
- 幅と高さを持ったオブジェクトなら何でも配置できます
日本語入力できるソフトウェアキーボード
- フォーカスがあたってるDOM要素にKeyboardEventを送る汎用的な挙動
- 物理キーボードでの入力にも対応しています
- Google CGI API for Japanese Input を使っています
UIコンポーネント
- ラベル，ボタン，トグルスイッチ，ドロップダウンリスト，スライダ，スクロール，テキストボックス等
- ドラッグして移動できるウインドウも入ってます
シンプル
- A-Frame(とTHREE.js)のみに依存
- コンパクト (約35kB)

プロトタイピング用に使ってるので，UIコンポーネントの見た目はまだ粗が多いです．

READMEにコンポーネントの一覧は書いてありますが，説明はほぼ無いので，以下のデモのhtmlを参照してください．
今後も破壊的な変更が加わる予感がするのとnpmパッケージも公開してないので，とりあえずは xylayout-all.min.js をダウンロードして使うのが良いと思います．
MIT Licenseです．

3Dで日本語を表示するとだいたい面倒なことになりますが，深く考えず「とりあえず」日本語を表示できる仕組みが欲しいです．

今回実装したものはマルチバイト文字が含まれているとCanvasを使ったレンダリングにフォールバックするだけなので，見た目はあまりきれいじゃないです．解像度は設定できますが，真面目にきれいなレンダリング結果を求めるなら必要な文字のMSDFフォント等を用意する必要があります．

試行錯誤の結果，CSS Flexboxもどきになりました．とりあえずレイアウト機能の仕様で悩んだらFlexboxにしておけばよいという学びを得ました．

よくあるソフトウェアキーボードは同じライブラリ内で提供されているテキストボックス専用に作られてたりするのですが，キー入力を受け付ける処理がそのライブラリ専用になってしまって微妙な気分になります．

なるべく通常のDOMのように扱いたかったのと物理キーボードも同じ処理で完結させたいので，フォーカスあたってるDOM要素にKeyboardEventを送るだけの実装になっています．

日本語変換もKeyboardEventを横取りして変換済みのテキストを送り直す仕組みなのでOculus QuestにBluetooth等で接続した物理キーボードでも同様に日本語入力できます．

使ってみたり動かしてみて，良さげだったやつ．