WebGL - Aplikasi Contoh: Panduan untuk Pemula

Hai teman-teman, para ahli WebGL masa depan! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ini ke dunia WebGL. Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya telah melihat banyak murid bercahaya saat mereka menciptakan grafik 3D pertamanya di web. Hari ini, kita akan melangsungkan petualangan yang sama bersama-sama. Jadi, pasang sabuk pengamanmu dan mari kita masuk ke dalam!

WebGL - Sample Application

Apa itu WebGL?

Sebelum kita mulai mengoding, mari kita pahami apa itu WebGL. WebGL (Web Graphics Library) adalah sebuah API JavaScript yang memungkinkan kita untuk merender grafik 3D dan 2D interaktif di peramban web tanpa menggunakan plugin. Itu seperti memberikan halaman webmu kekuatan super untuk menciptakan visual yang menakjubkan!

Struktur Aplikasi WebGL

Sebuah aplikasi WebGL biasanya terdiri dari beberapa komponen utama. Mari kita pecahnya:

1. HTML Canvas

Canvas adalah papan lukisan kita. Itu tempat semua keajaiban terjadi!

<canvas id="myCanvas" width="640" height="480">
Browser Anda tidak mendukung tag canvas HTML5.
</canvas>

Ini menciptakan canvas 640x480 piksel di halaman web Anda. Pahamiannya seperti meja seni Anda, siap untuk karya kesenianmu!

2. Kode JavaScript

Ini adalah tempat kita menulis perintah WebGL. Itu seperti memberikan petunjuk kepada seniman virtual kita.

3. Vertex Shader dan Fragment Shader

Ini adalah program khusus yang berjalan di GPU. Itu seperti kuas dan palet warna untuk grafik 3D kita.

4. Buffers

Buffer menyimpan data untuk objek 3D kita. Gambarannya seperti bahan mentah untuk patung 3D kita.

Sekarang kita tahu bahan-bahan, mari kita membuat aplikasi WebGL yang lezat!

Aplikasi Contoh

Mari kita buat aplikasi WebGL sederhana yang menggambar segitiga berwarna. Kita akan menjelaskan setiap langkah secara detil.

Langkah 1: Setel HTML

Pertama, kita perlu membuat file HTML dengan elemen canvas:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
Browser Anda tidak mendukung tag canvas HTML5.
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

Ini menciptakan canvas kita dan menghubungkan ke file JavaScript yang kita akan buat berikutnya.

Langkah 2: Inisialisasi WebGL

Sekarang, mari kita buat file webgl-demo.js dan setel WebGL:

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

if (!gl) {
alert("WebGL tidak didukung oleh browser Anda!");
return;
}

// WebGL siap digunakan!
}

window.onload = main;

Fungsi ini mendapatkan canvas kita, menginisialisasi WebGL, dan memeriksa apakah itu didukung. Itu seperti memeriksa apakah kita memiliki semua alat seni sebelum memulai.

Langkah 3: Buat Shaders

Sekarang, mari kita buat vertex dan fragment shaders:

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

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Terjadi kesalahan saat mengkompilasi shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

Shaders ini menentukan bagaimana segitiga kita akan ditempatkan dan disembur warna. Vertex shader menempatkan segitiga kita, sedangkan fragment shader memberikan warna pink yang bagus.

Langkah 4: Buat Program

Sekarang, mari kita hubungkan shaders kita ke dalam program:

function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

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

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

Ini seperti menggabungkan alat seni kita dan siap untuk menggambar!

Langkah 5: Buat Buffer

Sekarang, mari kita buat buffer untuk menyimpan verteks segitiganya:

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

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Ini menentukan bentuk segitiganya. Itu seperti menggambar bentuk dasar sebelum kita mulai menggambar.

Langkah 6: Render Segitiga

Akhirnya, mari kita gambar segitiganya:

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

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

Ini adalah tempat keajaiban terjadi! Kita membersihkan canvas, menset program dan buffer, dan akhirnya menggambar segitiganya.

Kesimpulan

Selamat! Anda telah menciptakan aplikasi WebGL pertamamu. Anda telah mengambil langkah pertama ke dunia yang lebih besar dari grafik 3D di web. Ingat, seperti semua bentuk seni, menguasai WebGL memerlukan latihan dan kesabaran. Tetapi dengan setiap baris kode, Anda menciptakan web yang lebih hidup dan interaktif. Terus jelajahi, terus ciptakan, dan terutama, bersenang-senang!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

Metode	Deskripsi
`getContext("webgl")`	Menginisialisasi WebGL
`createShader()`	Membuat shader
`shaderSource()`	Menentukan kode sumber shader
`compileShader()`	Mengkompilasi shader
`createProgram()`	Membuat program
`attachShader()`	Menghubungkan shader ke program
`linkProgram()`	Menghubungkan program
`createBuffer()`	Membuat buffer
`bindBuffer()`	Menghubungkan buffer
`bufferData()`	Mengisi buffer dengan data
`viewport()`	Mengset viewport
`clearColor()`	Mengset warna pembersihan
`clear()`	Membersihkan canvas
`useProgram()`	Menggunakan program
`getAttribLocation()`	Mendapatkan lokasi atribut
`enableVertexAttribArray()`	Mengaktifkan array atribut
`vertexAttribPointer()`	Menentukan tata letak data verteks
`drawArrays()`	Menggambar primitif

Simpan tabel ini dekat Anda saat Anda terus menjelajahi WebGL. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

WebGL - Saluran Grafik

Tutorial Seterusnya:

WebGL - Konteks