WebGL - Aplikasi Contoh: Panduan untuk Pemula

Halo sana, para ahli WebGL masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia WebGL. Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya telah melihat banyak siswa yang terangsang saat mereka menciptakan grafik 3D pertamanya di web. Hari ini, kita akan melangsungkan petualangan yang sama bersama. Jadi, pasang sabuk pengaman 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 API JavaScript yang memungkinkan kita untuk merender grafik interaktif 3D dan 2D di peramban web tanpa menggunakan plugin. Itu seperti memberikan halaman web Anda superpower 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 sebagai meja seni Anda, siap untuk karya masterpiece Anda!

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 cat untuk grafik 3D kita.

4. Buffers

Buffers menyimpan data untuk objek 3D kita. Bayangkan mereka sebagai bahan mentah untuk patung 3D kita.

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

Aplikasi Contoh

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

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 dicat. Vertex shader menempatkan segitiga kita, sedangkan fragment shader memberikan warna pink yang indah.

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 vertices segitiga kita:

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 segitiga kita. Itu seperti menggambar bentuk dasar sebelum kita mulai mencat.

Langkah 6: Render Segitiga

Akhirnya, mari kita gambar segitiga kita:

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 tempat keajaiban terjadi! Kita membersihkan canvas, menyiapkan program dan buffer, dan akhirnya menggambar segitiga kita.

Kesimpulan

Selamat! Anda baru saja menciptakan aplikasi WebGL pertama Anda. Anda telah mengambil langkah pertama ke dunia yang lebih luas 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 cerah dan interaktif. Terus jelajahi, terus buat, dan terutama, bersenang-senang!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

Metode	Deskripsi
`getContext("webgl")`	Inisialisasi 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()`	Mengatur viewport
`clearColor()`	Mengatur warna penghapus
`clear()`	Menghapus canvas
`useProgram()`	Menggunakan program
`getAttribLocation()`	Mendapatkan lokasi atribut
`enableVertexAttribArray()`	Mengaktifkan array atribut
`vertexAttribPointer()`	Menentukan Tata letak data vertex
`drawArrays()`	Menggambar primitif

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

Credits: Image by storyset

Tutorial Sebelumnya:

WebGL - Saluran Grafik

Tutorial Selanjutnya:

WebGL - Konteks