Laporan Akhir Proyek Computer Graphics #comgraf_LB2122

Data Anggota Kelompok

2301883643

ALBERTIUS CHRISTOPHER NATHAN

2301855135

NICHOLAS CALVIN

2301865773

ALRAFLY DEVARA ADYATAMA

2301892074

EUGENE REGINALD PATRICK

2301862891

ONGKY FEBRIANDY

Latar Belakang

Catur adalah permainan papan yang terdiri dari 64 kotak, 8x8 dengan warna hitam putih setiap kotak secara bergantian. Catur diyakini berasal dari India, sejak abad 6. Catur merupakan salah satu permainan papan sekaligus permainan berpikir. Catur terbagi menjadi 2 pemain, pemain pertama menggunakan bidak warna putih, pemain kedua menggunakan bidak warna hitam. Setiap pemain memiliki 16 bidak catur, setiap bidak mempunyai cara geraknya masing-masing. Cara bermain catur cukup mudah, akan tetapi membutuhkan strategi yang kuat untuk memenangkan permainan ini. Ada banyak manfaat yang diberikan dari bermain catur. Dapat meningkatkan konsentrasi, melatih kemampuan perencanaan, mampu memecahkan masalah, meningkatkan IQ dan lainnya. Permainan catur ini sangat berguna untuk anak dibawah umur 7 untuk melatih kemampuan berpikirnya. Pada kesempatan ini, kami akan membuat object 3 dimensi berupa berupa papan catur dan seluruh bidaknya untuk memberi tahu bentuk dari setiap bidaknya dengan harapan pemain dapat memahami bentuk setiap bidaknya secara tepat.

Unsur-unsur Computer Graphics

Dalam pengerjaan project yang kami buat, beberapa unsur computer graphics telah kami terapkan.

  1. Transformasi geometri, yaitu objek-objek yang ada dapat di translasi, rotasi, dan skala. Hal-hal ini dapat dicapai dengan interaksi user dengan camera. Jika user klik kanan, maka akan kontrol rotate akan aktif. Mode ini menunjukkan objek yang ada di layar berotasi. Jika user klik kiri, maka kontrol drag akan aktif. Mode ini menunjukkan objek yang ada di layar bergeser atau bertranslasi. Jika user menggunakan scroll wheel pada mouse, maka camera akan mendekat atau menjauh. Hal ini menunjukkan objek yang ada pada layar lebih besar atau lebih kecil sesuai dengan skalanya.
  2. Camera. Camera ini menjadi dasar dan fundamental pada project yang kami buat sebagai titik pandang atas objek-objek yang ada. Kamera yang kami pakai adalah kamera perspektif. Posisi dari camera dapat diatur secara dinamis pada mode camera control. Aspect ratio yang kami gunakan diterapkan secara dinamis sesuai dengan window size pada web browser.
  3. Image processing. Kami tidak banyak menerapkan banyak dari unsur ini. Hal-hal yang kami terapkan dalam unsur ini adalah shadow mapping, yaitu objek-objek yang ada diberi aspek shadow dari lighting yang ada. Kemudian, objek-objek yang kami buat juga diberi aspek anti-aliasing agar garis-garis terlihat lebih natural.
  4. Clipping. Unsur ini kami terapkan pada penumpukan objek antara satu dengan yang lainnya. Bagian dari objek yang tertimpa dengan objek lain tidak akan ter-render oleh camera.
  5. Lighting. Kami memakai dua jenis lighting di projek kami, yaitu point light dan ambient light. Point light dalam hal ini adalah non-global illumination, sedangkan ambient light adalah global illumination. Kemudian, objek-objek yang ada menggunakan tekstur dengan material Phong agar lighting yang ada dapat terlihat bagus pada objek.
  6. Texture mapping. Kami memakai default dari three.js untuk mapping dari texture yang kami terapkan pada objek-objeknya. Mapping tersebut adalah UV Mapping, yaitu menggunakan koordinat u dan v pada objek untuk menerapkan mapping dari texture yang dipakai.

Penjelasan Codingan

Seperti yang bisa dilihat, kami lebih sering menggunakan library BoxGeometry, SphereGeometry, dan CylinderGeometry. Dimana kami memainkan variable-variable yang terdapat agar dapat membentuk bidak-bidak catur sesuai keinginan. Disini juga kita menggunakan function, dimana nanti dapat kita gunakan ulang secara mudah.

Guna membantu untuk melihat obyek yang kami kerjakan, kami menambahkan fitur OrbitControls yang mana berguna untuk melihat benda melalui berbagai sudut pandang dan dapat dilakukan zoom in ataupun zoom out dengan cara meng-scroll scroll bar pada mouse. Untuk mengakses OrbitControls ini, Anda dapat menekan key Q untuk mengaktifkan OrbitControlsnya


Lampiran

  1. Link Youtube

https://youtu.be/K6RPzqNnO_M

        2. Link Codingan

        
        3. Link Laporan Akhir
            
https://docs.google.com/document/d/1ZrWfacO_j-PExQz_6l1MkIzfNSna9v_ysBtfWNYWjGI/edit?usp=sharing 
 

 

Komentar

Posting Komentar

Postingan populer dari blog ini

Heap and Tries

Gambar
What is HEAP? A heap is a tree-based data structure in which all the nodes of the tree are in a specific order. For example, if  X  is the parent node of  Y , then the value of  X  follows a specific order with respect to the value of  Y  and the same order will be followed across the tree. The maximum number of children of a node in a heap depends on the type of heap. However, in the more commonly-used heap type, there are at most  2  children of a node and it's known as a binary heap. In a binary heap, if the heap is a complete binary tree with  N  nodes, then it has the smallest possible height which is  l o g 2 N . Illustration of Heap In the diagram above, you can observe a particular sequence, i.e each node has greater value than any of its children. Suppose there are  N  Jobs in a queue to be done, and each job has its own priority. The job with maximum priority will get completed first than others. At each instant, we are completing a job with maxi
Baca selengkapnya

AVL Tree

Gambar
What is an AVL Tree? An AVL tree is a subtype of binary search tree. Named after it's inventors Adelson, Velskii and Landis, AVL trees have the property of dynamic self-balancing in addition to all the properties exhibited by binary search trees. A BST is a data structure composed of nodes. It has the following guarantees: Each tree has a root node (at the top). The root node has zero, one or two child nodes. Each child node has zero, one or two child nodes, and so on. Each node has up to two children. For each node, its left descendants are less than the current node, which is less than the right descendants. AVL trees have an additional guarantee: The difference between the depth of right and left subtrees cannot be more than one. In order to maintain this guarantee, an implementation of an AVL will include an algorithm to rebalance the tree when adding an additional element would upset this guarantee. AVL trees have a worst case lookup, insert and delete time of O(log
Baca selengkapnya
Gambar
Single Linked List First of all, what is Linked List? Linked List is pretty similar to array, but Linked List is  a linear data structure. Unlike arrays, linked list elements are not stored at a contiguous location; the elements are linked using pointers. ///Then, what is special about Linked Lists? Are they are just similar to Array?/// Even though array and linked lists are pretty similar, but there is some differences between arrays and linked lists. Here is the difference between array and linked list. What is Single Linked List? Single Linked List is a type of Linked Lists that only have a single pointer variable that points to the next element that will leads to the tail of Linked List, and the tail will points NULL.  here is the illustration of Single Linked List : P. S. : Head is the first element of Linked List and Tail is the last element of Linked List example of ' struct ' code : struct Scholar{       char name[25];  
Baca selengkapnya