ID (Indonesia) Translation

WebGL - Mode Menggambar

Hai, para ahli WebGL masa depan! ? Hari ini, kita akan manduk ke dunia yang menarik dari mode menggambar di WebGL. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengarahkan Anda dalam perjalanan ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Jadi, ambillah kuas virtual Anda, dan mari kita buat beberapa karya digital!

Parameter Mode

Sebelum kita mulai menggambar, mari bicarakan bintang pertunjukan kami: parameter mode. Picturlah itu seperti tongkat ajaib yang mengatakan kepada WebGL bagaimana untuk menghubungkan titik-titik (atau dalam kasus kita, simpul) untuk membuat bentuk dan pola yang berbeda.

Di WebGL, ketika kita memanggil fungsi gl.drawArrays() atau gl.drawElements(), kita perlu menentukan parameter mode. Parameter ini seperti memberikan intruksi kepada puzzle hubungkan titik - titik - itu mengatakan kepada WebGL bagaimana untuk menghubungkan titik yang kita tentukan.

Berikut adalah tabel mode menggambar yang berbeda tersedia di WebGL:

Mode	Deskripsi
gl.POINTS	Menggambar titik tunggal untuk setiap simpul
gl.LINES	Menggambar garis antara setiap pasangan simpul
gl.LINE_STRIP	Menggambar garis kontinyu yang menghubungkan simpul
gl.LINE_LOOP	Mirip dengan LINE_STRIP, tapi menutup bentuk
gl.TRIANGLES	Menggambar segitiga untuk setiap tiga simpul
gl.TRIANGLE_STRIP	Menggambar kelompok segitiga yang terhubung
gl.TRIANGLE_FAN	Menggambar bentuk seperti kipas yang terhubung

Jangan khawatir jika ini masih membingungkan Anda saat ini. Kita akan menjelajahi masing-masing dari mereka dengan contoh saat kita terus maju!

Contoh – Menggambar Tiga Garis Paralel

Mari kita mulai dengan contoh sederhana: menggambar tiga garis paralel. Ini akan membantu kita memahami bagaimana parameter mode bekerja dalam praktek.

// Pertama, mari kita setel konteks WebGL kita
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

// Sekarang, mari kita tentukan vertex shader kita
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

