WebGL - Rotasi Kubus

Halo sana, para ahli WebGL masa depan! Hari ini, kita akan mengemban perjalanan menarik ke dunia grafik 3D. Pada akhir panduan ini, Anda akan dapat membuat kubus yang berputar menggunakan WebGL. Apakah itu menarik? Mari kita masuk ke dalam!

WebGL - Cube Rotation

Memahami Konsep Dasar

Sebelum kita mulai memutar kubus seperti DJ, mari kitaahami beberapa konsep dasar.

Apa Itu WebGL?

WebGL (Web Graphics Library) adalah API JavaScript yang mengijinkan kita untuk merender grafik 3D di dalam peramban web. Itu seperti memberi peramban Anda sepasang kacamata 3D!

Mengapa Kubus?

Anda mungkin bertanya-tanya, "Mengapa kita memulai dengan kubus?" Well, teman-teman saya, kubus adalah seperti "Hello World" dari grafik 3D. Itu cukup mudah untuk dipahami tapi cukup kompleks untuk mengajarkan kita konsep penting. Dan siapa yang tidak menyukai kubus yang bagus?

Menyiapkan Lingkungan WebGL

Canvas HTML

Pertama-tama, kita butuh panggung untuk kubus kita untuk tampil. Di WebGL, panggung ini disebut canvas. Mari kita siapkan itu:

<canvas id="glcanvas" width="640" height="480">
Peramban Anda tidak mendukung HTML5 canvas
</canvas>

Ini menciptakan canvas 640x480 piksel. Jika Anda tidak bisa melihatnya, jangan khawatir - itu seperti lantai tari invisible saat ini.

Inisialisasi WebGL

Sekarang, mari kita siapkan WebGL untuk pesta:

var canvas = document.getElementById('glcanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL tidak didukung, kembali ke experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Peramban Anda tidak mendukung WebGL');
}

Kode ini mendapatkan konteks WebGL kami. Jika peramban Anda tidak mendukung WebGL, itu seperti mencoba memainkan DVD di pemutar VHS - itu hanya tidak akan bekerja!

Membuat Kubus 3D

Mendefinisikan Verteks

Kubus memiliki 8 sudut (verteks). Kita harus memberitahu WebGL di mana sudut-sudut ini berada:

var vertices = [
// Wajah depan
-1.0, -1.0,  1.0,
1.0, -1.0,  1.0,
1.0,  1.0,  1.0,
-1.0,  1.0,  1.0,

// Wajah belakang
-1.0, -1.0, -1.0,
-1.0,  1.0, -1.0,
1.0,  1.0, -1.0,
1.0, -1.0, -1.0,

// Wajah atas
-1.0,  1.0, -1.0,
-1.0,  1.0,  1.0,
1.0,  1.0,  1.0,
1.0,  1.0, -1.0,

// Wajah bawah
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0,  1.0,
-1.0, -1.0,  1.0,

// Wajah kanan
1.0, -1.0, -1.0,
1.0,  1.0, -1.0,
1.0,  1.0,  1.0,
1.0, -1.0,  1.0,

// Wajah kiri
-1.0, -1.0, -1.0,
-1.0, -1.0,  1.0,
-1.0,  1.0,  1.0,
-1.0,  1.0, -1.0
];

Setiap set tiga angka mewakili sudut dari kubus kita di ruang 3D. Itu seperti memberikan WebGL peta kubus kita!

Membuat Buffer

Sekarang kita perlu mengirimkan data ini ke GPU:

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

Ini seperti memasukkan kubus kita ke dalam suitcase (buffer) dan mengirimkannya ke GPU.

Shaders - Para Ahli WebGL

Vertex Shader

Vertex shader menempatkan verteks kita:

var vertexShaderSource = `
attribute vec3 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main(void) {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}
`;

Shader ini mengambil setiap verteks dan menerapkan matriks transformasi kita. Itu seperti seorang ahli memindahkan sudut-sudut kubus kita!

Fragment Shader

Fragment shader memberikan warna pada kubus kita:

var fragmentShaderSource = `
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;

Shader sederhana ini hanya memberikan warna putih pada semua hal. Itu seperti menggambar kubus kita!

Kompiler dan Menghubungkan Shaders

Sekarang kita perlu mengkompiler shader kita dan menghubungkannya ke program:

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

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('Terjadi kesalahan saat mengkompiler shaders: ' + gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

var vertexShader = getShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
var fragmentShader = getShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

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

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

gl.useProgram(shaderProgram);

Ini seperti mengajarkan trick para ahli (shaders) kita dan kemudian memasukkannya ke panggung!

Membuat Kubus Berputar

Menyiapkan Rotasi

Untuk membuat kubus kita berputar, kita perlu memperbarui sudut putarannya selama waktu:

var cubeRotation = 0.0;
var then = 0;

function render(now) {
now *= 0.001;  // konversi ke detik
const deltaTime = now - then;
then = now;

cubeRotation += deltaTime;

drawScene();

requestAnimationFrame(render);
}

Fungsi ini dipanggil berkali-kali, memperbarui putaran kubus kita setiap kali.

Menggambar Scene

Sekarang mari kita gabungkan semua dan menggambar kubus berputar kita:

function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.1, 100.0);

const modelViewMatrix = mat4.create();
mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);
mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation, [0, 1, 1]);

gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'), false, projectionMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'), false, modelViewMatrix);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 36);
}

Fungsi ini membersihkan canvas, mengatur perspektif, menerapkan putaran, dan akhirnya menggambar kubus kita.

Kesimpulan

Dan begitulah, teman-teman! Kita telah membuat kubus 3D yang berputar menggunakan WebGL. Ingat, menguasai WebGL seperti belajar jongkok - itu memerlukan latihan, tapi sekali Anda menguasainya, Anda dapat melakukan hal-hal yang menakjubkan!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

Metode	Deskripsi
`gl.createBuffer()`	Membuat objek buffer baru
`gl.bindBuffer()`	Mengikat objek buffer ke target
`gl.bufferData()`	Membuat dan menginisialisasi toko data objek buffer
`gl.createShader()`	Membuat objek shader
`gl.shaderSource()`	Menetapkan kode sumber shader
`gl.compileShader()`	Mengkompilasi objek shader
`gl.createProgram()`	Membuat objek program
`gl.attachShader()`	Mengaitkan objek shader ke objek program
`gl.linkProgram()`	Menghubungkan objek program
`gl.useProgram()`	Menetapkan objek program sebagai bagian dari keadaan rendering saat ini
`gl.clear()`	Membersihkan buffer ke nilai awal
`gl.uniformMatrix4fv()`	Menetapkan nilai variabel uniform untuk program saat ini
`gl.drawArrays()`	Merender primitif dari data array

Terus latih, terus kode, dan segera Anda akan dapat membuat grafik 3D yang menakjubkan di peramban Anda. Selamat berkoding!

Credits: Image by storyset

Tutorial Sebelumnya:

WebGL - Rotasi

Tutorial Selanjutnya:

WebGL - Kubus Interaktif