const imageData = context.getImageData(0, 0, width, height);
if (imageData) {
const { data } = imageData;

for (let y = 0; y < height; ++y) {
for (let x = 0; x < width; ++x) {
const i = width * 4 * y + 4 * x;
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
data[i + 0] = r;
data[i + 1] = g;
data[i + 2] = b;
data[i + 3] = 255;
}
}

context.putImageData(imageData, 0, 0);
}


js 로 대충 이 내용이거든




800 600 픽셀 랜덤 색으로 찍어서 이렇게 나오는 코드임 canvas image data 로


대충 60프레임 나옴



캔버스에 그리는거 wasm 으로 바꾸면 성능 향상 얼마나 있나 보고싶어서


https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm


러스트로 만들어서 했는데


use wasm_bindgen::prelude::*;

use rand::prelude::*;
use rand_distr::{Distribution, Normal, NormalError};


// 1. [u8]

#[wasm_bindgen]
pub fn random_colors(data: &mut [u8], width: u32, height: u32) {
let mut rng = rand::thread_rng();
for y in 0..height {
for x in 0..width {
let i = (width * 4 * y + 4 * x) as usize;
data[((i + 0) as usize)] = rng.gen::<u8>();
data[((i + 1) as usize)] = rng.gen::<u8>();
data[((i + 2) as usize)] = rng.gen::<u8>();
data[((i + 3) as usize)] = 0xff;
}
}
}

// 2. Uint8ClampedArray

#[wasm_bindgen]
pub fn random_colors(data: js_sys::Uint8ClampedArray, width: u32, height: u32) {
let mut rng = rand::thread_rng();
let normal = Normal::new(0.0, 255.0);

for i in 0..width * height * 4 {
// 2-1. set_index (thread_rng::gen)
let v = if i % 4 == 3 { 0xff } else { rng.gen::<u8>() };
data.set_index(i, v);

// 2-2. set_index (normal::sample)

let v = if i % 4 == 3 {
0xff
} else {
normal.expect("REASON").sample(&mut rng) as u8
};
data.set_index(i, v);
}

for i in 0..width * height {
// 2-3. set (Array)
let a: js_sys::Array = js_sys::Array::new_with_length(4);
a.set(0, wasm_bindgen::JsValue::from_f64(rng.gen::<u8>() as f64));
a.set(1, wasm_bindgen::JsValue::from_f64(rng.gen::<u8>() as f64));
a.set(2, wasm_bindgen::JsValue::from_f64(rng.gen::<u8>() as f64));
a.set(3, wasm_bindgen::JsValue::from_f64(0xff as f64));
data.set(&a, i * 4);

// 2-4. set_index (thread_rng::gen)
data.set_index(i * 4 + 0, rng.gen::<u8>());
data.set_index(i * 4 + 1, rng.gen::<u8>());
data.set_index(i * 4 + 2, rng.gen::<u8>());
data.set_index(i * 4 + 3, 0xff);
}

// 2-5. set (Array)

let a: js_sys::Array = js_sys::Array::new_with_length(width * height * 4);
for i in 0..width * height * 4 {
a.set(
i,
wasm_bindgen::JsValue::from_f64(if i % 4 == 3 { 0xff } else { rng.gen::<u8>() } as f64),
);
}
data.set(&a, 0);
}


뭘 어떻게 해도 10~15프레임 나오더라 (1번이 제일 빠름)


병신같이 짠거같은데 조언좀