WebGL - Menggambar Sebuah Quad
Hai, para pengembang web yang bersemangat! Hari ini, kita akan mengemban sebuah perjalanan menarik ke dalam dunia WebGL, di mana kita akan belajar bagaimana menggambar sebuah quadrilateral (atau "quad" untuk pendeknya). Jangan khawatir jika Anda baru dalam pemrograman – saya akan mengarahkan Anda melalui setiap langkah dengan kesabaran seorang guru berpengalaman yang telah membantu banyak siswa seperti Anda.
Apa Itu WebGL?
Sebelum kita memulai menggambar quads, mari kitaambil sedikit waktu untuk memahami apa itu WebGL. WebGL (Web Graphics Library) adalah sebuah 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 imajinasimu kehidupan di halaman web!
Langkah untuk Menggambar Sebuah Quadrilateral
Sekarang, mari kita pecah proses menggambar sebuah quad menjadi langkah yang dapat dikelola. Pikirkan itu seperti membangun sebuah rumah – kita akan mulai dari dasar dan kemudian naik ke atas.
Langkah 1: Setel HTML Canvas
Pertama, kita memerlukan sebuah kanvas untuk menggambar. Dalam HTML, kita menggunakan elemen <canvas>. Itu seperti menyiapkan sebuah kaki 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 menjadi 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 shaders 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
Waktunya 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, saat 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="id">
<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 dia! Quad 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 menempuh banyak langkah hari ini, mulai dari menyiapkan kanvas hingga membuat shaders dan akhirnya menggambar bentuk kita. Ingat, belajar WebGL seperti belajar menggambar – itu memerlukan latihan dan kesabaran. Jangan mudah terkejut jika itu tidak langsung berjalan mulus. Terus mencoba dan segera Anda akan menciptakan grafik 3D yang menakjubkan di web!
Dalam pelajaran berikutnya, kita akan eksplor bagaimana menambahkan interaktivitas ke karya WebGL kita. Sampai saat itu, selamat coding!
Credits: Image by storyset