TypeScript+Parcel
WebWorkerでModule(ES6)を

投稿日:

WebWorkerと通常のJavaScriptで処理を共有しようした所、WebWorkerはES6のモジュールに対応していませんでした。ES6を使わない、共有を諦めてWorker専用処理にする、などいろいろ考えたのですがモージュールバンドラーを導入することにしました。有名なのはWebpackですが設定が面倒なので、設定不要を売りにしているParcelというバンドラーを採用することに。公式ページを見ながらインストール、実行まで5分ほどで完了、設定不要で簡単でした。ただ、 Parcelの開発用サーバーの挙動がなんか怪しいので、サーバーはこれまで通りVSCodeのLive Serverを利用しています。

続きを読む TypeScript+Parcel
WebWorkerでModule(ES6)を

Rust(wasm)+TypeScript
WebWorkerでZipファイル展開、ファイル読み込み効率化

投稿日:

複数のファイルを読み込むことが増えてきたので、ファイル読み込みの効率化について考えてみました。サーバーや回線が良ければ、複数同時に読み込み要求を出せばよいのですが、実際は複数ユーザーの同時アクセスや回線の制限があるため無制限にというわけにはいきません。なので昔から使われていて効果の大きいファイルを1つにまとめる方法を実装してみます。この方法は消費メモリが増える欠点があるので、データ圧縮した状態(Zipファイル)でメモリに保存しておき、使用時に展開することでメモリ消費を抑えます。展開にはそれなりの時間がかかるのでWebWorkerで並列処理し、ゲームループなどのアニメーション処理に影響が出ないようにします。展開処理は WebWorker から呼ばれるRust(wasm)の関数で行います。

続きを読む Rust(wasm)+TypeScript
WebWorkerでZipファイル展開、ファイル読み込み効率化

Rust+Wasm+TypeScript
Hello World!

投稿日:

JavaScriptでのプログラミングが増えてきたので、TypeScriptを仲間に加えることにしました。Rust側からprintln!と同じ書式でブラウザのコンソールに出力するHello Worldプログラムの作成します。Windows10+VSCode環境でのTypeScript導入の説明です。Rustの環境構築は前回のHello Worldを見てください。インストールでnpmを使う以外は、TypeScript単独での利用となります。他の開発ツール(npm、webpackなど)は使用していません。

続きを読む Rust+Wasm+TypeScript
Hello World!

rshighlite
Rust(wasm)でソースコードのハイライト表示プラグイン作成

投稿日:

以前、このWebサイトのソースコードハイライト表示にWordpressプラグインのCrayon Syntax Highlighterを使っていましたが更新が止まっているようです。代わりのプラグインを探していたのですが、せっかくだから今勉強しているRust(wasm)で作ってみることにしました。現在稼働中です(2019/10/5)。

機能デモ

□rshighlite-Demo

続きを読む rshighlite
Rust(wasm)でソースコードのハイライト表示プラグイン作成

Rust(wasm)の速度性能テスト&JavaScriptでゲームループ改

投稿日:

WebAssembly(Rust)の実行速度を簡単な球の物理計算で性能テストしてみました。あと以前作成したゲームループに問題があったため、処理落ちしても大丈夫なように修正、改良しました。
少し古いPC(Windows10)で30FPSを維持できる個数は、Chromeで5000個、Firefox4500個、Edge2500個でした。低価格スマホ、タブレット(android、Chrome)では1000個。

続きを読む Rust(wasm)の速度性能テスト&JavaScriptでゲームループ改

Rust(wasm)⇒WebGL テクスチャファイル読み込み

投稿日:

Rust(wasm)で画像ファイルを読み込み、WebGLに転送、テクスチャポリゴンを表示します。JavaScriptの画像処理は使わずに、Rustで画像のバイナリーデータを解析、必要があればデコードしてWebGLのtexImage2Dへ。GPUが直接扱えるDDS(無圧縮)とATF(DXT+ETC1+PVRTC)、デコードが簡単なTGAの3種類の画像に対応します。

続きを読む Rust(wasm)⇒WebGL テクスチャファイル読み込み

Rust(wasm)⇔JavaScript ファイル読み込みとアニメーション(ゲームループ)

投稿日:

RustでWebGLのプログラムを作っていますが、ファイル読み込み処理が必要になってきました。シェーダーソースコードをRustに埋め込むとエディタで色が変わらない、テクスチャにも対応したい。特殊なサーバー処理なしでファイル操作したいので、JavaScriptのFetch命令でファイル読み込みを実装します。Rust側でできることはRustで実装したいという設計方針のため、比較的簡単な実装、ゲームループでFetchの非同期処理に対応します。ついでにアニメーション処理。RustでPromiseのような処理を実装する知識は……まだない。

続きを読む Rust(wasm)⇔JavaScript ファイル読み込みとアニメーション(ゲームループ)

Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (2/2)

投稿日:

前回準備した機能を使って、RustからWebGLのAPIを呼び出して、ポリゴン描画行います。ちょっとした(無駄な)こだわりですがOpenGLに似た記述と仕様を再現しています。それを実現することでRustについての理解が深まったと思います。GL部分だけを見ると、C++のプログラミングをしていると錯覚するかも。今回は、ソースコード2つ(lib.rsとindex.js)と簡単な説明のみです。


続きを読む Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (2/2)

Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (1/2)

投稿日:

前回の記事はJavaScriptでのWebGLの画面クリアだけだったので、今度はRustによるポリゴン描画を行います。WebGLのAPIを呼び出すだけで簡単できると考えていましたが、データの受け渡しが思った以上に複雑でした。OpenGLの知識があればポリゴン描画自体は難しくないので、主にRust⇔JavaScript間のデータの受け渡し方法について書いていきます。

WebGLについての誤算

WebGLもOpenGLと同じようにバッファやシェーダーなどのリソースを作成した際は、GLuintの整数値(ハンドル)が返ってくると思っていました。違いました。WebGLBufferやWebGLShaderといったオブジェクトが返され、これを使ってGL命令を実行。Rust(wasm)で直接JavaScript側のオブジェクトを管理できない様なので対策が必要です。それと、Rust(wasm)から直接WebGL(WebAPI)は呼び出せないため、JavaScriptを経由する必要があります。

続きを読む Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (1/2)

Rust+Wasm+WebGLはじめました 環境構築=>Hello World =>画面クリアまで(Windows10)

投稿日:

Rustというプログラム言語が面白そうなので使い始めてみました。Rustから直接WebAssemblyコードを出力できるので、実行環境はWebブラウザに、グラフィック処理はWebGLを使用します。Webブラウザ上で3Dゲームが作成できるようになることが目標です。それとWebプログラム初心者なので、npm、wasm-bindgenなどのツールやバインダーは使用せず、基本的に手作業で作成していきます。というか使い方がよくわかってないだけですが…… 

今回行うこと Rustの環境作成&ビルド、ブラウザ上で実行、Rust⇔JavaScript間の関数呼び出し、WebGL導入まで

続きを読む Rust+Wasm+WebGLはじめました 環境構築=>Hello World =>画面クリアまで(Windows10)