【WebGL】「カクつく」問題、gtlf

カクツク問題

原因

1コマ毎の描画処理が重くfpsを一定に保つことができないため。特に3D表現をしようとすると処理負荷が高く凝った表現をしようとするとfpsを保つことが難しくなる。

対策

テクスチャが重いからjpegにする。

JPEGはCPU上でデコードされてフルサイズでGPUに乗る

JPEGにしようがpngにしようがこれは変わらないです。

いくつかのフォーマットは圧縮されたままVRAMに乗せることができます

モバイルなどでメモリの消費量を下げることができます。

テクスチャ圧縮

GPUやドライバによってサポートされている形式が異なります。各デバイスごとに必要な圧縮形式で圧縮しておいてランタイム時にその端末にあった圧縮形式のファイルを取りに行く形にしないといけない。（少しめんどくさい）

ただ、ユーザーにとっては帯域も使われないですし、VRAMも使われないのでより快適な動作環境を提供することが可能になります。

圧縮テクスチャ形式

• S3TC(PCサポート率高）
• ETC(Androidサポート率高）
• PVRTC（iOS向けサポート率高)

エクステンションでの高速化

WebGL2.0でエクステンション次第で使えたりします。

OES_vertex_array_obect拡張で使える（96%)

ANGLE_instanced_arrays(93%)パーティクルなどの演出で使える（フォールバックが極めて面倒)

OES_texture_float(76%)

WEBGL_draw_buffers(デスクトップで68%)

レンダリングの回数を減らすことができます。(3回を1回にするなど）

glTFとは？

• Khronos（クロノス）が標準化しようとしているJSONで3Dモデルやシーンを表現するフォーマット
• 例えるなら3Dフォーマットにおけるjpegを目指しています。

audioの標準はmp3ですし、videoの標準はH.264ですし、画像の標準はjpegです。3Dモデルの標準はglTFって感じです。

特徴

ランタイム時のためのモデルフォーマット

編集が目的ではない。

ダウンロードしてきたらすぐ表示することが目的

JSでのパースが非常に容易

WebGLで使うことが想定されているのでJavaScriptでのパースが非常に容易です。

WebGLでの表示が非常に簡単です。

メタ情報の中に含まれてる定数はWebGLの中で使われる定数と対応しているのでその点んいついて考える必要がありません。（逆に言えば、WebGL以外のプラットフォームで使う場合は考慮が必要になります。）

無駄なデータが省かれています。

例えば、パースをする必要がない座標などはバイナリになっていて小さくなっています。パースが必要な部分と必要ない部分できっちり分かれている作りになっていて無駄なデータがないです。

各種エクスポーター/コンバーターを備えている

エクスポーター

• three.js

コンバーター

• Blender
• Unity

Paint3Dにも出力機能がついた

glTFにはマイクロソフトも積極的です。

Sketchfabで100000以上のモデルデータをダウンロード可能

Apple Watchのページでも使われました。

メッシュにカスタムプロパティを付与できる。

ここに値を入れておくとBabylonに持って行ったときにJavaScriptからいろいろ使える。

2.0の仕様が策定されました。

• PBR
• スキンアニメーション

種類

glb

バイナリ形式で一つだけファイルが出力されます。その中にJSONと頂点情報、外部テクスチャが含まれている。

コピーする際などは1ファイルのコピーだけで済むので楽。

gltf

JSON(モデル情報) + 埋め込みテクスチャ（テクスチャなどのバイナリ情報が文字列エンコードされて埋め込まれる）

JSON + 外部テクスチャ(texturesというフォルダができてそこに出力される。）