WebGL - Geometri: Panduan untuk Pemula

Hai teman-teman, para maestro WebGL masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik ke dunia geometri WebGL. Sebagai seseorang yang telah mengajar grafik komputer selama lebih dari satu dekade, saya bisa katakan bahwa memahami geometri di WebGL seperti belajar melukis dengan kode. Ini menantang, tapi sangat menghasilkan! Jadi, mari kita lipat lengan dan masuk ke dalam!

Mendefinisikan Geometri yang Diperlukan

Sebelum kita mulai menciptakan grafik 3D yang menakjubkan, kita perlu memahami apa arti geometri di WebGL. Dalam esensial, 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 sedang membangun rumah dengan batu LEGO. Setiap batu mewakili titik di ruang 3D, dan saat Anda menghubungkan titik ini, Anda menciptakan tepi dan permukaan. Itu tepat apa yang kita lakukan di WebGL, tapi dengan kode bukannya batu plastik!

mari mulai dengan contoh sederhana - menciptakan sebuah 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 mendefinisikan 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 tempat objek buffer masuk. Anggaplah objek buffer 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 untuk GPU. Begini cara kita melakukannya:

const buffer = gl.createBuffer();

Baris ini menciptakan objek buffer kosong. Itu seperti mendapatkan kotak kosong siap untuk diisi dengan 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);

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

Memasukkan Data ke Buffer

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

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

mari pisahkan ini:

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

Array Bertipe

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

Ini adalah tabel array bertipe yang umum digunakan di WebGL:

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

Dalam kasus kita, kita menggunakan Float32Array karena posisi vertex kita adalah bilangan riil.

Melepaskan Buffer

Setelah kita selesai bekerja dengan buffer, adalah baiknya kita melepaskan ikatan:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

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

Dan itu dia, teman-teman! Kita telah sukses mendefinisikan geometri kita, menciptakan buffer, mengisi data ke dalamnya, dan belajar tentang array bertipe. Ini adalah dasar untuk 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 mengajar saya, 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 eksplorasi 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 yang menyenangkan, dan jangan lupa untuk istirahat dan meluruskan jari coding Anda!

Credits: Image by storyset