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+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)

Multi-Layer Weighted Blended Order-Independent Transparency

投稿日:

前回紹介したWeighted Blended OITは、ポリゴンの距離が離れすぎると半透明の重ね合わせが不自然になる問題があるため、それを解決する方法を考えてみました。
カメラからの距離でポリゴン(ピクセル)をレイヤ分けして描画、最後に遠くのレイヤから合成していくことで問題を解決します。同一レイヤ内にポリゴンが複数存在した場合は、Weighted Blended OITを利用してレイヤの代表値を1つ求めて、その値でレイヤ合成を行います。
レイヤ分けするためにはレイヤ数だけ繰り返し描画する必要がありますが、MSAAの機能を利用して1回の描画で行う方法を考案できたため、比較的簡単に実装できるようになっています(裏技的な使い方です)。

続きを読む Multi-Layer Weighted Blended Order-Independent Transparency

Weighted blended order-independent transparencyの実装

投稿日:

順番に依存しない半透明の描画技術(Weighted blended order-independent transparency)をDirectX11で実装してみました。
半透明を重ねて表示する場合遠くから順に描画する必要がありますが、この技術を使えば描画順序に関係なくソートした描画結果に似た結果が得られます。

続きを読む Weighted blended order-independent transparencyの実装

DirectX11アルファテストはどこへ? discard/clip命令とAlphaToCoverage

投稿日:

DirectX10以降、レンダリングステートからアルファテストがなくなり、シェーダーで同等(またはそれ以上)の処理が行えるようになっています。OpenGL3.0以降でもシェーダーで対応するようです。
シェーダーでアルファテストを行う方法、処理結果をまとめてみました。また、アルファテストを適用させた場所にも、アンチエリアス処理を行えるAlphaToCoverageという機能についても調べてみました。

AlphaToCoverageという機能は知っていたのですが、こんな便利な機能だとは知りませんでした……。

アルファテストとAlphaToCoverage

続きを読む DirectX11アルファテストはどこへ? discard/clip命令とAlphaToCoverage

VisualStudio2017(Windows10 DirectX OpenGL)で始める3Dプログラミング

投稿日:

今(2017年5月)Windows&C++で3DプログラミングするならDirectXかOpenGLだと思いますが、最新バージョン(DirextX12など)は、性能重視のため手軽にプログラミングができなくなっています。
なので古いバージョンで使えるものを調べて、プログラミングができる環境を作ってみました。
作成した環境は、OpenGL1.1、OpenGL4.5、DirectX9、DirectX11、DirectX12で、初期化と画面クリア、簡単なポリゴンの描画まで行っています。
VSプロジェクト、ソースコードを公開していますので、3Dプログラミングの参考にしてください。
記事最後にあるダウンロードボタンから取得できます。

続きを読む VisualStudio2017(Windows10 DirectX OpenGL)で始める3Dプログラミング

ライトプリパスレンダリング Part3 アンチエイリアス

投稿日:

アンチエイリアス処理を行います。MSAAによるAAを試しましたがうまくいかなかったため、ポストプロセス処理のAAであるSMAA(Enhanced Subpixel Morphological Antialiasing)を実装してみました。かなりいい感じです。ただ、輪郭線処理との相性が悪いため輪郭線描画は無効にしています。
ライトプリパスレンダリングのプログラム作成は、ここで一旦終了します。

SMAA 1x
SMAA 1x

続きを読む ライトプリパスレンダリング Part3 アンチエイリアス