06 | Viewing / Camera

1. 06 | Viewing / Camera Imam Cholissodin| imam.cholissodin@gmail.com

2. Viewing / Camera : • What’s Viewing / Camera • Parallel Projection • Parallel Projection Syntax • Perspective Projection • Perspective Projection Syntax • Activation Function • Multiple View • Taxonomy Projection • Math for Computer Graphics • Demos Program

3. What’s Viewing / Camera • Cara mengatur pandangan objek 2D maupun 3D dan mengontrol pergerakan kamera.

4. Parallel Projection • Proyeksi ini belum dapat menghasilkan objek 3D yang nampak riil. • Pusat proyeksi pada objek akan bertemu di titik yang tak terhingga. D A C D’ B A’ C’ B’ PusatProyeksipadatitiktakterhingga BidangProyeksi

5. Parallel Projection Syntax • glOrtho(-15.0, 20.0, -10.0, 15.0, -50.0, 70.0); • Mendefinisikan besarnya sistem koordinat 3D :dengan range sumbu x adalah [-15,20], range untuk sumbu y adalah [-10,15], range untuk sumbu z adalah [-50,70] • gluOrtho2D(-100,100,-200,200); • Mendefinisikan besarnya sistem koordinat 2D :dengan range sumbu x adalah [-100,100] dan range untuk sumbu y adalah [-200,200]

6. Perspective Projection • Untuk menciptakan pandangan perspektif, maka setting kamera perlu diubah dari glOrtho() menjadi gluPerspective(), gluLookAt() dan glFrustum(). • Proyeksi Perspektif Vs Proyeksi Paralel: ProyeksiParalel ProyeksiPerspektif

7. Perspective Projection Syntax • gluPerspective( GLdouble fovy, GLdouble aspect, GLdouble near, GLdouble far ) • fovy is the angle in the field of view (in range from [0.0, 180]) • aspect is the aspect ratio of the frustrum (width of window over height of window) • near and far are the values between viewpoint and the near/far clipping planes

8. Perspective Projection Syntax • glFrustum( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far ) • left, right, top, and bottom define the boundaries of the near clipping plane • near and far specify how far from the viewpoint the near and far clipping planes are

9. Perspective Projection Syntax • gluLookAt( GLdoublee_x, GLdoublee_y, GLdoublee_z, GLdoublec_x, GLdoublec_y, GLdoublec_z, GLdoubleu_x, GLdoubleu_y, GLdoubleu_z) • e_x, e_y, and e_z specify the desired viewpoint (eye) • c_x, c_y, c_z specify some point along the desired line of sight (center) • u_x, u_y, and u_z define the up vector of our camera (up)note : gluLookAt (Synthetic Camera)

10. Activation Function • gluPerspective() :……………………… glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(AngleView, AspekRasio, Near, Far); ……………………………………….. • gluLookAt() :……………………… glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(mata_x, mata_y, mata_z, lihat_x, lihat_y, lihat_z, atas_x, atas_y, atas_z);………………………………………..

11. Multiple View • Satu objek 3D dilihat dengan posisi mata yang berbeda yaitu posisi mata kanan dan mata kiri. • Didasarkan pada stereokopik alami dari sistem mata. • Masing-masing mata melihat objek dari lokasi yang berbeda. • Pilih nilai D terbaik. v lookAt n D D u

12. Taxonomy Projection Proyeksi Planar Perspektif Paralel Oblique Ortografik SatuTitik DuaTitik TigaTitik Cavalier Kabinet Lain-lain Aksonometrik Ortografik multi pandangan Isometrik Dimetrik Trimetrik

13. Taxonomy Projection • ProyeksiOrtografik (PandanganAksonometrik) • Isometrik : Semuasumbu x, y dan z disetdenganpanjang yang sama. • Dimetrik : Duadaritigasumbukoordinatdisetdenganpanjang yang sama. • Trimetrik : Semuasumbu x, y dan z disetdengantidaksamapanjang. y y y x x x z z z (a) (b) (c)

14. Taxonomy Projection • Proyeksi Oblique (Kombinasi Ortografi) • Proyeksi ini mempertahankan muka objek dan memberikan kesan alami 3D yang lebih baik. 1 3/4 2/3 1/2 1 1 1 1 Cavalier Cabinet

15. Math for Computer Graphics • Vektor • Sistem Koordinat Homogen • Translasi 2D dan 3D • Skala 2D dan 3D • Rotasi 2D dan 3D • Kombinasi Transformasi(Misal objek 2D : Translasi -> Rotasi -> Skala) • Math of Synthetic Camera

