Kapsamlı Rehber: WebAssembly (Wasm) ile C/C++ Kodlarını Tarayıcıda Çalıştırma – Derleme Adımları, JS Entegrasyonu ve Mimari Diyagram

1. WebAssembly (Wasm) Nedir? Neden C/C++ Kullanmalıyız?

WebAssembly, modern tarayıcıların native hızda çalıştırabildiği düşük seviyeli bir bytecode formatıdır. LLVM tabanlı derleyiciler (örn. clang, emscripten) aracılığıyla C, C++, Rust gibi dillerden Wasm modülleri üretilebilir. Peki neden C/C++ tercih edilmeli?

• Performans: CPU yoğun işlemler (örn. görüntü işleme, fizik motorları) Wasm ile 10-100x hızlanabilir. Örneğin, bir JPEG kod çözücü C++ ile yazılıp Wasm’e derlendiğinde, JavaScript’e kıyasla 30 kat daha hızlı çalışabilir.
• Taşınabilirlik: Aynı Wasm modülü, tarayıcı, sunucu (Node.js) veya edge ortamlarında (Cloudflare Workers) çalışabilir.
• Kod Mirası: Milyonlarca satırlık C/C++ kütüphaneleri (OpenCV, FFmpeg) Wasm aracılığıyla tarayıcıya taşınabilir.

1.1. Wasm’in Temel Özellikleri

2. Derleme Zinciri: C/C++’dan Wasm’e Adım Adım

Wasm modülü üretmek için Emscripten (emcc) veya wasm-pack (Rust için) gibi araçlar kullanılır. Bu bölümde, C++ kodunu Wasm’e derlemek için gereken adımları detaylandıracağız.

2.1. Geliştirme Ortamı Kurulumu

1. Emscripten SDK Kurulumu (Linux/macOS):

# Emscripten SDK'yı indir ve kur
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

2. Doğrulama:

emcc --version
# Çıktı: emcc (Emscripten gcc/clang-like replacement) 3.1.39 (commit ...)

2.2. Örnek C++ Kodu ve Derleme

Basit bir Fibonacci hesaplayıcısı yazalım:

fibonacci.cpp

#include 

// WebAssembly'den dışa aktarılacak fonksiyon
EMSCRIPTEN_KEEPALIVE
extern "C" int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

Derleme Komutu:

emcc fibonacci.cpp -o fibonacci.js \
  -s WASM=1 \
  -s MODULARIZE=1 \
  -s EXPORT_ES6=1 \
  -s EXPORTED_FUNCTIONS='["_fibonacci"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

Parametre Açıklamaları:

• -s WASM=1: Wasm modülü üret (JS glue koduyla birlikte).
• -s MODULARIZE=1: ES6 modülü olarak dışa aktar.
• -s EXPORT_ES6=1: ESM formatında çıktı.
• -s EXPORTED_FUNCTIONS: Dışa aktarılacak C fonksiyonları.

2.3. Derleme Çıktıları

Derleme sonucunda iki dosya oluşur:

1. fibonacci.wasm: Bytecode modülü.
2. fibonacci.js: JS glue kodu (Wasm modülünü yükler ve yönetir).

3. JavaScript ile Entegrasyon: Wasm Modülünü Kullanma

Wasm modülünü JS’de kullanmak için iki ana yöntem vardır:

1. Emscripten Glue Kodu (otomatik üretilen JS).
2. Manuel Entegrasyon (Wasm modülünü doğrudan yükleme).

3.1. Emscripten Glue Kodu ile Kullanım

index.js

import init, { fibonacci } from './fibonacci.js';

(async () => {
  // Wasm modülünü başlat
  await init();
  
  // C fonksiyonunu çağır
  const result = fibonacci(10);
  console.log(`Fibonacci(10) = ${result}`); // Çıktı: 55
})();

3.2. Manuel Entegrasyon (Daha Kontrollü)

manual-load.js

async function loadWasm() {
  const response = await fetch('fibonacci.wasm');
  const bytes = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(bytes);
  
  // C fonksiyonunu çağır
  const fib = instance.exports.fibonacci;
  console.log(`Fibonacci(10) = ${fib(10)}`); // Çıktı: 55
}

loadWasm();

4. Bellek Yönetimi ve Performans Optimizasyonları

Wasm modülleri, JS ile linear memory (ArrayBuffer) üzerinden iletişim kurar. Bu bölümde, bellek yönetiminin inceliklerini ve performans optimizasyonlarını ele alacağız.

4.1. Linear Memory ve JS ile Etkileşim

Wasm modülü, belleği tek bir ArrayBuffer olarak dışa aktarır. JS ile veri alışverişi için bu bellek bloğu kullanılır.

Örnek: Dizi Aktarımı

// C++: Bir diziyi JS'ye aktar
EMSCRIPTEN_KEEPALIVE
extern "C" void fillArray(int* arr, int size) {
  for (int i = 0; i < size; i++) {
    arr[i] = i * 2;
  }
}

JS Tarafı:

const memory = new Uint32Array(wasmModule.exports.memory.buffer);
const arrPtr = wasmModule.exports.malloc(10 * 4); // 10 eleman için bellek ayır
wasmModule.exports.fillArray(arrPtr, 10);

// JS'ye kopyala
const jsArray = new Uint32Array(memory.buffer, arrPtr, 10);
console.log(jsArray); // [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]

