WebGL - Membuat Model: Panduan untuk Pemula

Hai teman-teman, para ahli WebGL masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia programming grafik 3D. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa katakan bahwa menggambar model di WebGL adalah seperti membangun dengan lego digital – itu menantang, tapi sangat memuaskan! Ayo masuk dan buat some magi di layar kita.

Memahami dasar-dasar

Sebelum kita mulai menggambar model, mari kita singkatkan apa itu WebGL. WebGL (Web Graphics Library) adalah API JavaScript yang memungkinkan kita untuk merender grafik 3D di browser tanpa plugin apa pun. Itu seperti memberikan superpower pada halaman web Anda!

Sekarang, ketika bicara tentang menggambar model di WebGL, kita memiliki dua metode utama yang tersedia:

Metode Menggambar

Metode	Deskripsi	kasus penggunaan
drawArrays()	Menggambar primitif menggunakan data array	bentuk sederhana, geometri tanpa indeks
drawElements()	Menggambar primitif berindeks	model kompleks, rendering optimal

Ayo jelajahi setiap metode ini secara detil.

Metode drawArrays(): Menggambar Diperpendek

Apa itu drawArrays()?

Metode drawArrays() adalah seperti menggambar dengan penggaris – itu mudah dan bagus untuk bentuk sederhana. Metode ini menggambar primitif geometri menggunakan array data vertex.

Sinkron dan Parameter

gl.drawArrays(mode, first, count);

• mode: Jenis primitif yang akan digambar (misalnya, gl.TRIANGLES, gl.LINES)
• first: Indeks awal dalam array
• count: Jumlah vertex yang akan digambar

Contoh: Menggambar Segitiga

Ayo gambar segitiga sederhana menggunakan drawArrays():

// Data vertex untuk segitiga
const vertices = [
0.0,  0.5,  0.0,  // Vertex atas
-0.5, -0.5,  0.0,  // Vertex bawah kiri
0.5, -0.5,  0.0   // Vertex bawah kanan
];

// Buat dan ikat buffer
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Setel pointer atribut
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Gambar segitiga
gl.drawArrays(gl.TRIANGLES, 0, 3);

Dalam contoh ini, kita menentukan tiga vertex untuk segitiganya, membuat buffer, mengikat buffer, menyetel pointer atribut, dan akhirnya memanggil drawArrays() untuk merender segitiga.

Metode drawElements(): Menyusun Model Kompleks

Apa itu drawElements()?

Jika drawArrays() adalah seperti menggambar dengan penggaris, maka drawElements() adalah seperti menggambar dengan kuas – itu memberikan Anda lebih banyak kontrol dan efisiensi saat menggambar bentuk kompleks. Metode ini menggunakan rendering berindeks, yang memungkinkan kita untuk mengulangi data vertex.

Sinkron dan Parameter

gl.drawElements(mode, count, type, offset);

• mode: Jenis primitif yang akan digambar
• count: Jumlah elemen yang akan digambar
• type: Jenis nilai dalam buffer elemen array
• offset: Offset ke buffer elemen array

Contoh: Menggambar Persegi

Ayo gambar persegi menggunakan drawElements():

// Data vertex untuk persegi
const vertices = [
-0.5,  0.5,  0.0,  // Kiri atas
0.5,  0.5,  0.0,  // Kanan atas
0.5, -0.5,  0.0,  // Kanan bawah
-0.5, -0.5,  0.0   // Kiri bawah
];

// Data indeks
const indices = [
0, 1, 2,  // Segitiga pertama
0, 2, 3   // Segitiga kedua
];

// Buat dan ikat vertex buffer
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Buat dan ikat buffer indeks
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// Setel pointer atribut
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Gambar persegi
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

Dalam contoh ini, kita menentukan empat vertex untuk persegi dan menggunakan indeks untuk menentukan bagaimana vertex tersebut harus tersambung untuk membentuk dua segitiga. Kita membuat buffer vertex dan buffer indeks, menyetel pointer atribut, dan akhirnya memanggil drawElements() untuk merender persegi.

Operasi Yang Diperlukan: Resep untuk Kesuksesan

Untuk menggambar model sukses di WebGL, ada beberapa langkah kunci yang kita harus ikuti. Pahami ini sebagai resep untuk kue grafik 3D yang lezat!

Checklist Menggambar WebGL

1. Buat Buffers: Siapkan vertex dan index buffers untuk menyimpan data model Anda.
2. Kompiler Shaders: Tulis dan kompiler vertex dan fragment shaders.
3. Buat Program: Hubungkan shaders yang dikompiler ke dalam program.
4. Setel Pointer Atribut: Beritahu WebGL bagaimana menginterpretasikan data vertex Anda.
5. Setel Uniforms: Kirim nilai uniform yang diperlukan ke shaders Anda.
6. Ikat Buffers: Aktifkan buffers yang akan Anda gunakan untuk menggambar.
7. Gambar: Pemanggilan drawArrays() atau drawElements() untuk merender model Anda.

Ayo gabungkan semua ini dalam contoh yang lebih lengkap:

// Shader vertex
const vsSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

// Shader fragmen
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Warna merah
}
`;

// Fungsi kompiler shader
function compileShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}

// Fungsi buat program
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
return program;
}

// Fungsi menggambar model utama
function drawModel(gl) {
// Kompiler shaders
const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

// Buat program
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

// Buat buffers dan set data (seperti contoh sebelumnya)
// ...

// Setel pointer atribut
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Gambar
gl.drawArrays(gl.TRIANGLES, 0, 3);  // Atau gl.drawElements() untuk geometri berindeks
}

Contoh ini menggabungkan semua operasi yang diperlukan untuk menggambar model di WebGL. Kita kompiler shaders, membuat program, menyetel buffers dan pointer atribut, dan akhirnya menggambar model kita.

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dalam dunia yang menakjubkan dari grafik 3D dengan WebGL. Ingat, seperti belajar keterampilan baru, memahami WebGL memerlukan latihan dan kesabaran. Jangan mudah kecewa jika hal-hal tidak berjalan sepenuhnya baik pertama kali – bahkan programer grafik yang paling berpengalaman kadang-kadang menggambar kubus pink kebetulan bukannya naga megah!

Terus ber eksperimen, terus belajar, dan terutama, bersenang-senang dengannya. Sebelum Anda sadari, Anda akan menciptakan dunia 3D yang menakjubkan di browser Anda. Selamat coding, para seniman 3D masa depan!

Credits: Image by storyset