FPSを表示するStatsの画面をWebGLの中に移動した。今まで別のCanvasタグとしてHTML内に配置していたんだけど、そのうちUI全般をWebGL内で描画する仕組みが必要になるので、試しにStatsの画面を描いてみることにした。今のところコード的に無理矢理感があるの…

Scriptを動的にロードできるようにした。簡単なJavaScriptファイルならドラッグで追加できるようになった。例えば次のようなファイルをオブジェクトにドラッグすると、X軸を中心に毎フレーム3度ずつ回転するようになる。 class Test { update() { this.rotat…

コンソール画面を追加した。今のところ、console.log()で出力した内容を表示するだけのものだけど。consoleオブジェクトのlogメソッドの内容を自作メソッドに置き換えることで実現している。具体的には次のように書いている。 var log = console.log; consol…

シーンビューを追加した。今のところ、右クリックしながらWASDキーでシーン内を移動できるくらいの機能しかまだ入っていない。 しばらくスクリーンショットを貼っていなかったので、現状のものを貼ってみる。 ・関連するコミット add scene view · hikipuro/…

タブで選択した内容を表示するUIパーツを追加した。画面に要素を追加していったら表示領域が狭くなってきたので、タブ表示用の機能が必要になった。 まだまだ細かい不具合が残っているので、少しずつ修正しようと思う。 ・関連するコミット add tabs ui · hi…

シーンを保存できるようにした。Electronのアプリケーションメニューに、シーンの新規作成、開く、保存の機能を追加して、それぞれ実際に動くようにした。まだ全ての機能は実装しきれていないけど、簡単なシーンであれば保存できるようになった。 ・関連する…

Undo機能を追加しやすくするために、UI関連の機能をリファクタリングした。実行時の見た目は変わらないけど、コードの内容的には以前より見通しが良くなったように思う。また、レンダリングの処理を少し最適化した。シーン内にカメラがない時の処理を軽くし…

Undo機能を追加し始めた。HTMLのテキストボックス単体で見るとUndo機能は最初から付いてるんだけど、エディタ全体で見ると、2つ以上の編集結果がUndoで繋がらないので自分で実装する必要がありそうだった。Undoできるようにしようと思うと、1つ1つのUI操作を…

レンダリング時にライトの色が適用されない、カメラのレンダリング順が設定できない等の問題があったので修正した。まだいくつか、画面クリアの必要がない箇所でクリアしていたりする問題が残っていそうだ。 ・関連するコミット fix light problems · hikipu…

カラーピッカーを修正した。HTMLのinput type="color"のカラーピッカーだと、仕様上どうしても回避できないことがあるので (出現位置を指定できない、JavaScriptから閉じることができない等)、自分で実装することにした。今のところ、HTML標準のカラーピッカ…

テキストメッシュの設定をUIで変更可能にした。あと、プロジェクトビュー用のファイル一覧を作り始めた。今日は特にこれといって書くことがなさそうだ。 ・関連するコミット fix some ui problems · hikipuro/tea.js@938e0ae · GitHub

ツリービューのドラッグ＆ドロップの機能を修正した。オブジェクトの隙間に他のオブジェクトを差し込むことができるようになった。また、ドラッグ時の画像を変えた。Drag and Drop APIのsetDragImage()にセットできるのはDOMに登録されていて、display: none…

ツリービューにドラッグ＆ドロップの機能を追加した。まだ要素の隙間に移動することはできない。今のところ他の要素の子要素にする機能だけを実装している。他にはAdd Componentボタンをとりあえず機能するようにしたのと、Rectの入力欄等の使い勝手を修正し…

カメラの不具合を修正した。画面内に複数台のカメラを置いた時に表示が崩れてしまう問題と、far値の設定が近すぎる時にスカイボックスが表示されない問題を直した。実装した直後はうまく動いていたんだけど、他の部分の修正を重ねるうちに動かなくなってしま…

UIパーツをいくつか修正した。Vector3の値を入力する時に、X、Y、Zのラベルをドラッグして数値を変える処理を入れているんだけど、その動きをPointer Lock APIを使って入力しやすくしたりしていた。 developer.mozilla.org 聞き馴染みのないAPIだけど、3Dの…

UIパーツにスライダーを追加した。HTMLのinput type="rage"で表示できるスライダーそのものだけど。vue.js上で使いやすいようにクラスにしておいた。他にはコンポーネントのON/OFFをUI上で行うためのチェックボックスと、enum値を選択するためのコンボボック…

プロジェクトビューを作り始めた。今のところフォルダ一覧だけが表示できる。ファイル一覧は表示できない。いったんブラウザ上でWebサイトのように動かすことは諦めて、Electron上でのみ動く状態にしようと思う。動作サポート対象が広いと作るのが大変そうだ…

昨日、カメラの設定がうまく動いていない箇所があることに気付いたので修正した。他には表示領域のリサイズ用のバーを作ったりしていた。CSSのresizeでリサイズ用の設定をすると、右下に掴む用の領域が表示される。横の端全体をリサイズ領域にしようと思うと…

カメラの設定をUI上で変更できるようにした。vue.jsのチェックボックス表示用のクラスとか、細かいパーツをいくつか追加した。カメラの設定画面を作ってみると、以前動いていた機能が動かなくなっていることに気付いた。ちょっとずつ直していくつもり。 ・関…

UI関連のコードをリファクタリングした。昨日よりは見通しが良くなった。あと、Vector3の値をマウスのドラッグで変更可能にしたり、細かい不具合を調整していた。C#のWindows Formsのコードなら今までによく書いていたけど、HTMLのUIはそれほど書いたことが…

画面右側のインスペクタビューのようなところで、オブジェクトの位置等を変えられるようにした。ちょっとエディタっぽくなった。カメラの属性とかも、この画面に追加していって便利にしていく予定。 数値をいじっていて気付いたんだけど、そもそも今までの実…

Unityの画面右の方に表示されている、インスペクタと似たような機能をvue.jsで作り始めた。とりあえずで、位置、回転、拡大率の値を表示するだけの機能を作ってみた。テキストボックス内に値が表示されるけど、まだ値の変更はできない。 他にはコンテキスト…

vue.jsでTreeViewとContextMenuを追加した。Unityのヒエラルキービューっぽく表示しようと思ったら、ul、liタグを組み合わせてCSSで行選択するのが意外に難しかった。liでインデントしてしまうと行選択時に背景の色が端まで塗られず、liのインデントを使わな…

vue.jsでListViewを追加した。今のところは単純にselectタグでリストっぽく表示してる。項目がクリックされた時にイベントが発生する等の機能が全く準備できていない。今日はほとんどvue.jsのドキュメントを読むことに費やした。 CSSについてはSCSSで書いてw…

シーンエディタを作るためにvue.jsを導入してみた。ビルド環境を整え直さないとvue.js関連のクラスがビルドできないようだったので、設定を調整した。しかし、こちらを有効にすればあちらは警告が出るというような設定地獄に陥ってしまった。ある程度全てが…

PostProcessingの機能を追加した。レンダリング後にアンチエイリアスをかけたり、グレースケールに変換したりできるようになる。Unityではフォグ等もPostProcessingでかけられるようだ。 PostProcessingのサンプルを作ろうと思ってMSAAについて調べてたんだ…

GPUインスタンシングを有効にできるようにした。有効にすると、パーティクルシステムの描画が少し早くなる。今のところCPUで座標の計算等を行っているため、これもGPUに処理を移すとさらに軽くできるかもしれない。ただ、毎フレームGPU用にデータを作る方が…