16. Vektor • Titik 2D -> Vektor 3D -> Matrik 3D -> Vektor 3D(Px,Py) -> [Px Py 1] -> Matrik 3D -> [Qx Qy 1] • Titik 3D -> Vektor 4D -> Matrik 4D -> Vektor 4D(Px,Py,Pz)->[Px Py Pz 1] -> Matrik 4D -> [Qx Qy Qz 1]

17. Vektor • Vektoradalahkumpulannilai yang memilikibesarandanarah. • Operasivektor : +, -Contoh : u + v , v - u • Kombinasivektor : • Kombinasi Linier (a1u + a2v) • KombinasiAffine Jumlahsemuakomponennya 1. (a1+a2+…+an=1) • KombinasiKonvekJumlahsemuakomponen 1, tetapisemuanilaikoefisiennyaadalah 0 ≤ ai ≤ 1. (a1+a2+…+an=1)

18. Vektor • Besar VektorJika vektor u=(2,2,1), maka |u|= √(22+22+12)= √9 = 3 • Dot ProductContoh : Diketahui dua buah vektor a=[2 3] dan b=[3 -1], carilah sudut antara a dan b !Jawab : |a|= √22+32= √13=3.6 dan |b|= √32+(-1)2= √10=3.16Unit Vektor : Ua = a/|a| = [2 3]/3.6 = [0.55 0.16] Ub = b/|b| = [3 -1]/3.16 = [0.95 0.32]cos Ө = Ua.Ub = (0.55x0.95) + (0.16x0.32) = 0.52 + 0.05 = 0.57 Jadi Ө = arccos (0.57) = 55.280 a•b=|a||b|cos Ө a Ө b normalisasi vektor, |Ua|=|Ub|=1

19. Vektor • Cross Product • Contoh : Diketahui dua buah vektor a = [3 3 1] dan b =[2 2 -3]. Carilah vektor yang tegak lurus terhadap a dan b.Jawab : |axb|=|a||b|sin Ө a x b a b

20. Sistem Koordinat Homogen • Sistem koordinat yang memiliki satu dimensi lebih tinggi dari sistem koordinat yang ditinjau. • Untuk menyatakan semua proses transformasi dengan konsep perkalian matrik, termasuk proses translasi, skala, rotasi maupun shear. • Contoh : Translasi 3D -> 4D Translasi 2D -> 3D Koordinat Homogen Koordinat Asal

21. Translasi 2D • Tentukanmatriktranslasi M untukmemindakantitik P(4,6) ke Q=(10,3) !Jawab : dPx = 10-4 = 6 dandPy = 3-6 = -3Jadimatriktranslasi M adalah

22. Translasi 3D • Tentukan matrik translasi M untuk memindahkan titik P=(4,6,2) ke Q=(10,3,5) !Jawab :dPx = 10-4 = 6, dPy = 3-6 = -3, dPz = 5-2 = 3Jadi matrik translasi M adalah

23. Skala 2D • Tentukan matrik skala untuk menskala titik P=(6,2) ke Q=(3,4).Jawab :sPx = 3/6 = 1/2 dan sPy = 4/2 = 2Jadi matrik skala adalah

24. Skala 3D • Tentukan matrik skala untuk menskala titik P=(6,2,9) ke Q=(3,4,3)Jawab :sPx = 3/6 = 1/2, sPy = 4/2 = 2, sPz = 3/9 = 1/3Jadi matrik skala adalah

25. Rotasi 2D • Rotasi titik P ke titik QP(x,y)=(R cosӨ1, R sinӨ1) dan Q(x,y)=(R cos(Ө1 +Ө2 ) , R sin(Ө1 + Ө2 ) ) =(Px cos (Ө2)- Py sin (Ө2) , Px sin (Ө2) + Py cos (Ө2) ) Q cos (Ө1 + Ө2 ) = cos(Ө1) cos (Ө2) - sin (Ө1) sin (Ө2)sin (Ө1 + Ө2 ) = sin(Ө1) cos (Ө2) + cos(Ө1) sin (Ө2) y R P R y = R sin Ө1 Ө2 Ө1 x x = R cosӨ1

26. Rotasi 2D • Rotasikan titik P=(3,2) dengan sudut rotasi 30 derajat. cos (30) = 0.86, cos (30) Jawab :Q(x,y)=(3 cos (30) - 2 sin (30) , 3 sin (30) + 2 cos (30) ) =(3(0.86)-2(0.5) , 3(0.5)+2(0.86)) =((2.58 - 1) , (1.5+1.72)) =(1.58,3.22)

27. Rotasi 2D • Rotation about an arbitrary axis (Rotasi pada sembarang sumbu (Xr,Yr) dengan sudut Ө)

28. Rotasi 3D • Roll • Yaw • Pitch y x z y x z y x z

