WebGL - Translasi: Memindahkan Objek dalam Ruang 3D

Hai, para pengembang WebGL yang bersemangat! Hari ini, kita akan memulai perjalanan menarik ke dunia grafik 3D. Kita akan mengeksplorasi konsep translasi di WebGL, yang secara esensial adalah cara yang keren untuk mengatakan "memindahkan sesuatu." Pada akhir panduan ini, Anda akan dapat membuat objek menari di layar Anda seperti dansa digital! Jadi, mari kita masuk ke dalamnya!

WebGL - Translation

Apa Itu Translasi di WebGL?

Sebelum kita mulai memindahkan segitiga seperti pion catur, mari kita pahami apa arti translasi dalam konteks grafik komputer.

Dasar-Dasar Translasi

Translasi adalah proses memindahkan objek dari satu posisi ke posisi lain di ruang 2D atau 3D. Itu seperti mengambil gelas dari meja dan menempatkannya di rak. Gelas (objek kita) bergerak dari posisi aslinya ke posisi baru.

Di WebGL, kita menggunakan matematika untuk mencapai gerakan ini. Jangan khawatir jika Anda bukan ahli matematika – WebGL melakukan sebagian besar pekerjaan berat untuk kita!

Mengapa Translasi Penting?

Imaginilah permainan video di mana karakter tidak dapat bergerak, atau software modeling 3D di mana objek tetap di tempat. cukup membosankan, kan? Translasi memungkinkan kita untuk menciptakan grafik dinamis dan interaktif yang merespon masukan pengguna atau mengikuti animasi yang ditentukan sebelumnya.

Langkah untuk Mengubah Posisi Segitiga

Sekarang kita mengerti apa arti translasi, mari kitauraikan proses memindahkan segitiga sederhana di WebGL. Kita akan melakukan ini langkah demi langkah, agar Anda dapat ikuti dengan mudah.

Langkah 1: Definisikan Segitiga Anda

Pertama-tama, kita perlu menciptakan segitiga kita. Di WebGL, kita mendefinisikan bentuk menggunakan titik sudut (vertices). Berikut adalah contoh bagaimana kita dapat mendefinisikan segitiga sederhana:

const vertices = [
0.0, 0.5,   // Titik puncak
-0.5, -0.5,  // Titik bawah kiri
0.5, -0.5   // Titik bawah kanan
];

Ini menciptakan segitiga dengan titik puncaknya di (0, 0.5) dan titik dasarnya di (-0.5, -0.5) dan (0.5, -0.5).

Langkah 2: Buat Matriks Translasi

Untuk memindahkan segitiga kita, kita perlu membuat matriks translasi. Matriks ini memberitahu WebGL berapa banyak kita mau memindahkan objek kita di setiap sumbu (x, y, dan z). Berikut adalah cara kita membuat matriks translasi:

const translationMatrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, 0, 1
];

Di mana tx dan ty adalah jumlah yang kita inginkan untuk memindahkan di sumbu x dan y masing-masing.

Langkah 3: Terapkan Translasi di Vertex Shader

Sekarang datang bagian menarik! Kita perlu memodifikasi vertex shader kita untuk menerapkan translasi. Berikut adalah vertex shader sederhana yang termasuk translasi:

attribute vec2 a_position;
uniform mat4 u_translation;

void main() {
gl_Position = u_translation * vec4(a_position, 0, 1);
}

Shader ini mengambil setiap posisi vertex, mengubahnya menjadi vektor 4D (dibutuhkan untuk perkalian matriks), dan kemudian mengalikannya dengan matriks translasi.

Langkah 4: Perbarui Nilai Translasi

Untuk membuat segitiga kita bergerak, kita perlu memperbarui nilai translasi selama waktu. Kita dapat melakukan ini di kode JavaScript kita:

function updateAndDraw() {
tx += 0.01;  // Bergerak ke kanan
ty += 0.005; // Bergerak ke atas

// Perbarui matriks translasi
gl.uniformMatrix4fv(translationLocation, false, translationMatrix);

// Gambar segitiga
gl.drawArrays(gl.TRIANGLES, 0, 3);

requestAnimationFrame(updateAndDraw);
}

