WebGL - Rotasi: Menghidupkan Grafik Anda

Halo, para pengembang WebGL yang bersemangat! 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 menghidahkan Anda ke dalam dunia magis yang berputar-putar三角形 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 sedikit 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 (vertex) yang membentuk bentuk kita di sekitar sumbu pusat. Ini bisa menjadi sumbu X, Y, atau Z, atau bahkan kombinasi dari mereka.

Keajaiban Matriks

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

Contoh - Memutar Sebuah 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 kita akan berada di sini
</script>

Langkah 2: Inisialisasi 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 untuk mendapatkan konteks WebGL. Jika WebGL tidak didukung, kita akan melihat pesan kesalahan.

Langkah 3: Membuat Shaders Kami

Shaders adalah program khusus yang berjalan di GPU. Kita memerlukan dua jenis: shaders verteks dan shaders fragmen. Ini adalah contoh yang 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);
}
`;

Shader verteks mengaplikasikan matriks rotasi kita, sedangkan shader fragmen secara sederhana 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 yang 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 terpusat di titik asal.

Langkah 6: Magic Rotasi

Ini adalah 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 yang 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 canvas
3. Menyiapkan program shader dan atribut
4. Membuat dan mengaplikasikan matriks rotasi
5. Menggambar segitiga
6. Meminta frame animasi berikutnya

Dan voila! Kita memiliki segitiga yang berputar!

Kesimpulan

Selamat! Anda telah membuat bentuk berputar pertama Anda dalam WebGL. Ingat, ini hanya permulaan. Dengan prinsip-prinsip dasar ini, Anda dapat membuat scene 3D yang kompleks dengan beberapa objek berputar.

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

Tetap latih, tetap eksperimen, dan terutama, tetap bersenang-senang dengan WebGL. Sebelum Anda tahu, Anda akan membuat visualisasi 3D yang menakjubkan yang akan membuat bahkan pengembang yang berpengalaman mengatakan "Wow!"

Metode	Deskripsi
createShader(gl, type, source)	Membuat dan mengkompiler shader
createRotationMatrix(angleInRadians)	Menghasilkan matriks rotasi 2D
render()	Menggambar segitiga yang berputar
gl.clearColor(r, g, b, a)	Mengatur warna untuk membersihkan canvas
gl.clear(gl.COLOR_BUFFER_BIT)	Membersihkan canvas
gl.useProgram(program)	Mengatur program shader saat ini
gl.getAttribLocation(program, name)	Mendapatkan lokasi atribut
gl.enableVertexAttribArray(location)	Mengaktifkan 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 coding, dan semoga segitiga Anda selalu berputar ke arah yang benar!

Credits: Image by storyset