05a. Intro To Viewing and Clipping 2D PDF [PDF]

  • 0 0 0
  • Suka dengan makalah ini dan mengunduhnya? Anda bisa menerbitkan file PDF Anda sendiri secara online secara gratis dalam beberapa menit saja! Sign Up
File loading please wait...
Citation preview

Computer Graphic Viewing 2 Dimensi Erwin Yudi Hidayat [email protected]



[email protected]



CG - Udinus || 12/16/19



Pemodelan n



n



Model adalah pola, rencana, representasi, atau deskripsi yang dirancang untuk menunjukkan struktur atau kerja suatu objek, sistem, atau konsep. Pemodelan adalah proses menciptakan, menyimpan, dan memanipulasi model suatu objek atau sistem.



[email protected]



CG - Udinus || 12/16/19



Pemodelan n



Dalam pemodelan, kita sering menggunakan model geometris, yaitu deskripsi objek yang secara numerik tentang: n n n



n



bentuk, ukuran, dan berbagai properti lainnya.



Dimensi objek biasanya diberikan dalam satuan yang sesuai dengan objek: n n



meter untuk sebuah kapal kilometer untuk suatu negara



[email protected]



CG - Udinus || 12/16/19



Pemodelan n



Bentuk objek sering digambarkan dalam istilah sub-bagian, seperti n n n n



lingkaran, garis, poligon, atau kubus.



Contoh: Model unit rumah dalam meter n



y



9



6



6



[email protected]



x



CG - Udinus || 12/16/19



Pemodelan n



Contoh objek ini kemudian dapat ditempatkan di berbagai posisi pada sebuah bidang, atau dunia nyata; diskalakan ke ukuran yang berbeda, diputar, atau diubah bentuknya. n



Setiap rumah dibuat dengan contoh dari model yang sama, tetapi dengan parameter yang berbeda.



y



9 6



x [email protected]



CG - Udinus || 12/16/19



Viewing 2D n



n



n



Viewing adalah proses menggambar pandangan sebuah model pada tampilan 2 dimensi. Deskripsi geometris dari objek yang disediakan oleh model, diubah menjadi satu set output primitif, yang disajikan pada tampilan 2D seperti sebagaimana diinginkan. Satu model yang sama, dapat dilihat dari berbagai cara, misalnya dilihat dari jauh atau dekat; dari bawah atau atas.



[email protected]



CG - Udinus || 12/16/19



Viewing 2D n



Adalah logis untuk menggunakan dimensi yang sesuai dengan objek, misal: n n n



n



n



meter untuk bangunan nanometer atau mikron untuk molekul, sel, atom tahun cahaya untuk astronomi



Objek-objek tersebut dijelaskan sehubungan dengan ukuran fisik aktualnya di dunia nyata, dan kemudian dipetakan ke layar koordinat. Oleh karena itu dimungkinkan untuk melihat objek pada berbagai ukuran dengan memperbesar dan memperkecil, tanpa benarbenar harus mengubah model.



[email protected]



CG - Udinus || 12/16/19



Viewing 2D n



Berapa banyak model yang harus digambar?



n



Di mana seharusnya model itu muncul di layar?



n



Bagaimana kita mengonversi koordinat dunia nyata ke koordinat layar?



[email protected]



CG - Udinus || 12/16/19



Viewing 2D n



n



n



Kita dapat memiliki model seluruh ruangan, penuh dengan benda-benda seperti kursi, tablet, dan lengkap dengan siswanya. Kita mungkin ingin melihat seluruh ruangan sekaligus, atau memperbesar satu objek tunggal di dalam ruangan. Kita mungkin ingin menampilkan objek atau pemandangan di layar secara penuh, atau bisa jadi kita hanya ingin menampilkan sebagian di layar.



[email protected]



CG - Udinus || 12/16/19



Viewing 2D n n



Setelah model dibangun, kita dapat menentukan tampilannya. Tampilan 2-Dimensi terdiri dari dua bagian: n



n



