WebGL - Shaders: Panduan Pemula

Hai, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan memulai perjalanan menarik ke dunia WebGL Shaders. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda melalui landskap berwarna-warni grafik komputer ini.

Apa Itu Shaders?

Sebelum kita mendalam, mari kita memahami apa itu shaders. Bayangkan Anda sedang menggambar sebuah lukisan. Kanvas adalah layar komputer Anda, dan shaders adalah seperti kuas ajaib yang memberitahu komputer bagaimana cara mencolor setiap piksel. Menarik, kan?

Tipe Data

Dalam dunia shader, kita memiliki beberapa tipe data khusus untuk bekerja dengannya. Mari kita lihat mereka:

Tipe Data	Deskripsi	Contoh
float	Sebuah bilangan pecahan presisi tunggal	3.14
vec2	Sebuah vektor 2D	vec2(1.0, 2.0)
vec3	Sebuah vektor 3D	vec3(1.0, 2.0, 3.0)
vec4	Sebuah vektor 4D	vec4(1.0, 2.0, 3.0, 4.0)
mat2	Sebuah matriks 2x2	mat2(1.0, 2.0, 3.0, 4.0)
mat3	Sebuah matriks 3x3	mat3(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0)
mat4	Sebuah matriks 4x4	mat4(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)

Jangan khawatir jika ini terlihat mengintimidasi - kita akan menggunakannya langkah demi langkah!

Kualifikasi

Kualifikasi adalah seperti label khusus yang kita tempelkan pada variabel kita. Mereka memberitahu shader bagaimana menjaganya variabel ini. Ini adalah yang utama:

Kualifikasi	Deskripsi
attribute	Nilai masukan yang berubah per verteks
uniform	Nilai masukan yang tetap konstan untuk semua verteks
varying	Nilai yang dilempar dari shader verteks ke shader fragmen

Shader Verteks

Shader verteks adalah seperti kerangka model 3D kita. Itu menghitung posisi setiap titik (verteks) model kita di layar. Ini adalah shader verteks sederhana:

attribute vec3 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main(void) {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}

mari kitauraikan ini:

1. Kita deklarasikan sebuah attribute yang disebut aVertexPosition - ini adalah posisi verteks kita.
2. Kita memiliki dua matriks uniform - ini membantu kita menempatkan dan memroyeksikan model 3D kita ke layar 2D.
3. Dalam fungsi main, kita menghitung posisi akhir verteks kita.

Shader Fragmen

Jika shader verteks adalah kerangka, maka shader fragmen adalah kulit. Itu menentukan warna setiap piksel. Ini adalah shader fragmen sederhana:

precision mediump float;

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

Shader ini mencat semua hal menjadi merah! vec4(1.0, 0.0, 0.0, 1.0) mewakili merah penuh, tanpa hijau, tanpa biru, dan kejelasan penuh.

Menyimpan dan Mengkompilasi Program Shader

Sekarang kita telah menulis shader kita, kita perlu memberitahu WebGL tentang mereka. Ini adalah cara kita melakukannya dalam JavaScript:

function getShader(gl, id) {
const shaderScript = document.getElementById(id);
if (!shaderScript) return null;

const str = shaderScript.text;
let shader;

if (shaderScript.type === "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type === "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}

gl.shaderSource(shader, str);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

Fungsi ini melakukan beberapa hal:

1. Itu mencari kode shader kita di dokumen HTML.
2. Itu membuat shader jenis yang benar (verteks atau fragmen).
3. Itu mengkompilasi shader dan memeriksa kesalahan.

Program Gabungan

Akhirnya, kita perlu menggabungkan shader verteks dan fragmen kita menjadi suatu program:

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialize shaders");
}

gl.useProgram(shaderProgram);

Kode ini membuat program, menambahkan shader kita, menghubungkan program, dan memberitahu WebGL untuk menggunakannya.

Dan itu saja! Anda baru saja mengambil langkah pertama Anda ke dunia WebGL shaders. Ingat, seperti belajar bahasa baru, itu memerlukan latihan. Jangan frustasi jika itu tidak berjalan segera - terus mencoba dan segera Anda akan membuat grafik 3D menakjubkan di browser Anda!

Dalam tahun-tahun mengajar saya, saya telah melihat banyak siswa berubah dari pemula menjadi ahli shader. Salah satu siswa saya bahkan menggunakan keterampilan ini untuk membuat galeri seni virtual untuk proyek akhirnya - bayangkan berjalan melalui museum 3D di browser Anda sendiri!

Maka, apa yang Anda akan buat dengan keterampilan shader baru Anda? Batasnya hanya imagination Anda! Selamat belajar, para ahli grafik masa depan!

Credits: Image by storyset