WebGL - Shaders: Panduan untuk Pemula

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

Apa Itu Shaders?

Sebelum kita mendalam, mari kita mengerti 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:

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 mengganggu - kita akan menggunakan mereka langkah demi langkah!

Kualifikasi

Kualifikasi adalah seperti label khusus yang kita tempatkan pada variabel kami. Mereka memberitahu shader bagaimana menghubungi variabel ini. Ini adalah yang utama:

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

Vertex Shader

Vertex shader adalah seperti kerangka model 3D kita. Itu menghitung posisi setiap titik (vertex) model kita di layar. Ini adalah vertex shader 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 attribute yang disebut aVertexPosition - ini adalah posisi vertex kita.
2. Kita memiliki dua matriks uniform - ini membantu kita memposisikan dan memproyeksikan model 3D kita ke layar 2D.
3. Dalam fungsi main, kita menghitung posisi akhir vertex kita.

Fragment Shader

Jika vertex shader adalah kerangka, maka fragment shader 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 menggambar 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 shaders 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 (vertex atau fragmen).
3. Itu mengkompilasi shader dan memeriksa kesalahan.

Program Gabungan

Akhirnya, kita perlu menggabungkan vertex dan fragment shaders kita menjadi 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 shaders kita, menghubungkan program, dan memberitahu WebGL untuk menggunakannya.

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

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

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

Credits: Image by storyset