WebGL - Pengenalan

Hai teman-teman, para ahli WebGL masa depan! Selamat datang ke perjalanan menarik kita ke dunia grafik 3D di web. Saya sangat gembira untuk menjadi panduanmu saat kita menjelajahi realm yang menarik dari WebGL. Sebagai orang yang telah mengajarkan grafik komputer selama lebih dari satu dekade, saya dapat menjamin bahwa meskipun jalan yang akan kita tempuh mungkin tampak menakutkan, itu juga sangat menggembirakan. Jadi, pasang sabuk keselamatanmu dan mari kita masuk ke dalam!

Apa Itu OpenGL?

Sebelum kita melompat ke WebGL, mari kitaambil jalan singkat untuk memahami pendahulunya, OpenGL. Gamalkan Anda seorang seniman yang mencoba menggambar sebuah karya kesenian yang memukau. OpenGL adalah seperti set cat dan kuas ajaib Anda yang memungkinkan Anda menciptakan seni visual yang menakjubkan di layar komputer Anda.

OpenGL, singkatan dari Open Graphics Library, adalah API (Application Programming Interface) multi-platform untuk merender grafik vektor 2D dan 3D. Ini telah ada sejak 1992 dan telah menjadi dasar dari banyak permainan, simulasi, dan aplikasi visual.

Berikut adalah analogi sederhana: Jika layar komputer Anda adalah kanvas, maka OpenGL adalah set alat yang membantu para programer untuk menggambar di kanvas itu dengan detail dan kecepatan yang luar biasa.

Apa Itu WebGL?

Sekarang, mari kita geser fokus ke bintang pertunjukan kita: WebGL. Jika OpenGL adalah kuas untuk aplikasi desktop, WebGL adalah kuas untuk web. Ini adalah API JavaScript yang memungkinkan Anda menciptakan grafik 3D yang menakjubkan langsung di browser Anda, tanpa memerlukan plugin apa pun.

WebGL membawa kekuatan OpenGL ES 2.0 (versi OpenGL untuk sistem terbenam) ke web, memungkinkan pengembang untuk memanfaatkan GPU (Graphics Processing Unit) secara langsung melalui JavaScript.

Berikut adalah contoh sederhana "Hello, World!" dalam WebGL:

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Tidak dapat menginisialisasi WebGL. Browser atau mesin Anda mungkin tidak mendukungnya.");
return;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;
</script>

Kode ini menciptakan kanvas hitam di halaman web Anda. Mungkin tampak tidak menarik, tapi ini adalah langkah pertama Anda ke dunia WebGL!

Siapa yang Mengembangkan WebGL

WebGL dikembangkan oleh Khronos Group, yang juga berada di belakang OpenGL. Ini pertama kali diperkenalkan pada tahun 2011, dan sejak itu, telah merevolusi cara kita berpikir tentang grafik di web.

Catatan menarik: Pengembangan WebGL diinspirasi oleh eksperimen yang dilakukan oleh Vladimir Vukićević di Mozilla. Dia menciptakan elemen kanvas yang menampilkan OpenGL ES ke JavaScript, yang menjadi dasar untuk apa yang kemudian menjadi WebGL.

Rendering

Rendering adalah proses penghasilan gambar dari model 2D atau 3D. Dalam WebGL, ini terjadi secara real-time, yang berarti gambar dihasilkan di tempat saat Anda berinteraksi dengannya.

Berikut adalah contoh sederhana yang merender segitiga merah:

// Program shader verteks
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// Program shader fragmen
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// ... (kode inisialisasi)

// Menggambar scene
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Bersihkan ke hitam, sepenuhnya opak
gl.clearDepth(1.0);                 // Bersihkan semuanya
gl.enable(gl.DEPTH_TEST);           // Aktifkan pengujian kedalaman
gl.depthFunc(gl.LEQUAL);            // Hal yang dekat menyembunyikan hal yang jauh

// Bersihkan kanvas sebelum kita mulai menggambar di atasnya.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// ... (atur scene)

