Indonesia

Tutorial WebGL

Aplikasi WebGL

Contoh WebGL

WebGL - Peninjauan Umum HTML5 Canvas

Hai, para ahli grafik web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia WebGL dan HTML5 Canvas. Sebagai guru komputer tetangga yang ramah, saya sangat senang untuk memandu Anda dalam petualangan ini. Jangan khawatir jika Anda baru saja memulai programming – kita akan memulai dari dasar dan mengembangkan kemampuan kita. Jadi, siapkan kuas virtual Anda, dan mari kita mulai!

WebGL - Html5 Canvas Overview

HTML5 Canvas

Apa Itu HTML5 Canvas?

Bayangkan Anda memiliki kanvas digital yang magis 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, bahkan membangun game langsung di browser web kita.

Membuat Canvas Pertama Anda

Mari kita mulai dengan membuat HTML5 Canvas 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 menciptakan elemen kanvas dengan id "myCanvas", lebar 400 piksel, dan tinggi 200 piksel. Itu seperti menyiapkan kaki kanvas 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 memperoleh 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. Ini 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 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
strokeText(text, x, y) Menggambar garis teks
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 lukisan yang lebih kompleks:

<!DOCTYPE html>
<html>
<head>
<title>Lukisan 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 menggambar rumah sederhana menggunakan berbagai metode konteks 2D. Kita menggunakan fillRect untuk tubuh rumah dan pintu, beginPath, moveTo, dan lineTo untuk atap, dan fillText untuk menambahkan label. Bercampurkan 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 yang kompatibel tanpa menggunakan plugin.

Mendapatkan Konteks WebGL

Untuk menggunakan WebGL, kita perlu mendapatkan konteks rendering WebGL bukan konteks 2D. Berikut adalah cara untuk melakukannya:

<!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, beralih 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 beralih ke konteks experimental-webgl. Jika itu juga tidak tersedia, kita memberikan peringatan kepada 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, beralih 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 dan 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 shader, buffer, dan matriks. Tetapi jangan khawatir! Kita akan menjelajahi hal ini dalam pelajaran berikutnya.

Kesimpulan

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

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

Dalam pelajaran berikutnya, kita akan mendalamkan teknik 2D kanvas yang lebih tingkat lanjut dan mulai menjelajahi dunia shader WebGL yang menarik. Sampai saat itu, terus coding dan senang menggambar!

Credits: Image by storyset

Tutorial Sebelumnya:
WebGL - Pengenalan
Tutorial Selanjutnya:
WebGL - Dasar