WEBGPU GPU-COMPUTING DATA-VISUALIZATION SCIENTIFIC-COMPUTING SIMULATION WEB-PERFORMANCE BROWSER-API HIGH-PERFORMANCE JAVASCRIPT MODERN-WEB WEB-DEVELOPMENT COMPUTE-SHADER

WebGPU untuk Simulasi dan Visualisasi Data Skala Besar: Memanfaatkan Kekuatan GPU di Browser

⏱️ 11 menit baca
👨‍💻

WebGPU untuk Simulasi dan Visualisasi Data Skala Besar: Memanfaatkan Kekuatan GPU di Browser

1. Pendahuluan

Pernahkah Anda membayangkan menjalankan simulasi fisika kompleks, model keuangan dengan jutaan titik data, atau visualisasi ilmiah interaktif berskala besar langsung di browser web Anda? Dulu, ini mungkin terdengar seperti mimpi di siang bolong. Browser web secara tradisional mengandalkan CPU, yang hebat untuk tugas-tugas berurutan, tetapi sering kewalahan ketika dihadapkan pada komputasi paralel masif yang dibutuhkan oleh skenario di atas.

Masalahnya jelas: aplikasi web modern semakin dituntut untuk melakukan lebih banyak komputasi intensif, baik itu untuk game, editor gambar, atau analisis data real-time. Mengandalkan CPU saja akan membuat aplikasi lambat, tidak responsif, dan memakan banyak daya baterai pengguna.

Di sinilah WebGPU hadir sebagai game-changer. WebGPU adalah API web baru yang memberikan aplikasi web akses langsung dan performa tinggi ke kemampuan komputasi GPU perangkat keras. Ini bukan sekadar peningkatan dari WebGL; WebGPU dirancang dari awal untuk komputasi modern, menawarkan kontrol lebih granular dan dukungan untuk compute shaders yang merupakan kunci untuk membuka potensi GPU di luar hanya rendering grafis 3D.

Artikel ini akan membawa Anda menyelami bagaimana WebGPU dapat dimanfaatkan secara praktis untuk simulasi dan visualisasi data skala besar, mengubah browser menjadi kanvas untuk inovasi komputasi yang sebelumnya hanya mungkin di aplikasi desktop native. Mari kita manfaatkan kekuatan GPU untuk aplikasi web yang lebih cepat, lebih kaya, dan lebih interaktif! ✨

2. Mengapa WebGPU untuk Simulasi dan Visualisasi Data?

Untuk memahami mengapa WebGPU begitu revolusioner untuk simulasi dan visualisasi data skala besar, kita perlu memahami perbedaan fundamental antara CPU dan GPU, serta batasan teknologi web sebelumnya.

CPU vs. GPU: Dua Otak Berbeda

📌 CPU (Central Processing Unit) adalah “otak” serbaguna komputer Anda. Ia memiliki beberapa core yang sangat kuat, dirancang untuk menangani berbagai jenis tugas berurutan dengan sangat cepat. Ini ideal untuk logika aplikasi, manajemen memori, dan tugas-tugas yang tidak dapat diparalelkan.

📌 GPU (Graphics Processing Unit), di sisi lain, adalah “otak” yang sangat spesialis. Ia memiliki ribuan core yang lebih sederhana, dirancang untuk melakukan banyak operasi yang sama secara bersamaan (paralel). Ini sempurna untuk tugas-tugas seperti:

Bayangkan CPU sebagai manajer proyek yang sangat cerdas yang bisa mengelola berbagai tugas dari A sampai Z. GPU adalah seperti ribuan pekerja pabrik yang masing-masing hanya tahu cara melakukan satu hal (misalnya, memotong kain), tetapi mereka bisa melakukannya secara massal dan bersamaan.

Batasan WebGL dan Canvas 2D

Sebelum WebGPU, opsi utama untuk komputasi berat di web adalah:

❌ Masalahnya: WebGL tidak dirancang untuk compute shaders, yaitu program yang berjalan di GPU khusus untuk komputasi, tanpa terkait langsung dengan rendering piksel.

Keunggulan WebGPU

WebGPU mengatasi batasan ini dengan beberapa cara:

✅ Dengan WebGPU, Anda bisa memanfaatkan ribuan core GPU untuk mempercepat simulasi partikel, pemrosesan citra medis, model Monte Carlo, atau visualisasi data spasial yang sebelumnya tidak mungkin dilakukan di browser.