29. Rotasi 3D • Rotation about an arbitrary axis (Rotasi pada sembarang sumbu (Ax,Ay,Az) dengan sudut Ө) • Perhatikan Gambar berikut : sumbuputarsembarangtitik (Ax,Ay,Az) y x z

30. Rotasi 3D • Perhatikan Gambar berikut : • Diketahui bahwa sumbu putar membentuk sudut α dengan sumbu Y dan β dengan sumbu X. • Untuk memutar suatu objek menggunakan sumbu putar sembarang tersebut, maka kita harus menghimpitkan sumbu putar dengan sumbu Y. sumbuputarsembarangtitik (Ax,Ay,Az) Y α β X Z

31. Rotasi 3D • Perhatikan Gambar berikut : • Menghimpitkan sumbu putar sembarang dengan sumbu Y : • Putar terhadap sumbu Y sebesar β. Sehingga mengakibatkan sumbu putar di bidang YX. • Putar terhadap sumbu Z sebesar α. Sehingga mengakibatkan sumbu putar berhimpit dengan sumbu Y. • Lakukan perputaran objek terhadap sumbu Y sebesar Ө. sumbuputarsembarangtitik (Ax,Ay,Az) Y α β X Z

32. Rotasi 3D • Proses menghimpitkan sumbu putar ke sumbu Y : • Mengembalikan sumbu putar beserta objek yang sudah diputar ke kondisi awal. • Dengan demikian untuk memutar benda menggunakan sumbu putar bebas yang dibentuk melalui sudut α terhadap sumbu Y dan β terhadap sumbu X, dapat dilakukan dengan rumus : Q = (Ry(β)*Rz(α)*Ry(Ө)* Rz(-α)*Ry(-β)) Y Y Y Ry(β) Rz(α) α α β X X X Z Z Z

33. Rotasi 3D • Apabila hanya diketahui salah satu titik yang berada di sumbu putar s : • Bagaimana mendapatkan sudut α dan sudut β ?(Gunakan konsep vektor) • Garis dari (0,0,0) menuju (Ax,Ay,Az) yang menjadi sumbu putar diwakili oleh vektor s.s = (Ax-0,Ay-0,Az-0) = (Ax,Ay,Az) sumbuputarssembarangtitik (Ax,Ay,Az) Y s = (Ax,Ay,Az) u2= (0,1,0) u1= (1,0,0) u= (Ax,0,Az) s u2 α u1 β X Z u (Ax,0,Az)

34. Rotasi 3D sumbuputarssembarangtitik (Ax,Ay,Az) • Dot product dariduabuahvektor s dan u2dapatdituliskansebagaiberikut :s•u2=|s||u2|cos α , misaldengan u2=(0,1,0) dimana u2 adalahvektor yang berhimpitdengansumbu Y. Y s = (Ax,Ay,Az) u2= (0,1,0) u1= (1,0,0) u= (Ax,0,Az) s u2 α u1 β X Z u (Ax,0,Az) Sudut α telah didapatkan

35. Rotasi 3D sumbuputarssembarangtitik (Ax,Ay,Az) • Dot product dariduabuahvektor u dan u1dapatdituliskansebagaiberikut :u•u1=|u||u1|cos β , misaldengan u1=(1,0,0) dimana u1adalahvektor yang berhimpitdengansumbu X. Y s = (Ax,Ay,Az) u2= (0,1,0) u1= (1,0,0) u= (Ax,0,Az) s u2 α u1 β X Z u (Ax,0,Az) Sudut β telah didapatkan

36. Rotasi 3D • Dengandemikiansudutαdanβdapatdiperoleh, cukupdenganmengetahuisalahsatutitik yang dilewatisumbuputar. • Andajugadapatmengembangkanmetodeiniuntukmenghitungsumbuputar yang ditentukanmelaluiduabuahtitikmisalnya s1=(Ax,Ay,Az) dan s2=(Bx,By,Bz). Sudut α telah didapatkan Sudut β telah didapatkan

37. Shearing 2D Sebelum Sesudah • Shearing-x • Shearing-y Sebelum Sesudah

38. Shearing 3D • Shearing-x • Shearing-y • Shearing-z

39. Kombinasi Transformasi • Jika (Px,Py)=(4,6) : Translasi(6,-3) -> Rotasi(60˚) -> Skala (0.5,2)(Cara 1 : Step by Step)Jadi (Qx,Qy) Akhir = (1.2,14.4)

40. Kombinasi Transformasi • Jika (Px,Py)=(4,6) : Translasi(6,-3) -> Rotasi(60˚) -> Skala (0.5,2)(Cara 2 : Transformasi berturut-turut dapat dilakukan dengan mengalikan matrik-matrik transformasi sesuai dengan urutan)Jadi (Qx,Qy) Akhir = (1.2,14.4) • Berapakah nilai (Qx,Qy) Akhir hasil pembalikan urutan Transformasi di atas !