// Belleği serbest bırak
wasmModule.exports.free(arrPtr);

4.2. Performans Optimizasyonları

1. Bellek Kopyalamadan Kaçının:

   • JS ve Wasm arasında veri aktarımı yaparken, SharedArrayBuffer kullanın (ancak güvenlik kısıtlamalarına dikkat edin).
   • EM_JS makrosu ile JS fonksiyonlarını C++’tan doğrudan çağırın.

2. Wasm Modülünü Önceden Başlatın:

   • Wasm modülünü streaming ile yükleyin (WebAssembly.instantiateStreaming).
   • İlk yükleme süresini azaltmak için preload kullanın.

3. Optimizasyon Bayrakları:

   emcc -O3 -s TOTAL_MEMORY=64MB -s ALLOW_MEMORY_GROWTH=1
   

   • -O3: Maksimum optimizasyon.
   • TOTAL_MEMORY: Başlangıç bellek boyutu.
   • ALLOW_MEMORY_GROWTH: Bellek otomatik büyüsün mü?

5. Mimari Diyagram: Wasm ve JS Entegrasyonu

Aşağıdaki SVG diyagramı, Wasm modülünün JS uygulamasıyla nasıl entegre olduğunu göstermektedir:

Wasm Modülü C/C++ Kodu Derlenmiş Bytecode

JS Uygulaması

Linear Memory

init()

fibonacci()

malloc()

free()

Wasm Modülünü Başlat C Fonksiyonunu Çağır Bellek Ayır Belleği Serbest Bırak

ArrayBuffer

6. Prodüksiyon İçin İpuçları ve Tuzaklar

6.1. Hata Ayıklama ve Debugging

• Source Maps: Emscripten, -g4 bayrağı ile source map üretebilir:

  emcc -g4 -s SAFE_HEAP=1
  

• Chrome DevTools: Wasm modüllerini disassemble edebilir ve belleği inceleyebilirsiniz.
• Logging: EM_JS ile JS konsoluna log yazabilirsiniz:

  EM_JS(void, log_message, (const char* msg), {
    console.log(UTF8ToString(msg));
  });
  

6.2. Güvenlik ve Kısıtlamalar

• Sandboxing: Wasm modülleri, tarayıcı güvenlik modeli içinde çalışır. Dosya sistemi erişimi (FS API) veya ağ çağrıları (fetch) için JS proxy kullanın.
• Spectre/Meltdown: Wasm, bu tür saldırılara karşı savunmasızdır. Kritik verileri SharedArrayBuffer ile paylaşmayın.

6.3. CI/CD Entegrasyonu

Wasm modüllerini GitHub Actions veya GitLab CI ile derlemek için:

.github/workflows/build-wasm.yml

name: Build Wasm
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: mymindstorm/setup-emsdk@v11
      - run: emcc fibonacci.cpp -o fibonacci.js -s WASM=1 -O3
      - uses: actions/upload-artifact@v3
        with:
          name: wasm-module
          path: |
            fibonacci.wasm
            fibonacci.js

7. Gerçek Dünya Uygulamaları ve Örnekler

7.1. Görüntü İşleme: OpenCV ile Yüz Tanıma

OpenCV, Wasm’e derlenerek tarayıcıda çalıştırılabilir. Örnek:

emcc opencv.cpp -o opencv.js \
  -I/path/to/opencv/include \
  -L/path/to/opencv/lib \
  -lopencv_core -lopencv_imgproc -lopencv_objdetect

JS Entegrasyonu:

const img = document.getElementById('input-image');
const canvas = document.getElementById('output-canvas');
const ctx = canvas.getContext('2d');

// OpenCV fonksiyonunu çağır
Module.onRuntimeInitialized = () => {
  const faces = Module.detectFaces(img);
  ctx.drawImage(img, 0, 0);
  faces.forEach(face => {
    ctx.strokeStyle = 'red';
    ctx.strokeRect(face.x, face.y, face.width, face.height);
  });
};

7.2. Fizik Motoru: Bullet3 ile 3D Simülasyon

Bullet3, Wasm’e derlenerek tarayıcıda çalışabilir:

emcc bullet3.cpp -o bullet3.js \
  -I/path/to/bullet3/include \
  -L/path/to/bullet3/lib \
  -lBulletDynamics -lBulletCollision

Kullanım Senaryosu:

• Oyun motorları (örn. Three.js ile entegrasyon).
• AR/VR uygulamaları (WebXR ile birlikte).

8. Sonuç ve Gelecek Adımlar

WebAssembly, tarayıcıda native performans sunan oyun değiştirici bir teknolojidir. Bu rehberde:

• C/C++ kodlarını Wasm’e derlemeyi,
• JS ile entegrasyonun inceliklerini,
• Bellek yönetimi ve performans optimizasyonlarını,
• Prodüksiyon ortamında karşılaşılacak zorlukları ele aldık.\n Gelecek Adımlar:

1. WASI (WebAssembly System Interface) ile sistem çağrıları yapmayı öğrenin.
2. Threading desteği (-pthread) ile çok çekirdekli uygulamalar geliştirin.
3. Wasm Component Model ile modüler uygulamalar tasarlayın.

Wasm, önümüzdeki yıllarda web uygulamalarının performansını kökten değiştirecek. Bu rehberle, artık siz de bu devrimin bir parçası olabilirsiniz.