WebGL - Rotasi Kubus

Hai sana, para ahli WebGL masa depan! Hari ini, kita akan memulai 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!

WebGL - Cube Rotation

Memahami Dasar-dasar

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

Apa itu WebGL?

WebGL (Web Graphics Library) adalah API JavaScript yang memungkinkan kita untuk merender grafik 3D di dalam browser web. Itu seperti memberikan browser Anda sebuah kacamata 3D!

Mengapa Kubus?

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

Menyiapkan Lingkungan WebGL

Canvas HTML

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

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

Ini menciptakan canvas 640x480 piksel. Jika Anda tidak bisa melihatnya, jangan khawatir - itu seperti lantai tari yang tak terlihat 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('Browser Anda tidak mendukung WebGL');
}

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

Membuat Kubus 3D

Mendefinisikan Vertices

Kubus memiliki 8 sudut (vertices). 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 tiga angka mewakili sebuah sudut dari kubus kita di ruang 3D. Itu seperti memberikan WebGL peta kubus kita!

Membuat Buffer

Sekarang kita perlu mengirim 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 suitase (buffer) dan mengirimnya ke GPU.

Shaders - Para Ahli WebGL

Vertex Shader

Vertex shader menempatkan vertices 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 vertex dan menerapkan matriks transformasi. Itu seperti seorang ahli memindahkan sudut-sudut kubus kita!

Fragment Shader

Fragment shader memberi warna ke kubus kita:

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

Shader sederhana ini hanya memberi warna putih ke semua hal. Itu seperti membiak kubus kita!

Kompilasi dan Menghubungkan Shaders

Sekarang kita perlu mengkompilasi shaders kita dan menghubungkannya ke dalam 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 kompilasi 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 petunjuk kepada para ahli (shaders) kita dan kemudian memasukkannya ke panggung!

Membuat Kubus Berputar

Menyiapkan Rotasi

Untuk membuat kubus kita berputar, kita perlu memperbarui sudut putarannya secara berangsur:

var cubeRotation = 0.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 kanvas, menyiapkan pandangan, menerapkan putaran, dan akhirnya menggambar kubus kita.

Kesimpulan

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

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()`	Mengatur kode sumber shader
`gl.compileShader()`	Mengkompilasi objek shader
`gl.createProgram()`	Membuat objek program
`gl.attachShader()`	Menghubungkan objek shader ke objek program
`gl.linkProgram()`	Menghubungkan objek program
`gl.useProgram()`	Mengatur program tertentu sebagai bagian dari keadaan rendering saat ini
`gl.clear()`	Membersihkan buffers ke nilai awal
`gl.uniformMatrix4fv()`	Menentukan nilai variabel uniform untuk program saat ini
`gl.drawArrays()`	Menggambar primitif dari data array

Terus latih, terus kode, dan segera Anda akan dapat membuat grafik 3D menarik di browser Anda. Selamat berkoding!

Credits: Image by storyset

Tutorial Sebelumnya:

WebGL - Putaran

Tutorial Seterusnya:

WebGL - Kubus Interaktif