3. Konsep Dasar WebGPU yang Perlu Diketahui

Sebelum kita terjun ke contoh kode, mari kita pahami beberapa konsep inti WebGPU. Analogi yang bagus adalah membayangkan GPU sebagai sebuah “pabrik” yang memiliki banyak “pekerja” (core shader) yang dapat Anda tugaskan untuk melakukan pekerjaan.

Memahami konsep-konsep ini adalah fondasi untuk memanfaatkan WebGPU.

4. Membangun Simulasi Sederhana dengan Compute Shader

Mari kita buat contoh praktis: simulasi pergerakan partikel 2D sederhana. Kita akan menghitung posisi baru partikel di GPU menggunakan compute shader.

💡 Skenario: Kita punya N partikel, masing-masing dengan posisi (x, y) dan kecepatan (vx, vy). Setiap frame, kita ingin mengupdate posisi berdasarkan kecepatan, dan mungkin menambahkan sedikit “gravitasi” atau gesekan.

// index.js
async function initWebGPU() {
    if (!navigator.gpu) {
        alert("WebGPU tidak didukung di browser ini!");
        return;
    }

    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();

    const NUM_PARTICLES = 100000; // 100 ribu partikel!
    const PARTICLE_SIZE = 4 * 4; // 4 float per partikel (x, y, vx, vy)
    const bufferSize = NUM_PARTICLES * PARTICLE_SIZE;

    // 1. Membuat Buffer untuk data partikel (input & output)
    const particleBuffer = device.createBuffer({
        size: bufferSize,
        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
    });

    // Inisialisasi data partikel di CPU
    const initialParticleData = new Float32Array(NUM_PARTICLES * 4);
    for (let i = 0; i < NUM_PARTICLES; ++i) {
        initialParticleData[i * 4 + 0] = Math.random() * 800; // x
        initialParticleData[i * 4 + 1] = Math.random() * 600; // y
        initialParticleData[i * 4 + 2] = (Math.random() - 0.5) * 2; // vx
        initialParticleData[i * 4 + 3] = (Math.random() - 0.5) * 2; // vy
    }
    device.queue.writeBuffer(particleBuffer, 0, initialParticleData);

    // 2. Membuat Shader Module (WGSL)
    const shaderModule = device.createShaderModule({
        code: `
            struct Particle {
                pos: vec2<f32>,
                vel: vec2<f32>,
            };

            @group(0) @binding(0) var<storage, read_write> particles: array<Particle>;

            @compute
            @workgroup_size(256) // Jumlah thread per workgroup
            fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
                let index = global_id.x;
                if (index >= arrayLength(&particles)) {
                    return;
                }

                var p = particles[index];
                p.pos += p.vel;

                // Batas layar sederhana
                if (p.pos.x < 0 || p.pos.x > 800) {
                    p.vel.x *= -1;
                }
                if (p.pos.y < 0 || p.pos.y > 600) {
                    p.vel.y *= -1;
                }

                // Sedikit gesekan
                p.vel *= 0.99;

                particles[index] = p;
            }
        `,
    });

    // 3. Membuat Bind Group Layout dan Bind Group
    const bindGroupLayout = device.createBindGroupLayout({
        entries: [{
            binding: 0,
            visibility: GPUShaderStage.COMPUTE,
            buffer: { type: "storage" },
        }],
    });

    const bindGroup = device.createBindGroup({
        layout: bindGroupLayout,
        entries: [{
            binding: 0,
            resource: { buffer: particleBuffer },
        }],
    });

    // 4. Membuat Compute Pipeline
    const computePipeline = device.createComputePipeline({
        layout: device.createPipelineLayout({
            bindGroupLayouts: [bindGroupLayout]
        }),
        compute: {
            module: shaderModule,
            entryPoint: "main",
        },
    });

    // Fungsi untuk menjalankan simulasi satu langkah
    function runSimulationStep() {
        const commandEncoder = device.createCommandEncoder();
        const passEncoder = commandEncoder.beginComputePass();
        passEncoder.setPipeline(computePipeline);
        passEncoder.setBindGroup(0, bindGroup);
        // Dispatch workgroups: (jumlah_partikel / workgroup_size)
        // Pastikan pembulatan ke atas
        const workgroupCount = Math.ceil(NUM_PARTICLES / 256);
        passEncoder.dispatchWorkgroups(workgroupCount);