WebGL - Geometri: Panduan Pemula

Hai sana, para maestro WebGL masa depan! Saya sangat gembira menjadi panduanmu dalam perjalanan yang menarik ke dunia geometri WebGL. Sebagai seseorang yang telah mengajar grafik komputer lebih dari satu dekade, saya dapat memberitahu Anda bahwa memahami geometri dalam WebGL adalah seperti belajar menggambar dengan kode. Itu menantang, tapi sungguh menjimatkan! Jadi, mari kita lipat lengan dan masuk ke dalam!

Menentukan Geometri Yang Diperlukan

Sebelum kita mulai membuat grafik 3D yang memukau, kita perlu memahami apa arti geometri dalam WebGL. Dalam intinya, geometri adalah tulang punggung dari segala sesuatu yang kita lihat di layar. Itu terdiri dari titik, garis, dan bentuk yang membentuk struktur objek 3D kita.

Imaginasi Anda membangun rumah dengan batu LEGO. Setiap batu mewakili titik di ruang 3D, dan ketika Anda menghubungkan titik ini, Anda menciptakan tepi dan permukaan. Itu tepat apa yang kita lakukan di WebGL, tapi dengan kode bukan batu plastik!

Mari kita mulai dengan contoh sederhana - menciptakan segitiga:

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

Di sini, kita telah menentukan tiga titik di ruang 3D. Setiap titik direpresentasikan oleh tiga angka (x, y, z). Array angka ini adalah apa yang kita akan gunakan untuk memberitahu WebGL di mana untuk menggambar segitiganya.

Objek Buffer

Sekarang kita memiliki geometri yang didefinisikan, kita perlu cara untuk mengirimkan data ini ke GPU. Ini adalah di mana objek buffer memainkan perannya. Berikan buffer objek sebagai wadah khusus yang menahan data geometri kita dan membuatnya mudah diakses oleh GPU.

Membuat Buffer

Membuat buffer adalah langkah pertama kita dalam mempersiapkan geometri kita untuk GPU. Ini adalah cara kita melakukannya:

const buffer = gl.createBuffer();

Baris ini menciptakan objek buffer kosong. Itu seperti mendapat kotak kosong siap untuk diisi batu LEGO kita.

Mengikat Buffer

Setelah menciptakan buffer, kita perlu memberitahu WebGL bahwa ini adalah buffer yang kita ingin kerjakan. Kita melakukan ini dengan mengikat buffer:

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

Ini seperti mengambil kotak LEGO kita dan mengatakan, "Hey WebGL, saya akan memasukkan beberapa batu ke dalam kotak ini sekarang!"

Memasukkan Data ke Buffer

Sekarang datang bagian menarik - mengisi buffer kita dengan data geometri kita:

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

mari kitauraikan ini:

• gl.bufferData() adalah metode yang kita gunakan untuk mengisi buffer.
• gl.ARRAY_BUFFER memberitahu WebGL bahwa kita bekerja dengan buffer yang saat ini terikat.
• new Float32Array(triangleVertices) mengonversi array JavaScript kita menjadi array bertipe (lebih banyak tentang ini dalam sekejap).
• gl.STATIC_DRAW adalah petunjuk ke WebGL tentang bagaimana kita merencanakan menggunakan data ini.

Array Bertipe

Anda mungkin bertanya-tanya mengapa kita menggunakan Float32Array dalam langkah sebelumnya. Well, WebGL sangat selektif tentang jenis data yang dipakainya. Ia lebih suka bekerja dengan array bertipe untuk efisiensi. Array bertipe memastikan bahwa setiap piece data memiliki ukuran dan jenis yang konsisten.

Berikut adalah tabel array bertipe yang umum digunakan di WebGL:

Array Bertipe	Deskripsi	Kasus Penggunaan
Float32Array	Bilangan pecahan 32-bit	Posisi verteks, koordinat tekstur
Int8Array	Integer 8-bit signed	Bilangan bulat kecil
Uint8Array	Integer 8-bit unsigned	Komponen warna
Int16Array	Integer 16-bit signed	Bilangan bulat besar
Uint16Array	Integer 16-bit unsigned	Indeks verteks
Int32Array	Integer 32-bit signed	Bilangan bulat sangat besar
Uint32Array	Integer 32-bit unsigned	Bilangan bulat sangat besar positif

Dalam kasus kita, kita menggunakan Float32Array karena posisi verteks kita adalah bilangan pecahan.

Melepaskan Buffer

Setelah kita selesai bekerja dengan buffer, hal yang baik adalah melepaskan ikatan nya:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

Ini seperti menaruh kotak LEGO kembali ke rak. Ini mencegah perubahan yang tidak diinginkan pada buffer kita dan menjaga state WebGL kita bersih.

Dan itu saja, teman-teman! Kita telah berhasil menentukan geometri kita, menciptakan buffer, mengisi nya dengan data, dan belajar tentang array bertipe. Ini adalah dasar menciptakan objek 3D apa pun di WebGL.

Ingat, belajar WebGL adalah perjalanan. Jangan khawatir jika beberapa konsep terlihat sulit pada awalnya. Dengan latihan, Anda akan menciptakan grafik 3D yang menakjubkan dalam waktu singkat! Dalam tahun-tahun mengajarku, saya telah melihat banyak siswa berubah dari pemula yang bingung menjadi ahli WebGL. Anda sedang dalam jalannya untuk bergabung dengan mereka!

Dalam pelajaran berikutnya, kita akan jelajahi bagaimana menggunakan buffer ini untuk benar-benar menggambar geometri kita di layar. Siapkan diri Anda untuk melihat segitiga WebGL pertama Anda hidup! Sampai saat itu, coding saja, dan jangan lupa untuk istirahat dan merajalela jari coding Anda!

Credits: Image by storyset