Bahasan Grafik

[threeal]

• Repo kumpulan assignment di sini

Task

• [x] lihat video pendahuluan di sini
• [x] lihat video overview WebGL di sini
• [x] lihat video detail WebGL di sini
• [x] ngumpulin laporan assignment 0 ini di sini (source code di gist)
• [x] lihat video affine transformation di sini
• [x] lihat video basic animation di sini
• [x] lihat video hierarchical model di sini
• [x] ngumpulin laporan lab 1 ini di sini
• [x] belajar lebih lanjut soal WebGL di sini
• [x] ngumpulin laporan ets ini, di sini
• [x] lihat video view and projection transformation di sini
• [x] lihat video orthograpic projection di sini
• [x] lihat video perspective projection di sini
• [x] lihat video shading di sini
• [x] Ngumpulin laporan FP ini di sini

[threeal]

1 - Pendahuluan

• video presentasi di sini
• slide presentasi di sini
• website pak reza, berisi pengenalan dan paper nya

detail bahasan

## Peraturan - no cheating, no copy paste dalam mengerjakan tugas - diperbolehkan diskusi bersama ## Penilaian - 60% programming assignment (4-5 buah, laporan + source code) - 30% exam (UTS dan UAS) - 10% attendance ## Programming Assignment - menggunakan [WebGl](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial) - bahasa utamanya [javascript](https://www.w3schools.com/js/DEFAULT.asp) - pengumpulan laporan melalui [myITS Classroom](https://classroom.its.ac.id/course/view.php?id=6540) dengan menyertakan link ke alamat [GitHub](https://github.com/) dari tugas - keterlambatan pengumpulan **mengurangi nilai sebesar 5% per hari!** ## Buku Referensi (Optional) - Interactive Computer Graphics: A Top-Down Approach with WebGL (7th Edition), by Edward Angel and Dave Shreiner, 2014 - WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL), by Kouichi Matsuda and Rodger Lea, 2013 - Professional WebGL Programming: Developing 3D Graphics for the Web, by Andreas Anyuru, 2012 ## Jadwal Topik - Intro to WebGL - Basic Computer Graphic Algorithms - Transformation - Normal Vector - Projection and Camera - Texture - Etc. - Using these capabilities in WebGL (ex: [GLSL](https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language)) - Modelling and viewing transformations - Geometric modeling - Animation

[threeal]

2 - Overview WebGL

• slide diambil dari materi slide Prof. Eric Shaffer (UIUC)
• SIGGRAPH 2020: Technical Papers Preview Trailer di sini
• Demo WebGL:
  • Fluid Particles
  • Arkadia

detail bahasan

