Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by NearMeの技術発表資料です

Other Decks in Programming

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