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

Transcript

1. 0
   RustでつくるWebアプリケーション(4)
   WebGLとWasm : アニメーションを作る その1
   2023-03-10 第35回NearMe技術勉強会
   Asahi Kaito
   

   View Slide

2. 1
   今回から、
   (1) Rust Wasmの確認
   (2) WebGLについて
   (3) 3次元のオブジェクト作成（シェーダー）
   を始めていきます
   

   View Slide

3. 2
   WebAssembly(Wasm)について（復習）
   ● Webブラウザで実行可能なバイナリ形式アセンブリライクな言語
   → 字句解析と構文解析の大半を省くことができ、起動がより高速に
   ● Webアプリケーションの高速化
   → JavaScriptのような動的型付けの処理の一部をWasmに置きかえる
   → より高速な動作が期待される！！
   ● Rust+Wasm
   → wasm-packを通してビルドできる
   

   View Slide

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
   

   View Slide

5. 4
   WebGLとRust(Wasm)
   2. WebGLとRust
   　WebAssemblyを利用して以下のアニメーションを作成します。
   https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
   

   View Slide

6. 5
   WebGLとRust(Wasm)
   3. 必要なこと
   ①：HTML, JavaScriptの本当に初歩
   ②：Rustの基本（記法、型）
   ③：RustでJavaScriptと同じことをする（web-sysクレートの利用）
   ④：シェーダーの基礎
   

   View Slide

7. 6
   WebGLとRust(Wasm)
   3. 必要なこと
   ①：HTML, JavaScriptの本当に初歩
   

   View Slide

8. 7
   WebGLとRust(Wasm)
   3. 必要なこと
   ①：HTML, JavaScriptの本当に初歩
   一旦これくらい...
   

   View Slide

9. 8
   WebGLとRust(Wasm)
   3. 必要なこと
   ②：Rustの基本（記法、型）
   後で復習を扱います
   

   View Slide

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
    

    View Slide

11. 10
    WebGLとRust(Wasm)
    3. 必要なこと
    ④：シェーダーの基礎
    → Rustファイル内で、シェーダープログラムを書いていきます
    

    View Slide

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）
    

    View Slide

13. 12
    Thank you
    

    View Slide