Fungsi ini memperbarui nilai translasi kita, mengirim matriks baru ke GPU, dan kemudian menggambar segitiga kita lagi. Pemanggilan requestAnimationFrame memastikan ini terjadi mulus, frame per frame.

Contoh – Translasi Segitiga

Mari kita gabungkan semua dengan contoh lengkap. Kode ini akan menciptakan segitiga yang bergerak diagonal di layar:

// Vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
uniform mat4 u_translation;

void main() {
gl_Position = u_translation * vec4(a_position, 0, 1);
}
`;

// Fragment shader
const fragmentShaderSource = `
precision mediump float;

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

// Inisialisasi WebGL
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');

// Buat dan kompilasi shaders
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

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

// Buat buffer dan muat data vertex
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// Setel atribut
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Setel uniform
const translationLocation = gl.getUniformLocation(program, "u_translation");

// Variabel translasi
let tx = 0;
let ty = 0;

function updateAndDraw() {
// Bersihkan kanvas
gl.clear(gl.COLOR_BUFFER_BIT);

// Perbarui translasi
tx += 0.01;
ty += 0.005;

// Buat matriks translasi
const translationMatrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, 0, 1
];

// Kirim matriks ke shader
gl.uniformMatrix4fv(translationLocation, false, translationMatrix);

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

// Request frame berikutnya
requestAnimationFrame(updateAndDraw);
}

// Mulai animasi
updateAndDraw();

Kode ini menciptakan segitiga merah yang bergerak diagonal di layar. mari kitauraikan apa yang terjadi:

Kita mendefinisikan shaders kita, termasuk matriks translasi.
Kita menginisialisasi WebGL, membuat program, dan memuat vertex kita.
Kita membuat variabel untuk translasi (tx dan ty).
Dalam fungsi updateAndDraw, kita:

Bersihkan kanvas
Perbarui nilai translasi
Buat matriks translasi
Kirim matriks ke GPU
Gambar segitiga
Request frame berikutnya

Dan voila! Anda telah menciptakan segitiga bergerak di WebGL. Selamat!

Kesimpulan

Translasi di WebGL mungkin tampak kompleks pada awalnya, tapi itu hanya tentang memindahkan objek secara cerdas di ruang. Kita telah menutup dasar-dasar disini, tetapi ada banyak hal lain yang bisa Anda lakukan dengan translasi – gabungkannya dengan rotasi dan skala, buat animasi kompleks, atau bahkan bangun lingkungan 3D interaktif.

Ingat, setiap perjalanan dimulai dengan langkah pertama – atau dalam kasus kita, pergerakan segitiga pertama. Terus latih, terus eksperimen, dan sebelum Anda sadari, Anda akan menciptakan grafik 3D yang menarik dan interaktif yang bergerak dan bereaksi seperti yang Anda inginkan.

Selamat mengoding, dan mayat segitigamu selalu menemukan jalan pulang!

Metode	Deskripsi
`gl.createShader()`	Membuat objek shader
`gl.shaderSource()`	Menyetel kode sumber shader
`gl.compileShader()`	Mengkompilasi shader
`gl.createProgram()`	Membuat objek program
`gl.attachShader()`	Menambahkan shader ke program
`gl.linkProgram()`	Menghubungkan program
`gl.useProgram()`	Mengatur program sebagai bagian dari keadaan rendering saat ini
`gl.createBuffer()`	Membuat objek buffer
`gl.bindBuffer()`	Mengikat buffer objek ke target
`gl.bufferData()`	Inisialisasi dan membuat toko data buffer
`gl.getAttribLocation()`	Mengembalikan lokasi variabel atribut
`gl.enableVertexAttribArray()`	Mengaktifkan array atribut
`gl.vertexAttribPointer()`	Menentukan Tata letak data atribut vertex
`gl.getUniformLocation()`	Mengembalikan lokasi variabel uniform
`gl.clear()`	Membersihkan buffer ke nilai default
`gl.uniformMatrix4fv()`	Menentukan nilai variabel uniform
`gl.drawArrays()`	Menggambar primitif dari data array

Credits: Image by storyset

Tutorial Sebelumnya:

WebGL - Warna

Tutorial Selanjutnya:

WebGL - Skala