RustでつくるWebアプリケーション(4) WebGLとWasm : アニメーションを作る その1

Transcript

1. 0 RustでつくるWebアプリケーション(4) WebGLとWasm : アニメーションを作る その1 2023-03-10 第35回NearMe技術勉強会 Asahi Kaito
2. 1 今回から、 (1) Rust Wasmの確認 (2) WebGLについて (3) 3次元のオブジェクト作成（シェーダー） を始めていきます
3. 2 WebAssembly(Wasm)について（復習） • Webブラウザで実行可能なバイナリ形式アセンブリライクな言語 → 字句解析と構文解析の大半を省くことができ、起動がより高速に • Webアプリケーションの高速化 → JavaScriptのような動的型付けの処理の一部をWasmに置きかえる → より高速な動作が期待される！！ • Rust+Wasm → wasm-packを通してビルドできる
4. 3 WebGLとRust(Wasm) 1. WebGLとは？ 　OpenGLの派生で、JavaScriptなどからコンピュータ搭載のGPU, CPU内蔵のグ ラフィックスの演算・描画処理を呼び出す手続き https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
5. 4 WebGLとRust(Wasm) 2. WebGLとRust 　WebAssemblyを利用して以下のアニメーションを作成します。 https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
6. 5 WebGLとRust(Wasm) 3. 必要なこと ①：HTML, JavaScriptの本当に初歩 ②：Rustの基本（記法、型） ③：RustでJavaScriptと同じことをする（web-sysクレートの利用） ④：シェーダーの基礎
7. 6 WebGLとRust(Wasm) 3. 必要なこと ①：HTML, JavaScriptの本当に初歩
8. 7 WebGLとRust(Wasm) 3. 必要なこと ①：HTML, JavaScriptの本当に初歩 一旦これくらい...
9. 8 WebGLとRust(Wasm) 3. 必要なこと ②：Rustの基本（記法、型） 後で復習を扱います
10. 9 WebGLとRust(Wasm) 3. 必要なこと ③：RustでJavaScriptと同じことをする（web-sysクレートの利用） https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL To Rust
11. 10 WebGLとRust(Wasm) 3. 必要なこと ④：シェーダーの基礎 → Rustファイル内で、シェーダープログラムを書いていきます
12. 11 参考文献 • WebAssemblyとは （https://qiita.com/ShuntaShirai/items/3ac92412720789576f22） • WebAssembly Rust（https://www.rust-lang.org/ja/what/wasm） • WebAssembly from MDN （https://developer.mozilla.org/ja/docs/WebAssembly） • WebGL（https://developer.mozilla.org/ja/docs/Web/API/WebGL_API）
13. 12 Thank you