Sebuah Window, diberikan dalam koordinat dunia nyata, yang mendefinisikan bagian dari model yang akan digambar Viewport yang diberikan di layar berkoordinasi, yang menentukan porsi layar tempat konten jendela akan ditampilkan



[email protected]



CG - Udinus || 12/16/19



Viewing 2D n



Window n



n



Area koordinat dunia (world-coordinate): mendefinisikan apa yang ditampilkan



Viewport n



Area dari display device (misal:monitor): mendefinisikan di mana harus ditampilkan



Viewport



[email protected]



CG - Udinus || 12/16/19



Viewing Pipeline 2D n



n



Perangkat komputer grafik umumnya dirancang untuk digunakan dengan spesifikasi koordinat Kartesius. Beberapa sistem koordinat Kartesius yang berbeda, dapat digunakan untuk membuat dan menampilkan sebuah objek.



[email protected]



CG - Udinus || 12/16/19



Viewing Pipeline 2D n



n



Istilah Viewing pipeline menggambarkan serangkaian transformasi, dari data geometri menjadi data model yang ditampilkan pada perangkat. Viewing pipeline umum:



[email protected]



CG - Udinus || 12/16/19



Viewing Pipeline 2D n



Sistem grafik yang mempunyai normalized coordinates antara viewing coordinates dan device coordinates.



[email protected]



CG - Udinus || 12/16/19



Sistem Koordinat 2D 1.



Modelling (local) coordinates n



n



Koordinat di mana objek individu (model) dibuat secara sendiri-sendiri. Koordinat objek individu ini melekat, dan ikut bergerak apabila di dunia nyata, objek juga berpindah posisi.



[email protected]



CG - Udinus || 12/16/19



Sistem Koordinat 2D 2.



World coordinates n



n



Bila beberapa objek yang semula terpisah, dirakit dan ditempatkan pada suatu posisi, yang antara satu dengan yang lain relatif berbeda. Penempatan ini melibatkan translasi atau rotasi, bahkan proses translasi dan rotasi sekaligus.



[email protected]



CG - Udinus || 12/16/19



Sistem Koordinat 2D 3.



Viewing coordinates n n n



Koordinat objek relatif terhadap kerangka acuan. Sistem koordinat alami untuk membuat gambar dunia seperti yang dilihat oleh pengamat (viewer). Didefinisikan oleh sudut pandang (viewpoint) dan lokasi tampilan (viewsite).



[email protected]



CG - Udinus || 12/16/19



Sistem Koordinat 2D 4.



Device (screen) coordinates n



Sistem koordinat layar, bisa berupa piksel pada monitor, titik pada printer laser, atau mm pada plotter



[email protected]



CG - Udinus || 12/16/19



Sistem Koordinat 2D 5.



Normalized coordinates n n



Normalisasi koordinat objek yang terletak pada viewing coordinates. Nilainya berkisar antara -1 dan 1.



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D n



n



n



Modelling transformation: transformasi output primitif (objek individu) menjadi world coordinate system. Viewing transformation: transformasi dari world coordinates system ke viewing coordinates system Window to viewport transformation: transformasi objek (setelah proses clipping) ke dalam device coordinate system. n



n



Disebut juga windowing transformation.



Normalization transformation: transformasi dari window ke viewport, untuk menjaga proporionalitas ukuran objek.



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D 1. n



Modeling Transformation Transformasi model-model obyek dari local coordinates system ke world coordinates system n n



Titik P pada local coordinates system berada di atas roda belakang dengan ketinggian 3 m diatas tanah. Di world coordinates system, titik P didefinisikan di posisi (4,3) relatif terhadap acuan (0,0). Nilai (4,3) inilah yang nantinya disimpan di memori . Local Coordinates System



World Coordinates System Yw P(4,3)



P 3m



3 2m



[email protected]



4



6



Xw CG - Udinus || 12/16/19



Transformasi Viewing 2D 2. n n



