WebGL - Pengenalan

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

Apa Itu OpenGL?

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

OpenGL, singkatan dari Open Graphics Library, adalah API (Application Programming Interface) lintas-platform untuk merender grafik vektor 2D dan 3D. Ini telah ada sejak 1992 dan telah menjadi tulang punggung 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 utama pertunjukan kami: WebGL. Jika OpenGL adalah kuas untuk aplikasi destop, maka WebGL adalah kuas untuk web. Ini adalah API JavaScript yang memungkinkan Anda menciptakan grafik 3D yang memukau langsung di browser Anda, tanpa memerlukan plugin apa pun.

WebGL membawa kekuatan OpenGL ES 2.0 (versi OpenGL untuk sistem embedded) 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 terlihat seperti halnya sesuatu yang kecil, tapi ini adalah langkah pertama Anda ke dunia WebGL!

Siapa yang Mengembangkan WebGL

WebGL dikembangkan oleh Khronos Group, orang yang sama di belakang OpenGL. Itu diperkenalkan pertama kali pada tahun 2011, dan sejak itu, telah revolusi mengenai bagaimana 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 menjadi WebGL.

Rendering

Rendering adalah proses penghasilan gambar dari model 2D atau 3D. Dalam WebGL, ini terjadi dalam waktu nyata, yang berarti gambar dihasilkan secara langsung 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 opaque
gl.clearDepth(1.0);                 // Bersihkan semua
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 di dalam buffer untuk dimulai
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 terkait 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, maka CPU adalah seperti memiliki satu seniman yang sangat berbakat, sedangkan GPU adalah seperti memiliki ribuan seniman biasa yang bekerja bersama.

Komputasi Ter加速 dengan GPU

Komputasi Ter加速 dengan GPU merujuk kepada penggunaan GPU bersama CPU untuk meng加速 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 mulus 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 lintas-platform: Tulis sekali, jalankan di mana-mana (asalkan ada browser).
2. Tidak memerlukan plugin: Ini sudah terintegrasi di dalam browser.
3. Akselerasi perangkat keras: Menggunakan GPU untuk performa yang lebih baik.
4. Integrasi dengan teknologi web: Dapat digabungkan dengan API web lain untuk pengalaman interaktif yang kaya.
5. Standar terbuka: Siapa pun dapat berkontribusi ke pengembangannya.

Pengaturan Lingkungan

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

1. Browser modern
2. Editor teks (Saya menyarankan 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. Dalam file HTML Anda, sisipkan file JavaScript danatur kanvas:

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

4. Dalam 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 berada di sini
}

window.onload = main;

Dan itu saja! Anda sekarang siap untuk memulai perjalanan WebGL Anda. Ingat, belajar WebGL seperti belajar menunggang sepeda - mungkin terlihat wobble di awal, tapi dengan latihan, Anda akan segera berlari dengan lancar. Selamat belajar!

Credits: Image by storyset