WebGL - Asas: Panduan Pemesinan untuk Pemula

Hai sana, para ahli WebGL masa depan! Saya sangat gembira menjadi panduanmu dalam perjalanan yang menarik ke dunia WebGL. Sebagai seseorang yang telah mengajarkan grafik komputer selama tahun tahun, saya tidak sabar untuk membagikan keajaiban WebGL kepada Anda. Jangan khawatir jika Anda baru dalam pemrograman – kita akan mulai dari awal dan membangun pengetahuan kita langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalam!

Apa Itu WebGL?

Sebelum kita melompat ke hal-hal kecil, mari kita pahami apa sebenarnya WebGL. WebGL (Web Graphics Library) adalah API JavaScript yang kuat yang memungkinkan kita untuk menciptakan grafik 3D yang menakjubkan di dalam browser web kita. Itu seperti memiliki studio mini film di ujung jari Anda!

Pertimbangkan WebGL sebagai jembatan antara browser web Anda dan perangkat keras grafik komputer Anda. Itu memungkinkan kita untuk menggunakannya kekuatan GPU (Graphics Processing Unit) Anda untuk merender scene 3D yang kompleks dengan kinerja mulus. Menarik, kan?

WebGL - Sistem Koordinat

Sekarang, mari kita bicarakan tentang sistem koordinat WebGL. Imajinasikan Anda berdiri di tengah sebuah kubus 3D yang besar dan tak terlihat. Itu sebenarnya seperti sistem koordinat WebGL!

Sistem Koordinat Cartesian

WebGL menggunakan sistem koordinat Cartesian 3D. Itu mirip dengan sistem 2D yang Anda mungkin pelajari di kelas matematika, tapi dengan dimensi tambahan:

• X-axis: Horizontal (kiri ke kanan)
• Y-axis: Vertikal (bawah ke atas)
• Z-axis: Kedalaman (belakang ke depan)

Ini adalah contoh sederhana untuk membantu Anda menggambarinya:

// Definisikan sebuah titik (poin di ruang 3D)
var vertex = [
0.5,  // Koordinat X
0.7,  // Koordinat Y
0.0   // Koordinat Z
];

Dalam contoh ini, kita mendefinisikan sebuah poin yang sedikit ke kanan (0.5) dan ke atas (0.7) dari pusat, dan tepat di permukaan layar (0.0).

Ruang Clip

Satu keanehan WebGL adalah bahwa itu menggunakan rentang khusus yang disebut "ruang clip". Semua koordinat harus berada antara -1.0 dan 1.0 di setiap sumbu. Segala sesuatu di luar rentang ini akan "dipotong" (tidak digambar).

// Sebuah poin di sudut kanan atas ruang clip
var cornerPoint = [1.0, 1.0, 0.0];

// Sebuah poin yang akan dipotong (tidak terlihat)
var clippedPoint = [1.5, 0.5, 0.0];

Grafik WebGL

Sekarang kita mengerti sistem koordinat, mari kita bicarakan tentang bagaimana WebGL benar-benar menggambar hal-hal.

Primitif

WebGL menggambar segala sesuatu menggunakan bentuk sederhana yang disebut primitif. Tiga jenis utama adalah:

1. Points: Pixel tunggal
2. Lines: Garis lurus antara titik
3. Triangles: Bentuk tiga-titik

Berikut adalah tabel yang menggabungkan primitif ini:

Primitif	Deskripsi	Use Case
Points	Pixel tunggal	Efect partikel, bintang
Lines	Garis lurus antara titik	Kerangka, grafik
Triangles	Bentuk tiga-titik	Sebagian besar model 3D, terrain

Mari kita lihat bagaimana kita mungkin mendefinisikan segitiga sederhana:

var triangleVertices = [
0.0,  0.5,  0.0,  // Poin atas
-0.5, -0.5,  0.0,  // Poin kiri bawah
0.5, -0.5,  0.0   // Poin kanan bawah
];

Kode ini mendefinisikan tiga titik dari sebuah segitiga. Setiap titik mewakili tiga angka (x, y, z).

Buffers

Untuk benar-benar mendapatkan segitiga kita ke layar, kita perlu menggunakan sesuatu yang disebut buffer. Pertimbangkan buffer seperti sebuah wadah yang menahan data vertex kita dan mengirimkannya ke GPU.

Berikut adalah bagaimana kita mungkin membuat dan mengisi buffer:

// Buat buffer
var buffer = gl.createBuffer();

//BindingUtil buffer (jadikan itu buffer aktif)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// Isi buffer dengan data segitiga kita
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Jangan khawatir jika ini terlihat sedikit membingungkan saat ini. Kita akan membongkar lebih lanjut saat kita maju!

Program Shaders

Sekarang kita mencapai bagian yang sangat menarik: shaders! Shaders adalah program khusus yang berjalan di GPU Anda. Mereka seperti pabrik kecil yang memroses setiap vertex dan piksel di scene 3D Anda.

Jenis Shaders

Ada dua jenis utama shaders di WebGL:

1. Vertex Shaders: Memroses setiap titik (vertex) di scene 3D Anda
2. Fragment Shaders: Menentukan warna setiap piksel

Berikut adalah contoh sederhana dari masing-masing:

// Shader Vertex
attribute vec4 a_position;

void main() {
gl_Position = a_position;
}

// Shader Fragment
precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Warna merah cerah
}

Shader vertex mengambil setiap poin (vertex) dan menentukan di mana itu harus berada di layar. Shader fragment kemudian mengisi semua piksel antara titik ini.

Kompiler dan Menghubungkan Shaders

Untuk menggunakan shaders kita, kita perlu mengkompilasi dan menghubungkan mereka ke dalam program:

// Buat program shader
var program = gl.createProgram();

// Sambungkan dan kompilasi shaders
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// Hubungkan program
gl.linkProgram(program);

Proses ini seperti mengkompilasi dan menghubungkan program biasa, tapi itu terjadi di GPU!

Variabel SL OpenGL ES

Akhirnya, mari kita bicarakan tentang beberapa variabel khusus yang digunakan di OpenGL ES Shading Language (bahasa yang shaders kita ditulis dalam).

Attributes

Attributes adalah variabel input yang digunakan di shaders vertex. Mereka biasanya berisi data tentang setiap vertex, seperti posisi atau warna.

attribute vec4 a_position;

Uniforms

Uniforms adalah variabel global yang tetap untuk semua vertices dan fragments. Mereka bagus untuk hal-hal seperti matriks transformasi atau informasi pencahayaan.

uniform mat4 u_modelViewMatrix;

Varyings

Varyings adalah variabel yang mengirim data dari shaders vertex ke shaders fragment. Mereka diinterpolasi antara vertices.

varying vec4 v_color;

Berikut adalah tabel yang menggabungkan jenis variabel ini:

Jenis Variabel	Digunakan Dalam	Tujuan
Attribute	Shader Vertex	Data input per-vertex
Uniform	Kedua	Data global
Varying	Kedua	Data dikirim dari vertex ke shader fragment

Dan itu adalah! Kita telah meliputi dasar-dasar WebGL, dari koordinat ke shaders. Ingat, belajar WebGL seperti belajar menggambar – itu memerlukan latihan dan kesabaran. Jangan frustasi jika itu tidak semua berjalan seketika. Terus mencoba, dan segera Anda akan menciptakan grafik 3D menakjubkan di browser Anda!

Selamat coding, para master WebGL masa depan!

Credits: Image by storyset