Giriş
Tarayıcıda yüksek performanslı görüntü işleme yapmak çoğu zaman JavaScript ile zorlayıcı olabilir. Rust ve WebAssembly (WASM) ikilisi sayesinde, CPU yoğun işlemleri güvenli ve hızlı biçimde web tarafına taşıyabilirsiniz. Bu rehberde, Rust ile basit bir gri tonlama filtresi yazacak, wasm-bindgen ve wasm-pack kullanarak WebAssembly’ye derleyecek ve sonucu bir web projesinde çağıracağız. Amaç sade, pratik ve SEO uyumlu bir anlatımla sizi hızlıca üretken hale getirmek.
Neden Rust + WebAssembly?
WebAssembly, tarayıcıda neredeyse yerel hızda çalışabilen bir bayt kod formatıdır. Rust ise bellek güvenliği, sıfır maliyetli soyutlamalar ve modern dil özellikleriyle WebAssembly hedefi için biçilmiş kaftandır. Bu kombinasyon sayesinde, görüntü işleme, ses işleme, veri sıkıştırma gibi CPU yoğun iş yüklerini JavaScript’in tek iş parçacıklı darboğazından çıkarır ve kullanıcıya akıcı bir deneyim sunarsınız.
Önkoşullar ve Kurulum
Başlamadan önce sisteminizde Rust (stable), wasm-pack ve bir paket yöneticisi (npm veya pnpm) kurulu olmalı. Kurulum komutları: curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh ve cargo install wasm-pack. Web tarafı için basit bir Vite veya React projesi işinizi görecektir.
Rust Kütüphanesini Oluşturma
Yeni bir Rust kütüphanesi oluşturun: cargo new --lib image_filter_wasm. Ardından Cargo.toml dosyanızı aşağıdaki gibi düzenleyin:
[package]
name = "image_filter_wasm"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
Gri Tonlama Filtresi Yazımı
Temel yaklaşımımız, bir Uint8Array içindeki RGBA piksel verisini alıp, gri tonlama uygulayarak yine Uint8Array olarak geri döndürmek. src/lib.rs içeriği örneği:
use wasm_bindgen::prelude::*;
use js_sys::Uint8Array;
#[wasm_bindgen]
pub fn grayscale(input: Uint8Array) -> Uint8Array {
let mut data = input.to_vec();
let len = data.len();
let mut i = 0;
while i + 3 < len {
let r = data[i] as u32;
let g = data[i + 1] as u32;
let b = data[i + 2] as u32;
// Luma (BT.709) yaklaşımı
let y = (0.2126 * r as f32 + 0.7152 * g as f32 + 0.0722 * b as f32) as u8;
data[i] = y;
data[i + 1] = y;
data[i + 2] = y;
i += 4;
}
Uint8Array::from(&data[..])
}
Yukarıdaki örnekte wasm-bindgen ile Uint8Array türünü kullanarak kopyalama maliyetini yönetilebilir düzeyde tutuyoruz. Daha ileri optimizasyonlar için tek seferlik bellek ayırma ve işaretçi tabanlı API’ler de tercih edilebilir.
WebAssembly’ye Derleme
Klasör kökünde wasm-pack build --target web çalıştırın. Bu komut pkg klasöründe tarayıcı uyumlu JS wrapper ve .wasm dosyasını üretir. Alternatif olarak --target bundler ile bundler tabanlı projelere uygun çıktı alabilirsiniz.
Web Projesine Entegrasyon (React Örneği)
Bir React projesinde, canvas üzerinden ImageData elde edip pikselleri WASM fonksiyonuna aktaracağız. Basit bir akış şu şekilde olabilir:
import init, { grayscale } from "./pkg/image_filter_wasm.js";
async function runFilter(ctx, width, height) {
await init();
const imageData = ctx.getImageData(0, 0, width, height);
const input = new Uint8Array(imageData.data.buffer.slice(0));
const output = grayscale(input);
imageData.data.set(output);
ctx.putImageData(imageData, 0, 0);
}
Bu kod, canvas içindeki görseli alır, pikselleri grayscale fonksiyonundan geçirir ve yeniden kanvasa yazar. Geri dönüşte yeni bir Uint8Array aldığımız için doğrudan set ile kopyalamak yeterlidir.
Performans İpuçları
- Kopyalamaları azaltın: Sürekli yeni Uint8Array oluşturmak yerine, tek bir tamponu tekrar kullanacak bir API tasarlayın (ör. işaretçi ve uzunluk üzerinden, ileri düzey wasm-bindgen teknikleriyle).
- SIMD etkinleştirin: Rust’ta wasm32-unknown-unknown hedefi için SIMD desteği stabildir. Yapılandırmada RUSTFLAGS="-C target-feature=+simd128" kullanabilir, wasm-opt -O3 ile Binaryen optimizasyonlarına başvurabilirsiniz.
- İş yükünü ayırın: Büyük resimlerde ana iş parçacığını kilitlememek için Web Worker üzerinden çağrı yapın. Çok iş parçacığı (WASM threads) kullanacaksanız SharedArrayBuffer gerekeceğinden COOP/COEP ile Cross-Origin Isolation aktif olmalı.
Karşılaşılabilecek Sorunlar
- Paketleme: Bazı bundler’lar .wasm dosyalarının kopyalanması ve yüklenmesi için özel yapılandırma ister. --target web çıktısı, modern bundler’larla genelde sorunsuzdur.
- Tür uyumsuzluğu: ImageData.data Uint8ClampedArray döndürür. Bu nedenle Uint8Array dönüşümü yaptığımızdan emin olmalıyız.
- Boyut: WASM paketinin boyutunu düşük tutmak için gereksiz bağımlılıklardan kaçının ve wasm-opt kullanın.
Test ve Ölçüm
Basit bir FPS sayacı veya zaman damgası ile performance.now() ölçümleri alarak JavaScript ve WASM sürümlerini kıyaslayın. Büyük çözünürlükteki görsellerde, Rust + WebAssembly yaklaşımının belirgin şekilde daha düşük gecikme ve daha yüksek kare/saniye ürettiğini göreceksiniz.
Sonuç
Rust ve WebAssembly, tarayıcıda yüksek performanslı görüntü işleme için güçlü ve sürdürülebilir bir çözüm sunar. Bu rehberde, sıfırdan bir gri tonlama filtresi yazarak derleme, entegrasyon ve optimizasyon adımlarını gördük. Aynı yöntemi keskinleştirme, bulanıklaştırma, kenar algılama gibi farklı filtrelerle genişletebilir, hatta gerçek zamanlı kamera akışlarına uygulayabilirsiniz. Modern web uygulamalarında performansı öne çıkarmak istiyorsanız, Rust + WASM öğrenme eğrisine kesinlikle değer.
