2019-01-13

UIパーツを追加

UIパーツをいくつか追加した。

・スライダー

・水平・垂直スクロールバー

・スクロールビュー

スクロールビューはリストボックスの中身の表示等、スクロール可能な領域で使用する予定。表示領域のクリッピングとスクロールの処理は一応で動くようになった。今のところ、クリッピング範囲、スクロール値のどちらもシェーダのユニフォーム変数にして、シェーダ内でそれぞれの処理を行うようにしている。

現状の実装では、表示画面に対して全てのUIパーツを毎フレーム1回ずつ描く処理になっている (各パーツのテクスチャを描くところまでは、再描画が必要な時まで書き換えない処理になっている)。後々、UI用のオフスクリーンバッファを1枚用意して、変更点だけ再描画するような処理に書き換えた方が良いのかもしれない。今のままでも、ゲーム内のちょっとしたUIであれば実用に耐えるのではないかと考えている。

マウスイベントも、よく使いそうなものは実装した。まだmouseenter, mouseleaveの処理で、UIパーツの配置の前後関係によっては不具合が生じるケースが残ってしまっている。これは頭の中では再設計ができているので、コードを書き換えれば直せそう。

2019-01-11

チェックボックスを追加

チェックボックスのUIパーツを追加した。１日１個くらいのペースでUIパーツを追加できたら良いなと思ってるんだけど、今の仕組みで簡単に実装できそうなのはラジオボタンくらいしかなさそう。スクロールバー、スライダーとかを実装しようと思うと、ドラッグ＆ドロップの仕組みを追加する必要がありそう。また、リストボックスのようなUIパーツは表示内容がクリッピングされてスクロール可能になるので、その辺りの仕組みも追加する必要がある。

以前、タブインデックス、フォーカス等も実装できればと書いていたけど、さらにテーマのような機能も必要かもしれない。UIパーツの数が増えてきた時に、一括してフォントや表示色を変更できる機能がないと不便そうだ。

2019-01-09

ボタンを追加

ここ何日かでマウスイベントに反応する仕組みが完成したので、UIのボタンを追加してみた。今のところ、画像が変更できなかったりで自由度は少ない。マウスホバー時に明度を上げる処理と、押下時に明度を下げる処理を入れてみたら見た目もボタンっぽくなった。

それとは別の話だけど、GitHubの無料アカウントでプライベートリポジトリが作り放題になったようなので、tea.jsもプライベートに移行しようか迷っている。もう少しまともに動くようになってからパブリックにした方が良さそうな気がしている。

2019-01-06

テキストと画像表示用のGUIパーツを追加

テキスト表示用のパーツと、画像表示用のGUIパーツを追加した。

最近、毎日1個ペースで実装するのが難しい箇所ばかりを触っていたので、ブログを書く習慣がなくなってしまっていた。

GUIを実装するにあたって、今までの実装内容を見直していたら、うまく動作していない箇所が沢山見つかってしまい、ひたすら修正していた。おそらく今のところは、おおよそ修正できたのではないかと思う。

GUIパーツはカメラの最前面に等倍で表示するようにしている。今はボタンを追加しようと考えているんだけど、その前にマウスイベントに反応する仕組みを作る必要がある。Visual Studio等で用意されているGUIパーツと同等の機能を実現しようと思うと、選択されているパーツにフォーカスを当てる機能、タブインデックスの対応、文字入力用のキャレット、多数用意されているキー入力・ドラッグ等のイベント類も用意する必要があるかもしれない。ゲーム用途に絞ると、そこまで実装しなくても良いのかもしれないけど。

2018-12-26

GUIの仕組みを作り始めた

今までは編集画面用のHTMLのGUIを作っていたけど、それとは別に、実行画面内に表示するためのGUIを作り始めた。実行画面はcanvasタグ1枚で表示されているので、中にHTMLを直接表示することはできない。divタグを上に乗せてGUIを実現する方向でも考えていたんだけど、それだとWebGL以外への環境への移植性がなくなってしまうため、今のところはWebGL内でGUIを作っていこうと考えている。WebGL内でGUIが表示できれば、OpenGLが実行できるような他の環境へ移植しやすくなると考えることができそうだ。実際のところ、どの程度の移植性があるのかはやってみないと分からないけど。

2018-12-24

DAEファイルのパーサを一通り書いた

DAEファイルのパーサを一通り書いてみた。10日くらい同じようなコードを書いていたので、ブログの更新をさぼってしまった。今のところ、DAEファイルを読み込んでJavaScriptのオブジェクトに変換するところまでしか書けていない。また、以前ブログで書いたように、GPU上で処理しやすい形式とファイル上の形式でメッシュの表現に違いがあって、ファイルから読み込んだ後にGPUで処理しやすい形式に変換するコードを準備する必要がある。FBXの仕様も併せて少し確認していたんだけど、メッシュファイル上の法線情報の表現形式に色々と種類があるようだ。今までの個人的な認識では、頂点1つに法線1つが紐づく、GPUで処理しやすい形式しか知らなかった。ファイル上の形式では、頂点に紐づく形式の他に、面に紐づく形式、辺に紐づく形式等があるようだ。それぞれ考え方が違うので、ファイル上の形式からGPUの形式に変換するコードを、表現形式ごとに1つずつ書いていく必要がありそうだ。おおよそこれをサポートすれば半分はいけるはずというようなものとか、ほとんどこの形式で保存されることはないというものもあるかもしれない。メジャーなものだけサポートできれば、今のところは十分だと考えても良いかもしれない。

2018-12-13

FBX、DAEフォーマットのパーサを修正した

FBX、DAEフォーマットのパーサを修正した。バージョン違いや、バイナリフォーマット・テキストフォーマットの違い (FBX) 等があって、ファイルの中からメッシュデータを抜き出そうとするだけでも、真面目に処理すると大変そうなことが分かってきた。

・FBXフォーマットの仕様について

github.com

・DAEフォーマットの仕様書

www.khronos.org

FBXの方はAutodeskのサイトを見ても、SDKの使い方が紹介されているだけで、ファイルフォーマットの仕様書の形式では公開されていないようだった。Blenderの開発者の人がフォーマットの解説を書いてくれている。FBXは主に、ファイルフォーマットについて意識することなく、SDK経由で使うことが重視されているようだ。そのため、FBXを扱うためのC++用ライブラリが公式サイトから配布されている。

DAEの方は元々Playstation3用にソニーが開発していたそうで、今ではOpenGL等の標準化を行っているKhronosによってDAEフォーマットの仕様は管理されているようだ。上のURLに行くと、日本語でも仕様書を読むことができる。

どちらのフォーマットも、メッシュ以外のデータ (シーンの状態、カメラ・ライトの状態、レンダリングの方法、アニメーション等) も一緒に含めて配布することができる形式になっているらしい。

npmにいくつか、JavaScriptで実装されたライブラリが公開されているみたいだけど、いったん1から作ってみようと思う。

VRエンジン作成日記

ひたすらVRエンジンを作っていきます