Indonesia

Tutorial WebGL

Aplikasi WebGL

Contoh WebGL

WebGL: Panduan untuk Pemula dalam Menggambar 3D di Browser

Hai teman-teman yang akan menjadi ahli grafik 3D! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia WebGL. Sebagai seseorang yang telah mengajar grafik komputer selama tahun tahun, saya bisa katakan bahwa WebGL seperti tongkat sihir untuk browser Anda. Itu memungkinkan Anda untuk menciptakan grafik dan animasi 3D yang menakjubkan langsung di halaman web Anda. Apakah itu menarik? Mari kita masuk ke dalamnya!

WebGL - Home

Apa Itu WebGL?

WebGL, singkatan dari Web Graphics Library, adalah API JavaScript yang memungkinkan Anda untuk merender grafik 2D dan 3D interaktif di setiap browser yang kompatibel tanpa memerlukan plugin. Itu seperti memberikan superpower ke browser Anda untuk menciptakan pengalaman visual yang menakjubkan!

Sejarah Singkat

WebGL pertama kali diperkenalkan pada tahun 2011, dan sejak itu, itu telah revolusionerkan cara kita berpikir tentang grafik di web. Sebelum WebGL, jika Anda ingin menciptakan grafik 3D di browser, Anda akan perlu mengandalkan plugin seperti Flash atau applet Java. Sekarang, dengan WebGL, kita bisa melakukan semua ini secara native di browser. Itu seperti kita telah naik daripada sepeda ke mobil sport!

Prasyarat

Sebelum kita memulai perjalanan WebGL kita, mari pastikan kita memiliki tools yang tepat di tas kita:

  1. Browser modern (Chrome, Firefox, Safari, atau Edge)
  2. Editor teks (Saya menyarankan Visual Studio Code, tapi yang lain pun bisa)
  3. Pengetahuan dasar HTML dan JavaScript (Jangan khawatir jika Anda kurang terampil, kita akan mengulas saat kita maju)

Memulai dengan WebGL

Mari kita buat program WebGL pertama kita! Kita akan mulai dengan contoh sederhana "Hello, WebGL!" yang menampilkan segitiga berwarna di layar.

Langkah 1: Menyiapkan HTML

Pertama, kita perlu membuat file HTML dengan elemen canvas. Canvas ini adalah tempat di mana keajaiban WebGL kita akan terjadi.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Hello, WebGL!</title>
<style>
canvas { border: 1px solid hitam; }
</style>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

Dalam HTML ini, kita telah membuat elemen canvas dengan ID "glCanvas" dan mengatur dimensinya ke 640x480 piksel. Kita juga menghubungkan ke file JavaScript bernama "webgl-demo.js" tempat kita akan menulis kode WebGL kita.

Langkah 2: Menginisialisasi WebGL

Sekarang, mari kita buat file "webgl-demo.js" dan mulai menulis beberapa JavaScript untuk menginisialisasi WebGL:

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

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

// Setel warna kosong ke hitam, sepenuhnya opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Kosongkan buffer warna dengan warna yang ditentukan
gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;

mari kitauraikan ini:

  1. Kita mendapatkan referensi ke elemen canvas kita.
  2. Kita mencoba mendapatkan konteks WebGL dari canvas. Jika ini gagal, berarti WebGL tidak didukung, dan kita menampilkan pesan kesalahan.
  3. Jika berhasil, kita menentukan warna kosong (warna latar belakang) ke hitam dan mengosongkan canvas.

Langkah 3: Membuat Shaders

Shaders adalah program khusus yang berjalan di GPU. Mereka ditulis dalam bahasa GLSL (OpenGL Shading Language). Kita memerlukan dua jenis shaders: shaders verteks dan shaders fragmen.

// 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);
}
`;

Shader verteks menempatkan vertex kita, sedangkan shader fragmen memewarnai piksel kita (dalam kasus ini, merah).

Langkah 4: Menginisialisasi Program Shader

Sekarang kita perlu mengkompilasi dan menghubungkan shaders ini ke program shader:

function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Tidak dapat menginisialisasi program shader: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}

return shaderProgram;
}

function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('Terjadi kesalahan kompilasi shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

Kode ini mengkompilasi shaders kita, menghubungkan mereka ke program shader, dan memeriksa kesalahan.

Langkah 5: Membuat Segitiga

Sekarang, mari kita buat data untuk segitiga kita:

function initBuffers(gl) {
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
-1.0,  1.0,
1.0,  1.0,
-1.0, -1.0,
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

return {
position: positionBuffer,
};
}

Ini menciptakan buffer dan mengisi data vertex segitiga kita.

Langkah 6: Menggambar Scene

Akhirnya, mari kita gabungkan semua ini dan menggambar segitiga kita:

function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(programInfo.program);

gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
2,        // 2 komponen per iterasi
gl.FLOAT, // data adalah float 32bit
false,    // jangan normalisasi
0,        // langkah (0 = otomatis)
0         // ofset ke buffer
);

gl.drawArrays(gl.TRIANGLES, 0, 3);
}

Fungsi ini mengosongkan canvas, menyiapkan program shader kita, menghubungkan data buffer, dan akhirnya menggambar segitiga.

Menyusun Semua Itu

Sekarang, mari kita perbarui fungsi main kita untuk menggunakan semua bagian ini:

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

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

const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
},
};

const buffers = initBuffers(gl);

drawScene(gl, programInfo, buffers);
}

window.onload = main;

Dan itu saja! Program WebGL pertama Anda. Ketika Anda membuka file HTML Anda di browser, Anda seharusnya melihat segitiga merah di latar belakang hitam. Selamat!

Metode WebGL Umum

Berikut adalah tabel dari beberapa metode WebGL yang kita gunakan dan tujuannya:

Metode Tujuan
gl.createBuffer() Membuat objek buffer baru
gl.bindBuffer() Mengikat objek buffer ke target
gl.bufferData() Inisialisasi dan membuat penyimpanan data objek buffer
gl.createShader() Membuat objek shader
gl.shaderSource() Mengatur kode sumber shader
gl.compileShader() Mengkompilasi objek shader
gl.createProgram() Membuat objek program
gl.attachShader() Menghubungkan objek shader ke objek program
gl.linkProgram() Menghubungkan objek program
gl.useProgram() Mengatur program yang ditentukan sebagai bagian dari keadaan rendering saat ini
gl.getAttribLocation() Mengembalikan lokasi variabel atribut
gl.enableVertexAttribArray() Mengaktifkan array atribut
gl.vertexAttribPointer() Menentukan tata letak data atribut vertex
gl.drawArrays() Menggambar primitif dari data array

Kesimpulan

Wah, kita telah meliputi banyak hal hari ini! Kita telah belajar apa itu WebGL, mengatur lingkungan pengembangan kita, dan menciptakan program WebGL pertama kita. Ingat, belajar WebGL seperti belajar menunggang sepeda - mungkin agak berliku awalnya, tapi dengan latihan, Anda akan mulai menembus kecepatan dalam waktu singkat!

Dalam pelajaran berikutnya, kita akan menjelajahi bentuk yang lebih kompleks, menambah interaktivitas, dan bahkan mendalami grafik 3D. Dunia WebGL luas dan menarik, dan saya tidak sabar untuk menjelajahi lebih banyak lagi bersama Anda. Sampai jumpa lagi, selamat berkoding!

Credits: Image by storyset

 
Tutorial Selanjutnya:
WebGL - Pengenalan