WebGL - Konteks: Panduan Ramah untuk Pemula

Halo sana, para ahli WebGL masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ke dunia WebGL. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa katakan bahwa WebGL seperti sebuah pensel ajaib untuk browsermu. Itu memungkinkanmu untuk menciptakan grafik 3D yang menakjubkan di halaman webmu! Jadi, mari kita roll up lengan dan masuk ke dalam, shall we?

Membuat Element Canvas HTML-5

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

Mari kita buat kanvas kita:

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

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

Mendapatkan ID Kanvas

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

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

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

Mendapatkan Konteks Menggambar WebGL

Sekarang datang bagian 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, kembali 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 memperingatkan pengguna bahwa browser mereka tidak mendukung WebGL.

WebGLContextAttributes

Ketika kita membuat konteks WebGL kita, kita dapat menentukan beberapa atribut untuk menyesuaikan perilakunya. Itu seperti memilih pengaturan untuk pensel ajaib kita. Ini adalah tabel 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 stempel sedikitnya 8 bit	false
antialias	Buffer menggambar melakukan anti-aliasing	true
premultipliedAlpha	Page compositor akan menganggap buffer menggambar mengandung warna dengan alpha diprediksi	true
preserveDrawingBuffer	Buffers tidak akan diclear dan akan menjaga nilai mereka sampai diclear atau ditimpa	false
failIfMajorPerformanceCaveat	Pembuatan 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.

Ini 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 kita akan gunakan untuk clear kanvas. Nomor-nomor ini mewakili Merah, Hijau, Biru, dan Alpha, masing-masing berkisar dari 0 hingga 1.
2. gl.clear(gl.COLOR_BUFFER_BIT): Ini benar-benar membersihkan kanvas dengan warna yang kita tentukan.

Dan voila! Anda baru saja menggambar karya WebGL pertama Anda - sebuah kanvas langit biru yang cantik!

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

Saat kita menyelesaikan pengenalan ini ke konteks WebGL, saya teringat saat pertama kali mengajar konsep ini. Saya punya seorang murid yang sangat antusias tentang membersihkan kanvas dengan warna yang berbeda, dia menghabiskan seluruh sore menciptakan program " Cahaya Suasana yang Mengubah Warna". Itu menunjukkan, bahkan konsep yang paling sederhana dapat memicu kreativitas yang menakjubkan!

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

Credits: Image by storyset