WebGL - Pipa Grafik

Hai there, para pemrogram yang sedang belajar! Hari ini, kita akan mengemban perjalanan yang menarik melalui Pipa Grafik WebGL. Jangan khawatir jika Anda baru dalam pemrograman – saya akan menjadi panduan yang ramah, dan kita akan mengambil ini secara berangsur-angsur. Pada akhir panduan ini, Anda akan mempunyai pengertian kuat tentang bagaimana WebGL mengubah kode Anda menjadi visual yang menakjubkan di layar Anda.

JavaScript: Titik Awal

Sebelum kita masuk 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 membuat program WebGL pertama Anda. Itu seperti mempersiapkan kanvas kosong untuk karya kesenian Anda.

Vertex Shader: Menyculpt 3D Dunia Anda

Sekarang kita memiliki kanvas yang siap, mari kita bicarakan vertex shaders. Anggap vertex shaders sebagai pemahat 3D dunia 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 sesuatu yang sederhana tapi penting – mengambil posisi setiap vertex dan menugaskan nya ke gl_Position. Itu seperti memberitahu setiap titik objek 3D Anda, "Kau pergi kesini!"

Primitive Assembly: Menghubungkan Titik

Setelah vertex shader melakukan pekerjaannya, WebGL melanjutkan ke primitive assembly. Tingkat 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 segitiga tunggal.

Rasterization: Pixel, Pixel Dimana-mana

Sekarang datang ke magis rasterization. Tingkat ini mengubah bentuk 3D kita menjadi pixel 2D yang Anda lihat di layar Anda. Itu seperti mengambil patung 3D dan membuat foto detilnya.

Fragment Shader: Menyemprotkan Dunia Anda

Shader fragmen adalah tempat kesenian nyata terjadi. Sementara vertex shader menangani struktur objek Anda, shader fragmen memberikan warna nya.

Fragment Shader Sederhana

Ini contoh shader fragmen dasar yang menyemprotkan segalanya merah:

precision mediump float;

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

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

Fragment Operations: Sentuhan Akhir

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

Frame Buffer: Penutupan Besar

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

Menggabungkan Semua

Sekarang kita telah menguraikan setiap tingkat, mari 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 fragmen
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 membuat kotak merah sederhana di atas latar belakang hitam. Mari kitauraikan nya:

1. Kita menentukan kode shader vertex dan fragmen.
2. Kita kompiler shaders dan menghubungkan nya ke program.
3. Kita membuat buffer dan mengirim data posisi ke dalam nya.
4. Kita memberitahu WebGL bagaimana menginterpretasikan data buffer ini.
5. Akhirnya, kita clear layar dan menggambar kotak kami.

Setiap langkah ini menghubungkan ke tingkat dalam pipa grafik yang kita diskusikan. Itu seperti menyaksikan 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()	Menentukan kode sumber shader
gl.compileShader()	Mengkompiler 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 untuk membersihkan buffer warna
gl.clear()	Membersihkan buffer ke nilai yang ditetapkan
gl.drawArrays()	Menggambar primitif dari data array

Dan itu saja! Kita telah mengemban perjalanan melalui Pipa Grafik WebGL, dari JavaScript ke frame buffer terakhir. Ingat, seperti semua keterampilan, menguasai WebGL memerlukan latihan. Tetapi dengan setiap baris kode yang Anda tulis, Anda semakin dekat untuk menciptakan grafik 3D yang menakjubkan di browser Anda. Terus eksperimen, terus belajar, dan terutama, bersenang-senang!

Credits: Image by storyset