Malay

TUTORIAL WebGL

Aplikasi WebGL

Contoh WebGL

WebGL - Terjemahan: Menggerakkan Objek di Ruang 3D

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

WebGL - Translation

Apa Itu Translasi di WebGL?

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

Dasar-Dasar Translasi

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

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

Mengapa Translasi Penting?

Imaginasi sebuah 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 input pengguna atau mengikuti animasi yang sudah ditentukan.

Langkah-Langkah Menggerakkan Segitiga

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

Langkah 1: Definisikan Segitiga Anda

Pertama, kita perlu membuat segitiga kita. Di WebGL, kita mendefinisikan bentuk menggunakan titik sudut (vertices). Berikut adalah cara kita mungkin mendefinisikan segitiga sederhana:

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

Ini menciptakan segitiga dengan titik atas di (0, 0.5) dan titik dasar di (-0.5, -0.5) dan (0.5, -0.5).

Langkah 2: Buat Matriks Translasi

Untuk menggerakkan segitiga kita, kita perlu membuat matriks translasi. Matriks ini memberitahu WebGL berapa banyak kita ingin menggerakkan 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 ingin gerakkan di sumbu x dan y secara berurutan.

Langkah 3: Terapkan Translasi di Shader Verteks

Sekarang kita masuk ke bagian yang menarik! Kita perlu mengubah shader verteks kita untuk menerapkan translasi. Berikut adalah shader verteks 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 verteks, mengkonversinya menjadi vektor 4D (diperlukan untuk perkalian matriks), dan kemudian mengalikannya dengan matriks translasi kita.

Langkah 4: Update Nilai Translasi

Untuk membuat segitiga kita bergerak, kita perlu update nilai translasi secara berangsur. Kita dapat melakukan ini di kode JavaScript kita:

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

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

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

requestAnimationFrame(updateAndDraw);
}

Fungsi ini update nilai translasi kita, kirim matriks baru ke GPU, dan kemudian menggambar segitiga kita. Pemanggilan requestAnimationFrame memastikan ini terjadi mulus, frame demi frame.

Contoh - Translasi Segitiga

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

// Shader verteks
const vertexShaderSource = `
attribute vec2 a_position;
uniform mat4 u_translation;

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

// Shader fragmen
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 verteks
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 canvas
gl.clear(gl.COLOR_BUFFER_BIT);

// Update 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:

  1. Kita mendefinisikan shaders kita, termasuk matriks translasi.
  2. Kita menginisialisasi WebGL, membuat program kita, dan memuat verteks segitiga.
  3. Kita membuat variabel untuk translasi (tx dan ty).
  4. Dalam fungsi updateAndDraw, kita:
  • Bersihkan canvas
  • Update nilai translasi
  • Buat matriks translasi baru
  • Kirim matriks ini ke GPU
  • Gambar segitiga
  • Request frame berikutnya

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

Kesimpulan

Translasi di WebGL mungkin tampak kompleks pada awalnya, tetapi sebenarnya hanya tentang menggerakkan objek secara cerdas. Kita telah menutup dasar-dasar di sini, tetapi ada banyak hal lain yang Anda dapat 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, gerakan pertama segitiga. Terus latih, eksperimen, dan sebelum Anda mengetahui, Anda akan menciptakan grafik 3D yang menarik dan interaktif yang bergerak dan merespon seperti yang Anda inginkan.

Selamat coding, dan may triangle Anda selalu menemukan jalan pulang!

Credits: Image by storyset

Tutorial Sebelumnya:
WebGL - Warna
Tutorial Seterusnya:
WebGL - Penskalaan