はじめに
この記事は、WebAssembly / Wasm Advent Calendar 2024 の3日目の記事となります。
アドベントカレンダのリストを見ていて、今、WebAssemblyに初めて来た者の記録です。
基本事項
WebAssemblyってなに？ というわけでChatGPT先生に聞いてみる。
おー、素晴らしいものですね！。
インストール
この辺りに書いてあるとおりに準備した。
. "$HOME/.cargo/env"
なるほど、これ大事ね。
ChatGPTに何か作ってもらおう
lib.rs
use wasm_bindgen::prelude::*;
// WebAssemblyで使うための宣言
#[wasm_bindgen]
pub fn mandelbrot(x: f64, y: f64, max_iter: u32) -> u32 {
let mut real = x;
let mut imag = y;
let mut iter = 0;
while iter < max_iter {
let real2 = real * real;
let imag2 = imag * imag;
if real2 + imag2 > 4.0 {
return iter;
}
imag = 2.0 * real * imag + y;
real = real2 - imag2 + x;
iter += 1;
}
max_iter
}
cargo new --lib mandelbrot
して、src/lib.rsをChatGPTが出してきた上記lib.rsに置き換える。
ChatGPT先生が続きに出してきた以下の操作を行う。
wasm-pack build --target webを実行。
エラー内容通りにCargo.tomlを修正し、もう一度wasm-pack build --target webを実行。
エラー内容通りにCargo.tomlを修正し、もう一度wasm-pack build --target webを実行。
おお！すごい勢いでコンパイル始まった。コンパイル通った！やったね。
ChatGPT先生が続きに出してきた以下のhtmlを作成。
mandelbrot.html
<!DOCTYPE html>
<html>
<head>
<title>Mandelbrot with WebAssembly</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script type="module">
import init, { mandelbrot } from './mandelbrot.js';
async function drawMandelbrot() {
await init(); // WebAssembly初期化
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(canvas.width, canvas.height);
const maxIter = 100;
const width = canvas.width;
const height = canvas.height;
for (let px = 0; px < width; px++) {
for (let py = 0; py < height; py++) {
const x0 = (px / width) * 3.5 - 2.5;
const y0 = (py / height) * 2.0 - 1.0;
const iter = mandelbrot(x0, y0, maxIter);
const color = (iter / maxIter) * 255;
const index = (py * width + px) * 4;
imageData.data[index] = color; // Red
imageData.data[index + 1] = color; // Green
imageData.data[index + 2] = color; // Blue
imageData.data[index + 3] = 255; // Alpha
}
}
ctx.putImageData(imageData, 0, 0);
}
drawMandelbrot();
</script>
</body>
</html>
ChatGPT先生が続きに出してきた以下を実行。
ディレクトリ構造はこんな感じ
ブラウザでアクセス
うむ。表示できた。速いのかは分からない例ではありましたが。ここでタイムアップ。
以上、簡単ですが、「WebAssembly」に今来た私が試したこと（ChatGPT先生と共に）、でした。