WebGL Lib 2019/05/22

## とりあえず MMDモデル(PMX) を表示してみるテスト [サンプル](sample/index.html) - 全てブラウザ側で処理。 - Chrome 用。一応 Firefox でも動くものの、問題あり(後述) - モデルは同梱されていないので、お手元に pmx 形式の MMD モデルをご用意ください。 - pmx の入ったディレクトリをテクスチャごと放り込むべし。 - モデルの基本部分とボーンのみ対応。モーフはない。IKもない。トゥーンもない。物理演算もない。 - モーションは対応していないが、ポーズは読み込めるように。 - モデルを読み込んだ後に vpd ファイルを放り込む。 - IK 無いので足回りは悲しいことになる。 - テクスチャは png/jpg - bmp は自動で png に変換される。 - tga は、(カラーフォーマットが普通のなら) png に変換される。 - 読込が遅い場合だいたいこいつのせい。 - dds は 無理だが、.dds.png があれば、それを代わりに読む。 - テクスチャが欠けていたら白になる。 ## 補遺 - MMD 互換の何かを作るつもりはなく、 自作ライブラリでの 3D モデル/トゥーンシェーディングの検討および勉強用。 - なので、PMX ビューアーとしては、ほぼ進歩しないはず。トゥーン化はするかも。 ## 色々な MMD モデルを表示してみて思ったこと。 - PMX はファイルフォーマットがわかりやすくて良い。 - が、全体的に、モデルの扱いが表示用というよりはモーション編集用に特化しているので、 ゲーム用途に考え方をそのまま持って行くのはキツイ部分もある(特に IK)。 - トゥーン/スフィアマップ用のテクスチャが、設定しているのに欠けているモデルが結構ある。 - ファイル名ミスやファイル同梱漏れが多い。 - 同作者の別モデルの方に入っていたり...。 - ディフューズ用のテクスチャならすぐ気づくだろうけれど、 トゥーン/スフィアのほうは中々気づかれないのかもしれない。 - アニメ風を強く意識したモデルは、口周りに工夫がみられて面白い。 - 法線の向きとか - エッジを出すためだけの透明なポリゴンとか - とりあえず、インターリーブドバッファにして、 ボーンは VTF にして... と、 種々の工夫をしてやれば、 うちのおんぼろでも 40 万頂点くらいのモデルはスキニング有で 60FPS で表示できるようだ。 - ちなみに MMD を立ち上げると、10万頂点くらいのモデルで 1 桁 FPS になる程度のおんぼろ具合。 (CPU の方がネックの可能性もあるけれど) - エッジを出そうとすると処理が倍化するので、トゥーンシェーディングをしだすとどうなるか。 ## MMD とはあまり関係のない知見 ### その 1 - GPU 負荷が軽くても、HTML の再レイアウトが入ると FPS がガタ落ちする。 - Chrome は、再レイアウトの範囲を切ることで封じ込めが可能。 - width/height/overflow を直指定して、周辺への影響を避ける。 - HTML5 から入った新しい input type を使わない。 - 今回は range/number に苦しめられた。 レイアウト範囲にかかわらず、描画のタイミングがおかしくなる。 - FireFox はそれでもダメ。 - `fixed/absolute` で固定化して、 テキストを選択不能にして (`user-select: none`) 位置サイズを js から完全にコントロールしてやれば、なんとか。 - もちろん css アニメーションもひどいことになるので避ける。 - 今回は修正する気力なし。 - UI は色々工夫しないとマズそうだ...。 ### その 2 - Firefox は、File オブジェクト経由だと bmp の mime タイプを推測してくれない。 - 拡張子から判断するしかなかった。 ### その 3 - `display:flex` は、`min-height:0` と組み合わせる。 - Firefox で縦サイズがおかしくなる。 - Chrome だと無くてもいけるけれど、恐らく仕様的には Firefox の方が正しい。 - まあ、その 1 の理由から、`display: flex` 自体に今後出番がなさそうだけれど...。