Viewing Transformation Transformasi dari world coordinates system ke viewing coordinates system. Karena keterbatasan ukuran, maka tidak semua data bisa ditampilkan di layar secara bersamaan.



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D n



n



n



Jadi, bila ada data-data dalam memori yang ingin ditampilkan di layar, maka harus dipilih melalui sebuah window. Diperlukan informasi tentang bagian obyek mana sajakah yang tertangkap dalam window dan bagaimana posisinya relatif terhadap window. Ini berarti harus ada transformasi dari world coordinates system ke viewing coordinates system.



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D n n



n



Sebuah objek (a) berada pada world coordinates system yang mempunyai arah pandang atas Yw. Bila kita ingin melihat boneka dari titik P0 dengan arah pandang P-P0, maka arah pandang baru ini disebut dengan viewing coordinates system, dengan arah pandang atas Yv, seperti gambar (b). Karena itu, untuk melihat gambar objek dari sisi pengamat yang terletak pada titik P0 dengan arah pandang atas Yv hingga tampak seperti yang ditunjukkan pada gambar (c), diperlukan transformasi koordinat dari world coordinates system ke viewing coordinates system yang disebut sebagai viewing transformation.



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D



n



Perhatikan titik P(x,y) dan P0(x0,y0) yang bertindak sebagai vektor arah pandang atas bagi pengamat (viewer) atau sumbu Yv dari viewing coordinates system. Vektor satuan ๐’— pada arah Yv pada viewing coordinates system adalah:



n



๐’—=



n



#$#% | #$#% |



=



[email protected]



