WASM Image Filter

Pernahkah kamu mau menjalankan sesuatu yang berat di browser - seperti image processing real-time, video editing, atau game 3D - dan JavaScript terasa terlalu lambat? Di sinilah WebAssembly (WASM) masuk. WASM memungkinkan kamu menjalankan kode yang dikompilasi dari bahasa seperti C, C++, atau Rust dengan kecepatan hampir native langsung di browser. Di artikel ini aku bakal bahas apa itu WebAssembly, cara compile Rust dan C ke WASM, bagaimana menghubungkannya dengan JavaScript, serta use case nyata di mana WASM bikin perbedaan besar. Semua disertai kode yang bisa kamu coba sendiri. ## Apa itu WebAssembly? WebAssembly adalah format instruksi biner untuk stack-based virtual machine. Kalau JavaScript adalah bahasa tingkat tinggi yang diinterpretasi (atau JIT-compiled), WASM adalah bytecode yang sudah dikompilasi lebih dulu. Browser cukup decode dan eksekusi - tidak perlu parsing ulang setiap kali. Keuntungan utama WASM: - **Cepat** - Eksekusi mendekati native speed. WASM bisa 10x-100x lebih cepat dari JavaScript untuk komputasi berat. - **Portabel** - Kode yang sama bisa jalan di browser, Node.js, atau runtime lain seperti Wasmer dan Wasmtime. - **Aman** - WASM berjalan di sandbox terisolasi. Tidak bisa mengakses DOM atau file system tanpa izin eksplisit dari JavaScript. - **Bahasa fleksibel** - Bisa dikompilasi dari C, C++, Rust, Go, AssemblyScript, dan banyak bahasa lain. - **Bekerja bersama JavaScript** - WASM tidak menggantikan JS, melainkan melengkapinya. JS menangani DOM dan interaksi UI, WASM menangani komputasi berat. Penting dipahami: WASM bukan pengganti JavaScript. Kamu tetap perlu JavaScript untuk memanipulasi DOM, handle event, dan fetch API. WASM unggul di tugas yang compute-intensive. ## Kapan Harus Pakai WASM? Tidak semua project perlu WASM. WASM masuk akal ketika: 1. **Image atau video processing** - Filter, compression, face detection. 2. **Game di browser** - Engine game seperti Unity dan Unreal sudah support export ke WASM. 3. **Computational heavy tasks** - Kriptografi, machine learning inference, simulasi fisika. 4. **Porting aplikasi desktop ke web** - Software seperti Figma dan AutoCAD memakai WASM untuk porting kode C++ mereka. 5. **Library yang sudah ada di C/C++/Rust** - Kamu bisa pakai library mature tanpa harus rewrite ke JavaScript. Kalau aplikasi kamu hanya CRUD biasa atau menampilkan halaman statis, kamu tidak butuh WASM. JavaScript sudah lebih dari cukup. ## Compile Rust ke WASM dengan wasm-bindgen Rust adalah bahasa yang paling populer untuk target WASM karena tooling-nya sangat matang. Package `wasm-bindgen` memudahkan komunikasi antara Rust dan JavaScript. ### Setup Pertama, install Rust dan tambahkan target WASM: ```bash curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh rustup target add wasm32-unknown-unknown cargo install wasm-bindgen-cli ``` Kalau mau lebih mudah, install `wasm-pack` yang automasi seluruh proses build: ```bash cargo install wasm-pack ``` ### Kode Rust Bikin project baru: ```bash cargo new --lib wasm-image-filter cd wasm-image-filter ``` Edit `Cargo.toml`: ```toml [package] name = "wasm-image-filter" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" ``` Sekarang tulis kode Rust yang melakukan grayscale filter pada array piksel gambar: ```rust // src/lib.rs use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn grayscale_filter(pixels: &mut [u8]) { // pixels adalah array RGBA: [R, G, B, A, R, G, B, A, ...] let len = pixels.len(); let mut i = 0; while i < len { let r = pixels[i] as f32; let g = pixels[i + 1] as f32; let b = pixels[i + 2] as f32; // Rumus luminance let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8; pixels[i] = gray; pixels[i + 1] = gray; pixels[i + 2] = gray; // Alpha (i+3) tetap tidak berubah i += 4; } } #[wasm_bindgen] pub fn blur_filter(pixels: &[u8], width: usize, height: usize) -> Vec { let mut result = pixels.to_vec(); let radius = 2; for y in radius..(height - radius) { for x in radius..(width - radius) { let mut sum_r = 0u32; let mut sum_g = 0u32; let mut sum_b = 0u32; let mut count = 0u32; for dy in -(radius as i32)..=(radius as i32) { for dx in -(radius as i32)..=(radius as i32) { let nx = (x as i32 + dx) as usize; let ny = (y as i32 + dy) as usize; let idx = (ny * width + nx) * 4; sum_r += pixels[idx] as u32; sum_g += pixels[idx + 1] as u32; sum_b += pixels[idx + 2] as u32; count += 1; } } let idx = (y * width + x) * 4; result[idx] = (sum_r / count) as u8; result[idx + 1] = (sum_g / count) as u8; result[idx + 2] = (sum_b / count) as u8; } } result } // Fungsi untuk hitung factorial - demo compute heavy task #[wasm_bindgen] pub fn fibonacci(n: u32) -> u64 { if n <= 1 { return n as u64; } let mut a: u64 = 0; let mut b: u64 = 1; for _ in 2..=n { let temp = a + b; a = b; b = temp; } b } ``` Annotation `#[wasm_bindgen]` membuat function bisa dipanggil dari JavaScript. Tanpa ini, function hanya ada di dalam WASM module dan tidak bisa diakses dari luar. ### Build dan Pakai di JavaScript Build dengan wasm-pack: ```bash wasm-pack build --target web ``` Ini menghasilkan folder `pkg/` yang berisi file `.wasm` dan JavaScript glue code. Sekarang pakai di HTML: ```html WASM Image Filter

