WebGL - Rotasi: Menghidupkan Grafik Anda

Halo, para pengembang WebGL yang berbakat! Hari ini, kita akan mendalamkan salah satu aspek yang paling menarik dalam grafik komputer: rotasi. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengorbit Anda melalui dunia magis yang berputar-putar segitiga dan bentuk yang berputar. Jadi, siapkan kacamata 3D khayal Anda, dan mari kita mulai!

Mengerti Rotasi dalam WebGL

Sebelum kita melompat ke kode, mari kitaambil waktu untuk memahami apa arti rotasi dalam konteks WebGL. Bayangkan Anda memegang pesawat kertas. Ketika Anda memutar itu, Anda mengubah orientasinya di ruang. Dalam WebGL, kita melakukan hal yang sama, tapi dengan presisi matematika!

Rotasi dalam WebGL melibatkan perubahan posisi titik (poin yang membentuk bentuk kita) di sekitar sumbu pusat. Ini bisa menjadi sumbu X, Y, atau Z, atau bahkan kombinasi dari mereka.

Magic of Matrices

Sekarang, saya tahu apa yang Anda pikirkan: "Matriks? Bukan itu sesuatu dari film 'The Matrix'?" Well, bukanlah seperti itu, tapi mereka sangat keren! Dalam WebGL, kita menggunakan matriks untuk melakukan rotasi secara efisien. Jangan khawatir jika ini terdengar sulit - kita akan membongkar nya langkah demi langkah.

Contoh - Memutar Segitiga

mari kita mulai dengan contoh sederhana: memutar sebuah segitiga. Kita akan mulai dengan segitiga dasar dan kemudian membuatnya berputar seperti balerina geometri!

Langkah 1: Menyiapkan Lingkungan WebGL Kami

Pertama, kita perlu mengatur konteks WebGL kita. Ini adalah struktur HTML dasar:

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
// Kode WebGL kami akan berada di sini
</script>

Langkah 2: Menginisialisasi WebGL

Sekarang, mari kita inisialisasi WebGL:

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

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

Kode ini mendapatkan elemen canvas kita dan mencoba mendapatkan konteks WebGL. Jika WebGL tidak didukung, kita akan melihat pesan kesalahan.

Langkah 3: Membuat Shaders Kami

Shaders adalah program spesial yang berjalan di GPU. Kita memerlukan dua jenis: vertex shaders dan fragment shaders. Ini adalah set sederhana:

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;

Vertex shader menerapkan matriks rotasi kita, sedangkan fragment shader hanya memberikan warna merah ke segitiga kita.

Langkah 4: Kompiler dan Menghubungkan Shaders

Berikutnya, kita perlu mengkompiler dan menghubungkan shaders 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);

Kode ini membuat program shader kita, yang kita akan gunakan untuk menggambar segitiga berputar.

Langkah 5: Membuat Segitiga Kami

Sekarang, mari kita tentukan segitiga kita:

const positions = [
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, new Float32Array(positions), gl.STATIC_DRAW);

Ini membuat segitiga sederhana yang berpusat di titik asal.

Langkah 6: Magic Rotasi

Ini tempat magis terjadi. Kita akan membuat fungsi untuk menghasilkan matriks rotasi kita:

function createRotationMatrix(angleInRadians) {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
}

Fungsi ini mengambil sudut dalam radian dan mengembalikan matriks rotasi 3x3.

Langkah 7: Menggambar Segitiga Berputar

Akhirnya, mari kita gabungkan semua dan membuat segitiga kita berputar:

let angleInRadians = 0;

function render() {
angleInRadians += 0.01;

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

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 matrixLocation = gl.getUniformLocation(program, "u_matrix");
const matrix = createRotationMatrix(angleInRadians);
gl.uniformMatrix3fv(matrixLocation, false, matrix);

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

requestAnimationFrame(render);
}

render();

Fungsi ini melakukan beberapa hal:

1. Menambahkan sudut rotasi kita
2. Membersihkan layar
3. Menyiapkan program shader dan atribut
4. Membuat dan menerapkan matriks rotasi
5. Menggambar segitiga
6. Meminta frame animasi berikutnya

Dan voila! Kita memiliki segitiga yang berputar!

Kesimpulan

Selamat! Anda telah menciptakan bentuk berputar pertama Anda dalam WebGL. Ingat, ini hanya awal. Dengan prinsip dasar ini, Anda dapat menciptakan scene 3D yang kompleks dengan banyak objek berputar.

Saat kita mengakhiri, saya teringat tentang seorang siswa yang pernah berkata, "Saya pikir grafik komputer hanya tentang software yang indah, tapi sekarang saya melihat itu lebih seperti menjadi seorang pemandu boneka digital!" Dan dia benar - dengan WebGL, Anda adalah orang yang memutar tali pertunjukan boneka digital Anda sendiri.

Terus latih, terus eksperimen, dan terutama, terus bersenang-senang dengan WebGL. Sebelum Anda tahu, Anda akan menciptakan visualisasi 3D yang menakjubkan yang akan membuat pengembang yang berpengalaman mengatakan "WOW!"

Metode	Deskripsi
createShader(gl, type, source)	Membuat dan mengkompiler shader
createRotationMatrix(angleInRadians)	Menghasilkan matriks rotasi 2D
render()	Menggambar segitiga berputar
gl.clearColor(r, g, b, a)	Mengatur warna untuk membersihkan layar
gl.clear(gl.COLOR_BUFFER_BIT)	Membersihkan layar
gl.useProgram(program)	Mengatur program shader saat ini
gl.getAttribLocation(program, name)	Mendapatkan lokasi atribut
gl.enableVertexAttribArray(location)	Memfungsikan array atribut
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)	Mengikat buffer
gl.vertexAttribPointer(location, size, type, normalized, stride, offset)	Menentukan tata letak data verteks
gl.getUniformLocation(program, name)	Mendapatkan lokasi variabel uniform
gl.uniformMatrix3fv(location, transpose, value)	Mengatur nilai matriks uniform
gl.drawArrays(mode, first, count)	Menggambar primitif dari data array
requestAnimationFrame(callback)	Meminta frame animasi berikutnya

Selamat berkoding, dan mayat segitiganya selalu berputar ke arah yang benar!

Credits: Image by storyset