Mobility Technologies Co., Ltd.
Rustで3D graphics programming
Kiyotomo Hiroyasu
2020/10/29 MoT.rs #2
Mobility Technologies Co., Ltd.
● これから話す内容
○ Rustで3D graphics programmingしたい動機
○ GPU使った3D描画パイプラインの概要
○ three-d crateの紹介
○ まとめ
はじめに
2
Mobility Technologies Co., Ltd.
動機
3
Mobility Technologies Co., Ltd.
● エッジAI開発において、入力画像の前処理をGPU上で高速に実現したい
○ shaderを使った並列処理
● OpenGLとかshaderとかなんもわからんので簡単に試しながら学習できる環
境がほしい
開発主言語がRustなので、いい感じにshader扱えるcrateはないか探す
動機
4
Mobility Technologies Co., Ltd.
3D描画のパイプライン概要
5
Mobility Technologies Co., Ltd.
・多量のpolygonについて処理が
実行されて3D描画が行われる
・各Shaderの処理はGPU上で
並列で高速に実行
3D graphicsの描画処理パイプライン
6
OpenGLのレンダリングパイプライン図
(OpenGL wikiより)
Mobility Technologies Co., Ltd.
three-d crate
7
Mobility Technologies Co., Ltd.
● crates.ioでOpenGLで検索かけたときに上の方に出てきたcrate
● OpenGLESには対応してなさそうだが、学習環境として使えないかと思い試用
● WebAssemblyのビルドにも対応している
○ examplesはwasmでビルドされたモジュールを使用している
three-d crate
8
Mobility Technologies Co., Ltd.
● ビルドしてサンプル実行するまでに5分かからない
○ リポジトリのREADMEに書いてあるとおり実行するだけでdesktop版も
Web版も簡単に動作確認できる(wasm版は要node.js)
three-d crate
9
Mobility Technologies Co., Ltd.
● shaderも簡単に実装できる
○ hello_worldサンプルの実装内容を紹介
色付きのポリゴンがY軸中心に回転するだけのサンプル
頂点座標と対応する色情報をshaderに渡して描画
three-d crate
10
Mobility Technologies Co., Ltd.
● shaderのコンパイルや描画実行も簡単な記述で可能
● vertex shaderに渡す頂点座標/色情報と回転行列を指定してdraw_arrays()するだけ
three-d crate
11
←ここでshaderが起動し、ポリゴンが描画される
Mobility Technologies Co., Ltd.
● shaderコード
○ vertex shaderで入力頂点座標に指定された回転行列を乗算
○ fragment shaderはvertex shaderに渡されたcolorを描画ピクセルに設定して
いるだけ
■ ピクセル座標に応じた補間値が渡されるのでグラデーションになる
three-d crate
12
vertex shaderのソース(color.vert) fragment shaderのソース(color.frag)
Mobility Technologies Co., Ltd.
まとめ
13
Mobility Technologies Co., Ltd.
● three-d crateを使うとシンプルな記述でshader起動するコードが書ける
○ 生のOpenGL APIで同じ事しようとすると数倍のコード量になる
○ shader初心者でも簡単に始められる(手を動かしながらの学習に良い)
○ wasm+WebGLに対応してるので、Web向けビルドも可能
● OpenGLESに対応しておらず、エッジ向けにビルドできないのがBad
○ 汎用計算に使用するcompute shaderにも非対応
○ 他にも使えそうなcrateがないかさらに調査する
まとめ
14

Rustで3D graphics programming

  • 1.
    Mobility Technologies Co.,Ltd. Rustで3D graphics programming Kiyotomo Hiroyasu 2020/10/29 MoT.rs #2
  • 2.
    Mobility Technologies Co.,Ltd. ● これから話す内容 ○ Rustで3D graphics programmingしたい動機 ○ GPU使った3D描画パイプラインの概要 ○ three-d crateの紹介 ○ まとめ はじめに 2
  • 3.
  • 4.
    Mobility Technologies Co.,Ltd. ● エッジAI開発において、入力画像の前処理をGPU上で高速に実現したい ○ shaderを使った並列処理 ● OpenGLとかshaderとかなんもわからんので簡単に試しながら学習できる環 境がほしい 開発主言語がRustなので、いい感じにshader扱えるcrateはないか探す 動機 4
  • 5.
    Mobility Technologies Co.,Ltd. 3D描画のパイプライン概要 5
  • 6.
    Mobility Technologies Co.,Ltd. ・多量のpolygonについて処理が 実行されて3D描画が行われる ・各Shaderの処理はGPU上で 並列で高速に実行 3D graphicsの描画処理パイプライン 6 OpenGLのレンダリングパイプライン図 (OpenGL wikiより)
  • 7.
    Mobility Technologies Co.,Ltd. three-d crate 7
  • 8.
    Mobility Technologies Co.,Ltd. ● crates.ioでOpenGLで検索かけたときに上の方に出てきたcrate ● OpenGLESには対応してなさそうだが、学習環境として使えないかと思い試用 ● WebAssemblyのビルドにも対応している ○ examplesはwasmでビルドされたモジュールを使用している three-d crate 8
  • 9.
    Mobility Technologies Co.,Ltd. ● ビルドしてサンプル実行するまでに5分かからない ○ リポジトリのREADMEに書いてあるとおり実行するだけでdesktop版も Web版も簡単に動作確認できる(wasm版は要node.js) three-d crate 9
  • 10.
    Mobility Technologies Co.,Ltd. ● shaderも簡単に実装できる ○ hello_worldサンプルの実装内容を紹介 色付きのポリゴンがY軸中心に回転するだけのサンプル 頂点座標と対応する色情報をshaderに渡して描画 three-d crate 10
  • 11.
    Mobility Technologies Co.,Ltd. ● shaderのコンパイルや描画実行も簡単な記述で可能 ● vertex shaderに渡す頂点座標/色情報と回転行列を指定してdraw_arrays()するだけ three-d crate 11 ←ここでshaderが起動し、ポリゴンが描画される
  • 12.
    Mobility Technologies Co.,Ltd. ● shaderコード ○ vertex shaderで入力頂点座標に指定された回転行列を乗算 ○ fragment shaderはvertex shaderに渡されたcolorを描画ピクセルに設定して いるだけ ■ ピクセル座標に応じた補間値が渡されるのでグラデーションになる three-d crate 12 vertex shaderのソース(color.vert) fragment shaderのソース(color.frag)
  • 13.
    Mobility Technologies Co.,Ltd. まとめ 13
  • 14.
    Mobility Technologies Co.,Ltd. ● three-d crateを使うとシンプルな記述でshader起動するコードが書ける ○ 生のOpenGL APIで同じ事しようとすると数倍のコード量になる ○ shader初心者でも簡単に始められる(手を動かしながらの学習に良い) ○ wasm+WebGLに対応してるので、Web向けビルドも可能 ● OpenGLESに対応しておらず、エッジ向けにビルドできないのがBad ○ 汎用計算に使用するcompute shaderにも非対応 ○ 他にも使えそうなcrateがないかさらに調査する まとめ 14