## Computer Graphics is Used by - Video game industry - revenue of $100B globally in 2017 - studio ex. EA, Bethesda, Valve, etc. - implementasi computer graphics melalui game engine ex. Unreal, Unity, Crytek, etc. - Medical imaging and scientific visualization - imaging one of the biggest advances in medicine (ex. x-ray, ct scan, etc.) - scientific visualization allows people to see previously hidden phenomena (ex. simulasi angin / aerodynamic) - Computer aided design (CAD) - engineering, architecture, the maker movement - example: AutoCAD - Movie industry - sudah sejak sekitar 1990-an (LucasArt, Pixar) - production computer graphics, non interactive - example, avatar, guardian of galaxy, tintin ## Although Production CG is changing  - penggunaan computer graphic secara real time pada produksi cinema dikenal dengan istilah [machinima](https://en.wikipedia.org/wiki/Machinima) - sangat berguna dalam pembuatan film karena bisa mengurangi waktu ## 3D Graphics: Image Formation  - tujuan utama computer graphics adalah untuk menggenerate gambar dua dimensi dari lingkungan tiga dimensi - salah satu pendekatan yang bisa digunakan dalam melakukan computer graphics adalah dengan meniru sistem kamera / mata manusia ## Color  - skema bagaimana cahaya dipantulkan (tidak akan banyak dibahas di materi ini) ## Synthetic Camera Model  - beberapa bentuk analogi di game seperti FPS, third-person view, top view, - sedangkan di camera analoginya bisa berupa orthographic dan perspective ## Polygonal Model  - representasi 3d model umumnya menggunkaan bentuk polygonal yang terdiri dari banyak triangle. - di grafik card kadang tercantum spesifikasi kecepatan raster (misal 102M triangles / s) - segitiga digunakan karena efisien, semua bentuk bisa direpresentasikan, dan mudah dalam perhitungan normal ## Pixel Discretization  - segitiga yang ada akan dirender dengan melihat jarak pada plane di gambar - plane tidak terdapat tepat di mata tapi ada jarak beberapa dari mata - gambar di render untuk ketiga channel warna, red, green, dan blue ## Rendering  - rendering atau image synthesis merupakan proses untuk menggenerate secara otomatis gambar photorealistic atau non-photorealistic (tidak mendekati foto, seperti kartun) dari 2d maupun 3d model - terdapat dua metode rendering, yakni rasterization, ray tracing (terkadang keduanya bisa digunakan), radiocity (mirip ray tracing, teknologi lama yang sepertinya sudah tidak digunakan). - umumnya game dan film yang baru sekarang menggunakan kedua metode rasterization dan ray tracing ## Rasterization Versus Ray Tracing  - simply cara kerja keduanya berkebalikan, raster menarik polygon ke plane dan kemudian mengisinya, sedangkan ray tracing menarik tiap pixel di plane keluar dan mencari polygon mana yang dikenai ## Ray Tracing  - berbeda dengan kondisi nyata dimana cahaya dipantulkan objek dan ditangkap mata, pada ray tracing dibalik, kamera menuju ke objek lalu dia lihat pantulannya seperti apa dan disimulasikan ## Rasterization  - tiap polygon dirender jika ada di lingkup view plane - untuk tiap bentuk primitif - compute illumination - proyeksi ke image plane - fill in pixels (besarnya tergantung resolusi plane) ## Global Versus Local Illumination  - global illumination merupakan campuran dari cahaya yang dipantulkan sendiri dan cahaya yang dipantulkan di sekitarnya - di global illumination, objek tidak bisa dirender secara independent, karena semisal pada kasus objek sepeda maka harus dilihat objek lain apa yang ada diatasnya sehingga sebagian dari objek sepeda itu akan terkena bayangan dan tampak lebih redup  - terkadang cahaya akan terpantulkan berkali kali atau ada juga objek yang translucent, sehingga untuk kasus ini ray tracing akan lebih baik, namun rasterization juga bisa digunakan untuk mengatasi hal ini dengan menambahkan teknik-teknik tertentu ## Standard Rasterization Engines  ## Definitions: Pixel and Raster  - pixel adalah ukuran terkecil dari gambar yang bisa dikontrol - raster adalah grid dari pixel - pada contoh tersebut terdapat 4 pixel dan 1 raster ## Rasterization  - primitives ada banyak, yang umumnya digunakan adalah segitiga seperti yang sudah dijelaskan sebelumnya - titik pada primitives disebut vertex (jamak vertices) - garis yang menghubungkan vertices adalah edges - aliasing adalah kondisi dimana ada yang hilang pada gambar (tidak jelas dirender atau enggak) ## 3D Graphics Pipeline  - vertex processing, tiap vertex akan diproses, ditransformasi seperti apa, dsb. - fragment bukan pixel tetapi pasangan dari lokasi 2 dimensi yang ada di raster dengan sebuah warna, proses dari shading. ## Rasterization is a Pipeline  - tiap grafik card akan diinputkan beberapa data seperti yang ada di gambar - umumnya terdapat dua shader, vertex shader dan fragment shader ## Vertex Shader  - selain koordinat, tiap vertex juga terkadang memiliki warna ## Changing Coordinate Systems   - complex geometry (curves) seperti [b-spline](https://en.wikipedia.org/wiki/B-spline), bisa dipakai juga di animasi  - agar meringankan proses, objek yang terkena clipping tidak akan diproses (dirender) ## Rasterization  - interpolate, sebagai contoh pada atribute warna di tiap vertex akan diinterpolasi sehingga warnanya akan tergradasi ## Pipeline Step: Fragment Processing  - z-buffer merupakan peta kedalaman dari warna, jika z-buffer lebih rendah maka tidak akan ditulis kembali di fragment ## WebGL  ## Programming Language for This Course  ## What's WebGL?  - windowing merupakan proses pembentukan canvas / jendela untuk menggambar - sejak versi 3 shader baru bisa diprogram, sebelumnya pipelinenya fixed ## WebGL is not Exactly OpenGL  - OpenGL ES merupakan OpenGL untuk embedded system - di OpenGL 4.3 sudah ada 4 jenis shader yang bisa diprogram, sedangkan di WebGL yang kita pakai sekarang masih 2 ## WebGL Application Structure  ## WebGL & GLSL  - Microsoft HLSL dipakai untuk DirectX - NVIDIA CG khusus untuk hardwarenya NVIDIA ## Shader  ## Simple Vertex Shader  ## What a Vertex Shader Does?  - vec3 = vektor ukuran 3 - mat4 = matrix 4x4 ## Simple Fragment Shader  ## What a Vertex Fragment Does?  ## Processing on a GPU  - GPU processornya kecil kecil tapi banyak 

