WebGL - Menaamkan Sebuah Quad
Hai, para pengembang web yang sedang berkembang! Hari ini, kita akan memulai perjalanan yang menarik ke dunia WebGL, di mana kita akan belajar bagaimana menggambar sebuah quadrilateral (atau "quad" untuk pendek). Jangan khawatir jika Anda baru dalam pemrograman – saya akan mengarahkan Anda melalui setiap langkah dengan kesabaran seorang guru berpengalaman yang telah membantu ratusan murid seperti Anda.
Apa Itu WebGL?
Sebelum kita memulai menggambar quads, mari kitaambil sedikit waktu untuk memahami apa itu WebGL. WebGL (Web Graphics Library) adalah API JavaScript yang kuat yang memungkinkan kita untuk menciptakan grafik 2D dan 3D yang menakjubkan di dalam peramban web. Itu seperti memiliki sebuah kuas magis yang dapat membawa imajinasi Anda kehidupan di halaman web!
Langkah untuk Menggambar Sebuah Quadrilateral
Sekarang, mari kita pecahkan proses menggambar sebuah quad menjadi langkah-langkah yang dapat dikelola. Pahami ini sebagai membangun sebuah rumah – kita akan mulai dari dasar dan menaikkan tingkatnya.
Langkah 1: Setel HTML Canvas
Pertama, kita butuh sebuah kanvas untuk menggambar. Di HTML, kita menggunakan elemen <canvas>. Itu seperti menyiapkan sebuah kaki tilas untuk menggambar.
<canvas id="myCanvas" width="600" height="400">
Browser Anda tidak mendukung tag canvas HTML5.
</canvas>Langkah 2: Inisialisasi Konteks WebGL
Berikutnya, kita perlu mendapatkan konteks WebGL. Ini seperti memilih kuas WebGL magis kita.
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL tidak didukung, kembali ke experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Browser Anda tidak mendukung WebGL');
}Langkah 3: Buat Vertex Shader
Sekarang, kita akan membuat sebuah vertex shader. Ini memberitahu WebGL di mana untuk menggambar sudut-sudut quad kita.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);Langkah 4: Buat Fragment Shader
Shader fragmen menentukan warna quad kita. Mari kita buatnya biru yang cerah!
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);Langkah 5: Buat dan Hubungkan Program
Sekarang, kita akan membuat sebuah program dan menghubungkan shader-shader kita kepadanya. Ini seperti menggabungkan kuas dan cat kita.
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);Langkah 6: Buat Buffer dan Muat Data Vertex
Waktu untuk menentukan sudut-sudut quad kita!
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);Langkah 7: Hubungkan Buffer Posisi ke Atribut
Kita perlu memberitahu WebGL bagaimana membaca data posisi kita.
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);Langkah 8: Gambar Quad
Akhirnya, momen yang kita tunggu – mari kita gambarkan quad kita!
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);Contoh – Gambar Sebuah Quadrilateral
Sekarang, mari kita gabungkan semua itu dalam satu contoh yang lengkap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Quad</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Browser Anda tidak mendukung tag canvas HTML5.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Browser Anda tidak mendukung WebGL');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
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);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>Dan itu adalah! Quadrilateral WebGL Anda sendiri. Ketika Anda membuka file HTML ini di peramban, Anda seharusnya melihat sebuah quadrilateral biru yang indah di kanvas.
Kesimpulan
Selamat! Anda telah menggambar quad WebGL pertama Anda! Kita telah melihat banyak hal hari ini, dari menyiapkan kanvas hingga membuat shader dan akhirnya menggambar bentuk kita. Ingat, belajar WebGL seperti belajar menggambar – itu memerlukan latihan dan kesabaran. Jangan frustasi jika itu belum berjalan segera. Terus mencoba, dan segera Anda akan menciptakan grafik 3D yang menakjubkan di web!
Dalam pelajaran berikutnya, kita akan jelajahi bagaimana menambahkan interaktivitas ke kreasian WebGL kita. Sampai jumpa, selamat coding!
Credits: Image by storyset