Zenn
Open3

WebAssemblyでWebGLを触ろう！

Rust
WebAssembly
WebGL
泡沫京水泡沫京水

WebAssembly（Rust）でWebGLを扱うコードを書いてみようの、お話。
なお、このスクラップにおいて、Three.jsやBabylon.jsは使いません
ブラウザに標準搭載されているメソッドのみを活用して、爆速WebGLを実現していきたいと思います！！

泡沫京水泡沫京水

環境構築

Vite(TypeScript)

yarn create vite
cd [指定したディレクトリ名]
yarn

Rust(WebAssembly)

cargo new --lib [指定したディレクトリ名2]
cd [指定したディレクトリ名2]
cargo install wasm-pack
cargo add wasm-bindgen
cargo add web-sys

WebAssemblyのビルドコマンド

wasm-pack build --target web

開発環境サーバの起動

yarn dev

今回使用しているパッケージ

TypeScript
{
  "name": "wasm-webgl",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}
Rust
[package]
name = "rust-wasm-webgl"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.92"
web-sys = {version = "0.3.69",features=[
    "Window",
    "Document",
    "Element",
    "HtmlCanvasElement",
    "WebGlRenderingContext"
]}