Panduan Pemula untuk格拉菲ك 3D di Penjelajah Web
Hai sana, para ahli grafik 3D masa depan! Saya sangat gembira untuk menjadi panduan Anda dalam perjalanan menarik ini ke dunia WebGL. Sebagai seseorang yang telah mengajar grafik komputer selama bertahun-tahun, saya bisa katakan kepada Anda bahwa WebGL seperti tongkat sihir untuk penjelajah web Anda. Itu memungkinkan Anda untuk menciptakan grafik dan animasi 3D yang memukau di halaman web Anda. Apakah itu menarik? Mari kita masuk!
Apa Itu WebGL?
WebGL, singkatan dari Web Graphics Library, adalah API JavaScript yang memungkinkan Anda untuk merender grafik interaktif 2D dan 3D di setiap penjelajah web yang kompatibel tanpa perlu plugin. Itu seperti memberikan penjelajah web Anda kekuatan super untuk menciptakan pengalaman visual yang menakjubkan!
Sejarah Singkat
WebGL pertama kali diperkenalkan pada tahun 2011, dan sejak itu, itu telah revolusi dalam cara kita berpikir tentang grafik di web. Sebelum WebGL, jika Anda ingin menciptakan grafik 3D di penjelajah, Anda akan perlu mengandalkan plugin seperti Flash atau applet Java. Sekarang, dengan WebGL, kita dapat melakukan semua ini secara native di penjelajah. Itu seperti kita telah meningkat dari sepeda ke mobil sport!
Prasyarat
Sebelum kita mulai perjalanan WebGL kita, mari pastikan kita memiliki alat yang tepat di tas punggung kita:
- Penjelajah web modern (Chrome, Firefox, Safari, atau Edge)
- Editor teks (Saya merekomendasikan Visual Studio Code, tapi yang lain juga boleh)
- Pengetahuan dasar HTML dan JavaScript (Jangan khawatir jika Anda kurang berpengalaman, kita akan meninjau saat kita melanjutkan)
Memulai dengan WebGL
Mari kita buat program WebGL pertama kita! Kita akan mulai dengan contoh sederhana "Hello, WebGL!" yang menampilkan segitiga berwarna di layar.
Langkah 1: Menyiapkan HTML
Pertama, kita perlu membuat file HTML dengan elemen canvas. Canvas ini adalah tempat di mana magik WebGL kita akan terjadi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, WebGL!</title>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="webgl-demo.js"></script>
</body>
</html>Dalam HTML ini, kita telah membuat elemen canvas dengan ID "glCanvas" dan mengatur dimensinya ke 640x480 piksel. Kita juga menghubungkan ke file JavaScript bernama "webgl-demo.js" tempat kita akan menulis kode WebGL kita.
Langkah 2: Menginisialisasi WebGL
Sekarang, mari kita buat file "webgl-demo.js" dan mulai menulis beberapa JavaScript untuk menginisialisasi WebGL:
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
if (!gl) {
alert("Tidak dapat menginisialisasi WebGL. Penjelajah atau mesin Anda mungkin tidak mendukungnya.");
return;
}
// Set warna clear ke hitam, sepenuhnya opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear buffer warna dengan warna clear yang ditentukan
gl.clear(gl.COLOR_BUFFER_BIT);
}
window.onload = main;mari kitauraikan ini:
- Kita mendapatkan referensi ke elemen canvas kita.
- Kita mencoba mendapatkan konteks WebGL dari canvas. Jika ini gagal, itu berarti WebGL tidak didukung, dan kita menampilkan pesan kesalahan.
- Jika sukses, kita mengatur warna clear (warna latar belakang) ke hitam dan mengclear canvas.
Langkah 3: Membuat Shaders
Shaders adalah program khusus yang berjalan di GPU. Mereka ditulis dalam bahasa GLSL (OpenGL Shading Language). Kita memerlukan dua jenis shaders: shaders verteks dan shaders fragmen.
// Program shader verteks
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Program shader fragmen
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;Shader verteks menempatkan vertices kita, sedangkan shader fragmen memberikan warna pada piksel (dalam kasus ini, merah).
Langkah 4: Menginisialisasi Program Shader
Sekarang kita perlu mengkompilasi dan menghubungkan shaders ini ke program shader:
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Tidak dapat menginisialisasi program shader: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('Terjadi kesalahan saat mengkompilasi shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}Kode ini mengkompilasi shaders kita, menghubungkan mereka ke program shader, dan memeriksa kesalahan.
Langkah 5: Membuat Segitiga
Sekarang, mari kita buat data untuk segitiga kita:
function initBuffers(gl) {
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
-1.0, 1.0,
1.0, 1.0,
-1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
return {
position: positionBuffer,
};
}Ini menciptakan buffer dan mengisi data vertices segitiga kita.
Langkah 6: Menggambar Scene
Akhirnya, mari kita gabungkan semua dan menggambar segitiga kita:
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(programInfo.program);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
2, // 2 komponen per iterasi
gl.FLOAT, // data adalah float 32bit
false, // jangan normalisasi
0, // langkah (0 = otomatis)
0 // offset ke buffer
);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}Fungsi ini mengclear canvas, mengatur program shader, menghubungkan data buffer, dan akhirnya menggambar segitiga.
Menggabungkan Semua
Sekarang, mari kita perbarui fungsi main kita untuk menggunakan semua bagian ini:
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
if (!gl) {
alert("Tidak dapat menginisialisasi WebGL. Penjelajah atau mesin Anda mungkin tidak mendukungnya.");
return;
}
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
},
};
const buffers = initBuffers(gl);
drawScene(gl, programInfo, buffers);
}
window.onload = main;Dan itu saja! Program WebGL pertama Anda. Ketika Anda membuka file HTML Anda di penjelajah, Anda seharusnya melihat segitiga merah di latar belakang hitam. Selamat!
Metode WebGL Umum
Berikut adalah tabel dari beberapa metode WebGL yang kita gunakan dan tujuannya:
| Metode | Tujuan |
|---|---|
gl.createBuffer() |
Membuat objek buffer baru |
gl.bindBuffer() |
Menghubungkan objek buffer ke target |
gl.bufferData() |
Menginisialisasi dan membuat penyimpanan data objek buffer |
gl.createShader() |
Membuat objek shader |
gl.shaderSource() |
Mengatur kode sumber shader |
gl.compileShader() |
Mengkompilasi objek shader |
gl.createProgram() |
Membuat objek program |
gl.attachShader() |
Menghubungkan objek shader ke objek program |
gl.linkProgram() |
Menghubungkan objek program |
gl.useProgram() |
Mengatur program tertentu sebagai bagian dari keadaan rendering saat ini |
gl.getAttribLocation() |
Mengembalikan lokasi variabel atribut |
gl.enableVertexAttribArray() |
Mengaktifkan array atribut |
gl.vertexAttribPointer() |
Menentukan tata letak data atribut |
gl.drawArrays() |
Menggambar primitif dari data array |
Kesimpulan
Wah, kita telah meliputi banyak hal hari ini! Kita telah belajar apa itu WebGL, mengatur lingkungan pengembangan kita, dan menciptakan program WebGL pertama kita. Ingat, belajar WebGL seperti belajar menunggang sepeda - mungkin terlihat wobbly pada awalnya, tapi dengan latihan, Anda akan segera berpacu!
Dalam pelajaran berikutnya, kita akan menjelajahi bentuk yang lebih kompleks, menambah interaktivitas, dan bahkan masuk ke grafik 3D. Dunia WebGL luas dan menarik, dan saya sabar untuk menjelajahi lebih banyak dengan Anda. Sampai jumpa lagi, selamat coding!
Credits: Image by storyset