Berikut adalah Repository untuk pengerjaan Tugas 3 mata kuliah Grafika Komputer (Membuat basic shapes menggunakan webGL) yang berisi source code, dokumentasi atau penjelasan, dan screenshot output.
| Nama | NRP | Kelas |
|---|---|---|
| Akmal Ariq Romadhon | 5025211188 | Grafika Komputer A |
Berikut adalah dokumentasi serta screenshot output dari code yang ada untuk pembuatan persegi menggunakan 2 segitiga.
Fungsi draw dalam kode untuk RGB Triangle memiliki tugas utama untuk menggambar dua segitiga pada elemen canvas webGL.
function draw() {
gl.clearColor(0, 0, 0, 1); // specify the color to be used for clearing
gl.clear(gl.COLOR_BUFFER_BIT); // clear the canvas (to black)
/* Set up values for the "coords" attribute */
let coords = new Float32Array([-0.5, -0.5, -0.5, 0.5, 0.5, 0.5]);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferCoords);
gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STREAM_DRAW);
gl.vertexAttribPointer(attributeCoords, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(attributeCoords);
/* Set up values for the "color" attribute */
let color = new Float32Array([0, 1, 0, 1, 0, 0, 0, 0, 1]);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferColor);
gl.bufferData(gl.ARRAY_BUFFER, color, gl.STREAM_DRAW);
gl.vertexAttribPointer(attributeColor, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(attributeColor);
/* Draw the triangle. */
gl.drawArrays(gl.TRIANGLES, 0, 3);
let secondcoord = new Float32Array([-0.5, -0.5, 0.5, 0.5, 0.5, -0.5]);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferCoords);
gl.bufferData(gl.ARRAY_BUFFER, secondcoord, gl.STREAM_DRAW);
gl.vertexAttribPointer(attributeCoords, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(attributeCoords);
/* Set up values for the "secondcolor" attribute */
let secondcolor = new Float32Array([0, 1, 0, 0, 0, 1, 1, 0, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferColor);
gl.bufferData(gl.ARRAY_BUFFER, secondcolor, gl.STREAM_DRAW);
gl.vertexAttribPointer(attributeColor, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(attributeColor);
/* Draw the second triangle. */
gl.drawArrays(gl.TRIANGLES, 0, 3);
}Pertama, fungsi ini mengatur background elemen canvas menjadi hitam dengan menggunakan gl.clearColor(0, 0, 0, 1). Kemudian canvas tersebut dikosongkan menggunakan function gl.clear(gl.COLOR_BUFFER_BIT).
Setelah persiapan awal, fungsi ini mulai membuat atribut koordinat dan warna untuk segitiga pertama. Koordinat segitiga pertama ditentukan pada bagian let coords = new Float32Array([-0.5, -0.5, -0.5, 0.5, 0.5, 0.5]), dan data warna untuk setiap koordinat segitiga pertama diatur dalam let color = new Float32Array([0, 1, 0, 1, 0, 0, 0, 0, 1]). Selanjutnya, buffer untuk koordinat dan warna digabungkan, bersamaan dengan atribut lain yang juga diaktifkan.
Setelah data segitiga selesai dibuat, maka segitiga akan digambar kedalam canvas dengan gl.drawArrays(gl.TRIANGLES, 0, 3).
Selanjutnya, fungsi draw melakukan hal yang serupa untuk segitiga kedua dengan variabel secondcoord dan secondcolor. Fungsi secondcoord mendefinisikan koordinat dari segitiga kedua, sedangkan secondcolor mendefinisikan data warna untuk setiap titik pada segitiga kedua. Setelah data segitiga kedua disiapkan, segitiga kedua juga digambar dalam canvas menggunakan gl.drawArrays(gl.TRIANGLES, 0, 3).
Fungsi draw yang telah dijalankan akan menampilkan dua segitiga pada elemen canvas WebGL, di mana masing-masing segitiga memiliki koordinat dan warna yang berbeda. Kedua segitiga tersebut akan membentuk sebuah persegi sesuai warna yang diberikan sebelumnya.
Berikut adalah Screenshot output dari code tersebut:
Berikut adalah dokumentasi serta screenshot output dari code yang ada untuk pembuatan persegi menggunakan 2 segitiga.
Fungsi draw di code 3D-Cube terdiri dari 3 bagian utama, yaitu deklarasi mode, pemilihan warna, dan pengaturan posisi.
function draw() {
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
/* Draw the six faces of a cube, with different colors. */
// drawPrimitive( gl.TRIANGLE_FAN, [1,1,0,1], [ -0.5,-0.5,-0.5, -0.5,0.3,-0.5, 0.3,0.3,-0.5, 0.3,-0.5,-0.5 ]); //Front side
drawPrimitive(
gl.TRIANGLE_FAN,
[1, 1, 1, 1],
[-0.5, 0.3, 0.5, -0.3, 0.5, 0.5, 0.5, 0.5, -0.5, 0.3, 0.3, -0.5]
); //Top face
drawPrimitive(
gl.TRIANGLE_FAN,
[1, 0, 1, 0.5],
[0.3, -0.5, -0.5, 0.3, 0.3, -0.5, 0.5, 0.5, -0.5, 0.5, -0.3, -0.5]
); //Right Face
drawPrimitive(
gl.TRIANGLE_FAN,
[1, 0.5, 0, 5],
[-0.5, -0.5, 0.5, -0.3, -0.3, -0.5, 0.5, -0.3, -0.3, 0.3, -0.5, -0.5]
); //Bottom Face
drawPrimitive(
gl.TRIANGLE_FAN,
[0.1, 0, 1, 0.5],
[-0.5, -0.5, 0.5, -0.3, -0.3, 0.5, -0.3, 0.5, 0.5, -0.5, 0.3, 0.5]
); //Left Face
drawPrimitive(
gl.TRIANGLE_FAN,
[0, 1, 0.3, 0.5],
[0.5, -0.3, 0.5, -0.3, -0.3, 0.5, -0.3, 0.5, 0.5, 0.5, 0.5, 0.5]
); // Back Face
}Primive Type (primitiveType) merupakan argumen pertama yang menentukan mode untuk menggambar objek. Dalam kode tersebut, digunakan primitive type gl.TRIANGLE_FAN, yang berarti objek akan digambar menggunakan segitiga-segitiga.
Warna (colors) merupakan argumen kedua adalah array yang berisi informasi tentang warna atau atribut tertentu untuk setiap titik dalam objek. Dengan argumen ini, objek yang digambar dapat memiliki warna sesuai angka dalam array, misalnya [1, 1, 1, 1] berarti warna putih dengan tingkat opacity penuh.
Koordinat Titik (vertices) merupakan arguman ketiga yang merupaka _array _ dengan fungsi untuk menentukan koordinat titik-titik dalam objek. Setiap tiga koordinat berturut-turut akan membentuk sebuah segitiga. Dalam konteks objek tiga dimensi, angka tersebut akan menggambarkan sudut-sudut segitiga yang akan membentuk wajah objek tersebut.
Fungsi drawPrimitive ini dipanggil beberapa kali untuk membuat sisi dari masing masing sisi kubus, yaitu sisi depan, belakang, atas, bawah, kanan, dan kiri.
Berikut adalah Screenshot output dari code tersebut:
- Kubus Awal (Tampak dari depan)
- Kubus Awal (Tanpa sisi depan)
- Kubus Awal (Tanpa sisi depan dan belakang)
- Kubus Awal (Hanya sisi atas dan bawah)
- Kubus Awal (Hanya sisi kiri dan kanan)
#include <stdio.h>
int main(){
printf("thank you");
}