WebGL - Dasar: Pendahuluan Ramah untuk Pemula
Halo teman-teman, para ahli WebGL masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia WebGL. Sebagai seseorang yang telah mengajarkan grafik komputer selama bertahun-tahun, saya tidak sabar untuk membagikan keajaiban WebGL dengan Anda. Jangan khawatir jika Anda baru dalam programming – kita akan mulai dari awal dan membangun pengetahuan kita langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita masuk ke dalam!
Apa Itu WebGL?
Sebelum kita masuk ke detailnya, mari kita mengerti 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 film mini di ujung jari Anda!
Pertimbangkan WebGL sebagai jembatan antara browser web Anda dan perangkat keras grafik komputer Anda. Itu memungkinkan kita untuk memanfaatkan kekuatan GPU (Graphics Processing Unit) Anda untuk merender scene 3D yang kompleks dengan kinerja halus. Menarik, kan?
WebGL - Sistem Koordinat
Sekarang, mari kita bicarakan tentang sistem koordinat WebGL. bayangkan 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 telah belajar di kelas matematika, tapi dengan dimensi ekstra:
- 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 vertex (titik di ruang 3D)
var vertex = [
0.5, // Koordinat X
0.7, // Koordinat Y
0.0 // Koordinat Z
];Dalam contoh ini, kita mendefinisikan sebuah titik yang sedikit ke kanan (0.5) dan ke atas (0.7) dari pusat, dan tepat di permukaan layar (0.0).
Ruang Klip
Satu keunikan WebGL adalah bahwa ia menggunakan rentang khusus yang disebut "ruang klip". Semua koordinat harus berada antara -1.0 dan 1.0 di setiap sumbu. Segala sesuatu di luar rentang ini akan "dipotong" (tidak digambar).
// Sebuah titik di sudut kanan atas ruang klip
var cornerPoint = [1.0, 1.0, 0.0];
// Sebuah titik 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:
- Points
- Lines
- Triangles
Berikut adalah tabel yang menggabungkan primitif ini:
| Primitif | Deskripsi | Kasus Penggunaan |
|---|---|---|
| Points | Pixel tunggal | Efect partikel, bintang |
| Lines | Garis lurus antara titik | Kerangka, grafik |
| Triangles | Bentuk tiga titik | Sebagian besar model 3D, permukaan |
mari lihat bagaimana kita bisa mendefinisikan sebuah triangle sederhana:
var triangleVertices = [
0.0, 0.5, 0.0, // Titik atas
-0.5, -0.5, 0.0, // Titik bawah kiri
0.5, -0.5, 0.0 // Titik bawah kanan
];Kode ini mendefinisikan tiga titik dari sebuah segitiga. Setiap titik diwakili oleh 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 bisa membuat dan mengisi sebuah buffer:
// Buat sebuah buffer
var buffer = gl.createBuffer();
// Ikat 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 ini lebih banyak saat kita terus 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 memproses setiap vertex dan piksel di scene 3D Anda.
Jenis Shaders
Ada dua jenis utama shaders di WebGL:
- Vertex Shaders: Memproses setiap vertex (titik) di scene 3D Anda
- Fragment Shaders: Menentukan warna setiap piksel
Berikut adalah contoh sederhana dari masing-masing:
// Vertex Shader
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
// Fragment Shader
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Warna merah cerah
}Shader vertex mengambil setiap titik (vertex) dan menentukan di mana itu harus berada di layar. Shader fragment kemudian mengisi semua piksel antara titik ini.
Kompilasi dan Menghubungkan Shaders
Untuk menggunakan shaders kita, kita perlu mengkompilasi dan menghubungkan mereka ke dalam sebuah 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 sebuah program biasa, tapi itu terjadi di GPU!
Variabel OpenGL ES SL
Akhirnya, mari kita bicarakan tentang beberapa variabel khusus yang digunakan dalam OpenGL ES Shading Language (bahasa yang shaders kita ditulis dalam).
Attributes
Attribute 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 mensusun 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 yang disusun dari vertex ke fragment shader |
Dan itu adalah! Kita telah meliputi dasar-dasar WebGL, dari koordinat ke shaders. Ingat, belajar WebGL adalah seperti belajar menggambar – itu memerlukan latihan dan kesabaran. Jangan frustasi jika itu belum sepenuhnya beresonasi segera. Terus mencoba, dan segera Anda akan menciptakan grafik 3D yang menakjubkan di browser Anda!
Selamat coding, para master WebGL masa depan!
Credits: Image by storyset