WebGL - Pipeline Grafik

Halo teman-teman yang sedang belajar pemrograman! Hari ini, kita akan memulai perjalanan menarik melalui Pipeline Grafik WebGL. Jangan khawatir jika Anda baru dalam dunia pemrograman – saya akan menjadi panduan yang ramah, dan kita akan mengambil langkah ini satu demi satu. Pada akhir panduan ini, Anda akan memiliki pemahaman kuat tentang bagaimana WebGL mengubah kode Anda menjadi visual yang menakjubkan di layar Anda.

JavaScript: Titik Awal

Sebelum kita mendalamkan diri ke dalam ke dalam WebGL, mari kita mulai dengan sesuatu yang familiar – JavaScript. WebGL diakses melalui JavaScript, membuatnya titik masuk yang sempurna untuk perjalanan kita.

Program WebGL Pertama Anda

Mari kita mulai dengan contoh yang sederhana:

// Dapatkan elemen canvas
const canvas = document.getElementById('myCanvas');

// Dapatkan konteks WebGL
const gl = canvas.getContext('webgl');

// Set warna clear (warna latar belakang)
gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Clear canvas
gl.clear(gl.COLOR_BUFFER_BIT);

Dalam kode ini, kita melakukan beberapa hal:

1. Kita mendapatkan referensi ke elemen canvas HTML kita.
2. Kita mendapatkan konteks rendering WebGL.
3. Kita set warna clear (dalam hal ini, hitam).
4. Kita clear canvas dengan warna yang ditentukan.

Ini mungkin tidak terlihat seperti banyak, tapi selamat! Anda baru saja menciptakan program WebGL pertama Anda. Itu seperti mempersiapkan kanvas kosong untuk karya masterpiece.

Vertex Shader: Menyculpt World Anda

Sekarang kita punya kanvas yang siap, mari kita bicara tentang vertex shaders. PERTimbangkan vertex shaders sebagai pemahat dunia 3D Anda. Mereka bekerja dengan data mentah objek Anda – vertex.

Vertex Shader Sederhana

Ini contoh vertex shader dasar:

attribute vec4 a_position;

void main() {
gl_Position = a_position;
}

Shader ini melakukan hal yang sederhana tapi penting – mengambil posisi setiap vertex dan menugaskannya ke gl_Position. Itu seperti mengatakan ke setiap titik objek 3D Anda, "Kau pergi kesini!"

Primitive Assembly: Menghubungkan Titik-Titik

Setelah vertex shader melakukan pekerjaannya, WebGL bergerak ke tahap primitive assembly. Tahap ini seperti permainan hubung titik – ia mengambil vertex individual dan menentukan bagaimana mereka harus dihubungkan untuk membentuk bentuk.

Misalnya, jika Anda menggambar sebuah segitiga, primitive assembly akan mengambil tiga vertex dan memahami bahwa mereka membentuk sebuah segitiga.

Rasterization: Pixel, Pixel Dimana-mana

Sekarang datang bagimu magic rasterization. Tahap ini mengubah bentuk 3D kita menjadi pixel 2D yang Anda lihat di layar Anda. Itu seperti mengambil sebuah patung 3D dan membuat fotonya secara detil.

Fragment Shader: Mengecat World Anda

Fragment shader adalah tempat kesenian nyata terjadi. Sedangkan vertex shader mengurus struktur objek Anda, fragment shader memberikan warna kepadanya.

Fragment Shader Sederhana

Ini contoh fragment shader yang menggambar semua hal menjadi merah:

precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

Shader ini menetapkan gl_FragColor ke vektor yang mewakili warna merah (merah penuh, tanpa hijau, tanpa biru, kejelasan penuh). Itu seperti membanjiri seluruh dunia 3D Anda dengan cat merah!

Fragment Operations: Sentuhan Akhir

Setelah fragment shader, WebGL melakukan berbagai operasi pada fragmen. Ini termasuk tes kedalaman (menentukan objek mana yang di depan yang lain), penggabungan (bagaimana objek transparan berinteraksi), dan lainnya.

Frame Buffer: Penutupan Besar

Akhirnya, kita mencapai frame buffer. Ini tempat gambar yang dirender Anda disimpan sebelum ditampilkan di layar. Itu seperti area belakang panggung di mana sentuhan akhir diterapkan sebelum tirai naik.

Menggabungkan Semua

Sekarang kita telah melihat setiap tahap, mari kita lihat bagaimana mereka semua bekerja bersamaan dalam program WebGL lengkap:

// Kode shader vertex
const vsSource = `
attribute vec4 aVertexPosition;

void main() {
gl_Position = aVertexPosition;
}
`;

// Kode shader fragment
const fsSource = `
precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// Inisialisasi shaders
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);

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

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

// Gunakan program
gl.useProgram(shaderProgram);

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

// Beritahu WebGL bagaimana mengambil posisi dari buffer posisi ke atribut vertexPosition
const numComponents = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer(
gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(gl.getAttribLocation(shaderProgram, 'aVertexPosition'));

// Gambar scene
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

Program ini menciptakan kotak merah sederhana di latar belakang hitam. Mari kita rincikan ini:

1. Kita mendefinisikan shader vertex dan fragment kita.
2. Kita mengkompilasi shaders ini dan menghubungkannya ke dalam program.
3. Kita membuat buffer dan mengirim data posisi.
4. Kita memberitahu WebGL bagaimana menginterpretasikan data buffer ini.
5. Akhirnya, kita clear layar dan menggambar kotak kita.

Setiap langkah ini sesuai dengan tahap dalam pipeline grafik yang kita diskusikan. Itu seperti mengamati garis produksi, di mana bahan mentah (data vertex) diubah menjadi produk jadi (pixel di layar Anda).

Tabel Metode

Ini adalah tabel metode WebGL utama yang kita gunakan:

Metode	Deskripsi
gl.createShader()	Membuat objek shader
gl.shaderSource()	Menetapkan kode sumber shader
gl.compileShader()	Mengkompilasi shader
gl.createProgram()	Membuat objek program
gl.attachShader()	Menghubungkan shader ke program
gl.linkProgram()	Menghubungkan objek program
gl.useProgram()	Mengatur program tertentu sebagai bagian dari keadaan rendering saat ini
gl.createBuffer()	Membuat objek buffer
gl.bindBuffer()	Menghubungkan objek buffer ke target
gl.bufferData()	Membuat dan menginisialisasi toko data objek buffer
gl.vertexAttribPointer()	Menentukan tata letak data vertex
gl.enableVertexAttribArray()	Mengaktifkan array atribut vertex
gl.clearColor()	Menentukan warna clear untuk buffers warna
gl.clear()	Menghapus buffers ke nilai awal
gl.drawArrays()	Menggambar primitif dari data array

Dan begitu saja! Kita telah menjelajahi Pipeline Grafik WebGL, dari JavaScript hingga frame buffer terakhir. Ingat, seperti setiap keterampilan, menguasai WebGL memerlukan latihan. Tetapi dengan setiap baris kode yang Anda tulis, Anda semakin mendekati menciptakan grafik 3D yang menakjubkan di browser Anda. Tetap eksperimen, tetap belajar, dan terutama, bersenang-senang!

Credits: Image by storyset