WebGL - Penstriman: Panduan untuk Pemula

Hai, para pengembang WebGL yang bersemangat! Hari ini, kita akan melihat dunia yang menarik pengskalaan dalam WebGL. Jangan khawatir jika Anda baru dalam pemrograman – saya akan memandu Anda di setiap langkah dengan perhatian dan kesabaran yang sama seperti yang saya gunakan di kelas selama tahun. Mari kita mulai perjalanan yang menarik ini bersama!

Apa Itu Pengskalaan dalam WebGL?

Sebelum kita masuk ke kode, mari kita pahami apa arti pengskalaan dalam konteks grafik komputer. Bayangkan Anda memiliki boneka kesukaan. Pengskalaan adalah seperti memiliki tongkat ajaib yang dapat membuat boneka ini besar atau kecil saat tetap menjaga bentuknya. Dalam WebGL, kita bisa melakukan sihir ini dengan objek 3D kita!

Pentingnya Pengskalaan

Pengskalaan sangat penting dalam menciptakan scene 3D yang realistis dan dinamis. Itu memungkinkan kita untuk:

1. Menyesuaikan ukuran objek agar cocok dengan scene kita
2. Membuat animasi di mana objek tumbuh atau menyusut
3. Menjaga proporsi yang benar dalam model kompleks

Langkah-Langkah yang Diperlukan untuk Pengskalaan dalam WebGL

Untuk menskala objek dalam WebGL, kita harus mengikuti sejumlah langkah. Mari kita rincikan mereka:

Langkah	Deskripsi
1. Buat Matriks Skala	Kita mulai dengan membuat matriks khusus yang memberitahu WebGL bagaimana menskala objek kita
2. Kalikan dengan Matriks Model	Kita gabungkan matriks skalanya dengan matriks model yang ada dari objek
3. Kirim ke Shader	Kita kirim matriks ini ke program shader kita
4. Terapkan di Vertex Shader	Shader menggunakan matriks ini untuk menyesuaikan posisi setiap vertex

Jangan khawatir jika langkah ini terdengar rumit – kita akan menjelajahi masing-masing langkah secara detil dengan contoh kita!

Contoh – Skala Segitiga

Mari kita terapkan pengetahuan kita dengan menskala segitiga sederhana. Kita akan mulai dengan setup WebGL dasar dan kemudian menambahkan fungsionalitas pengskalaan.

Langkah 1: Setup Konteks WebGL

Pertama, kita perlu menyiapkan konteks WebGL kita. Berikut cara kita melakukannya:

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL tidak didukung');
return;
}

Kode ini mencari elemen canvas kita dan membuat konteks WebGL. Itu seperti menyiapkan kanvas dan kuas sebelum kita mulai seni kita!

Langkah 2: Definisikan Shader Verteks

Sekarang, mari kita buat shader verteks. Ini adalah tempat sihir pengskalaan terjadi:

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;

void main() {
vec3 position = u_matrix * vec3(a_position, 1);
gl_Position = vec4(position.xy, 0, 1);
}
`;

Shader ini mengambil setiap posisi vertex dan mengalikannya dengan matriks kita (yang akan termasuk skalanya). Itu seperti memberikan petunjuk kepada setiap titik dari segitiganya bagaimana bergerak.

Langkah 3: Definisikan Shader Fragmen

Shader fragmen menentukan warna segitiganya:

const fragmentShaderSource = `
precision mediump float;

void main() {
gl_FragColor = vec4(1, 0, 0, 1);  // Warna merah
}
`;

Kita membuatnya sederhana – segitiganya akan berwarna merah. Jangan khawatir, Anda bebas untuk mencoba warna lainnya!

Langkah 4: Buat dan Hubungkan Program Shader

Sekarang, mari kita kompiler dan hubungkan shader kita:

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

Proses ini seperti mengassembly bagian-bagian mesin – setiap shader adalah komponen, dan kita menjadikan mereka menjadi program kita.

Langkah 5: Buat Data Segitiga

Mari kita tentukan segitiganya:

const positions = new Float32Array([
0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

Koordinat ini menentukan segitiga sederhana. Pikirkan itu seperti memplot titik di grafik untuk menggambar bentuk kita.

Langkah 6: Implementasikan Pengskalaan

Sekarang untuk bagian yang menarik – menskala segitiganya! Kita akan menggunakan fungsi untuk membuat matriks skalanya:

function createScaleMatrix(scaleX, scaleY) {
return new Float32Array([
scaleX, 0, 0,
0, scaleY, 0,
0, 0, 1
]);
}

// Contoh: Skala segitiga menjadi dua kali ukurannya
const scaleMatrix = createScaleMatrix(2, 2);

Matriks ini seperti set petunjuk yang memberitahu WebGL berapa banyak untuk memperpanjang atau menyusutkan segitiganya di setiap arah.

Langkah 7: Render Segitiga yang Diskala

Akhirnya, mari kita gabungkan semua dan render segitiga yang diskala:

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

const matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
gl.uniformMatrix3fv(matrixUniformLocation, false, scaleMatrix);

gl.drawArrays(gl.TRIANGLES, 0, 3);

Kode ini menerapkan matriks skalanya dan menggambar segitiga. Itu seperti akhirnya mengungkapkan seni kita setelah semua persiapan!

Kesimpulan

Selamat! Anda baru saja menskala segitiga pertama Anda dalam WebGL. Ingat, pengskalaan hanya salah satu dari banyak transformasi yang Anda bisa terapkan dalam WebGL. Sepanjang perjalanannya, Anda akan menemukan bagaimana menggabungkan pengskalaan dengan rotasi, translasi, dan lainnya untuk menciptakan scene 3D yang kompleks dan dinamis.

Latihan membuat sempurna, jadi jangan khawatir untuk mencoba nilai skalanya dan bentuk lainnya. Siapa tahu? Game video besar berikutnya atau aplikasi web 3D mungkin dimulai di sini, dari segitiga yang Anda skalakan!

Selamat coding, dan mayat WebGL Anda selalu mencapai tinggi baru!

Credits: Image by storyset