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