// Dan fragmen shader kita
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Warna merah
}
`;

// Buat dan kompilasi shader (jangan khawatir, kita akan menjelaskan ini secara rinci di lesyon berikutnya)
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Buat program dan hubungkan shader
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Tentukan posisi garis kita
const positions = new Float32Array([
-0.8, -0.8,  // Awal Garis 1
-0.8,  0.8,  // Akhir Garis 1
-0.3, -0.8,  // Awal Garis 2
-0.3,  0.8,  // Akhir Garis 2
0.2, -0.8,  // Awal Garis 3
0.2,  0.8   // Akhir Garis 3
]);

// Buat buffer dan masukkan posisi ke dalamnya
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// Katakan kepada WebGL bagaimana membaca buffer dan mengasosiasikannya ke `a_position`
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Bersihkan kanvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Gambar garis
gl.drawArrays(gl.LINES, 0, 6);

Sekarang, mari kitauraikan ini:

1. Kita setel konteks WebGL kita dan tentukan shader. Jangan khawatir terlalu banyak tentang ini saat ini; kita akan memberikan penjelasan mendalam di lesyon berikutnya.

2. Kita buat program dan hubungkan shader kepadanya. Ini seperti mempersiapkan kuas digital kita.

3. Kita tentukan posisi garis kita. Setiap garis didefinisikan oleh dua titik (awal dan akhir), dan setiap titik didefinisikan oleh dua koordinat (x dan y). Jadi, kita memiliki 6 titik secara keseluruhan untuk 3 garis kita.

4. Kita buat buffer dan memasukkan posisi ke dalamnya. Picturlah ini seperti memuat cat ke kuas.

5. Kita katakan kepada WebGL bagaimana membaca buffer dan mengasosiasikannya ke atribut a_position.

6. Akhirnya, kita panggil gl.drawArrays(gl.LINES, 0, 6). Ini adalah tempat magi terjadi!

• gl.LINES adalah mode kita. Itu mengatakan kepada WebGL untuk menggambar garis antara pasangan titik.
• 0 adalah indeks awal dalam array posisi kita.
• 6 adalah jumlah titik yang akan dipertimbangkan (ingat, kita memiliki 6 titik untuk 3 garis kita).

Jalankan kode ini, dan voila! Anda seharusnya melihat tiga garis merah paralel di latar belakang hitam. Selamat, Anda baru saja membuat gambar WebGL pertama Anda! ?

Mode Menggambar

Sekarang kita sudah melihat gl.LINES dalam aksi, mari kita jelajahi mode menggambar lainnya. Kita akan menggunakan setup yang sama seperti sebelumnya, tapi mengubah posisi dan mode menggambar.

gl.POINTS

Mari kita mulai dengan mode yang paling sederhana: gl.POINTS. Mode ini menggambar titik tunggal untuk setiap titik.

// ... (kode setup sebelumnya)

const positions = new Float32Array([
-0.5, 0.5,
0.0, 0.0,
0.5, -0.5
]);

// ... (kode setup buffer)

gl.drawArrays(gl.POINTS, 0, 3);

Ini akan menggambar tiga titik merah di kanvas Anda. Mudah, kan?

gl.LINE_STRIP

Sekarang, coba gl.LINE_STRIP. Mode ini menggambar garis kontinyu yang menghubungkan setiap titik ke titik berikutnya.

// ... (kode setup sebelumnya)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (kode setup buffer)

gl.drawArrays(gl.LINE_STRIP, 0, 3);

Anda seharusnya melihat garis V-shaped yang menghubungkan tiga titik.

gl.LINE_LOOP

gl.LINE_LOOP mirip dengan LINE_STRIP, tapi ia menutup bentuk dengan menghubungkan titik terakhir kembali ke titik pertama.

// ... (kode setup sebelumnya)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (kode setup buffer)

gl.drawArrays(gl.LINE_LOOP, 0, 3);

Ini akan menggambar outline segitiga.

gl.TRIANGLES

Sekarang, mari kita pindah ke mengisi bentuk dengan gl.TRIANGLES. Mode ini menggambar segitiga terpisah untuk setiap tiga titik.

// ... (kode setup sebelumnya)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]);

// ... (kode setup buffer)

gl.drawArrays(gl.TRIANGLES, 0, 3);

Anda seharusnya melihat segitiga merah yang padat.

gl.TRIANGLE_STRIP

gl.TRIANGLE_STRIP sedikit lebih kompleks. Itu menggambar kelompok segitiga yang terhubung, di mana setiap segitiga berbagi dua titik dengan segitiga sebelumnya.

// ... (kode setup sebelumnya)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, 0.5
]);

// ... (kode setup buffer)

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

Ini akan menggambar dua segitiga yang terhubung membentuk persegi panjang.

gl.TRIANGLE_FAN

Akhirnya, mari kita lihat gl.TRIANGLE_FAN. Mode ini menggambar bentuk seperti kipas, di mana semua segitiga berbagi titik pertama sebagai titik umum.

// ... (kode setup sebelumnya)

const positions = new Float32Array([
0.0, 0.0,    // Titik tengah
0.5, 0.0,    // Titik 1
0.35, 0.35,  // Titik 2
0.0, 0.5,    // Titik 3
-0.35, 0.35  // Titik 4
]);

// ... (kode setup buffer)

gl.drawArrays(gl.TRIANGLE_FAN, 0, 5);

Ini akan menggambar bentuk yang mirip dengan seperempat lingkaran.

Dan itu adalah! Kita telah menjelajahi semua mode menggambar di WebGL. Ingat, kunci untuk menguasai ini adalah latihan. Cobalah menggabungkan mode yang berbeda, mengubah warna, dan bermain dengan posisi simpul. Sebelum Anda tahu, Anda akan membuat scene WebGL yang kompleks dengan mudah! Sampai jumpa di lesyon berikutnya, saat kita akan mendalami shader dan belajar bagaimana menambahkan warna dan tekstur ke gambaran kita. Sampai jumpa, para seniman WebGL masa depan! ??‍??‍?

Credits: Image by storyset