(($(%, *$*%) ($(% ,-(*$*%),



= (๐‘ฃ( , ๐‘ฃ* )



CG - Udinus || 12/16/19



Transformasi Viewing 2D



n



n n



Vektor satuan ๐’– pada arah Xv pada viewing coordinates system dihitung dengan cara perkalian silang antara vektor satuan ๐’— dengan sumbu z pada viewing coordinates system, yaitu: ๐’– = ๐‘ฃ ร— 0,0,1 atau ๐’– = (๐‘ฃ* , โˆ’๐‘ฃ( ) Pertama, sumbu koordinat viewing coordinates system ditranslasikan ke pusat world coordinates system seperti gambar (a), dan menghasilkan (b).



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D



n



Proses ini melibatkan translasi:



n



1 T= 0 0



0 1 0



[email protected]



๐‘ฅ9 โˆ’๐‘ฅ6 โˆ’๐‘ฆ6 โˆ— ๐‘ฆ9 1 1



CG - Udinus || 12/16/19



Transformasi Viewing 2D



n



Pada gambar (c), vektor ๐‘ dilihat dari sumbu ๐ฎ๐ฏ bisa diwakili oleh:



n



๐‘ข( R = ๐‘ฃ( 0



๐‘ข* ๐‘ฃ* 0



[email protected]



0 ๐‘ฅ9 0 โˆ— ๐‘ฆ9 1 1



CG - Udinus || 12/16/19



Transformasi Viewing 2D



n n n



Maka, matriks transformasi M dari world coordinates system ke viewing coordinates system dinyatakan sebagai komposisi matriks berikut: M = R โˆ— T(โˆ’x0, โˆ’y0) ๐‘ข( ๐‘ข* 0 1 0 โˆ’๐‘ฅ6 M = ๐‘ฃ( ๐‘ฃ* 0 โˆ— 0 1 โˆ’๐‘ฆ6 0 0 1 0 0 1



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D



n



n



n



Sehingga posisi titik terhadap viewing coordinates system adalah: ๐‘ฅB ๐‘ฅ9 ๐‘ฆB = M โˆ— ๐‘ฆ9 1 1 Pviewer = M โˆ— Pworld



[email protected]



ยง Pworld: posisi titik terhadap world coordinates system ยง Pviewer: posisi titik terhadap viewing coordinates system CG - Udinus || 12/16/19



Transformasi Viewing 2D n



Sebuah segitiga T dibentuk oleh titik (3,1), (4,1), dan (4,2) terletak pada world coordinates system, dilihat oleh seorang pengamat dengan arah pandang atas P-P0. Arah pandang atas ini dipakai sebagai viewing coordinates system. Hitunglah koordinat segitiga T terhadap pengamat (viewer), jika n n



a) P0(2,1) dan P(3,5; 3) b) P0(0,0) dan P(0,3)



[email protected]



CG - Udinus || 12/16/19



Clipping 2 Dimensi n



a) P0(2,1) dan P(3,5; 3) n



Vektor satuan ๐’—: ๐’—=



n



#$#% | #$#% |



=



L,M; L $(O,P) | L,M; L $(O,P)|



=



(P,M; O) P,M,-O,



= (0,6; 0,8, )



Vektor satuan ๐’–: ๐’– = ๐‘ฃ( , โˆ’๐‘ฃ* = (0,8; โˆ’0,6) ๐‘ข( ๐‘ข* 0 M = ๐‘ฃ( ๐‘ฃ* 0 0 0 1 0,8 โˆ’0,6 = 0,6 0,8 0 0



n



0 1 0



โˆ’๐‘ฅ6 0,8 โˆ’๐‘ฆ6 = 0,6 0 1



โˆ’0,6 0,8 0



0 1 0 โˆ— 0 1 0



0 1 0



โˆ’2 โˆ’1 1



Pviewer = M โˆ— Pworld 0,8 = 0,6 0



n



1 โˆ— 0 0 โˆ’1 โˆ’2 1



โˆ’0,6 0,8 0



โˆ’1 3 โˆ’2 โˆ— 1 1 1



4 1 1



4 0,8 2 = 0,6 1 1



1 2 1



1,6 1,2 1



Jadi, koordinat segitiga T terhadap pengamat adalah (0,8; 0,6), (1,2), dan (1,6; 1,2)



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D 3. n n n



Window to Viewport Transformation Transformasi dari world coordinates system ke device coordinates system. Window memilih bagian gambar yang akan ditampilkan di layar Viewport menunjukkan di manakah posisi bagian gambar tersebut ditampilkan di layar.



[email protected]



CG - Udinus || 12/16/19



Penggambaran 2 Dimensi



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D n



Misal, sebuah titik yang terletak di (xw,yw) pada koordinat window ditransformasi ke (xv,yv) pada koordinat viewport.



Window



YWmax



(xw, yw) โ—



yw



Viewport



YVmax



(xv, yv) โ—



yv YVmin



YWmin



XWmin



xw X Wmax



World coordinates system [email protected]



XVmin



xv



XVmax



Device coordinates system CG - Udinus || 12/16/19



Transformasi Viewing 2D n



Transformasi ini menggunakan persamaan: x w - xwmin xv - xv min = xwmax - xwmin xv max - xv min y w - ywmin y v - yvmin = ywmax - ywmin yvmax - yvmin



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D 4. n



n



Normalization Transformation Pada umumnya ukuran device coordinates berbeda-beda tergantung dari kemampuan graphics card. Berikut adalah contoh beberapa ukuran device coordinates: Standar



x-maksimal



y-maksimal



Jumlah total piksel



VGA SVGA XGA SXGA



640 800 1024 1280



480 600 768 1024



307200 480000 786432 1228800



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D n



Karena alasan inilah maka ada beberapa sistem grafik yang menggunakan normalized coordinates, yaitu koordinat yang dinormalisasi ke dalam range [ โ€“1, 1].



Window dalam viewing coordinates



[email protected]



normalized coordinates



CG - Udinus || 12/16/19



Transformasi Viewing 2D n



Normalization transformation ini terdiri atas dua langkah: 1. 2.



Transformasi dari windows ke normalized coordinates system. Transformasi dari normalized coordinates system ke viewport (device coordinates system).



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D 1.



Transformasi dari windows ke normalized coordinates system. xn - (-1) x w - xwmin = 1 - (-1) xwmax - xwmin



atau



xn = -1 +



2 ( x w - xwmin ) xwmax - xwmin



y n - (-1) y - ywmin = w 1 - (-1) ywmax - ywmin



atau



y n = -1 +



2 ( y w - ywmin ) ywmax - ywmin



Window dalam viewing coordinates



[email protected]



atau normalized coordinates



CG - Udinus || 12/16/19



Transformasi Viewing 2D 2.



Transformasi dari normalized coordinates system ke viewport (device coordinates system). viewport dalam device coordinates



normalized coordinates



xn - (-1) xv - xvmin = 1 - (-1) xvmax - xvmin y n - (-1) y v - yvmin = 1 - (-1) yvmax - yvmin [email protected]



( xvmax - xvmin ) + ( xn + 1) 2



atau



xv = xvmin



atau



y v = yvmin +



( yvmax - yvmin ) ( y n + 1) 2 CG - Udinus || 12/16/19



Transformasi Viewing 2D n



Diketahui sebuah titik terletak di (1, 0) pada world coordinates system dilihat melalui sebuah window berukuran (0, โˆ’1) โ€“ (2, 1). Tentukan posisi titik tersebut pada device coordinates system, bila titik tersebut ditempatkan pada viewport berukuran (50, 100) โ€“ (600, 400)



a) b) c) d)



Tanpa normalized noordinates Dengan normalized coordinates Dengan normalized coordinates menggunakan standar VGA 640 ร— 480 Dengan normalized coordinates menggunakan standar SVGA 800 ร— 600



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D a)



(a)



Tanpa normalisasi



x w - xwmin xv - xv min = xwmax - xwmin xv max - xv min



y w - ywmin y - yvmin = v ywmax - ywmin yvmax - yvmin



x - 50 1- 0 = v 2 - 0 600 - 50



y - 100 0 - (-1) = v 1 - (-1) 400 - 100



xv = 325



yv = 250



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D b)



Transformasi dari: i. window ke normalized coordinates xn = -1 +



2 ( x w - xwmin ) xwmax - xwmin



xn = -1 +



2 (1 - 0) = 0 2-0



y n = -1 +



2 ( y w - ywmin ) ywmax - ywmin



y n = -1 +



2 [0 - (-1)] = 0 1 - (-1)



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D b)



Transformasi dari: ii. normalized coordinates ke device coordinates (viewport) xv = xvmin + xv = 50 +



( xvmax - xvmin ) ( xn + 1) 2



(600 - 50) (0 + 1) = 325 2



( yvmax - yvmin ) ( y n + 1) 2 (400 - 100) y v = 100 + (0 + 1) = 250 2 y v = yvmin +



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D c)



Standar VGA 640x480 xv = xvmin



( xvmax - xvmin ) + ( xn + 1) 2



(640 - 0) xv = 0 + (0 + 1) = 320 2 y v = yvmin + yv = 0 +



y v = yvmin



( yvmax - yvmin ) + ( 2



(480 - 0) yv = 0 + (0 + 1) = 24 2



( yvmax - yvmin ) ( y n + 1) 2



(480 - 0) (0 + 1) = 240 2



[email protected]



CG - Udinus || 12/16/19



Transformasi Viewing 2D d)



Standar SVGA 800x600 xv = xvmin + xv = 0 +



(800 - 0) (0 + 1) = 400 2



y v = yvmin yv = 0 +



( xvmax - xvmin ) ( xn + 1) 2



y v = yvmin + yv = 0 +



( yvmax - yvmin ) ( yn + 2



(600 - 0) (0 + 1) = 300 2



( yvmax - yvmin ) + ( y n + 1) 2



(600 - 0) (0 + 1) = 300 2



[email protected]



CG - Udinus || 12/16/19



Viewing Pipeline: Recap



[email protected]



CG - Udinus || 12/16/19



Clipping 2 Dimensi



1



1 Viewing Coordinate



[email protected]



Normalized Coordinate



Device Coordinate



CG - Udinus || 12/16/19



[email protected]



CG - Udinus || 12/16/19