WebGL - Context: Panduan Mesra untuk Pemula

Hai sana, para ahli WebGL masa depan! Saya begitu gembira untuk menjadi panduanmu dalam perjalanan menarik ini ke dunia WebGL. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa katakan bahwa WebGL seperti sebuah kuas ajaib untuk browsermu. Itu memungkinkanmu untuk menciptakan grafik 3D yang memukau langsung di halaman webmu! Jadi, mari kita roll up lengan dan masuk ke dalam, ya?

Membuat elemen Canvas HTML-5

Pertama-tama, kita butuhkan sebuah kanvas untuk melukis. Dalam HTML5, kita memiliki hal yang menarik ini disebut elemen <canvas>. Itu seperti lembar kertas kosong tempat kita akan menggambar karya WebGL yang memukau.

Mari kita buat kanvas kita:

<canvas id="myWebGLCanvas" width="800" height="600">
Browser Anda tidak mendukung HTML5 canvas.
</canvas>

Kode ini menciptakan kanvas yang 800 piksel lebar dan 600 piksel tinggi. Kita memberinya ID "myWebGLCanvas" - pikirkan ini seperti tag nama untuk kanvas kita. Teks di dalam tag adalah pesan fallback untuk browser yang tidak mendukung canvas (tetapi jangan khawatir, sebagian besar browser modern mendukung ini).

Mendapatkan ID Kanvas

Sekarang kita punya kanvas, kita perlu mengambilnya dalam kode JavaScript kita. Kita melakukan ini menggunakan metode getElementById. Itu seperti memanggil kanvas kita dengan tag namanya.

let canvas = document.getElementById('myWebGLCanvas');

Baris ini menemukan elemen kanvas kita dan menyimpannya dalam variabel canvas. Mudah-mudahan!

Mendapatkan Konteks WebGL

INI adalah bagian yang menarik - mendapatkan konteks WebGL kita. Konteks adalah seperti set alat menggambar ajaib yang kita akan gunakan di kanvas kita.

let gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL tidak didukung, fallback ke experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Browser Anda tidak mendukung WebGL');
}

mari kitauraikan ini:

1. Kita mencoba mendapatkan konteks WebGL menggunakan getContext('webgl').
2. Jika itu tidak berhasil (mungkin browser agak tua), kita coba experimental-webgl.
3. Jika kita masih belum mendapatkan konteks, kita peringatkan pengguna bahwa browser mereka tidak mendukung WebGL.

WebGLContextAttributes

Ketika kita menciptakan konteks WebGL, kita dapat menentukan beberapa atribut untuk menyesuaikan perilakunya. Itu seperti memilih pengaturan untuk kuas ajaib kita. Berikut adalah tabel dari atribut yang tersedia:

Atribut	Deskripsi	Nilai Default
alpha	Kanvas mengandung buffer alpha	true
depth	Buffer menggambar memiliki buffer kedalaman sedikitnya 16 bit	true
stencil	Buffer menggambar memiliki buffer stensil sedikitnya 8 bit	false
antialias	Buffer menggambar melakukan anti-aliasing	true
premultipliedAlpha	Penyusun halaman akan menganggap buffer menggambar berisi warna dengan alpha yang dipremultiplied	true
preserveDrawingBuffer	Buffer tidak akan dihapus dan akan menjaga nilai mereka sampai dihapus atau ditimpa	false
failIfMajorPerformanceCaveat	Penciptaan konteks akan gagal jika performa sistem rendah	false

Untuk menggunakan atribut ini, kita dapat mengirimkan objek saat mendapatkan konteks:

let contextAttributes = {
alpha: false,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false
};

let gl = canvas.getContext('webgl', contextAttributes);

WebGLRenderingContext

Setelah kita mendapatkan konteks WebGL, kita dapat mulai menggunakan metode dan propertinya untuk menciptakan grafik yang menakjubkan. WebGLRenderingContext menyediakan semua fungsi menggambar WebGL.

Berikut adalah contoh sederhana yang membersihkan kanvas dengan warna langit biru:

if (gl) {
// Set warna clear ke langit biru
gl.clearColor(0.529, 0.808, 0.922, 1.0);

// Clear buffer warna dengan warna yang ditentukan
gl.clear(gl.COLOR_BUFFER_BIT);
}

mari kitauraikan ini:

1. gl.clearColor(0.529, 0.808, 0.922, 1.0): Ini mengatur warna yang akan digunakan untuk membersihkan kanvas. Nomor-nomor ini mewakili Red, Green, Blue, dan nilai Alpha, masing-masing berkisar dari 0 hingga 1.
2. gl.clear(gl.COLOR_BUFFER_BIT): Ini sebenarnya membersihkan kanvas dengan warna yang ditentukan.

Dan voila! Anda baru saja melukis karya WebGL pertamamu - sebuah kanvas langit biru yang indah!

Ingat, ini hanya awal. WebGL memiliki banyak fungsi yang memungkinkan Anda menciptakan grafik 3D yang kompleks. Itu seperti belajar melukis - kita mulai dengan kanvas kosong dan warna tunggal, tetapi dengan latihan, Anda akan dapat menciptakan dunia 3D yang rumit dalam waktu singkat!

Saat kita mengakhiri pengenalan ini tentang konteks WebGL, saya teringat saat pertama kali mengajarkan konsep ini. Saya memiliki seorang murid yang begitu antusias tentang membersihkan kanvas dengan warna yang berbeda, dia menghabiskan sepanjang sore menciptakan program " Cahaya suasana berubah warna ". Hal ini menunjukkan, bahkan konsep yang paling sederhana dapat memicu kreativitas yang tak terbatas!

Dalam pelajaran berikutnya, kita akan mendalami WebGL dan mulai menggambar beberapa bentuk. Sampai saat itu, selamat coding, dan semoga kanvas Anda selalu berwarna-warni!

Credits: Image by storyset