Malay

TUTORIAL WebGL

Aplikasi WebGL

Contoh WebGL

WebGL - Pandangan Umum HTML5 Canvas

Hai, para ahli gambar web masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia WebGL dan HTML5 Canvas. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda dalam petualangan ini. Jangan khawatir jika Anda baru belajar pemrograman – kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Jadi, ambillah kuas virtual Anda, dan mari kita mulai!

WebGL - Html5 Canvas Overview

HTML5 Canvas

Apa Itu HTML5 Canvas?

Bayangkan Anda memiliki kanvas digital yang ajaib tempat Anda dapat menggambar apa pun yang Anda inginkan menggunakan kode. Itu sebenarnya apa yang dimaksud dengan HTML5 Canvas! Ini adalah elemen yang kuat diperkenalkan dalam HTML5 yang memungkinkan kita menggambar grafik, membuat animasi, dan bahkan membuat permainan di dalam browser web kita.

Membuat Kanvas Pertama Anda

Mari kita mulai dengan membuat kanvas HTML5 sederhana:

<!DOCTYPE html>
<html>
<head>
<title>Kanvas Pertama Saya</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

Dalam contoh ini, kita telah membuat elemen kanvas dengan id "myCanvas", lebar 400 piksel, dan tinggi 200 piksel. Itu seperti menyiapkan kaki kayu dengan kanvas kosong – sekarang kita siap untuk menggambar!

Menggambar di Kanvas

Sekarang kita memiliki kanvas, mari kita gambarkan sesuatu di atasnya. Kita akan menggunakan JavaScript untuk ini:

<!DOCTYPE html>
<html>
<head>
<title>Menggambar di Kanvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

mari kitauraikan ini:

  1. Kita mendapatkan referensi ke elemen kanvas kita menggunakan getElementById.
  2. Kita mendapatkan konteks rendering 2D dari kanvas menggunakan getContext('2d').
  3. Kita mengatur warna isi ke biru menggunakan fillStyle.
  4. Akhirnya, kita menggambar kotak biru menggunakan fillRect(x, y, width, height).

Ketika Anda membuka ini di browser Anda, Anda akan melihat kotak biru muncul di kanvas Anda. Selamat! Anda baru saja menciptakan lukisan digital pertama Anda!

Konteks Rendering

Apa Itu Konteks Rendering?

Bayangkan konteks rendering sebagai set alat lukisan Anda. Itu menyediakan metode dan properti yang memungkinkan Anda menggambar di kanvas. Dalam contoh sebelumnya, kita menggunakan konteks rendering 2D, tetapi ada jenis lainnya juga.

Konteks Rendering 2D

Konteks rendering 2D adalah yang paling banyak digunakan dan menyediakan berbagai macam fungsi gambar 2D. Berikut adalah tabel dari beberapa metode konteks 2D yang berguna:

Metode Deskripsi
fillRect(x, y, width, height) Menggambar kotak terisi
strokeRect(x, y, width, height) Menggambar garis kotak
fillText(text, x, y) Menggambar teks terisi di kanvas
strokeText(text, x, y) Menggambar garis teks di kanvas
beginPath() Memulai path baru
moveTo(x, y) Memindahkan path ke titik yang ditentukan
lineTo(x, y) Menggambar garis ke titik yang ditentukan
arc(x, y, radius, startAngle, endAngle) Menggambar busur atau lingkaran

Mari kita gunakan beberapa metode ini untuk menciptakan gambar yang lebih kompleks:

<!DOCTYPE html>
<html>
<head>
<title>Gambar Kompleks</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Menggambar rumah
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// Menggambar atap
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fill();

// Menggambar pintu
ctx.fillStyle = 'yellow';
ctx.fillRect(160, 150, 30, 50);

// Menggambar teks
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Rumah Saya', 140, 190);
</script>
</body>
</html>

Dalam contoh ini, kita telah menggambar rumah sederhana menggunakan berbagai metode konteks 2D. Kita menggunakan fillRect untuk badan rumah dan pintu, beginPath, moveTo, dan lineTo untuk atap, dan fillText untuk menambahkan label. Bicarakan dengan koordinat dan warna untuk menciptakan rumah unik Anda sendiri!

Konteks WebGL

Pengenalan ke WebGL

Sekarang, mari kita langkah ke dunia menarik grafik 3D dengan WebGL. WebGL (Web Graphics Library) adalah API JavaScript untuk merender grafik interaktif 3D dan 2D dalam browser web apa pun yang kompatibel tanpa menggunakan plugin.

Mendapatkan Konteks WebGL

Untuk menggunakan WebGL, kita perlu mendapatkan konteks rendering WebGL bukan konteks 2D. Beginilah caranya:

<!DOCTYPE html>
<html>
<head>
<title>Konteks WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var 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');
}
</script>
</body>
</html>

Dalam contoh ini, kita mencoba mendapatkan konteks WebGL. Jika itu tidak didukung, kita kembali ke konteks experimental-webgl. Jika itu juga tidak tersedia, kita memperingatkan pengguna bahwa browser mereka tidak mendukung WebGL.

Contoh Sederhana WebGL

Mari kita buat contoh WebGL sederhana yang membersihkan kanvas dengan warna:

<!DOCTYPE html>
<html>
<head>
<title>WebGL Sederhana</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var 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');
} else {
// Mengatur warna bersih ke merah, sepenuhnya opaque
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// Membersihkan buffer warna dengan warna yang ditentukan
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

Dalam contoh ini, kita mengatur warna bersih ke merah menggunakan gl.clearColor(red, green, blue, alpha), di mana nilai setiap warna berada di antara 0.0 hingga 1.0. Kemudian kita membersihkan buffer warna dengan warna ini menggunakan gl.clear(gl.COLOR_BUFFER_BIT). Ketika Anda menjalankan ini, Anda seharusnya melihat kanvas merah.

Ingat, WebGL jauh lebih kompleks daripada rendering kanvas 2D dan melibatkan konsep seperti shaders, buffers, dan matriks. Tetapi jangan khawatir! Kita akan menjelajahi ini di les berikutnya.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia HTML5 Canvas dan WebGL. Kita telah menyoroti dasar-dasar membuat kanvas, menggambar di 2D, dan bahkan merendam kaki ke dunia 3D WebGL.

Ingat, belajar pemrograman grafik adalah seperti belajar melukis – itu memerlukan latihan dan kesabaran. Jangan takut untuk mencoba contoh kode, mengubah nilai, dan melihat apa yang terjadi. Semakin Anda bermain, semakin Anda akan memahami bagaimana semua hal ini bekerja.

Dalam les berikutnya, kita akan mendalami teknik 2D kanvas yang lebih tingkat lanjut dan mulai menjelajahi dunia menarik shaders WebGL. Sampai jumpa, terus coding dan senang menggambar!

Credits: Image by storyset

Tutorial Sebelumnya:
WebGL - Pengenalan
Tutorial Seterusnya:
WebGL - Asas