``` Perhatikan bagaimana `grayscale_filter(pixels)` memodifikasi array secara langsung - tidak perlu copy data bolak-balik antara JavaScript dan WASM. Ini sangat penting untuk performa karena menghindari overhead serialization. ## Compile C ke WASM dengan Emscripten Selain Rust, kamu juga bisa compile kode C atau C++ ke WASM pakai Emscripten. Ini cocok kalau kamu sudah punya library C yang mature dan ingin dipakai di web. ### Install Emscripten ```bash git clone https://github.com/emscripten-core/emsdk.git cd emsdk ./emsdk install latest ./emsdk activate latest source ./emsdk_env.sh ``` ### Kode C ```c // mandelbrot.c - Hitung Mandelbrot set #include #include EMSCRIPTEN_KEEPALIVE int mandelbrot(double cx, double cy, int max_iter) { double x = 0.0; double y = 0.0; int iter = 0; while (x * x + y * y <= 4.0 && iter < max_iter) { double xtemp = x * x - y * y + cx; y = 2.0 * x * y + cy; x = xtemp; iter++; } return iter; } EMSCRIPTEN_KEEPALIVE void render_mandelbrot(int* buffer, int width, int height, double zoom, double offsetX, double offsetY) { for (int py = 0; py < height; py++) { for (int px = 0; px < width; px++) { double cx = (px - width / 2.0) / zoom + offsetX; double cy = (py - height / 2.0) / zoom + offsetY; int iter = mandelbrot(cx, cy, 256); // Map iterasi ke warna if (iter == 256) { buffer[py * width + px] = 0; // hitam (di dalam set) } else { int r = (iter * 8) % 256; int g = (iter * 16) % 256; int b = (iter * 32) % 256; buffer[py * width + px] = (255 << 24) | (b << 16) | (g << 8) | r; } } } } ``` `EMSCRIPTEN_KEEPALIVE` memastikan function tidak dihapus oleh linker optimization dan bisa dipanggil dari JavaScript. ### Compile ```bash emcc mandelbrot.c -o mandelbrot.js \ -s WASM=1 \ -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \ -s EXPORTED_FUNCTIONS='["_mandelbrot", "_render_mandelbrot"]' \ -O3 ``` Flag `-O3` mengaktifkan optimisasi maksimal. Hasilnya adalah dua file: `mandelbrot.wasm` (binary) dan `mandelbrot.js` (JavaScript glue code yang handle loading dan memory management). ### Pakai di JavaScript ```javascript Module = { onRuntimeReady: function() { const width = 800; const height = 600; // Alokasi memory di WASM heap const bufferPtr = Module._malloc(width * height * 4); // Panggil fungsi C const start = performance.now(); Module._render_mandelbrot(bufferPtr, width, height, 300.0, -0.5, 0.0); const elapsed = performance.now() - start; console.log(`Render time: ${elapsed.toFixed(2)}ms`); // Copy hasil ke canvas const result = new Uint8Array( Module.HEAP8.buffer, bufferPtr, width * height * 4 ); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const imageData = ctx.createImageData(width, height); imageData.data.set(result); ctx.putImageData(imageData, 0, 0); // Free memory Module._free(bufferPtr); } }; ``` Penting: kamu harus manually alokasikan dan membebaskan memory saat bekerja dengan C/WASM. Lupa `_free()` akan menyebabkan memory leak. ## JS Glue Code: Menghubungkan Dua Dunia WASM tidak bisa langsung mengakses DOM, fetch API, atau console. Semua interaksi dengan browser harus melalui JavaScript. Inilah mengapa "glue code" diperlukan. ### Passing Data Kompleks Untuk string dan object kompleks, kamu butuh marshalling: ```rust // Rust side use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn process_text(input: &str) -> String { // WASM menerima string dari JS let words: Vec<&str> = input.split_whitespace().collect(); format!("Jumlah kata: {}", words.len()) } #[wasm_bindgen] pub struct ImageProcessor { width: u32, height: u32, data: Vec, } #[wasm_bindgen] impl ImageProcessor { #[wasm_bindgen(constructor)] pub fn new(width: u32, height: u32) -> ImageProcessor { ImageProcessor { width, height, data: vec![0; (width * height * 4) as usize], } } pub fn set_pixel(&mut self, x: u32, y: u32, r: u8, g: u8, b: u8) { let idx = ((y * self.width + x) * 4) as usize; self.data[idx] = r; self.data[idx + 1] = g; self.data[idx + 2] = b; self.data[idx + 3] = 255; } pub fn invert(&mut self) { for chunk in self.data.chunks_exact_mut(4) { chunk[0] = 255 - chunk[0]; chunk[1] = 255 - chunk[1]; chunk[2] = 255 - chunk[2]; } } pub fn get_data_ptr(&self) -> *const u8 { self.data.as_ptr() } } ``` ```javascript // JavaScript side import init, { ImageProcessor, process_text } from './pkg/wasm_image_filter.js'; await init(); // String passing const result = process_text("Halo dunia dari WebAssembly"); console.log(result); // "Jumlah kata: 4" // Object dengan constructor const processor = new ImageProcessor(800, 600); processor.set_pixel(100, 200, 255, 0, 0); processor.invert(); // Akses raw memory untuk performa maksimal const ptr = processor.get_data_ptr(); const imageData = new Uint8Array(wasmMemory.buffer, ptr, 800 * 600 * 4); ``` ### Import Fungsi JavaScript ke WASM WASM juga bisa memanggil fungsi JavaScript. Ini berguna untuk logging, DOM manipulation, atau API calls: ```rust // Rust side use wasm_bindgen::prelude::*; #[wasm_bindgen] extern "C" { #[wasm_bindgen(js_namespace = console)] fn log(s: &str); } #[wasm_bindgen] pub fn compute_and_log(n: u32) { log(&format!("Memulai komputasi untuk n = {}", n)); let mut result = 0u64; for i in 0..n { result = result.wrapping_add(fibonacci(i)); } log(&format!("Hasil: {}", result)); } fn fibonacci(n: u32) -> u64 { if n <= 1 { return n as u64; } let mut a: u64 = 0; let mut b: u64 = 1; for _ in 2..=n { let temp = a + b; a = b; b = temp; } b } ``` Block `extern "C"` mendeklarasikan bahwa function `log` akan disediakan oleh JavaScript (dari namespace `console`). ## Use Case Nyata: Gaming di Browser Game engine besar seperti Unity dan Unreal Engine sudah mendukung export ke WebAssembly. Game seperti Doom 3 dan Cube 2 sudah berjalan di browser berkat WASM. Contoh arsitektur game sederhana dengan WASM: ```rust #[wasm_bindgen] pub struct Game { entities: Vec, score: u32, } struct Entity { x: f32, y: f32, vx: f32, vy: f32, entity_type: EntityType, } enum EntityType { Player, Enemy, Bullet, } #[wasm_bindgen] impl Game { #[wasm_bindgen(constructor)] pub fn new() -> Game { Game { entities: vec![], score: 0, } } pub fn update(&mut self, delta_time: f32) { // Update posisi semua entity for entity in &mut self.entities { entity.x += entity.vx * delta_time; entity.y += entity.vy * delta_time; } // Collision detection self.check_collisions(); } pub fn get_positions(&self) -> Vec { // Return array flat: [x1, y1, x2, y2, ...] let mut positions = Vec::new(); for entity in &self.entities { positions.push(entity.x); positions.push(entity.y); } positions } fn check_collisions(&mut self) { // Logika collision detection // ... } } ``` Game loop-nya sendiri tetap di JavaScript pakai `requestAnimationFrame`: ```javascript let game = new Game(); let lastTime = performance.now(); function gameLoop(currentTime) { const deltaTime = (currentTime - lastTime) / 1000; lastTime = currentTime; // Physics di WASM game.update(deltaTime); // Rendering di JavaScript (Canvas/WebGL) const positions = game.get_positions(); render(positions); requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop); ``` Pola ini menggabungkan kekuatan keduanya: WASM menangani physics dan game logic yang compute-intensive, sementara JavaScript menangani rendering dan input handling. ## Tips Performa Beberapa hal yang perlu kamu perhatikan saat bekerja dengan WASM: 1. **Minimalkan data passing** - Setiap kali kamu kirim data antara JS dan WASM, ada overhead. Pakai shared memory atau pointer langsung saat memungkinkan. 2. **Pakai typed arrays** - `Uint8Array`, `Float32Array`, dll jauh lebih cepat dari array JavaScript biasa. 3. **Batch operasi** - Jangan panggil fungsi WASM ribuan kali untuk hal kecil. Kumpulkan jadi satu panggilan besar. 4. **Aktifkan optimisasi** - Build dengan `-O3` atau `--release` untuk performa maksimal. 5. **Profile dulu** - Pakai Chrome DevTools untuk memastikan WASM benar-benar lebih cepat dari JS untuk use case kamu. Kadang JS dengan JIT sudah cukup cepat. ## Kesimpulan WebAssembly membuka kemungkinan baru untuk web development. Hal-hal yang dulu hanya bisa dilakukan di desktop sekarang bisa berjalan di browser dengan performa mendekati native. Poin-poin penting yang perlu kamu ingat: - **WASM bukan pengganti JavaScript** - keduanya saling melengkapi. JS untuk UI dan DOM, WASM untuk komputasi berat. - **Rust dengan wasm-bindgen** adalah kombinasi paling produktif untuk mulai, karena tooling-nya matang dan ergonomis. - **C/C++ dengan Emscripten** cocok kalau kamu ingin porting library yang sudah ada. - **Perhatikan data passing** - ini bottleneck utama. Pakai shared memory sebisa mungkin. - **Profile sebelum optimize** - pastikan WASM benar-benar memberikan peningkatan untuk kasus kamu. Mulai dari hal kecil: coba compile satu fungsi sederhana ke WASM dan benchmark terhadap versi JavaScript-nya. Kalau kamu melihat peningkatan signifikan, saatnya explore lebih dalam. Kalau tidak, mungkin JavaScript sudah cukup untuk kebutuhan kamu - dan itu tidak masalah. WebAssembly masih terus berkembang. Fitur seperti WASI (WebAssembly System Interface), garbage collection support, dan threading sudah atau sedang dirilis. Masa depan WASM sangat menarik untuk diikuti.