{
const numComponents = 2;  // keluarkan 2 nilai per iterasi
const type = gl.FLOAT;    // data di buffer adalah float 32bit
const normalize = false;  // jangan normalisasi
const stride = 0;         // berapa banyak byte untuk mendapatkan dari satu set nilai ke nilai berikutnya
const offset = 0;         // berapa banyak byte didalam buffer untuk memulai dari
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}

// Beritahu WebGL untuk menggunakan program kita saat menggambar
gl.useProgram(programInfo.program);

{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}

Kode ini mengatur shader dan buffer yang diperlukan untuk merender segitiga merah sederhana di layar.

GPU

GPU adalah singkatan dari Graphics Processing Unit. Ini adalah prosesor khusus yang dirancang untuk menangani matematika kompleks yang terlibat dalam rendering grafik. Sementara CPU sangat baik untuk komputasi umum, GPU menonjol dalam melakukan banyak perhitungan sederhana secara paralel, yang sempurna untuk pekerjaan grafik.

Pikirkan seperti ini: jika rendering scene 3D yang kompleks adalah seperti menggambar sebuah lukisan mural besar, CPU adalah seperti memiliki satu seniman yang sangat berbakat, sedangkan GPU adalah seperti memiliki ribuan seniman biasa yang bekerja bersama.

Komputasi Terakselerasi GPU

Komputasi Terakselerasi GPU merujuk kepada penggunaan GPU bersamaan dengan CPU untuk mengakselerasi aplikasi ilmiah, analitik, teknik, konsumen, dan bisnis. Dalam konteks WebGL, ini berarti bahwa perhitungan grafik Anda dipindahkan ke GPU, membebaskan CPU untuk tugas lain dan menghasilkan grafik yang lebih halus dan cepat.

Browser yang Didukung

Keindahan WebGL adalah dukungan luasnya di seluruh browser modern. Pada tahun 2023, WebGL didukung oleh:

Browser	Versi
Chrome	9+
Firefox	4+
Safari	5.1+
Opera	12+
Internet Explorer	11+
Microsoft Edge	12+

Keuntungan WebGL

WebGL menawarkan banyak keuntungan:

1. Kompatibilitas multi-platform: Tulis sekali, jalankan di mana saja (asalkan ada browser).
2. Tidak memerlukan plugin: Ini sudah terintegrasi dalam browser.
3. Akselerasi perangkat keras: Menggunakan GPU untuk performa yang lebih baik.
4. Integrasi dengan teknologi web: Dapat digabungkan dengan API web lainnya untuk pengalaman interaktif yang kaya.
5. Standar terbuka: Siapapun dapat berkontribusi ke pengembangannya.

Pengaturan Lingkungan

Pengaturan lingkungan WebGL sungguh-sungguh mudah. Semua yang Anda butuhkan adalah:

1. Browser modern
2. Editor teks (Saya merekomendasikan Visual Studio Code)
3. Server web lokal (Anda dapat menggunakan server bawaan Python atau http-server Node.js)

Berikut adalah proses pengaturan sederhana:

1. Buat direktori baru untuk proyek Anda
2. Buat file HTML (misalnya index.html) dan file JavaScript (misalnya script.js)
3. Di file HTML Anda, sisipkan file JavaScript danatur kanvas:

<!DOCTYPE html>
<html>
<head>
<title>Proyek WebGL Pertama Saya</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>

4. Di file JavaScript Anda, inisialisasi WebGL:

function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Tidak dapat menginisialisasi WebGL. Browser atau mesin Anda mungkin tidak mendukungnya.");
return;
}

// Kode WebGL disini
}

window.onload = main;

Dan itu saja! Anda sekarang siap untuk memulai perjalanan WebGL Anda. Ingat, belajar WebGL seperti belajar menunggang sepeda - mungkin tampak goyang-goang pada awalnya, tapi dengan latihan, Anda akan mulai menembus kecepatan dalam waktu singkat. Selamat coding!

Credits: Image by storyset