複数のファイルを読み込むことが増えてきたので、ファイル読み込みの効率化について考えてみました。サーバーや回線が良ければ、複数同時に読み込み要求を出せばよいのですが、実際は複数ユーザーの同時アクセスや回線の制限があるため無制限にというわけにはいきません。なので昔から使われていて効果の大きいファイルを1つにまとめる方法を実装してみます。この方法は消費メモリが増える欠点があるので、データ圧縮した状態（Zipファイル）でメモリに保存しておき、使用時に展開することでメモリ消費を抑えます。展開にはそれなりの時間がかかるのでWebWorkerで並列処理し、ゲームループなどのアニメーション処理に影響が出ないようにします。展開処理は WebWorker から呼ばれるRust(wasm)の関数で行います。
以前、このWebサイトのソースコードハイライト表示にWordpressプラグインのCrayon Syntax Highlighterを使っていましたが更新が止まっているようです。代わりのプラグインを探していたのですが、せっかくだから今勉強しているRust(wasm)で作ってみることにしました。現在稼働中です(2019/10/5)。
WebAssembly(Rust)の実行速度を簡単な球の物理計算で性能テストしてみました。あと以前作成したゲームループに問題があったため、処理落ちしても大丈夫なように修正、改良しました。
少し古いPC(Windows10)で30FPSを維持できる個数は、Chromeで5000個、Firefox4500個、Edge2500個でした。低価格スマホ、タブレット（android、Chrome)では1000個。
Rust(wasm)で画像ファイルを読み込み、WebGLに転送、テクスチャポリゴンを表示します。JavaScriptの画像処理は使わずに、Rustで画像のバイナリーデータを解析、必要があればデコードしてWebGLのtexImage2Dへ。GPUが直接扱えるDDS（無圧縮）とATF（DXT+ETC1+PVRTC）、デコードが簡単なTGAの3種類の画像に対応します。
RustでWebGLのプログラムを作っていますが、ファイル読み込み処理が必要になってきました。シェーダーソースコードをRustに埋め込むとエディタで色が変わらない、テクスチャにも対応したい。特殊なサーバー処理なしでファイル操作したいので、JavaScriptのFetch命令でファイル読み込みを実装します。Rust側でできることはRustで実装したいという設計方針のため、比較的簡単な実装、ゲームループでFetchの非同期処理に対応します。ついでにアニメーション処理。RustでPromiseのような処理を実装する知識は……まだない。
前回準備した機能を使って、RustからWebGLのAPIを呼び出して、ポリゴン描画行います。ちょっとした（無駄な）こだわりですがOpenGLに似た記述と仕様を再現しています。それを実現することでRustについての理解が深まったと思います。GL部分だけを見ると、C++のプログラミングをしていると錯覚するかも。今回は、ソースコード２つ（lib.rsとindex.js)と簡単な説明のみです。
続きを読む Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (2/2)
前回の記事はJavaScriptでのWebGLの画面クリアだけだったので、今度はRustによるポリゴン描画を行います。WebGLのAPIを呼び出すだけで簡単できると考えていましたが、データの受け渡しが思った以上に複雑でした。OpenGLの知識があればポリゴン描画自体は難しくないので、主にRust⇔JavaScript間のデータの受け渡し方法について書いていきます。
WebGLもOpenGLと同じようにバッファやシェーダーなどのリソースを作成した際は、GLuintの整数値（ハンドル）が返ってくると思っていました。違いました。WebGLBufferやWebGLShaderといったオブジェクトが返され、これを使ってGL命令を実行。Rust(wasm)で直接JavaScript側のオブジェクトを管理できない様なので対策が必要です。それと、Rust(wasm)から直接WebGL(WebAPI)は呼び出せないため、JavaScriptを経由する必要があります。
続きを読む Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (1/2)
Rustというプログラム言語が面白そうなので使い始めてみました。Rustから直接WebAssemblyコードを出力できるので、実行環境はWebブラウザに、グラフィック処理はWebGLを使用します。Webブラウザ上で3Dゲームが作成できるようになることが目標です。それとWebプログラム初心者なので、npm、wasm-bindgenなどのツールやバインダーは使用せず、基本的に手作業で作成していきます。というか使い方がよくわかってないだけですが……
今回行うこと Rustの環境作成＆ビルド、ブラウザ上で実行、Rust⇔JavaScript間の関数呼び出し、WebGL導入まで
続きを読む Rust+Wasm+WebGLはじめました 環境構築=>Hello World =>画面クリアまで（Windows10）
