Indonesia

Tutorial WebGL

Aplikasi WebGL

Contoh WebGL

WebGL - Menggambar 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 tahun tahun, saya bisa katakan bahwa menggambar model di WebGL adalah seperti membangun dengan blok Lego digital – itu menantang, tapi sungguh sangat menggembangkan! Ayo masuk dan buat sedikit magi di layar kita.

WebGL - Drawing a Model

Mengenali dasar-dasar

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

Sekarang, ketika berbicara 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 non-indexed
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 pensil – itu mudah dan cocok untuk bentuk sederhana. Metode ini menggambar primitif geometri menggunakan array data verteks.

Sinkron dan Parameter

gl.drawArrays(mode, first, count);
  • mode: Tipe primitif yang akan digambar (misalnya, gl.TRIANGLES, gl.LINES)
  • first: Indeks awal dalam array
  • count: Jumlah verteks yang akan digambar

Contoh: Menggambar Segitiga

Ayo gambarkan segitiga sederhana menggunakan drawArrays():

// Data verteks untuk segitiga
const vertices = [
0.0,  0.5,  0.0,  // Verteks atas
-0.5, -0.5,  0.0,  // Verteks bawah kiri
0.5, -0.5,  0.0   // Verteks 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 verteks untuk segitiga kita, membuat buffer untuk menyimpan data ini, mensetel pointer atribut untuk mengatakan kepada WebGL bagaimana membaca data verteks kita, dan akhirnya memanggil drawArrays() untuk merender segitiga kita.

Metode drawElements(): Menyusun Model Kompleks

Apa itu drawElements()?

Jika drawArrays() adalah seperti menggambar dengan pensil, 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 verteks.

Sinkron dan Parameter

gl.drawElements(mode, count, type, offset);
  • mode: Tipe primitif yang akan digambar
  • count: Jumlah elemen yang akan digambar
  • type: Tipe nilai dalam buffer elemen array
  • offset: Offset ke buffer elemen array

Contoh: Menggambar Persegi

Ayo gambarkan persegi menggunakan drawElements():

// Data verteks 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 buffer verteks
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 verteks untuk persegi kita dan menggunakan indeks untuk menentukan bagaimana verteks ini harus dihubungkan untuk membentuk dua segitiga. Kita membuat buffer verteks dan buffer indeks, mensetel pointer atribut, dan akhirnya memanggil drawElements() untuk merender persegi kita.

Operasi Diperlukan: Resep untuk Kesuksesan

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

Daftar Pemeriksaan Menggambar WebGL

  1. Buat Buffers: Siapkan vertex dan index buffers untuk menyimpan data model Anda.
  2. Kompilasi Shaders: Tulis dan kompilasi vertex dan fragment shaders.
  3. Buat Program: Hubungkan shaders yang dikompilasi 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 ingin Anda gunakan untuk menggambar.
  7. Gambar: Pemanggilan drawArrays() atau drawElements() untuk merender model Anda.

Ayo gabungkan semuanya dalam contoh yang lebih lengkap:

// Shader verteks
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 kompilasi 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) {
// Kompilasi 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 kompilasi shaders, membuat program, mensetel buffers dan pointer atribut, dan akhirnya menggambar model kita.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dalam dunia menakjubkan 3D grafik dengan WebGL. Ingat, seperti belajar keterampilan baru, menguasai WebGL memerlukan latihan dan kesabaran. Jangan frustasi jika hal-hal tidak berjalan sempurna pertama kali – bahkan programmer grafik yang paling berpengalaman kadang-kadang menggambar kubus merah instead of naga megah!

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

Credits: Image by storyset

Tutorial Sebelumnya:
Menghubungkan Atribut dan Objek Buffer
Tutorial Selanjutnya:
WebGL - Menggambar Titik