WebGL - Menggambar Titik
Hai, para pemrogram yang sedang belajar! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia WebGL, khususannya memfokuskan pada menggambar titik. Sebagai guru komputer yang ramah di lingkungan sekitar anda, saya akan menghidangkan anda melalui petualangan ini langkah demi langkah. Jangan khawatir jika anda belum pernah menulis kode sebelum ini - kita akan mulai dari dasar dan maju secara berperingkat. Jadi, ambil pensil maya anda, dan mari kita masuk ke dalam!
Apa itu WebGL?
Sebelum kita mulai menggambar titik, mari kita memahami apa itu WebGL. WebGL (Web Graphics Library) adalah sebuah API JavaScript yang kuat yang membolehkan kita mencipta grafik 2D dan 3D dalam pelayar web. Ini seperti memiliki sebuah kuas ajaib yang dapat menggambar langsung di halaman web anda!
Langkah-langkah Yang Diperlukan
Untuk menggambar titik menggunakan WebGL, kita perlu mengikuti satu rangka langkah. Bayangkan ini seperti sebuah resipi untuk mencipta seni digital. Berikut adalah tabel yang menggabungkan langkah-langkah ini:
| Langkah | Keterangan |
|---|---|
| 1 | Dapatkan elemen canvas |
| 2 | Dapatkan konteks penggambaran WebGL |
| 3 | Takrifkan geometri (titik) |
| 4 | Cipta shader titik |
| 5 | Cipta shader fragmen |
| 6 | Cipta program shader |
| 7 | Muatkan data ke GPU |
| 8 | Tetapkan viewport |
| 9 | Kosongkan canvas |
| 10 | Gambar titik |
Sekarang, mari kita breakdown setiap langkah dan lihat bagaimana mereka bersatu untuk mencipta karya kita!
Contoh – Menggambar Tiga Titik menggunakan WebGL
Mari kita buat contoh di mana kita akan menggambar tiga titik berwarna di atas canvas kita. Saya akan menjelaskan setiap bahagian kode supaya anda memahami sepenuhnya apa yang sedang berlaku.
Langkah 1: Persiapan HTML
Pertama, kita perlu mencipta fail HTML dengan elemen canvas:
<!DOCTYPE html>
<html>
<head>
<title>Titik WebGL Pertama Saya</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Pelayar anda tidak menyokong elemen canvas.
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>Ini mencipta canvas yang akan menjadi papan gambar kita. Fail JavaScript yang kita buat berikutnya akan melakukan semua sihir!
Langkah 2: Cipta Fail JavaScript
Sekarang, mari kita cipta fail bernama webgl-points.js dan mula menulis aplikasi WebGL kita:
// Langkah 1: Dapatkan elemen canvas
const canvas = document.getElementById('myCanvas');
// Langkah 2: Dapatkan konteks penggambaran WebGL
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL tidak disokong');
throw new Error('WebGL tidak disokong');
}
// Langkah 3: Takrifkan geometri (titik)
const vertices = new Float32Array([
0.0, 0.5, // Titik 1
-0.5, -0.5, // Titik 2
0.5, -0.5 // Titik 3
]);
// Langkah 4: Cipta shader titik
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: Cipta shader fragmen
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: Cipta program shader
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Langkah 7: Muatkan 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: Tetapkan viewport
gl.viewport(0, 0, canvas.width, canvas.height);
// Langkah 9: Kosongkan 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 kita breakdown kode ini dan memahami apa yangbuat setiap bahagian:
Memahami Kode
Langkah 1 dan 2: Menyiapkan WebGL
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');Di sini, kita mendapatkan elemen canvas dan mendapatkan konteks penggambaran WebGL. Ini seperti mendapatkan kuas dan palet siap untuk digunakan!
Langkah 3: Menakrifkan Geometri
const vertices = new Float32Array([
0.0, 0.5, // Titik 1
-0.5, -0.5, // Titik 2
0.5, -0.5 // Titik 3
]);Kita menakrifkan tiga titik dalam ruang 2D. Koordinat ini berkisar dari -1 ke 1 dalam kedua-dua arah x dan y. Bayangkan canvas kita dibahagikan kepada empat kuartus, dengan (0,0) di tengah.
Langkah 4 dan 5: Mencipta Shaders
Shaders adalah program khas yang dijalankan di GPU. Kita ada dua jenis:
- Shader Titik: Menentukan kedudukan titik kita.
- Shader Fragmen: 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 titik menetapkan kedudukan dan saiz titik kita. Shader fragmen menetapkan warna merah (1.0, 0.0, 0.0 dalam RGB).
Langkah 6 dan 7: Mencipta Program dan Memuatkan Data
Langkah ini melibatkan mencipta program shader dan memuatkan data vertex ke memori GPU.
Langkah 8 dan 9: Menetapkan pandangan dan Mengosongkan Canvas
Kita menetapkan viewport untuk sepadan saiz canvas kita dan mengosongkan canvas ke hitam.
Langkah 10: Menggambar Titik
gl.drawArrays(gl.POINTS, 0, 3);Akhirnya, kita menggambar titik kita!
Kesimpulan
Tahniah! Anda telah mencipta aplikasi WebGL pertama anda yang menggambar titik. Ini hanya permulaan perjalanan anda ke dunia menarik grafik komputer. Sebagai anda terus melihat, anda akan dapat mencipta bentuk lebih kompleks, menambah animasi, dan bahkan memasuki grafik 3D.
Ingat, belajar WebGL adalah seperti belajar menggambar – ia memerlukan latihan dan kesabaran. Jangan disangsahkan jika hal-hal tidak berjalan sepenuhnya baik kali pertama. Terus cuba dan eksperimen, dan segera anda akan mencipta karya digital yang indah!
Dalam pelajaran berikutnya, kita akan melihat bagaimana menambah warna yang berbeza ke titik kita dan mencipta bentuk yang lebih kompleks. Sampaijumpa lagi, selamat berkoding!
Credits: Image by storyset