[threeal]

4 - Affine Transformation

• Pixar Luxo Jr

detail bahasan

## Coordinate Transformation  - Model coordinate merupakan titik 0, 0 (tengah) yang relative dengan titik titik yang memodelkan objek tersebut - Viewing coordinate = camera coordinate   ## Math       ## Linear Transformation  ## Affine Transformation  - gabungan dari linear transformation dan constant vector ## Homogenous Coordinates  ## Order Dependence  - urutan transformasi berpengaruh padi hasil matrix ## Window to Viewport  ## 2D Rotation  ## 3D Affine Transformation  ## 3D Rotation  ## Graphics Pipeline  ## Transformation Order  - Rotasi dulu baru translasi (M T R) agar koordinat sumbu rotasi tidak berubah dikarenakan translasi

[threeal]

6.1 - Basic Animation

detail bahasan

## Simple Animation With WebGL  - yang jelas dalam prosesnya perlu matrix - [glMatrix](http://glmatrix.net/) salah satu tools untuk pembuatan matrix di javascript ## Transforming Geometry in the Vertex Shader  ## Getting the Transformation to the Shader  ## Requesting an Animation Frame  - (tambahan) gl.DEPTH_TEST mengenable depth test, sehingga titik yang berada di depan akan dirender, sedangkan yang dibelakang tidak akan dirender ## Request Animation Frame  - untuk browser baru mungkin sudah bisa menggunakan requestAnimationFrame saja ## Animation  ## Using Wall Clock Time   - alasannya karena framerates bisa berbeda ## Interpolation and Key Frames  ## Linear Interpolation  - biasa disebut juga dengan lerp  - untuk 3 dimensi tinggal menambah bagian out[2]  - interpolasi tidak hanya linear, ada juga banyak yang lain ## Triangle Meshes are Linear Interpolants 

[threeal]

6.2 - Hierarchical Model

detail bahasan

## Hierarchical Modeling  - hierarchical model pasti akan digunakan karena kita tidak akan memodelkan secara utuh, terutama bagian bagian yang ingin dianimasikan perlu dipisah dengan yang statik - di sini bagian statiknya adalah tubuh berwarna merah ## Build a Robot  - (catatan) cara old style di OpenGL ## Hierarchical Modeling in WebGL   - (catatan) cara old style di WebGL ## Orthogonal Projection in WebGL 

[threeal]

EAS sudah berakhir, have a nice day

[threeal]

Masih ada tanggungan FP

[threeal]

FP selesai