41. Math of Synthetic Camera • Model yang meniru cara kerja kamera. • Cara kerja kamera sintetik : • Objek pada sistem koordinat dunia (x,y,z) • Lensa pada sistem koordinat UVN/kamera sintetik (u,v,n) • Film sebagai bidang proyeksi y Cahaya v x z u Objek n Lensa Film Transformasidarikoordinatduniakekoordinat UVN

42. Math of Synthetic Camera • Sistem koordinat kamera sintetik : • Sumbu n sebagai arah pandang kamera, dan ditentukan berdasarkan vektor normal (nx,ny,nz). • Sumbu v sebagai arah atas, sumbu u sebagai arah horisontal. (v ∟ n), (u ∟ n) dan (u ∟ v) • Titik tengah sumbu u,v,n disebut VRP (Viewing Reference Point), yang ditentukan oleh titik (rx,ry,rz) pada koordinat dunia. Mata =(eu, ev , en) u y v VRP=(rx, ry , rz) n z LooAt=(lax , lay , laz) ry x rx rz

43. Math of Synthetic Camera • Mendapatkan sumbu u, v dan n • User menentukan titik tengah view/ eye (VRP), pusat titik pandang objek /center (lookAt) dan vektor atas (UpVector). • n adalah vektor dari VRP menuju lookAt. Lalu vektor n dinormalisasi.Contoh : Diketahui VRP di titik r(rx , ry , rz), lookAt di titik la(lax , lay , laz) dan UpVector di titik up(upx,upy,upz). Sehingga, • Synthetic Camera di OpenGL : gluLookAt(eye_x, eye_y, eye_z, center_x, center_y, center_z, up_x, up_y, up_z )

44. Math of Synthetic Camera • Memindahkan titik koordinat dunia P(Px,Py,Pz) ke koordinat kamera sintetik Q(Qu,Qv,Qn). Titik Q dapat diperoleh melalui : • t(tx,ty,tz) = P - r • Qu = t • u, Qv= t • v dan Qn = t • nnote : Qu = (P-r) • u = (P • u)-(r • u) • Contoh : Diketahui koordinat UVN dengan u=(-1,0,0), v=(0,0.8,0.6), n=(0,-0.6,0.8) dan r = (2,3,-1). Hitunglah lokasi Q(Qu,Qv,Qn) yang merupakan transformasi dari titik P(4,7,2) di koordinat dunia !Jawab :t(tx,ty,tz) = P - r = (4-2,7-3,2-(-1)) =(2,4,3)Qu = t • u =(2,4,3) • (-1,0,0) = 2*(-1)+4*(0)+3*(0)=-2Qv = t • v =(2,4,3) • (0,0.8,0.6) = 2*(0)+4*(0.8)+3*(0.6)=5Qn = t • n =(2,4,3) • (0,-0.6,0.8) = 2*(0)+4*(-0.6)+3*(0.8)=0Jadi titik Q terletak di koordinat (-2,5,0) pada sistem koordinat UVN.

45. Math of Synthetic Camera • Matrik transformasi dari koordinat dunia ke UVN : • Setelah titik Q diketahui, maka langkah berikutnya adalah melakukan proyeksi perspektif terhadap titik Q, sehingga kita memperoleh titik T(u*,v*). • Proyeksi Q ke T dapat diperoleh dengan menggunakan rumus berikut :mata/eye terletak di (0,0,en), dengan syarat en > nz dan en !=0.

46. Math of Synthetic Camera • Contoh : Dengan menggunakan Tabel 1 dan Tabel 2 berikut :(Sebagai informasi tentang vertex dan permukaan objek)Diketahui synthetic camera berada di (2,3,1) dan melihat ke arah (0,0,0). Arah atas didefinisikan melalui up=(0,1,0). Hitung dan gambarkan lokasi vertex-vertex seperti yang dilihat oleh synthetic camera apabila en=6. • Jawab :Mencari sistem koordinat UVN Tabel 2 Tabel 1

47. Math of Synthetic Camera • Jawab :Mencari sistem koordinat UVN :Transformasi vertex ke sistem UVN :

48. Math of Synthetic Camera • Jawab :Mencari sistem koordinat UVN :Transformasi vertex ke sistem UVN : (-2*(0.46))+((-4)*(-0.01))+(-1*(-0.88))

49. Math of Synthetic Camera • Jawab :Mencari sistem koordinat UVN :Transformasi perspektif titik Q dengan mata/eye terletak di (0,0,en=6) : 0/(1-(4.53/6))=0/0.25=0

50. Math of Synthetic Camera • Jawab :Gambar synthetic camera dari vertex hasil transformasi perspektif (u*,v*) : v* u*