WebGL - Menggambar Sebuah Segitiga

Hai teman-teman, para ahli WebGL masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia grafik komputer. Kita akan belajar bagaimana menggambar sebuah segitiga menggunakan WebGL, yang mungkin terdengar sederhana, tapi percayakan saya, ini adalah dasar dari semua grafik 3D yang menakjubkan yang Anda lihat di permainan dan film. Jadi, sabungkan dan mari kita masuk ke dalam!

Apa Itu WebGL?

Sebelum kita mulai menggambar segitiga, mari kitaambil waktu untuk memahami apa itu WebGL. WebGL (Web Graphics Library) adalah API JavaScript yang memungkinkan kita untuk merender grafik 2D dan 3D di peramban tanpa menggunakan plugin apa pun. Itu seperti memiliki kekuatan super yang memungkinkan Anda menciptakan visual yang menakjubkan di dalam peramban Anda sendiri!

Langkah-Langkah Diperlukan untuk Menggambar Segitiga

Menggambar sebuah segitiga di WebGL mungkin terlihat seperti tugas yang membingungkan pada awalnya, tapi jangan khawatir! Kita akan memecahnya menjadi langkah-langkah yang dapat dikelola. Ini adalah apa yang kita perlu lakukan:

1. Setel canvas HTML
2. Dapatkan konteks WebGL
3. Buat dan kompile vertex shader
4. Buat dan kompile fragment shader
5. Buat program shader
6. Tentukan titik-titik segitiga
7. Buat buffer dan muat data vertex
8. Hubungkan atribut vertex
9. Gambar segitiga

Sekarang, mari kita lihat setiap langkah secara detil.

1. Setel canvas HTML

Pertama, kita perlu membuat canvas di file HTML kita tempat WebGL akan merender segitiga kita. Berikut cara untuk melakukannya:

<canvas id="glCanvas" width="640" height="480"></canvas>

Ini membuat canvas dengan ID "glCanvas" dan dimensi 640x480 piksel. Anda dapat mengatur dimensi ini sesuai kebutuhan.

2. Dapatkan konteks WebGL

Sekarang, mari kita beralih ke JavaScript. Kita perlu mendapatkan konteks WebGL dari canvas kita:

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('Tidak dapat menginisialisasi WebGL. Browser Anda mungkin tidak mendukungnya.');
return;
}

Kode ini mencari canvas kita, meminta konteks WebGL, dan memeriksa apakah WebGL didukung di browser.

3. Buat dan kompile vertex shader

Vertex shader adalah program yang memproses data vertex. Berikut cara untuk membuatnya:

const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Terjadi kesalahan saat mengkompilasi shader: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);

Kode ini mendefinisikan sumber vertex shader dan sebuah fungsi untuk membuat dan mengkompilasi shader.

4. Buat dan kompile fragment shader

Fragment shader menentukan warna setiap piksel. Berikut cara untuk membuatnya:

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

const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

Shader fragment ini akan memberikan warna merah ke segitiga kita.

5. Buat program shader

Sekarang kita perlu menghubungkan shader kita ke dalam sebuah program:

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

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('Tidak dapat menginisialisasi program shader: ' + gl.getProgramInfoLog(shaderProgram));
return;
}

6. Tentukan titik-titik segitiga

Mari kita tentukan titik-titik segitiga kita:

const vertices = [
0.0,  0.5,  0.0,
-0.5, -0.5,  0.0,
0.5, -0.5,  0.0
];

Koordinat ini mendefinisikan sebuah segitiga di ruang klip, di mana setiap koordinat berada dalam rentang -1 hingga 1.

7. Buat buffer dan muat data vertex

Sekarang kita perlu membuat buffer dan memuat data vertex ke dalamnya:

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

8. Hubungkan atribut vertex

Kita perlu memberitahu WebGL bagaimana menginterpretasikan data vertex kita:

const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

9. Gambar segitiga

Akhirnya, kita dapat menggambar segitiga kita:

gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Menyingkat Semua

Berikut adalah kode lengkap untuk menggambar sebuah segitiga:

// Dapatkan konteks WebGL
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('Tidak dapat menginisialisasi WebGL. Browser Anda mungkin tidak mendukungnya.');
return;
}

// Sumber vertex shader
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// Sumber fragment shader
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// Fungsi membuat shader
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Terjadi kesalahan saat mengkompilasi shader: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

// Buat shaders
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

// Buat program shader
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('Tidak dapat menginisialisasi program shader: ' + gl.getProgramInfoLog(shaderProgram));
return;
}

// Tentukan vertices
const vertices = [
0.0,  0.5,  0.0,
-0.5, -0.5,  0.0,
0.5, -0.5,  0.0
];

// Buat buffer dan muat data vertex
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Hubungkan atribut vertex
const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

// Gambar segitiga
gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Dan itu saja! Anda telah menggambar segitiga pertama Anda menggunakan WebGL. Mungkin terlihat seperti banyak langkah untuk sebuah segitiga sederhana, tapi ingat, ini adalah dasar untuk menciptakan grafik 3D yang kompleks. Setiap langkah yang kita lakukan sangat penting untuk rendering yang lebih lanjut.

Kesimpulan

Selamat祝贺 Anda atas kesuksesan menggambar segitiga WebGL pertama Anda! Anda telah mengambil langkah pertama ke dunia menarik programming grafik komputer. Ingat, setiap perjalanan dimulai dengan satu langkah - atau dalam kasus kita, satu segitiga. Terus latih, terus jelajahi, dan sebelum Anda sadari, Anda akan menciptakan grafik 3D yang menakjubkan yang akan memukau orang-orang!

Berikut adalah tabel yang menggabungkan metode WebGL utama yang kita gunakan:

Metode	Deskripsi
getContext('webgl')	Mendapatkan konteks WebGL rendering
createShader()	Membuat objek shader
shaderSource()	Menyetel sumber kode shader
compileShader()	Mengkompilasi shader
createProgram()	Membuat objek program
attachShader()	Menghubungkan shader ke program
linkProgram()	Menghubungkan objek program
createBuffer()	Membuat objek buffer
bindBuffer()	Menghubungkan objek buffer ke target
bufferData()	Membuat dan menginisialisasi toko data buffer
getAttribLocation()	Mengembalikan lokasi variabel atribut
vertexAttribPointer()	Menentukan tata letak atribut vertex
enableVertexAttribArray()	Mengaktifkan array atribut vertex
useProgram()	Mengatur program tertentu menjadi bagian dari keadaan rendering saat ini
drawArrays()	Menggambar primitif dari data array

Simpan tabel ini dekat Anda saat Anda terus melanjutkan perjalanan WebGL Anda. Semoga coding Anda sukses, dan segitiga Anda selalu digambar dengan baik!

Credits: Image by storyset