WebGL - Menggambar Titik
Hai, para pemula pemrograman! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia WebGL, khususnya fokus pada menggambar titik. Sebagai guru komputer tetangga yang ramah, saya akan memandu Anda dalam perjalanan ini langkah demi langkah. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Jadi, ambil pensil maya Anda, dan mari kita masuk ke dalam!
Apa Itu WebGL?
Sebelum kita mulai menggambar titik, mari kita pahami apa itu WebGL. WebGL (Web Graphics Library) adalah API JavaScript yang kuat yang memungkinkan kita untuk menciptakan grafik 2D dan 3D di browser web. Itu seperti memiliki kuas magis yang dapat menggambar langsung di halaman web Anda!
Langkah-langkah Yang Diperlukan
Untuk menggambar titik menggunakan WebGL, kita perlu mengikuti serangkaian langkah. Pahami itu seperti resep untuk membuat seni digital. Berikut adalah tabel yang menggabungkan langkah-langkah ini:
| Langkah | Deskripsi |
|---|---|
| 1 | Dapatkan elemen canvas |
| 2 | Dapatkan kontek rendering WebGL |
| 3 | Definisikan geometri (verteks) |
| 4 | Buat vertex shader |
| 5 | Buat fragment shader |
| 6 | Buat program shader |
| 7 | Muat data ke GPU |
| 8 | Set viewport |
| 9 | Bersihkan canvas |
| 10 | Gambar titik |
Sekarang, mari kitauraikan setiap langkah dan lihat bagaimana mereka bersatu untuk menciptakan karya kita!
Contoh – Menggambar Tiga Titik menggunakan WebGL
Mari kitajalani contoh di mana kita akan menggambar tiga titik berwarna di canvas kita. Saya akan menjelaskan setiap bagian kode secara detil, jadi Anda akan mengetahui tepat apa yang terjadi.
Langkah 1: Set up the HTML
Pertama, kita perlu menciptakan file HTML dengan elemen canvas:
<!DOCTYPE html>
<html>
<head>
<title>Titik WebGL Pertama Saya</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Browser Anda tidak mendukung elemen canvas.
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>Ini menciptakan canvas yang akan menjadi papan menggambar kita. File JavaScript yang kita buat selanjutnya akan melakukan semua magi!
Langkah 2: Create the JavaScript File
Sekarang, mari kitabuat file webgl-points.js dan mulai mengode aplikasi WebGL kita:
// Langkah 1: Dapatkan elemen canvas
const canvas = document.getElementById('myCanvas');
// Langkah 2: Dapatkan kontek rendering WebGL
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL tidak didukung');
throw new Error('WebGL tidak didukung');
}
// Langkah 3: Definisikan geometri (verteks)
const vertices = new Float32Array([
0.0, 0.5, // Titik 1
-0.5, -0.5, // Titik 2
0.5, -0.5 // Titik 3
]);
// Langkah 4: Buat vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Langkah 5: Buat fragment shader
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Langkah 6: Buat program shader
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Langkah 7: Muat data ke GPU
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Langkah 8: Set viewport
gl.viewport(0, 0, canvas.width, canvas.height);
// Langkah 9: Bersihkan canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Langkah 10: Gambar titik
gl.drawArrays(gl.POINTS, 0, 3);Sekarang, mari kitauraikan kode ini dan mengerti apa yang dilakukan setiap bagian:
Mengerti Kode
Langkah 1 dan 2: Menyiapkan WebGL
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');Di sini, kita mendapatkan elemen canvas dan mengambil kontek rendering WebGL. Itu seperti mendapatkan kuas dan palet siap!
Langkah 3: Mendefinisikan Geometri
const vertices = new Float32Array([
0.0, 0.5, // Titik 1
-0.5, -0.5, // Titik 2
0.5, -0.5 // Titik 3
]);Kita mendefinisikan tiga titik di ruang 2D. Koordinat berada dalam rentang -1 hingga 1 di kedua arah x dan y. Gambaran canvas kita terbagi menjadi empat kuadran, dengan (0,0) di pusat.
Langkah 4 dan 5: Membuat Shaders
Shaders adalah program spesial yang berjalan di GPU. Kita memiliki dua jenis:
- Vertex Shader: Menentukan posisi titik kita.
- Fragment Shader: Menentukan warna titik kita.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;Shader vertex menentukan posisi dan ukuran titik kita. Shader fragment menentukan warna ke merah (1.0, 0.0, 0.0 di RGB).
Langkah 6 dan 7: Membuat Program dan Memuat Data
Langkah ini melibatkan membuat program shader dan memuat data verteks ke memori GPU.
Langkah 8 dan 9: Menyetel Pandangan
Kita menyetel viewport agar sesuai dengan ukuran canvas kita dan membersihkan canvas menjadi hitam.
Langkah 10: Menggambar Titik
gl.drawArrays(gl.POINTS, 0, 3);Akhirnya, kita menggambar tiga titik!
Kesimpulan
Selamat! Anda telah menciptakan aplikasi WebGL pertama Anda yang menggambar titik. Ini hanya awal dari perjalanan Anda ke dunia yang menarik dari grafik komputer. Sebagai Anda terus mengeksplorasi, Anda akan dapat menciptakan bentuk yang lebih kompleks, menambahkan animasi, dan bahkan memasuki grafik 3D.
Ingat, belajar WebGL seperti belajar menggambar – itu memerlukan latihan dan kesabaran. Jangan frustasi jika hal-hal tidak berjalan sempurna pertama kali. Terus mencoba, dan segera Anda akan menciptakan karya digital yang menakjubkan!
Dalam pelajaran berikutnya, kita akan belajar bagaimana menambahkan warna yang berbeda ke titik kita dan menciptakan bentuk yang lebih kompleks. Sampai jumpa, selamat mengoding!
Credits: Image by storyset