MODUL PROGRAM KEAHLIAN GANDA

MODUL PROGRAM KEAHLIAN GANDA

Grafika Komputer Paket Keahlian Rekayasa Perangkat Lunak

Kelompok Kompetensi G

Penulis: EKO SUBIYANTORO,S.Pd.,S.ST.,MT.

Direktorat Jenderal Guru dan Tenaga Kependidikan Kementrian Pendidikan dan Kebudayaan Tahun 2017

i

Penulis: 1. Eko Subiyantoro, S.Pd., S.T., MT. Email: [email protected]

Penelaah: 1.

Siarra Maulida Asrin, S.T [081562783394], Email: [email protected]

2.

Abdul Haliq, S.Pd., M.Pd., [085341259862] Email : [email protected]

3.

Dyah Darma Andayani, S.T, M.Tel.Eng (081355721216) Email : [email protected]

Ilustrator : 1. Faizal Reza Nurzeha., A.Md

Copyright ©2017 Lembaga Pengembangan dan Pemberdayaan Pendidikan Tenaga Kependidikan Bidang Kelautan Perikanan Teknologi Informasi dan Komunikasi. Hak Cipta Dilindungi Undang-Undang Dilarang mengkopi sebagian atau keseluruhan isi buku ini untuk kepentingan komersial tanpa izin tertulis dari Kementerian Pendidikan Kebudayaan.

ii

KATA SAMBUTAN Peran guru profesional dalam proses pembelajaran sangat penting sebagai kunci keberhasilan belajar siswa. Guru profesional adalah guru yang kompeten membangun proses pembelajaran yang baik sehingga dapat menghasilkan pendidikan yang berkualitas. Hal ini tersebut menjadikan guru sebagai komponen yang menjadi fokus perhatian pemerintah pusat maupun pemerintah daerah dalam peningkatan mutu pendidikan terutama menyangkut kompetensi guru. Pengembangan profesionalitas guru melalui program Keahlian Ganda (PKG) merupakan upaya peningkatan kompetensi untuk semua guru. Sejalan dengan hal tersebut, pemetaan kopetensi guru telah dilakukan melalui uji kompetensi guru (UKG) untuk kompetensi pedagogik dan profesional pada akhir tahun 2015. Hasil UKG menunjukan peta kekuatan dan kelemahan kompetensi guru dalam penguasaan pengetahuan. Peta kompetensi guru tersebut dikelompokan menjadi 10 (sepuluh) kelompok kompetensi. Tindak lanjut pelaksanaan UKG diwujudkan dalam bentuk pelatihan guru paska UKG melalui program Keahlian Ganda. Tujuannya untuk meningkatkan kompetensi guru sebagai agen perubahan dan sumber belajar utama bagi peserta didik. Program Keahlian Ganda dilaksanakan melalui pola tatap muka, daring (online) dan campuran (blended) tatap muka dengan online. Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK), Lembaga Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan Kelautan Perikanan Teknologi Informasi dan Komunikasi (LP3TK KPTK) dan Lembaga Pengembangan dan Pemberdayaan Kepala Sekolah (LP2KS) merupakan Unit Pelaksana Teknis di lingkungan Direktorat Jendral Guru dan Tenaga Kependidikan yang bertanggung jawab dalam mengembangkan perangkat dan melaksanakan peningkaan kompetensi guru sesuai dengan bidangnya. Adapun perangkat pembelajaran yang dikembangkan tersebut adalah modul untuk program Keahlian Ganda tatap muka dan PKG online untuk semua mata pelajaran dan kelompok kompetensi. Dengan modul ini diharapkan program PKG memberikan sumbangan yang sangat besar dalam peningkatan kualitas kompetensi guru. Mari kita sukseskan program PKG ini untuk mewujudkan Guru Mulia Karena Karya. Jakarta, Februari 2016 Direktur Jendral Guru dan Tenaga Kependidikan

Sumarna Surapranata, Ph.D NIP. 195908011985031002

iii

iv

KATA PENGANTAR

Profesi guru dan tenaga kependidikan harus dihargai dan dikembangkan sebagai profesi yang bermartabat sebagaimana diamanatkan Undang-Undang Nomor 14 Tahun 2005 tentang Guru dan Dosen. Hal ini dikarenakan guru dan tenaga kependidikan merupakan tenaga profesional yang mempunyai fungsi, peran, dan kedudukan yang sangat penting dalam mencapai visi pendidikan 2025 yaitu “Menciptakan Insan Indonesia Cerdas dan Kompetitif”. Untuk itu guru dan tenaga kependidikan yang profesional wajib melakukan pengembangan keprofesian berkelanjutan. Buku Pedoman Penyusunan Modul Diklat Program Keahlian Ganda Bagi Guru dan Tenaga Kependidikan untuk institusi penyelenggara program pembinaan karir merupakan petunjuk bagi penyelenggara pelatihan di dalam melaksakan pengembangan modul yang merupakan salah satu sumber belajar bagi guru dan tenaga kependidikan. Buku ini disajikan untuk memberikan informasi tentang penyusunan modul sebagai salah satu bentuk bahan

dalam kegiatan

pembinaan karir bagi guru dan tenaga kependidikan. Pada kesempatan ini disampaikan ucapan terima kasih dan penghargaan kepada berbagai pihak yang telah memberikan kontribusi secara maksimal dalam mewujudkan buku ini, mudah-mudahan buku ini dapat menjadi acuan dan sumber inspirasi bagi guru dan semua pihak yang terlibat dalam pelaksanaan penyusunan modul untuk pembinaan karir. Kritik dan saran yang membangun sangat diharapkan untuk menyempurnakan buku ini di masa mendatang. Makassar, Desember 2015 Kepala LPPPTK KPTK Gowa Sulawesi Selatan,

Dr. H. Rusdi, M.Pd, NIP 19650430 199103 1 004

v

DAFTAR ISI

KATA SAMBUTAN .............................................................................................. iii KATA PENGANTAR ............................................................................................ v DAFTAR ISI ........................................................................................................ vi DAFTAR GAMBAR ............................................................................................. ix DAFTAR TABEL ................................................................................................. xi PENDAHULUAN………………………………………………………………………. 1 A.Latar Belakang………………………………………………………………………. 1 B.Tujuan……………………………………………………………………………….. 2 C.Peta Kompetensi……………………………………………………………………. 2 D.Ruang Lingkup Penggunaan Modul……………………………………………… 4 E.Saran Cara Penggunaan Modul………………………………………………… . 4 KEGIATAN BELAJAR 1 PENGANTAR GRAFIKA KOMPUTER .......................... 9 A.Tujuan Pembelajaran ...................................................................................... 9 B.Indikator Pencapaian Kompetensi ................................................................... 9 C.Uraian Materi .................................................................................................. 9 D.Aktivitas Pembelajaran ................................................................................. 14 E.Latihan/Tugas ............................................................................................... 14 F.Rangkuman .................................................................................................. 15 G.Umpan Balik……………………………………………………………………… 16 H.Kunci Jawaban............................................................................................. 16 KEGIATAN BELAJAR 2 OPENGL DAN LWJGL ................................................ 19 A.Tujuan Pembelajaran .................................................................................... 19 B.Indikator Pencapaian Kompetensi ................................................................. 19 C.Uraian Materi ................................................................................................ 19 D.Aktivitas Pembelajaran ................................................................................. 22 E.Latihan/Tugas ............................................................................................... 31 F.Rangkuman................................................................................................... 31 G. Umpan Balik…………………………………………………………………….. .. 32 H.Kunci Jawaban ............................................................................................. 32

vi

KEGIATAN BELAJAR 3 PRIMITIF OBJEK ....................................................... 35 A.Tujuan Pembelajaran .................................................................................... 35 B.Indikator Pencapaian Kompetensi ................................................................. 35 C.Uraian Materi ................................................................................................ 35 D.Aktivitas Pembelajaran ................................................................................. 38 E.Latihan/Tugas ............................................................................................... 43 F.Rangkuman................................................................................................... 43 G. Umpan Balik………………………………………………………………………. 44 H.Kunci Jawaban ............................................................................................. 44 KEGIATAN BELAJAR 4 PEMODELAN OBJEK 2 DIMENSI ............................. 51 A.Tujuan Pembelajaran .................................................................................... 51 B.Indikator Pencapaian Kompetensi ................................................................. 51 C.Uraian Materi ................................................................................................ 51 D.Aktivitas Pembelajaran ................................................................................. 55 E.Latihan/Tugas ............................................................................................... 62 F.Rangkuman................................................................................................... 63 G. Umpan Balik………………………………………………………………………. 63 H.Kunci Jawaban ............................................................................................. 64 KEGIATAN BELAJAR 5 PEMBUATAN OBJEK 3 DIMENSI .............................. 71 A.Tujuan Pembelajaran .................................................................................... 71 B.Indikator Pencapaian Kompetensi ................................................................. 71 C.Uraian Materi ................................................................................................ 71 D.Aktivitas Pembelajaran ................................................................................. 73 E.Latihan/Tugas ............................................................................................... 78 F.Rangkuman................................................................................................... 79 G. Umpan Balik……………………………………………………………………..... 80 H.Kunci Jawaban ............................................................................................. 80 KEGIATAN BELAJAR 6 PEMBUATAN TEKSTURE .......................................... 85 A.Tujuan Pembelajaran .................................................................................... 85 B.Indikator Pencapaian Kompetensi ................................................................. 85 C.Uraian Materi ................................................................................................ 85 D.Aktivitas Pembelajaran ................................................................................. 89

vii

E.Latihan/Tugas ............................................................................................... 96 F.Rangkuman................................................................................................... 97 G. Umpan Balik………………………………………………………………………. 98 H. Kunci Jawaban……………………………………………………………………. 98 KEGIATAN BELAJAR 7 TRANSFORMASI PROYEKSI.................................. 105 A.Tujuan Pembelajaran .................................................................................. 105 B.Indikator Pencapaian Kompetensi ............................................................... 105 C.Uraian Materi .............................................................................................. 105 D.Aktivitas Pembelajaran ............................................................................... 109 E.Latihan/Tugas ............................................................................................. 114 F.Rangkuman................................................................................................. 115 G.Umpan Balik……………………………………………………………………. . 116 H.Kunci Jawaban ........................................................................................... 116 KEGIATAN BELAJAR 8 RENDERING ........................................................... 121 A.Tujuan Pembelajaran .................................................................................. 121 B.Indikator Pencapaian Kompetensi ............................................................... 121 C.Uraian Materi .............................................................................................. 121 D.Aktivitas Pembelajaran ............................................................................... 124 E.Latihan/Tugas ............................................................................................. 134 F.Rangkuman................................................................................................. 136 G. Umpan Balik………………………………………………………………………137 H. Kunci Jawaban……………………………………………………………….

138

PENUTUP ....................................................................................................... 139 EVALUASI ....................................................................................................... 141 GLOSARIUM ................................................................................................... 145 DAFTAR PUSTAKA ......................................................................................... 149

viii

DAFTAR GAMBAR

Gambar 1 Peta Kedudukan Modul Grafika Komputer .......................................... 3 Gambar 2 Struktur Modul Grafika Komputer ........................................................ 4 Gambar 3 Translasi ........................................................................................... 52 Gambar 4 Rotasi................................................................................................ 52 Gambar 5 Skala ................................................................................................. 53 Gambar 6 Koordinat .......................................................................................... 68 Gambar 7 Surface ............................................................................................. 68 Gambar 8 Vertex dan Edge ............................................................................... 68 Gambar 9 Penggunaan Teksture dalam Game Chect Out 3D ........................... 82 Gambar 10 Analogi Pengambilan Gambar oleh Kamera.................................. 102 Gambar 11 Transformasi Ortogonal dan Proyeksi ........................................... 103 Gambar 12 Transformasi Ortogonal................................................................. 104 Gambar 13 Ilustrasi Transformasi Ortogonal dari Kode Program ..................... 104

ix

x

DAFTAR TABEL

Tabel 1 Peta Kompetensi..................................................................................... 3 Tabel 2 Data Algoritma DDA(Digital Differential Analyzer) ................................. 38 Tabel 4 Vertex Penyusun Kubus........................................................................ 93 Tabel 5 Permukaan Kubus ................................................................................ 93

xi

…

xii

PENDAHULUAN

A. Latar Belakang Guru dan tenaga kependidikan wajib melaksanakan kegiatan pengembangan keprofesian

secara

berkelanjutan

agar

dapat

melaksanakan

tugas

profesionalnya. Program Keahlian Ganda (PKG) adalah pengembangan kompetensi Guru dan Tenaga Kependidikan yang dilaksanakan sesuai kebutuhan, bertahap, dan berkelanjutan untuk meningkatkan profesionalitasnya. PKG sebagai salah satu strategi pembinaan guru dan tenaga kependidikan diharapkan dapat menjamin guru dan tenaga kependidikan mampu secara terus menerus memelihara, meningkatkan, dan mengembangkan kompetensi sesuai dengan standar yang telah ditetapkan. Pelaksanaan kegiatan PKG akan mengurangi kesenjangan antara kompetensi yang dimiliki guru dan tenaga kependidikan dengan tuntutan profesional yang dipersyaratkan. Di dalam pelaksanaan diklat yang dilaksanakan oleh PPPPTK/LPPPTK KPTK diperlukan suatu modul yang berfungsi sebagai salah satu sumber belajar guru. Modul Diklat PKG Guru Rekayasa Perangkat Lunak (RPL) Level 7 “Grafika Komputer” ini dapat digunakan oleh guru dan tenaga kependidikan dan sebagai acuan untuk

memenuhi tuntutan kompetensinya,

sehingga guru

dapat

melaksanakan tugasnya secara professional sesuai dengan standar yang telah ditetapkan. Modul Diklat PKG Guru RPL Level 7 grafika komputer ini mempelajari tentang teori dan praktik tentang konsep dasar grafika komputer, penggunaan library OpenGL dan LWJGL ke dalam perangkat lunak yang dapat di integrasikan ke dalam Integrated Development Environment(IDE) , pemodelan 2 dimensi yang diawali dengan sistem koordinat dan pembuatan primitif objek, pemodelan 3 dimensi dengan pembuatan objek 3 dimensi dan ,pemanfaatan teknik lighting,shading, texture untuk menciptakan objek 3 yang nyata.

1

B. Tujuan Tujuan disusunnya modul diklat PKG Guru RPL Level 7 ini adalah memberikan pengetahuan, ketrampilan dan sikap kepada guru atau peserta diklat dalam membangun objek 2D dan 3D dengan konsep grafika komputer dengan terampil melalui aktifitas observasi dan praktikum. Setelah mempelajari modul ini diharapkan guru dapat : “Membangun objek 3D menggunakan konsep pemrograman grafik”. Sedangkan indikator pencapaian kompetensinya yang disusun dalam Standar Kompetensi Guru secara umum adalah : 1. Menganalisis Integrated Development Environment (IDE) pemrograman grafik 2. Membuat instruksi dasar OPENGL 3. Membuat pemodelan objek 3D menggunakan OPENGL 4. Membuat pergerakan objek 3D menggunakan OPENGL

C. Peta Kompetensi Modul ini merupakan modul ke-7 dari 10 modul yang dikembangkan. Berdasarkan struktur jenjang diklat PKG Modul desain sIstem basis data ini termasuk dalam jenjang lanjut. Modul ini akan digunakan untuk Program Keahlian Ganda (PKG) bagi guru-guru produktif Sekolah menengah Kejuruan pada paket keahlian Rekayasa Perangkat Lunak.

2

Proyek Sistem Informasi Berbasis Dekstop (50 JP) 8

Grafika Komputer (50 JP) 7

Proyek Sistem Informasi Berbasis Web (50 JP) 9

Pemrograman Berbasis Dekstop (50 JP)

5

Pemrograman Berbasis Perangkat Bergerak (50 JP)

Pemrograman Berorientasi Objek (50 JP)

3

1

Pemrograman Web Dinamis (50 JP)

6

4

Proyek Sistem Informasi Berbasis Perangkat Bergerak (50 JP) 10

Desain Sistem Basis Data (50 JP)

2

Sistem Manajemen Basis Data (50 JP)

Gambar 1 Peta kedudukan Modul Grafika Komputer

Tabel 1 Peta kompetensi Grafika Komputer : Standar Kompetensi Guru Kompetensi Utama Profesional

Kompetensi Inti Guru (KIG) 1. Menguasai

Kompetensi Guru Keahlian (KGK) 20.13 Membangun

Indikator pencapaian Kompetensi 20.13.1 Menganalisis Integrated

materi,

objek 3D

Development

struktur,

menggunakan

Environment

konsep dan

konsep

pemrograman grafik

pola pikir

pemrograman

keilmuan

grafik

(IDE)

20.13.2 Membuat instruksi dasar

yang

OPENGL

mendukung mata

20.13.3

Membuat

pemodelan

pelajaran

objek 3D menggunakan

yang diampu

OPENGL

20.13.4

Membuat

pergerakan

objek 3D menggunakan OPENGL

3

D. Ruang Lingkup Penggunaan Modul Modul ini disusun dengan empat pembahasan utama (materi pokok). Setiap materi pokok terdapat beberapa kegiatan pembelajaran untuk mencapai kompetensi yang telah ditentukan. Setiap kegiatan pembelajaran terdiri dari tujuan pembelajaran, indikator essential, uraian materi, aktifitas pembelajaran, latihan/tugas/kasus, rangkuman dan umpan balik. Materi dalam modul ini mencakup empat topik utama yaitu: 1) Dasar-Dasar Grafika Komputer, 2) Pemodelan Objek 2 Dimensi , 3) Pemodelan Objek 3 Dimensi dan, 4)Rendering

Kegiatan Belajar 2 OpenGL dan LWJGL

Kegiatan Belajar 4 Pembuatan Objek 2 Dimensi

Kegiatan Belajar 6 Pembuatan Teksture

Kegiatan Belajar 8 Lighting dan Shading

Kegiatan Belajar 1 Pengantar Grafika Komputer

Kegiatan Belajar 3 Primitif Drawing

Kegiatan Belajar 5 Pembuatan objek 3 Dimensi

Kegiatan Belajar 7 Transformasi Proyeksi

Topik 1 Dasar-Dasar Grafika Komputer

Topik 2 Pemodelan Objek 2 Dimensi

Topik 3 Pemodelan Objek 3 Dimensi

Topik 4 Rendering

Gambar 2 Struktur modul PKB Guru RPL Grade 7 Grafika Komputer

E. Saran Cara Penggunaan Modul

Modul grafika komputer ini terdiri dari empat topik utama. Peserta diklat dapat mempalajari sesui dengan urutan topik mulai topik 1 sampai topik 4. Keempat topik tersebut tidak memiliki ketergantungan secara penuh, sehingga peserta diklat dapat mempelajari tidak secara berurutan. Akan tetapi untuk masingmasing topik setiap kegiatan belajar mempunyai keterkaitan secara penuh. Ini berarti untuk setiap topik materi yang dipelajari harus secara berurutan sesuai urutan kegiatan pembelajaran. Untuk setiap kegiatan pembelajaran, uruatan yang harus dilakukan oleh peserta diklat dalam mempelajari modul ini adalah :

4

1. Membaca tujuan pembelajaran sehingga memahami target atau tujuan dari kegiatan belajar tersebut. 2. Membaca indikator pencapaian kompetensi sehingga memahami obyek yang akan dijadikan kriteria pengukuran untuk mencapai tujuan pembelajaran. 3. Membaca uraian materi pembelajaran sehingga memiliki pengetahuan, ketrampilan dan sikap terhadap kompetensi yang akan dicapai 4. Melakukan

aktifitas

pembelajaran

dengan

urutan

atau

kasus

permasalahan sesuai dengan contoh. 5. Mengerjakan latihan/soal atau tugas dengan mengisi lembar kerja yang telah disediakan. 6. Menjawab pertanyaan dalam umpan balik yang akan mengukur tingkat pencapaian kompetensi melalui penilaian diri.

5

6

7

8

DASAR-DASAR GRAFIKA KOMPUTER Pengantar Grafika Komputer

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 1 ini peserta diklat diharapkan dapat : 1.

Melalui studi literatur peserta diklat dapat menganalisis komponenkomponen penting dalam grafika komputer.

2.

Melalui diskusi peserta diklat dapat menggambarkan peranan grafika komputer dalam berbagai bidang.

B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menganalisis konsep grafis dalam grafika komputer 2. Peserta diklat mampu membedakan desain grafis bitmap dan vektor 3. Peserta diklat mampu menjelaskan penerapan grafika komputer dalam berbagai bidang

C. Uraian Materi 1. Pengertian Grafika Komputer Grafika komputer (computer graphics) merupakan salah satu ilmu informatika yang mempelajari pembuatan dan manipulasi gambar dengan komputer atau secara digital. Grafis adalah gambar yang tersusun dari koordinat-koordinat. Dengan demikian sumber gambar yang muncul pada layar monitor komputer terdiri atas titik-titik yang mempunyai nilai koordinat. Layar Monitor berfungsi sebagai sumbu koordinat x dan y. Dengan kata lain maka grafika komputer adalah proses konversi informasi digital ke dalam format visual untuk ditampilkan pada terminal atau output pada printer. Dalam pembuatan komputer grafis diperlukan komputer digital untuk menyimpan dan memanipulasi gambar, tampilan layar, input / output, dan perangkat lunak khusus yang memungkinkan komputer digunakan untuk menggambar, warna, dan memanipulasi gambar sehingga dapat disimpan dalam memori.

9

Format komputer grafis umum termasuk GIF dan JPEG, untuk gambar tunggal, dan MPEG dan Quicktime, untuk gambar multiframe. Aplikasi grafika komputer telah digunakan secara luas dalam bisnis, penelitian ilmiah, dan hiburan. Salah satu bidang grafika komputer yang sangat terkenal adalah Desain Grafis. Bentuk sederhana dari grafika komputer yaitu titik, garis dan bidang 2 Dimensi (2D), yang kemudian dikembangkan menjadi bidang 3 Dimensi (3D), pengolahan citra (image processing) dan pengenalan pola (pattern recognation). Salah satu manfaat utama dari grafis komputer adalah bahwa gambar dapat dimanipulasi dengan relatif mudah dan banyak efek visual yang mungkin karena gambar dapat dimainkan dengan lebih baik sampai pada efek yang diinginkan tercapai. Pada dasarnya desain grafis dibedakan atas dua, yaitu desain bitmap dan desain vector. Grafis desain bitmap dibentuk dengan raster/pixel/dot/titik/point koordinat. Pembuatan citra (images) sebagai koleksi dari dots (pixels) yang kecil, independent dan dapat diatur dalam bentuk baris dan kolom. Raster grafika juga dikenal sebagai pixel graphics. Hampir semua perangkat output komputer menggunakan konsep raster seperti CRTs, LCDs, LEDs, dan plasma screens. Pixel merupakan singkatan dari picture element, kadang-kadang juga disebut pel. Pixel merupakan satu titik dalam satu grid berbentuk persegi atau juga beribu titik secara individual “dilukis” menjadi suatu bentuk image yang dihasilkan pada layar komputer atau pada kertas oleh sebuah Printer. Semakin banyak jumlah titik yang membentuk suatu grafis bitmap berarti semakin tinggi tingkat kerapatannya. Hal ini menyebabkan semakin halus citra grafis, tetapi kapasitas filenya semakin besar. Program aplikasi grafis yang berbasis bitmap, antara lain : Adobe Photoshop, Corel Photopaint, Microsoft Photo Editor dan Macromedia Fireworks. Grafis jenis vektor merupakan perkembangan dari sistem grafis bitmap (digital). Grafis ini tidak tergantung pada banyaknya pixel penyusunnya dan kondisi monitor karena tampilan vektor tersusun atas garis-garis. Tampilan akan terlihat jelas meskipun dilakukan pembesaran (zooming). Penggunaan titik-titik koordinat dan rumus-rumus tertentu dapat menciptakan bermacam-

10

macam bentuk grafis, seperti lingkaran, segitiga, bujur sangkar dan poligon. Dengan demikian , pemakaian grafis vektor akan lebih irit dari segi volume file, tetapi dari segi pemakaian prosessor akan memakan banyak memori. Program aplikasi grafis yang berbasis vektor antara lain CorelDraw , Macromedia Free hand, Adobe Illustrator dan Micrografx Designer. Dalam grafika komputer memiliki tiga tema utama, yaitu : 

Modeling, yaitu cara mempresentasikan sebuah objek atau lingkungan di sekitar.



Animasi, yaitu mempelajari tentang penggambaran dan manipulasi gerakan objek secara otomatis atau manual.



Rendering,

yaitu

mempelajari

algoritma

untuk

membuat

dan

menampilkan struktur/detail suatu objek.

2. Peran dan Penggunaan Grafika Komputer Grafika komputer telah menunjukkan kemajuan yang pesat dalam pengembangan berbagai aplikasi untuk menghasilkan gambar. Walaupun pada awalnya aplikasi dalam sains dan engineering memerlukan peralatan yang mahal, perkembangan teknologi komputer memberikan kemudahan penggunaan komputer sebagai alat bantu aplikasi grafik komputer interaktif. Pada saat ini grafika komputer digunakan secara rutin di bidang ilmu pengetahuan, teknik, kedokteran, bisnis, industri, pemerintahan, seni, hiburan, pendidikan, periklanan, dan lain sebagainya. Berikut contoh peranan grafika komputer dalam berbagai bidang: 1)

Desain Proses desain grafika komputer terutama digunakan pada sistem engineering dan arsitektur. Salah satu contoh penerapan grafika computer yaitu Computer Aided Design (CAD) digunakan untuk pembuatan desain mobil, bangunan, pesawat terbang, kapal, komputer, tekstil, dan lain-lain. Pada beberapa aplikasi desain, objek ditampilkan dalam bentuk wireframe yaitu bagian gambar yang memperlihatkan keseluruhan bentuk dan fitur internal dari sebuah objek, dimana diperlihatkan

11

keseluruhan bentuk, dengan bentuk internal dari objek tersebut. Penggunaan wireframe bermanfaat bagi designer untuk melihat isi dari objek tersebut. Contoh perangkat lunak yang digunakan yaitu AutoCAD, 3D Studio Max, dan Maya. 2)

Grafika Presentasi Bidang lain yang berhubungan dengan grafika komputer adalah grafik presentasi yang dapat berupa cetakan, slide, dan transparansi. Grafik presentasi biasanya digunakan untuk melengkapi laporan keuangan, sains, data ekonomi, dan lain-lain.

Bentuk grafik

presentasi tersebut adalah chart, bar chart, pie chart, dan lain-lain. 3)

Computer Art Metode grafika komputer digunakan dalam aplikasi commercial art dan fine art. Seniman menggunakan bermacam-macam perangkat lunak grafik, dan kadang dilengkapi dengan perangkat keras khusus. Contoh perangkat lunak yang digunakan yaitu Corel Draw, Adobe Photoshop, Adobe Ilustrator, Macromedia, dan sebagainya.

4)

Film Pada pembuatan film layar lebar, grafika komputer banyak digunakan untuk menunjang proses pemodelan, visualisasi, dan editing. Misalnya dalam proses special effect, film animasi.

5)

Televisi Grafika komputer dalam tayangan televisi juga dapat berupa iklan, tampilan tiap acara, dan lainnya.

6)

Video Musik Produksi

video

musik

tidak

terlepas

dari

grafika

komputer,

diantaranya pembuatan promosi, cover atau kemasan video, serta animasi yang mengiringi setiap lagu. Proses editing video dan audio dilakukan dengan menggunakan komputer. 7)

Game Berbagai game dapat dijalankan pada komputer PC, video player dengan monitor TV, dan ada yang menggunakan perangkat keras

12

khusus. Alat input interaktif seperti mouse dan joystick diperlukan untuk aplikasi game. 8)

Pendidikan Komputer sebagai alat bantu pendidikan (Computer Assisted Instruction) sudah cukup dikenal. Aplikasi bidang pengajaran dengan komputer sebagai alat bantunya, diantaranya: 

Drill and Practice (latih dan praktek) Computer Assisted Instruction (CAI) menggantikan pengajar untuk memberikan latihan kepada siswa.



Tutorial (penjelasan) Sistem komputer digunakan untuk menyampaikan materi ajaran.



Simulasi Digunakan untuk mengkaji permasalahan yang rumit pada bidang biologi, transportasi, ekonomi, dan lain-lain.

Aplikasi bidang bukan pengajaran dengan alat bantu komputer, diantaranya : a. Computer Assisted Testing (Ujian Berbantuan Komputer) Komputer digunakan untuk sarana ujian. b. Computer

Assisted

Guidance

(Pengarahan

Berbantuan

Komputer) Komputer digunakan sebagai sarana untuk mencari informasi yang diperlukan. c. Computer Managed Instruction Komputer digunakan untuk merencanakan pelajaran, evaluasi belajar, serta memantau prestasi siswa. 9)

Visualisasi Ilmuwan, ahli kedokteran, analis bisnis, dan lain-lain sering menggunakan banyak informasi suatu masalah dalam mempelajari perilaku proses tertentu. Informasi tersebut berisi ribuan data untuk memberikan gambaran hasil suatu evaluasi. Data tersebut diproses sehingga mendapatkan hasil dalam bentuk visual.

10)

Image Processing

13

Image processing (pengolahan citra) merupakan teknik untuk memodifikasi atau menginterpretasi gambar yang ada, seperti foto dan rangkaian gambar film. Dua macam prinsip pengolahan citra adalah : 

Meningkatkan kualitas gambar.



Memberikan persepsi dari informasi visual, seperti pada robotik.

Untuk melakukan pengolahan citra, pertama-tama membuat digitasi dari foto atau membuat foto menjadi file image. Selanjutnya metode digital dapat digunakan untuk memodifikasi gambar sehingga mendapatkan kualitas yang baik. 11)

Graphical User Interface (GUI) Graphical interface (antarmuka grafik) banyak digunakan dalam setiap aplikasi. Komponen utamanya adalah window manager, dimana pengguna dapat mengatur tampilan dari window. Interface juga menampilkan menu dan icon untuk mempercepat pemilihan yang dilakukan oleh pengguna.

D. Aktivitas Pembelajaran Peserta diklat dibagi menjadi beberapa kelompok untuk mendiskusikan materi tentang grafika komputer dan penerapan dalam berbagai bidang, kemudian membuat presentasi.

Kegiatan Praktikum 1.1 1. Topik diskusi 1 : Teknik dan Teknologi dalam Grafika Komputer

2. Topik diskusi 2 : Penerapan Grafika Komputer

E. Latihan Soal 1. Suatu bidang ilmu yang mempelajari bagaimana membangun grafik (gambar) baik 2D maupun 3D yang kelihatan nyata menggunakan komputer adalah …

14

2. Berikut ini adalah implementasi dari grafika komputer, adalah ... a. Simulators ,CAD (Computer Aided Design) , Architectural visualization b. Simulators ,CAD (Computer Aided Design) , Artificial Intillegence c. Simulators , Artificial Intillegence, Architectural visualization d. CAD (Computer Aided Design) , Architectural visualization,Artificial Intillegence

F. Rangkuman Grafika komputer (computer graphics) merupakan salah satu ilmu informatika yang mempelajari pembuatan dan manipulasi gambar dengan komputer atau secara digital. Grafis adalah gambar yang tersusun dari koordinat-koordinat. Dengan demikian sumber gambar yang muncul pada layar monitor komputer terdiri atas titik-titik yang mempunyai nilai koordinat. Layar Monitor berfungsi sebagai sumbu koordinat x dan y. Dengan kata lain maka grafika komputer adalah proses konversi informasi digital ke dalam format visual untuk ditampilkan pada terminal atau output pada printer. Dalam pembuatan komputer grafis diperlukan komputer digital untuk menyimpan dan memanipulasi gambar, tampilan layar, input / output, dan perangkat lunak khusus yang memungkinkan komputer digunakan untuk menggambar, warna, dan memanipulasi gambar sehingga dapat disimpan dalam memori. Pada dasarnya desain grafis dibedakan atas dua, yaitu desain bitmap dan desain vector. Grafis desain bitmap dibentuk dengan raster/pixel/dot/titik/point koordinat. Pembuatan citra (images) sebagai koleksi dari dots (pixels) yang kecil, independent dan dapat diatur dalam bentuk baris dan kolom. Raster grafika juga dikenal sebagai

pixel graphics. Hampir semua perangkat output komputer

menggunakan konsep raster seperti CRTs, LCDs, LEDs, dan plasma screens. Grafis jenis vektor merupakan perkembangan dari sistem grafis bitmap (digital). Grafis ini tidak tergantung pada banyaknya pixel penyusunnya dan kondisi monitor karena tampilan vektor tersusun atas garis-garis. Tampilan akan terlihat jelas meskipun dilakukan pembesaran (zooming). Penggunaan titik-titik koordinat dan rumus-rumus tertentu dapat menciptakan bermacam-macam bentuk grafis, seperti lingkaran, segitiga, bujur sangkar dan poligon. Dengan demikian ,

15

pemakaian grafis vektor akan lebih irit dari segi volume file, tetapi dari segi pemakaian prosessor akan memakan banyak memori. Pada saat ini grafika komputer digunakan secara rutin dibidang ilmu pengetahuan, teknik, kedokteran, bisnis, industri, pemerintahan, seni, hiburan, pendidikan, periklanan, dan lain sebagainya.

G. Umpan Balik IPK

Hasil Yang Dicapai

Peserta

diklat

menganalisis

mampu

konsep

grafis

dalam grafika komputer dan berapa

proses

pencapaian

kompetensinya Peserta

diklat

membedakan

mampu

desain

grafis

bitmap dan vector dan berapa besar

proses

pencapaian

kompetensinya Peserta

diklat

mampu

menjelaskan penerapan grafika komputer bidang

dalam dan

proses

berbagai

berapa

pencapaian

kompetensinya

H. Kunci Jawaban 1.

Grafika Komputer

2.

a

16

besar

Rencana Tindak Lanjut

17

18

OpenGL dan LWJGL

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 2 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menggambarkan fungsi-fungsi OpenGL yang digunakan untuk membuat objek 2. Melalui praktikum peserta diklat dapat mengintegrasikan LWJGL ke dalam Integrated Development Environment IDE NetBeans 3. Melalui praktikum peserta diklat dapat menulis kode program dengan perintah-perintah dasar OpenGL

B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menggunakan fungsi-fungsi dasar OpenGL untuk membuat objek 2. Peserta diklat mampu memodifikasikan fungsi-fungsi dasar OpenGL untuk membuat objek 3. Peserta diklat mampu menerapkan LWJGL ke dalam IDE NetBeans 4. Peserta diklat mampu membuat kode program dengan perintah-perintah OpenGL

C. Uraian Materi 1. OpenGL OpenGL (Open Graphics Library) adalah sebuah program aplikasi antar muka yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Program lintas-platform API ini umumnya dianggap ketetapan standar dalam industri komputer dalam interaksi dengan komputer grafis 2D dan juga telah menjadi alat yang biasa untuk digunakan dengan grafis 3D. Singkatnya, OpenGL menghilangkan kebutuhan pemrograman untuk menulis ulang bagian grafis dari sistem operasi setiap kali sebuah bisnis akan diupgrade ke versi

baru

dari sistem.

Fungsi

dasar

dari

OpenGL

adalah

untuk

19

mengeluarkan koleksi perintah khusus atau executable ke sistem operasi. Dengan demikian, program ini bekerja dengan perangkat keras grafis yang ada yang berada pada hard drive atau sumber tertentu lainnya. Setiap perintah dirancang untuk melakukan tindakan tertentu, atau memulai efek khusus tertentu yang terkait dengan grafis. OpenGL adalah suatu spefikasi grafik pada level rendah yang menyediakan fungsi untuk pembuatan grafik dasar termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluan-keperluan pemrograman grafis.OpenGL bersifat Open-Source, multi-platform dan multi-language serta digunakan mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi. OpenGL

juga

merupakan

suatu

antarmuka

pemrograman

aplikasi

(application programming interface (API) yang tidak tergantung pada piranti dan platform yang digunakan, sehingga OpenGL dapat berjalan pada sistem operasi Windows, UNIX dan sistem operasi lainnya. OpenGL pada awalnya didesain untuk digunakan pada bahasa pemrograman C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan dalam bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran. Namun OpenGL di-package secara berbeda-beda sesuai dengan bahasa pemrograman yang digunakan. Oleh karena itu, package

OpenGL

tersebut

dapat

di-download

pada

situs

http://www.opengl.org sesuai dengan bahasa pemrograman yang akan digunakan. OpenGl melayani dua tujuan : 

Untuk

menyembunyikan

kompleksitas

dari

interfacing

dengan

menggunakan berbagai 3D accelerators dan menggunakan satu standar API. 

Untuk menyembunyikan kemampuan yang berbeda dari hardware platform

yang

mendukung

implementasi

penuh

fitur

opengl

(menggunakan software emulation jika diperlukan). LWJGL Lightweight Java Game Library (LWJGL) merupakan salah satu jenis game engine yang berjalan dengan dasar bahasa java (open source dan free). Game engine sendiri merupakan perangkat lunak yang digunakan khusus 20

dalam pembuatan video game. Inti LWJGL adalah untuk menyisipkan tampilan level yang lebih rendah dan tidak perlu memasukkan kode. Sintax Perintah OpenGL Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi tersebut berasal, format penulisan fungsi OpenGL adalah : Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah (sebagai contoh glClearColor). Untuk mendefinisikan konstanta diawali dengan GL_, dengan menggunakan huruf kapital dan garis bawah untuk memisahkan kata (seperti GL_POLY_STIPPLE). Terkadang beberapa huruf dan angka ditambahkan pada akhir perintah (seperti 3f pada glVertex3f). Dalam hal ini angka 3 menunjukkan berapa banyak argumen yang harus ada pada perintah tersebut dan akhiran huruf f menunjukkan jenis datanya yaitu floating. Sebagai contoh pada dua perintah berikut ini : glVertex3i(1,0,-2); glVertex3f(1.0, 0.0, -2.0); adalah sama yaitu meletakkan titik di layar pada koordinat x = 1, y = 0 dan z = -2, perbedaannya yaitu pada perintah pertama menspesifikasikan titik dengan tipe data integer 32-bit, sedangkan yang kedua dengan tipe data single precision floating point. Beberapa perintah OpenGL menambahkan perintah huruf akhir v yang menunjukkan

bahwa

perintah

tersebut

menggunakan

pointer

ke

array/vektor. Di bawah ini contoh perbedaannya. float color_array[]={1.0,0.0,0.0} glColor3f (1.0,0.0,0.0); glColor3fv(color_array);

21

D. Aktivitas Pembelajaran Kegiatan Praktikum 2.1

Langkah-langkah instalasi LWJGL ke dalam IDE NetBeans 1. Pilih Lwjgl-X.X.zip yang tersedia dengan men-download file LWJGL http://lwjgl.org/download.php 2. Unduh

Lwjgl-docs-X.X.zip,

Javadoc

lwjgl

untuk

di

Netbeans

(Direkomendasikan) 3. Unduh Lwjgl-source-X.X.zip, source code lwjgl untuk di Netbeans (Direkomendasikan) 4. Unduh Lwjgl-applet-X.X.zip jika ingin menggunakan Java Applet dengan Lwjgl 5. Ekstrak File Lwjgl-X.X.zip dan Lwjgl-source-X.X.zip kecuali Lwjgl-docsX.X.zip. a)

Cara Instalasi LWJGL di NetBeans Berikut tahap-tahap instalasi LWJGL di NetBeans: 1. Buka Netbeans 2. Klik New Project, pilih Java Application > Next

Tulis Project Name dengan nama “TutorialLWJGL” Klik Tools > Libraries di main menu

22

3. Klik Tombol New Library

4. Berikan nama library dengan LWJGL atau LWJGL-X.X

23

5. Pastikan Library sudah dipilih. Sekarang pilih tab Classpath untuk menambahkan library terbaru dan kemudian klik tombol Add JAR/Folder.

6. Pergi ke folder ekstrak LWJGL-X.X.zip dan folder Jar. lwjgl.jar, lwjgl_util.jar, dan jinput.jar merupakan file jar yang harus Anda pilih. Anda dapat memilih lebih dari 1 file dengan menahan tombol Ctrl pada Keyboard.

7. Pilih Tab Sources, kemudian klik Add JAR/Folder. Pergi ke folder ekstrak Lwjgl-source-X.X.zip dan klik folder src, kemudian pilih folder generated dan java.

24

8. Pilih Tab Javadoc dan klik Add JAR/Folder. Kemudian pilih file Lwjgl-docs-X.X.zip

9. Klik OK. Selesai. Library sudah ditambahkan ke dalam Netbeans. b)

Menambahkan library LWJGL ke dalam library di aplikasi Berikut ini tahap-tahap menambah library LWJGL: 1. Buka Netbeans. 2. Klik kanan pada Libraries aplikasi kemudian pilih Add Library…

25

3. Pilih LWJGL > Klik Add Library.

4. Konfigurasi VM dengan cara klik kanan pada Tutorial lwjgl dan pilih Properties

26

Kemudian Pilih Run, dan tambahkan script berikut ke dalam kolom VM Options: -Djava.library.path="Directory\lwjgl-2.9.1\native\windows"

5. Selesai.

27

Kegiatan Praktikum 2.3 Kegiatan Praktikum ini adalah kegiatan praktikum menggunakan struktur dasar OpenGL dan LWJGL dalam IDE NetBeans. 1. Bagian awal dari program adalah bagian untuk mengimport library-library yang diperlukan untuk mengintegrasikan LWJGL ke dalam IDE Netbeans import java.util.logging.Level; import java.util.logging.Logger; import static komgraf01.KomGraf01.DISPLAY_HEIGHT; import static komgraf01.KomGraf01.DISPLAY_WIDTH; import org.lwjgl.LWJGLException; import org.lwjgl.input.Keyboard; import org.lwjgl.input.Mouse; import org.lwjgl.opengl.Display; import org.lwjgl.opengl.DisplayMode; import static org.lwjgl.opengl.GL11.*; import static org.lwjgl.util.glu.GLU.gluOrtho2D; 2. Bagian kedua dari program adalah bagian yang digunakan untuk menentukan

koordinat

dari

bidang

dua

dimensi

dalam

bentuk

garis dimana nilai satuan berupa double. public class OpenGL1 { public void draw() { glBegin(GL_LINE_LOOP);//Objek garis glVertex2d(200, 200); // koordinat x dan y glVertex2d(600, 200); glVertex2d(200, 325); glVertex2d(600, 325); glVertex2d(200, 450); glVertex2d(600, 450); glEnd(); } 3. Bagian ketiga dari program adalah bagian yang digunakan untuk inisialisasi OpenGL public void render() { glClear(GL_COLOR_BUFFER_BIT);//menghapus layar glLoadIdentity();

28

glColor3d(1, 0, 0); draw(); glFlush(); } public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("GAMBAR

Primitives-Geometric

:

POLYGON"); Display.create(); initGL(); resizeGL(); } void initGL() { glClearColor(0.0f, 1.0f, 1.0f, 1.0f); glDisable(GL_DEPTH_TEST); glDisable(GL_LIGHTING); } public void resizeGL() { //2D Scene glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } public void run() { while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) {

29

render(); } try { Thread.sleep(100); } catch (InterruptedException ex) { } } Display.update(); Display.sync(60); } } private void update() { } public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); } public static void main(String[] args) { OpenGL1 b1 = new OpenGL1(); try { b1.create(); b1.run(); } catch (LWJGLException ex) { Logger.getLogger(Belajar1.class.getName()).log(Level.SEVERE, null, ex); } } }

30

E. Latihan / Tugas Latihan 1. OpenGL (Open Graphics Library) bersifat Open-Source, multi-platform dan multi-language

adalah

sebuah

program

aplikasi

interface

untuk

mendifinisikan suatu objek yaitu ....

2. Fungsi dasar dari OpenGL adalah ....

F. Rangkuman OpenGL (Open Graphics Library) adalah sebuah program aplikasi interface yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Program lintasplatform API ini umumnya dianggap ketetapan standar dalam industri komputer dalam interaksi dengan komputer grafis 2D dan juga telah menjadi alat yang biasa untuk digunakan dengan grafis 3D.OpenGL adalah suatu spefikasi grafik yang low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluankeperluan pemrograman grfis.OpenGL bersifat Open-Source, multi-platform dan multi-language serta digunakan mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi. Lightweight Java Game Library (LWJGL) merupakan salah satu jenis game engine yang berjalan dengan dasar bahasa java (open source dan free). Game engine sendiri merupakan perangkat lunak yang digunakan khusus dalam pembuatan video game. Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi tersebut berasal, format penulisan fungsi OpenGL adalah :
library>
jumlah

argumen>
tipe

argumen> Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah (sebagai contoh glClearColor).

31

G. Umpan Balik IPK

Hasil Yang Dicapai

Peserta

diklat

menggunakan

Rencana Tindak Lanjut

mampu fungsi-fungsi

dasar OpenGL untuk membuat objek

dan

berapa

proses

pencapaian kompetensinya Peserta

diklat

memodifikasikan

mampu fungsi-fungsi

dasar OpenGL untuk membuat objek dan berapa besar proses pencapaian kompetensinya Peserta

diklat

mampu

menerapkan LWJGL ke dalam IDE

NetBeans

besar

proses

dan

berapa

pencapaian

kompetensinya Peserta diklat mampu membuat kode program dengan perintahperintah OpenGL dan berapa besar

proses

pencapaian

kompetensinya

H. Kunci Jawaban 1.

Objek 2 dimensi dan objek 3 dimensi

2.

Mengeluarkan koleksi perintah khusus(grafik) atau executable ke sistem operasi

32

33

34

PEMODELAN OBJEK 2 DIMENSI Primitif Objek

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 3 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat mengemukakan output primitif grafika komputer untuk membuat objek. 2. Melalui praktikum peserta diklat membuat kode program berdasarkan

algoritma pembentukan garis dan lingkaran.

B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menerapkan konsep konsep dasar grafika computer untuk menggambar primitif objek 2. Peserta diklat mampu menggunakan perintah-perintah dasar OpenGL untuk menggambar primiif objek 3. Peserta diklat mampu menulis kode program sesuai algoritma pembentukan garis dan lingkaran

C. Uraian Materi 1. Primitif Objek Objek primitif merupakan bentuk geometri sederhana seperti titik (points), garis (lines) dan bangunan dua dimensi. Dalam grafika computer, representasi citra menggunakan primitive grafik dasar memudahkan untur dirender atau digambar pada layar monitor sebagaimana penggunaan persamaan geometri sederhana. Contoh objek primitif grafika dasar antara lain : titik, garis, kurva, fill area dan text. Objek kompleks dapat dibuat dengan menggunakan kombinasi dari objek primitif ini. Misalkan, Poligaris atau yang dapat didefinisikan sebagai urutan garis lurus yang saling terhubung. Secara umum algoritma grafis memiliki persamaan

35

tujuan yaitu bagaimana menampilkan hasil citra yang diinginkan berdasarkan koordinat yang telah ditentukan. 2. Titik dan Garis Pembentukan titik dilakukan dengan mengkonversi posisi titik koordinat dengan program aplikasi ke dalam suatu operasi tertentu menggunakan output. Randomscan (vektor). Sistem menyimpan instruksi pembentukan titik pada display list dan nilai koordinat untuk menentukan posisi pancaran electron ke arah lapisan fosfor pada layer. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis. Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat dua dimensi pada layar. 3. Membuat Titik dan Garis Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan perintah lines(x1,y1,x2,y2). Persamaan garis menurut koordinat Cartesian adalah: y = m.x + b dimana m adalah slope (kemiringan) dari garis yang dibentuk oleh dua titik yaitu (x1,y1) dan (x2, y2). Untuk penambahan x sepanjang garis yaitu dx akan mendapatkan penambahan y sebesar Δy = m. Δx  Algoritma DDA (Digital Differential Analyzer) DDA adalah algoritma pembentukan garis berdasarkan perhitungan Δx dan Δy, menggunakan rumus y = m. Δ x. Garis dibuat dengan menentukan dua endpoint yaitu titik awal dan titik akhir. Setiap koordinat titik yang membentuk garis diperoleh dari perhitungan, kemudian dikonversikan menjadi nilai integer. Langkah-langkah pembentukan menurut algoritma DDA, yaitu : 1) Tentukan dua titik yang akan dihubungkan. 2) Tentukan salah satu titik sebagai titik awal (x0, y0) dan titik akhir (x1, y1). 3) Hitung Δx = x1 – x0 dan Δ y = y1 – y0. 4) Tentukan step, yaitu jarak maksimum jumlah penambahan nilai x maupun nilai y dengan cara :  bila nilai |Δy| > |Δx| maka step = nilai |Δy|.

36

 bila tidak maka step = |Δx|. 5) Hitung penambahan koordinat pixel yaitu x_increment =

Δx / step dan

y_increment = Δy / step. 6) Koordinat selanjutnya (x+x_incerement, y+y_increment). 7) Posisi pixel pada layer ditentukan dengan pembulatan nilai koordinasi tersebut. 8) Ulangi step 6 dan 7 untuk menentukan posisi pixel selanjutnya, sampai

x=

x1 dan y = y1 Contoh: Untuk menggambarkan algoritma DDA dalam pembentukan suatu garis yang menghubungkan titik (5,5) dan (10,9), pertama-tama ditentukan dx dan dy, kemudian dicari step untuk mendapatkan x_increment dan y_increment. Δx = x1 – x 0 = 10-5 = 5 Δy = y1 – y0 = 9 -5 = 4 selanjutnya hitung dan bandingkan nilai absolutnya. |Δx| = 5 |Δy| = 4 karena |Δx| > |Δy|, maka step = |Δx| = 5, maka diperoleh : x_inc = 5/5 = 1 y_inc = 4/5 = 0.8 Tabel 2 Data algoritma DDA K

X

Y

0

6

5.8

Round(x), round(y) (5,5) (6,6)

1 2 3 4

7 8 9 10

6.6 7.4 8.2 9

(7,7) (8,7) (9,8) (10,9)

10 9 8 7

37

6 5 5

6

7

8

9

10

 Algoritma Bressenham Prosedur untuk menggambar kembali garis dengan membulatkan nilai x atau y ke bilangan integer membutuhkan waktu, serta variable x,y dan m merupakan bilangan real karena kemiringan merupakan nilai pecahan. mengembangkan algoritma klasik

yang

Bressenham

lebih menarik, karena hanya

menggunakan perhitungan matematika dengan bilangan integer. Dengan demikian tidak perlu membulatkan nilai posisi setiap pixel setiap waktu. Algoritma garis Bressenhem disebut juga midpoint line algorithm adalah algoritma konversi penambahan nilai integer yang juga dapat diadaptasi untuk menggambar sebuah lingkaran. Langkah-langkah untuk membentuk garis menurut algoritma ini adalah: 1) Tentukan dua titik yang akan dihubungkan dalam pembentukan garis. 2) Tetukan salah satu titik disebelah kiri sebagai titik awal (x0, y0) dan titik lainnya sebagai titik akhir (x1, y1 ). 3) Hitung Δx, Δy, Δ2x, dan 2Δy – 2Δx. 4) Hitung parameter p0 = 2Δy – Δx. 5) Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0 

bila pk <0 maka titik selanjutnya (xk+1, yk) dan pk+1 = pk +2Δy



bila tidak maka titik selanjutnya adalah (xk+1, yk+1) dan pk+1=pk+2Δ-y2Δx.

6) Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai x=xn.

D. Aktivitas Pembelajaran Kegiatan Praktikum 3.1  Membuat Titik Create_Point.java

38

public class Create_Point { public void render() { glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity(); glColor3f(0.0f, 1.0f, 0.0f); glPointSize(10); glBegin(GL_POINTS); glVertex2f(100, 100); glVertex2f(200, 100); glVertex2f(200, 300); glVertex2f(100, 300); glVertex2f(150, 375); glVertex2f(375, 375); glVertex2f(425, 300); glVertex2f(425, 100); glEnd(); } public static void main(String[] args) { Create_Point main = null; try { System.out.println("Keys:"); System.out.println("esc - Exit"); main = new Create_Point(); main.create(); main.run(); } catch (Exception ex) { LOGGER.log(Level.SEVERE, ex.toString(), ex); } finally { if (main != null) { main.destroy(); } } } private void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(DISPLAY_WIDTH, DISPLAY_HEIGHT)); Display.setFullscreen(false); Display.setTitle("Create Point"); Display.create(); //Keyboard Keyboard.create(); //Mouse Mouse.setGrabbed(false); Mouse.create(); //OpenGL initGL(); resizeGL(); //To change body of generated methods, choose Tools | Templates. } private void run() { while (!Display.isCloseRequested() !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) {

&&

39

if (Display.isVisible()) { render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100); } catch (InterruptedException ex) { } } Display.update(); Display.sync(60); } } private void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); } private void initGL() { //2D Initialization glClearColor(0.0f, 0.0f, 0.0f, 0.0f); glDisable(GL_DEPTH_TEST); glDisable(GL_LIGHTING); } private void resizeGL() { //2D Scene glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } }

Keluaran Program

40

Kegiatan Praktikum 3.2  Membuat Garis Create_Line.java public class Create_Line { public void render() { glColor3f(1.0f, 0.0f, 1.0f); glLineWidth(5); glBegin(GL_LINES); glVertex2f(100, 100); glVertex2f(100, 350); glVertex2f(200, 100); glVertex2f(300, 350); glVertex2f(350, 225); glVertex2f(550, 225); glEnd(); glFlush(); } public static void main(String[] args) { Create_Line main = null; try { System.out.println("Keys:"); System.out.println("esc - Exit"); main = new Create_Line(); main.create(); main.run(); } catch (Exception ex) { LOGGER.log(Level.SEVERE, ex.toString(), ex);

41

} finally { if (main != null) { main.destroy(); } } } private void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(DISPLAY_WIDTH, DISPLAY_HEIGHT)); } private void run() { .... }

private void destroy() { .... } private void initGL() { .... } private void resizeGL() { .... } }

Keluaran Program

42

E. Latihan Soal

Buatlah kode program agar dapat menampilkan seperti sreenshoot di atas dengan menggunakan fungsi-fungsi primitive drawing dengan ketentuan sebagai berikut : Ukuran Window

:DisplayMode(800, 600)

Fungsi

:glBegin(GL_LINE_LOOP);

Titik awal

:glVertex2d(200, 200);

F. Rangkuman Objek primitif merupakan bentuk geometri sederhana seperti titik (points), garis (lines) dan bangunan dua dimensi. Dalam grafika computer, representasi citra menggunakan primitive grafik dasar memudahkan untur dirender atau digambar pada layar monitor sebagaimana penggunaan persamaan geometri sederhana. Contoh objek primitif grafika dasar antara lain : titik, garis, kurva, fill area dan text. Objek kompleks dapat dibuat dengan menggunakan kombinasi dari objek primitif ini. Pembentukan titik dilakukan dengan mengkonversi suatu posisi titik koordinat

dengan

program

aplikasi

ke

dalam

suatu

operasi

tertentu

menggunakan output. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis. Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar.

43

Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan perintah lines(x1,y1,x2,y2). Terdapat dua algoritma pembentukan titik dan garis yaitu Algoritma DDA (Digital Differential Analyzer) dan Algoritma Bressenham

G. Umpan Balik IPK

Hasil Yang Dicapai

Peserta diklat mampu Peserta diklat mampu menerapkan konsep konsep dasar grafika computer untuk menggambar primitif objek dan berapa proses pencapaian kompetensinya Peserta

diklat

mampu

menggunakan perintah-perintah dasar

OpenGL

menggambar

untuk

satu

bentuk

gabungan dari beberapa primiif objek dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program sesuai algoritma pembentukan lingkaran

garis

dan berapa

proses

dan besar

pencapaian

kompetensinya

H. Kunci Jawaban PrimitiveGaris.java import java.util.logging.Level;

44

Rencana Tindak Lanjut

import java.util.logging.Logger; import static komgraf01.KomGraf01.DISPLAY_HEIGHT; import static komgraf01.KomGraf01.DISPLAY_WIDTH; import org.lwjgl.LWJGLException; import org.lwjgl.input.Keyboard; import org.lwjgl.input.Mouse; import org.lwjgl.opengl.Display; import org.lwjgl.opengl.DisplayMode; import static org.lwjgl.opengl.GL11.*; import static org.lwjgl.util.glu.GLU.gluOrtho2D; public class PrimitiveGaris { public void draw() { glBegin(GL_LINE_LOOP); glVertex2d(200, 200); glVertex2d(600, 200); glVertex2d(200, 325); glVertex2d(600, 325); glVertex2d(200, 450); glVertex2d(600, 450); glEnd(); } public void render() { glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity(); glColor3d(1, 0, 0); draw(); glFlush(); } public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("GAMBAR Primitives-Geometric : GARIS"); Display.create();

45

//OpenGL initGL(); resizeGL(); } void initGL() { glClearColor(0.0f, 1.0f, 1.0f, 1.0f); glDisable(GL_DEPTH_TEST); glDisable(GL_LIGHTING); } public void resizeGL() { //2D Scene glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } public void run() { while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100); } catch (InterruptedException ex) {

46

} } Display.update(); Display.sync(60); } } private void update() { // } public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); } public static void main(String[] args) { PrimitiveGaris b1 = new PrimitiveGaris(); try { b1.create(); b1.run(); } catch (LWJGLException ex) { Logger.getLogger(PrimitiveGaris.class.getName()).log(Level .SEVERE, null, ex); }

47

48

49

50

Pemodelan Objek 2 Dimensi

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 4 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisa pemodelan objek 2 Dimensi melalui transformasi geometri. 2. Melalui praktikum peserta diklat dapat membuat kode program dengan menggunakan operasi transformasi geomentri translasi, penskalaan,dan rotasi.

B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menerapkan operasi transformasi geometri translasi, penskalaan, dan rotasi 2. Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 2 dimensi 3. Peserta diklat mampu menulis kode program untuk memodelkan objek 2 dimensi melalui proses translasi, penskalaan, dan rotasi

C. Uraian Materi Grafika komputer merupakan bidang yang menarik minat banyak orang. Salah satu sub bagian dari grafika komputer adalah pemodelan objek (object modelling). Dalam pemodelan objek dua dimensi (2D), berbagai objek dapat dimodelkan menurut kondisi tertentu. Objek yang dimodelkan itu perlu dimodifikasi. Pemodifikasian objek ini dapat dilakukan dengan melakukan berbagai operasi fungsi atau operasi transformasi geometri. Transformasi yang dibuat dapat berupa transformasi dasar ataupun gabungan dari berbagai transformasi

geometri.

Contoh

transformasi

geometri

adalah

translasi,

penskalaan, putaran (rotasi), potongan dan gabungan. Transformasi ini dikenal

51

dengan istilah transformasi affine. Pada dasarnya proses transformasi ini adalah proses memindahkan objek tanpa merusak bentuk dari objek itu sendiri. 1. Definisi Objek Grafik 2 Dimensi Pada sub topik ini peserta akan mempelajari objek grafik 2 dimensi dan penerapannya dalam aplikasi sederhana. 

Titik 2D

Titik 2D mempunyai 2 nilai, yaitu x dan y yang menyatakan jarak horizontal dan vertikal dari titik pusat sumbu koordinat (0,0).  Polyline Polyline adalah suatu fungsi yang digunakan untuk menggambarkan objek 2D dimana setiap titik pada objek mulai titik ke 0, 1, 2,3,..., n dihubungkan dengan garis lurus sehingga membentuk kurva terbuka.

2. Pengenalan Operasi Transformasi Geometri Pada sub topik ini akan dipelajari Operasi Transformasi Geometri dan penerapannya dalam aplikasi sederhana.

3.1 Operasi Translasi Transformasi

translasi

merupakan

suatu

operasi

yang menyebabkan

perpindahan objek 2D dari satu tempat ke tempat yang lain. Perubahan ini berlaku dalam arah yang sejajar dengan sumbu X dan sumbu Y.

Gambar 3 Proses translasi suatu objek Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat dengan translasi vector, yaitu (tx,ty), dimana tx adalah translasi menurut sumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh dengan menggunakan rumus :

52

Translasi adalah transformasi dengan bentuk yang tetap, memindahkan objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran yang sama.Dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi bergerak dengan jarak yang

sama. Pergerakan tersebut dapat

berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y saja atau keduanya.

3.2 Operasi Rotasi Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka perlu ditentukan pusat dan besar sudut putar, sedangkan translasi adalah pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah. Rotasi berbeda dengan translasi karena perubahan posisi pada translasi tidak mengacu pada suatu titik tertentu. Keistimewaan dari rotasi adalah jarak antara titik pusat dengan masing-masing bagian dari obyek yang diputar akan selalu tetap, seberapa jauh pun obyek itu diputar.

Gambar 4 Proses rotasi dari sutu objek Pada sebuah aplikasi yang menggunakan grafik vektor dan grafik bitmap, rotasi dan translasi sangat di butuhkan. Untuk melakukan kedua proses ini bisa menggunakan source code yang tersedia yaitu: 

glTranslatef (x, y, z) digunakan untuk merubah titik posisi awal sumbu koordinat menuju posisi yang ditentukan sesuai koordinat x,y, dan z.

53



glRotatef (angle, x, y, z) digunakan untuk memutar suatu bidang pada sudut tertentu (angle).

3.3 Operasi Skala Penskalaan adalah suatu operasi yang membuat suatu objek berubah ukurannya baik mengecil ataupun membesar

secara seragam atau tidak

seragam tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan. sx adalah faktor penskalaan menurut sumbu x dan sy faktor penskalaan menurut sumbu y. Koordinat baru diperoleh dengan x‟ = x + sx y„= y + sy

(x,y) = titik asal sebelum diskala (x‟,y‟) = titik setelah diskala

Nilai lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil dari 1, maka objek akan diperkecil. Bila (sx,sy) mempunyai nilai yang sama, maka skala disebut dengan uniform scalling.

Gambar 5 Proses skala dari sutu objek Perintah yang terakhir yaitu glScale{f,d}(TYPEx,TYPEy,TYPEz) digunakan untuk mengalikan martiks yang sedang aktif

dengan matriks yang

memperbesar,

objek.

memperkecil

atau merefleksikan

Masing-masing

koordinat x, y, z dari setiap titik pada objek dikalikan dengan argumen x, y, z. Perintah glScale merupakan satu-satunya perintah transformasi modelling yang mengubah ukuran objek. Jika nilai yang diberikan lebih besar dari 1.0 maka objek akan diperbesar, jika nilai yang diberikan kurang dari 1.0 maka objek akan diperkecil, dan jika nilai yang diberikan negatif, maka objek akan direfleksikan (dicerminkan).

54

D. Aktivitas Pembelajaran

Kegiatan Praktikum 4.1  Translasi Membuat

persegi

panjang

dengan

warna

merah.

Kemudian

hasil

translasi(geser) sebesar 90 terhadap sumbu Y adalah persegi panjang dengan warna kuning dan ditranslasi(geser) sebesar 180 terhadap sumbu X dan 90 terhadap sumbu Y adalah persegi panjang warna biru.

Translasi.java import import import import import import import import import import import

java.util.logging.Level; java.util.logging.Logger; static komgraf01.KomGraf01.DISPLAY_HEIGHT; static komgraf01.KomGraf01.DISPLAY_WIDTH; org.lwjgl.LWJGLException; org.lwjgl.input.Keyboard; org.lwjgl.input.Mouse; org.lwjgl.opengl.Display; org.lwjgl.opengl.DisplayMode; static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.gluOrtho2D;

public class Translasi { public void draw(){ } public void render() { glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity();

55

glColor3d(1, 0, 0); buatKotak(); glTranslated(0,90, 0); glColor3f(1, 1, 0); buatKotak(); glTranslated(90,180, 0); glColor3f(0, 0, 1); buatKotak(); glFlush(); } public void buatKotak() { //membuat kotak glBegin(GL_POLYGON); glVertex2f(250, 120); //titik kiri bawah glVertex2f(450, 120); //titik kanan bawah glVertex2f(450, 200); //titik kanan atas glVertex2f(250, 200); //titik kiri atas glEnd(); } public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("Proses Rotasi"); Display.create(); initGL(); resizeGL(); } void initGL() { glClearColor(0.0f, 1.0f, 1.0f, 1.0f); glDisable(GL_DEPTH_TEST); glDisable(GL_LIGHTING); } public void resizeGL() { glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } public void run() { while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100);

56

} catch (InterruptedException ex) { } } Display.update(); Display.sync(60); } } private void update() { } public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); } public static void main(String[] args) { Rotasi b1 = new Rotasi(); try { b1.create(); b1.run(); } catch (LWJGLException ex) { Logger.getLogger(Rotasi.class.getName()).log(Level.SEVERE, null, ex); } } }

Kegiatan Praktikum 4.2  Rotasi Membuat

persegi

panjang

dengan

warna

merah.

Kemudian

hasil

rotasi(diputar) sebesar 15 derajat adalah persegi panjang dengan warna kuning dan di rotasi(diputar) kembali sebesar -45 derajat adalah persegi panjang warna biru.

57

Rotasi.java import import import import import import import import import import import

java.util.logging.Level; java.util.logging.Logger; static komgraf01.KomGraf01.DISPLAY_HEIGHT; static komgraf01.KomGraf01.DISPLAY_WIDTH; org.lwjgl.LWJGLException; org.lwjgl.input.Keyboard; org.lwjgl.input.Mouse; org.lwjgl.opengl.Display; org.lwjgl.opengl.DisplayMode; static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.gluOrtho2D;

public class Rotasi { public void draw(){ //membuat titik } public void render() { glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity(); glColor3d(1, 0, 0); buatKotak(); glRotated(15, 0, 0, 1.0); glColor3f(1, 1, 0); buatKotak(); glRotated(-45, 0, 0, 1.0); glColor3f(0, 0, 1); buatKotak(); glFlush(); } public void buatKotak() { //membuat kotak glBegin(GL_POLYGON);

58

glVertex2f(300, glVertex2f(500, glVertex2f(500, glVertex2f(300, glEnd();

300); 300); 360); 360);

//titik //titik //titik //titik

kiri bawah kanan bawah kanan atas kiri atas

} public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("Proses Rotasi"); Display.create(); //OpenGL initGL(); resizeGL(); } void initGL() { glClearColor(0.0f, 1.0f, 1.0f, 1.0f); glDisable(GL_DEPTH_TEST); glDisable(GL_LIGHTING); } public void resizeGL() { glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } public void run() { while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100); } catch (InterruptedException ex) { } } Display.update(); Display.sync(60); } } private void update() { } public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy();

59

} public static void main(String[] args) { Rotasi b1 = new Rotasi(); try { b1.create(); b1.run(); } catch (LWJGLException ex) { Logger.getLogger(Rotasi.class.getName()).log(Level.SEVERE, null, ex); } } }

Kegiatan Praktikum 4.3  Skala Membuat persegi panjang dengan warna merah. Kemudian hasil di skala sebesar x = 2, dan y=2 adalah menjadi persegi panjang dengan warna biru.

Skala.java import import import import import import import import import import

60

java.util.logging.Level; java.util.logging.Logger; static komgraf01.KomGraf01.DISPLAY_HEIGHT; static komgraf01.KomGraf01.DISPLAY_WIDTH; org.lwjgl.LWJGLException; org.lwjgl.input.Keyboard; org.lwjgl.input.Mouse; org.lwjgl.opengl.Display; org.lwjgl.opengl.DisplayMode; static org.lwjgl.opengl.GL11.*;

import static org.lwjgl.util.glu.GLU.gluOrtho2D; public class Skala { public void draw(){ //membuat titik } public void render() { glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity(); glColor3d(1, 0, 0); buatKotak(); glScaled(2, 2, 0); glColor3d(0, 0, 1); buatKotak(); glFlush(); } public void buatKotak() { //membuat kotak glBegin(GL_POLYGON); glVertex2f(250, 120); //titik kiri bawah glVertex2f(450, 120); //titik kanan bawah glVertex2f(450, 200); //titik kanan atas glVertex2f(250, 200); //titik kiri atas glEnd(); } public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setFullscreen(false); Display.setTitle("Proses SKALA"); Display.create(); //OpenGL initGL(); resizeGL(); } void initGL() { glClearColor(0.0f, 1.0f, 1.0f, 1.0f); glDisable(GL_DEPTH_TEST); glDisable(GL_LIGHTING); } public void resizeGL() { glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } public void run() { while (!Display.isCloseRequested() &&

61

!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100); } catch (InterruptedException ex) { } } Display.update(); Display.sync(60); } } private void update() { } public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); } public static void main(String[] args) { Skala b1 = new Skala(); try { b1.create(); b1.run(); } catch (LWJGLException ex) { Logger.getLogger(Skala.class.getName()).log(Level.SEVERE, null, ex); } } }

E. Latihan Soal 1. Buatlah aplikasi sederhana Objek 2 Dimensi seperti gambar dibawah ini

62

F. Rangkuman Translasi adalah proses transformasi dengan bentuk yang tetap, memindahkan objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran yang sama. Dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi bergerak dalam jarak yang sama. Pergerakan tersebut dapat berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y saja atau keduanya. Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka perlu ditentukan pusat dan besar sudut putar. sedangkan translasi adalah pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah. Penskalaan adalah suatu operasi yang membuat suatu objek berubah ukurannya baik menjadi mengecil ataupun membesar

secara seragam atau

tidak seragam tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan. sx adalah faktor penskalaan menurut sumbu x dan sy faktor penskalaan menurut sumbu y.

G. Umpan Balik IPK

Hasil Yang Dicapai

Rencana Tindak Lanjut

Peserta diklat mampu menerapkan operasi transformasi geometri translasi, penskalaan, dan rotasi dan berapa proses pencapaian kompetensinya Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 2 dimensi dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program untuk memodelkan

63

objek 2 dimensi melalui proses translasi, penskalaan, dan rotasi dan

berapa

besar

proses

pencapaian kompetensinya

H. Kunci Jawaban Jawaban No 1: Tugas2D.java import java.util.logging.Level; import java.util.logging.Logger; import static komgraf01.KomGraf01.DISPLAY_HEIGHT; import static komgraf01.KomGraf01.DISPLAY_WIDTH; import org.lwjgl.LWJGLException; import org.lwjgl.input.Keyboard; import org.lwjgl.input.Mouse; import org.lwjgl.opengl.Display; import org.lwjgl.opengl.DisplayMode; import static org.lwjgl.opengl.GL11.*; import static org.lwjgl.util.glu.GLU.gluOrtho2D; public class Tugas2D { private int width=600; private int height=600; public void draw(){ //membuat titik } public void render() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0, width, 0, height); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glClear(GL_COLOR_BUFFER_BIT);

64

buatSegitiga(); glFlush(); } public void buatSegitiga() { //membuat triangle glBegin(GL_TRIANGLES); glColor3f(1.0f, 0.0f, 0.0f); glVertex2f(width / 4.0f, height * 3.0f / 4.0f); glColor3f(0.0f, 1.0f, 0.0f); glVertex2f(width / 4.0f, height / 4.0f); // Set color to violet glColor3f(1.0f, 0.0f, 1.0f); glVertex2f(width * 3.0f / 4.0f, height / 4.0f); // Set color to blue glColor3f(0.0f, 0.0f, 1.0f); // Top triangle glVertex2f(width / 4.0f, height * 3.0f / 4.0f); glVertex2f(width * 3.0f / 4.0f, height * 3.0f / 4.0f); glVertex2f(width * 3.0f / 4.0f, height / 4.0f); glEnd(); } public void create() throws LWJGLException { Display.setDisplayMode(new DisplayMode(600, 600)); Display.setFullscreen(false); Display.setTitle("Tugas 2 Dimensi"); Display.create(); //OpenGL initGL(); resizeGL(); } void initGL() { glClearColor(0.0f, 1.0f, 1.0f, 1.0f); glDisable(GL_DEPTH_TEST); glDisable(GL_LIGHTING); } public void resizeGL() { glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT);

65

glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT); glPushMatrix(); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); } public void run() { while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { if (Display.isVisible()) { update(); render(); } else { if (Display.isDirty()) { render(); } try { Thread.sleep(100); } catch (InterruptedException ex) { } } Display.update(); Display.sync(60); } } private void update() { } public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); } public static void main(String[] args) { Tugas2D b1 = new Tugas2D(); try {

66

b1.create(); b1.run(); } catch (LWJGLException ex) { Logger.getLogger(Tugas2D.class.getName()).log(Level.SEVERE, null, ex); } } }

67

68

69

70

PEMODELAN OBJEK 3 DIMENSI Pembuatan Objek 3 Dimensi

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 5 ini peserta diklat diharapkan dapat : 1.

Melalui diskusi peserta diklat dapat menganalisis sistem koordinat 3 dimensi dan pembuatan objek 3 dimensi

2.

Melalui praktikum peserta diklat dapat membuat kode program untuk melakukakan operasi transformasi pada objek 3 dimensi.

B. Indikator Pencapaian Kompetensi 1.

Peserta diklat mampu memahami sistem koordinat dan struktur objek 3 dimensi

2.

Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 3 dimensi

3.

Peserta diklat mampu menulis kode program untuk memodelkan objek 3 dimensi melalui proses translasi, penskalaan, dan rotasi

C. Uraian Materi Pembeda objek 2 dimensi dan 3 dimensi adalah kedalaman. Kedalaman didefinisikan sebagai jarak antara viewer terhadap benda yang dia lihat. Ini berarti berbeda dengan objek 2 dimensi yang hanya menggunakan 2 ukuran, yaitu panjang dan lebar, maka 3 dimensi menggunakan 3 ukuran, yaitu panjang, lebar dan kedalaman. Secara geometri ketiga ukuran tersebut disimbolkan dengan sumbu x, y, dan z.

1. Sistem Koordinat Salah satu sistem koordinat yang dikenal adalah sistem koordinat kartesian

yang digunakan

untuk

membedakan

lokasi

atau

posisi

sembarang titik atau objek dengan titik atau objek yang lain. Sistem koordinat kartesian terdiri atas sistem koordinat kartesian 2 dimensi dan

71

sistem koordinat kartesian 3 dimensi.Dalam sistem koordinat 3 dimensi terdapat satu sumbu lain selain sumbu x dan sumbu y, yaitu sumbu z yang arahnya tegak lurus terhadap sumbu x dan sumbu y. Hadirnya sumbu z menyebabkan sistem koordinat ini menjadi lebih hidup karena memunculkan efek jauh dekat. Untuk lebih jelasnya, lihat pada gambar di bawah ini :

Gambar 6 Koordinat

2. Pemodelan Objek 3 Dimensi Benda tiga dimensi disusun dari sekumpulan permukaan objek. Gambar di bawah memberikan contoh bagaimana permukaan objek digunakan untuk menyusun benda tiga dimensi.

Gambar 7 Surface

Permukaan objek atau surface dapat dibuat dari rangkaian Polygon. Polygon adalah bentuk yang disusun dari serangkaian garis yang terhubung satu dengan yang lain dan berbentuk kurva tertutup sehingga sebuah

objek

gambar.

Titik

sudut

dari

sedangkan garis penyusun Polygon disebut edge.

72

Polygon

membentuk

disebut

vertex

Gambar 8 Vertex dan Edge

Polygon digambar dengan menggambar masing-masing edge dengan –

setiap edge merupakan pasangan dari

kecuali

untuk edge terakhir merupakan pasangan dari

–

Bentuk

untuk

polygon

yang

paling

tepat

digunakan

. membuat

permukaan benda tiga dimensii adalah polygon segitiga (triangle). Hal ini disebabkan polygon segitiga akan selalu

berada

dalam keadaan

planar (datar) sementara polygon dengan vertex lebih dari 3 dapat berada dalam kondisi non-planar karena salah satu vertex tidak berada di lokasi yang sejajar.

Satu hal yang harus diperhatikan pada saat

menggunakan polygon segitiga adalah winding. Winding adalah urutan dan

arah

vertex-vertex

penyusun polygon.

Winding

menganggap

bahwa arah vertex berlawanan jarum jam sebagai tampak depan sedangkan arah vertex searah jarum jam dianggap sebagai bagian belakang benda.

D. Aktivitas Pembelajaran Pembuatan kode program untuk pembuatan objek 3 dimensi dirancang dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan operasi transformasi geometri. Ketikkan script program java berikut untuk mendapatkan keluaran 3 dimensi yang diharapkan.

73

Buat laporan berdasarkan script program dengan menjelaskan fungsi-fungsi dari masing-masing perintah dan argument yang terdapat dalam script yang dibutuhkan untuk membangun objek 3 dimensi sesuai keluaran yang tampak.

Kegiatan Praktikum 5.1 Keluaran Program yang diharapkan

Perancangan class diagram

74

lwjgl.OpenGL CGApplication

PrimitiveDrawing3D -x : int -y : int -z : int +glTriangle() : void +main() : void

CfgApplication.java import import import import import import import import

static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.*; java.awt.Font; org.lwjgl.LWJGLException; org.lwjgl.Sys; org.lwjgl.input.Keyboard; org.lwjgl.opengl.Display; org.lwjgl.opengl.DisplayMode;

public abstract class CfgApplication { protected long lastFrame; protected int fps; protected long last; protected String windowTitle = ""; protected int width; protected int height; protected boolean fullscreen; protected boolean vsync; public final int DEFAULT_FONT_SIZE = 14; protected boolean showFPS; protected int oldfps; protected int activeFontTextureId; public void start(int width, int height, boolean fullscreen, boolean vsync, boolean showFPS, String windowTitle) { this.windowTitle = windowTitle; this.height = height; this.width = width; this.fullscreen = fullscreen; this.vsync = vsync; this.showFPS = showFPS; try {

75

createWindow(); init(); while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { render(); Display.update(); } deinit(); Display.destroy(); } catch (Exception e) { e.printStackTrace(); System.exit(0); } } public abstract void render(); public abstract void deinit(); private void createWindow() throws LWJGLException { Display.setTitle(windowTitle); Display.setFullscreen(fullscreen); Display.setVSyncEnabled(vsync); DisplayMode displayMode = null; DisplayMode d[] = Display.getAvailableDisplayModes(); for (int i = 0; i < d.length; i++) { if (d[i].getWidth() == width && d[i].getHeight() == height && d[i].getBitsPerPixel() == 32) { displayMode = d[i]; break; } } Display.setDisplayMode(displayMode); Display.create(); } private void setOrthoMode() { glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glPushMatrix(); glLoadIdentity(); gluOrtho2D(0, width, height, 0); glMatrixMode(GL_MODELVIEW); glPushMatrix(); glLoadIdentity(); } private void unsetOrthoMode() { glPopMatrix(); glMatrixMode(GL_PROJECTION); glPopMatrix(); glMatrixMode(GL_MODELVIEW); } public abstract void init(); }

PrimitiveDrawing3D.java import static org.lwjgl.opengl.GL11.*; import static org.lwjgl.util.glu.GLU.*; import org.lwjgl.input.Keyboard;

76

import setting.CGApplication; public class PrimitiveDrawing3D extends CGApplication { private boolean wireframe = false; private boolean pressed = false; @Override public void init() { } @Override public void update(int delta) { toggleWireframe(); } public void toggleWireframe() { if (Keyboard.isKeyDown(Keyboard.KEY_R)) { if (!pressed) { wireframe = !wireframe; pressed = true; } } else { pressed = false; } } @Override public void render() { glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f, width / height, 1.0f, 100.0f); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glClearColor(0.0f, 0.0f, 0.0f, 0.0f); if (wireframe) { glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); } else { glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); } glBegin(GL_TRIANGLES); // 4-side of pyramid glColor3f(0.0f, 1.0f, 0.0f); glVertex3f(-2, -2, -10); glVertex3f(2, -2, -10); glVertex3f(0, 4, -12); glColor3f(0.0f, 1.0f, 1.0f); glVertex3f(2, -2, -10); glVertex3f(2, -2, -14); glVertex3f(0, 4, -12); glColor3f(1.0f, 1.0f, 0.0f); glVertex3f(2, -2, -14); glVertex3f(-2, -2, -14); glVertex3f(0, 4, -12); glColor3f(0.0f, 0.0f, 1.0f);

77

glVertex3f(-2, -2, -10); glVertex3f(-2, -2, -14); glVertex3f(0, 4, -12); // Bottom of pyramid glColor3f(1.0f, 0.0f, 0.0f); glVertex3f(-2, -2, -10); glVertex3f(2, -2, -10); glVertex3f(-2, -2, -14); glColor3f(1.0f, 0.0f, 0.5f); glVertex3f(2, -2, -10); glVertex3f(2, -2, -14); glVertex3f(-2, -2, -14); glEnd(); renderText(); } private void renderText() { drawString(180, height - 25 , "Primitive Drawing : 4-Sisi Piramid Triangles."); drawString(200,height-35* getDefaultFont().getLineHeight(), "Tekann 'R' untuk Gambar Rangka"); } @Override public void deinit() { } public static void main(String[] args) { PrimitiveDrawing3D app = new PrimitiveDrawing3D(); app.start(800, 600, false, false, true, "3D Primitives"); } } }

E. Latihan Soal 1. Untuk menggambarkan translasi suatu objek berupa segitiga dengan koordinat A(3,4) B(2,1) dan C(4,1) dengan tx,ty(2,5), tentukan koordinat yang barunya ?

78

2. Untuk menggambarkan skala suatu objek berupa segempat dengan koordinat A(5,2) B(2,2) C(2,4) dan D(5,4) dengan skala faktor (1,2) tentukan koordinat yang barunya ?

F. Rangkuman Pembeda objek 2 dimensi dan 3 dimensi adalah kedalaman. Kedalaman didefinisikan sebagai jarak antara viewer terhadap benda yang dilihat. Ini berarti berbeda dengan

objek 2 dimensi yang

ukuran,

dan lebar, maka objek 3 dimensi menggunakan 3

yaitu

panjang

hanya menggunakan 2

ukuran, yaitu panjang, lebar dan kedalaman. Secara geometri ketiga ukuran tersebut disimbolkan dengan sumbu x, y, dan z. Sebuah benda tiga dimensi dapat disusun dengan menghubungkan sejumlah vertex. Kumpulan vertex yang saling terhubung tersebut disebut sebagai wireframe atau kerangka, sedangkan benda yang disusun dari kumpulan titik dan permukaan tersebut disebut sebagai mesh. Transformasi pada dunia 3 dimensi, pada dasarnya sama dengan transformasi pada 2 dimensi, hanya pada 3 dimensi kita juga memperhitungkan sumbu

79

Z. Sama seperti pada 2 dimensi, ada tiga transformasi dasar yang dapat dilakukan yaitu translasi, penskalaan, rotasi. Perbedaannya adalah pada objek

3

dimensi

mempertimbangkan

proses

koordinat

transformasinya

yang

dilakukan

dengan

merupakan besarnya kedalaman dari

objek.

G. Umpan Balik IPK

Hasil Yang Dicapai

Peserta diklat mampu memahami sistem koordinat dan struktur objek 3 dimensi dan berapa proses pencapaian kompetensinya Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk membangun objek 3 dimensi dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program untuk memodelkan objek 3 dimensi melalui proses translasi, penskalaan, dan rotasi dan berapa besar proses pencapaian kompetensinya

H. Kunci Jawaban Jawaban no 1 A = (3,4) B = (2,1) C = (2,5) Vektor (V) = (2,5) Rumus : ta

80

x’ = x + tx y’ = y + ty

Rencana Tindak Lanjut

A = (3,4) X’ = x + tx =3+2=5 Y’ = y + ty =4+5=9 A’ = (5,9)

V = (2,5)

B = (2,1) X’ = x + tx =2+2=4 Y’ = y + ty =1+5=6 B’ = (4,6)

V = (2,5)

C = (4,1) X’ = x + tx = 4+2=6 Y’ = y + ty =1+5=6 C’ = (6,6)

V = (2,5)

Dengan demikian hasil translasi segitiga

dengan

A’(5,9) B’(4,6)

C’(6,6).

koordinat Segitiga

yang baru sama bentuknya dengan segitiga yang lama. Berikut gambar translasi setelah perhitungan

Jawaban no 2 A = (5,2) B = (2,2) C = (2,4) D = (5,4) Skala faktor = (1,2) Rumus: x’ = x . sx y’ = y . sy A = (5,2) Skala faktor = (1,2) X’ = X . Sx =5.1=5 Y’ = Y. Sy =2.2=4 A’ = (5,4)

C = (2,4) Skala faktor = (1,2) X’ = X . Sx =2.1=2 Y’ = Y. Sy =4.2=8 C’ = (2,8)

B = (2,2) Skala faktor = (1,2) X’ = X . Sx =2.1=2

D = (5,4) Skala faktor = (1,2) X’ = X . Sx =5.1=5

81

Y’ = Y. Sy =2.2=4 B’ = (2,4)

Y’ = Y. Sy =4.2=8 D’ = (5,8)

Dengan demikian hasil skala persegi panjang dengan koordinat A’ = (5,4), B’ = (2,4), C = (2,8), D = (5,8). Persegi panjang yang baru sama bentuknya dengan persegi panjang yang lama.Berikut gambar koordinat setelah proses rotasi.

82

83

84

embuatan Teksture

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 6 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisis penggunaan teksture dalam objek 3 dimensi. 2. Melalui praktikum peserta diklat dapat menulis kode program pemasangan teksture dalam objel 3 dimensi

B. Indikator Pencapaian Kompetensi 1. Peserta diklat dapat memahami jenis-jenis tekture dalam OpenGL 2. Peserta diklat mampu menulis kode program dengan memanfaatkan jenisjenis teksture yang dalam library OpenGL

C. Uraian Materi 1. Pengantar Texture Pemetaan Tekstur menurut Chua Hock-Chuan (2012) didefinisikan sebagai berikut : “Pemetaan Tekstur adalah salah satu langkah pengembangan pertama dalam membuat gambar benda tiga dimensi yang lebih menarik dan lebih kompleks.” Secara umum, pemetaan tekstur adalah proses “melukis” sebuah gambar ke permukaan dalam sebuah model. Gambar yang telah diberi texture itu bisa menjadi sangat kompleks – tetapi proses pemetaan teksture pada gambar kompleks persis sama dengan proses pemetaan teksture pada gambar sederhana. Penggunaan pemetaan tekstur pada bentuk yang cukup sederhana dapat membuat objek yang sederhana menjadi lebih realistis. Misalnya, dinding planar yang diberi tekstur batu dan dipetakan ke model untuk gambar yang sangat meyakinkan dari tiga-dimensi dinding batu (Contohnya, game check out 3D merupakan contoh permainan komputer yang menggunakan texture mapping).

85

Gambar 9 Penggunaan teksture dalam game check out 3D Dengan memanfaatkan proses pemetaan tekstur memungkinkan kita untuk memberikan fitur tekstur yang ada pada aplikasi grafika computer pada permukaan gambar yang kita pilih dan kemudian memungkinkan kita melihat hasil dari perspektif yang berbeda. Gambar dengan resolusi yang lebih tinggi akan menghasilkan hasil yang lebih baik bila dilihat dari jarak kecil (karena daerah permukaan yang dilihat tidak berubah, gambar resolusi tinggi menyediakan lebih banyak data untuk pemetaan pada model tersebut). Untuk melihat contoh penurunan kualitas gambar, dapat dilihat dalam berbagai contoh permainan 3D terutama dengan mengamati bagian datar yang memiliki texturenya untuk mendapatkan efek realistis nyata (dengan asumsi tidak memiliki kartu video/VGA yang memiliki texture mapping pada hardware). 2. Konsep Texture mapping Texturing merupakan proses mewarnai, memberi tekstur, atau memberi efek material pada sebuah model 3D. Texture mapping adalah teknik shading untuk pengolahan gambar dengan memetakan sebuah fungsi pada permukaan tiga dimensi dalam scene. Texture mapping merupakan teknik pemetaan sebuah tekstur pada pola gambar wireframe, dimana wireframe yang telah dibuat akan ditampilkan memiliki kulit luar seperti tekstur yang diinginkan. Fungsi yang dipetakan mencakup satu dimensi, dua dimensi, dan tiga dimensi dan dapat digambarkan sebagai array atau fungsi matematika atau gambar. Beberapa contoh teknik dalam texture mapping adalah sebagai berikut : 

Bump mapping

umumnya digunakan untuk memperjelas karakteristik

permukaan yang bergelombang. Bump mapping merupakan suatu proses

86

dimana tekstur diaplikasikan pada suatu permukaan dalam sebuah program grafis komputer tiga dimensi (3D) untuk membuat detail yang lebih baik pada permukaan tersebut. Bump map biasanya digunakan untuk menambahkan detail pada suatu permukaan, seperti benjolan, bubungan, goresan dan detail lainnya yang mempengaruhi kemulusan suatu permukaan. Penggunaan pemetaan (mapping) ini memungkinkan objek yang dibuat oleh program komputer grafis biasanya dibentuk melalui penggunaan tardisional bump map, normal, atau parallax map. 

Transparency mapping untuk mengatur intensitas cahaya permukaan tembus

pandang.

Pemetaan

Transparansi

adalah

metode

lain

menggunakan Bitmap untuk membuat bahan. Perbedaannya adalah metode ini adalah menggunakan alpha channel untuk menyingkirkan bagian yang tidak diinginkan dari Bitmap, hanya menyimpan bagian yang tertutup oleh alpha channel. Proses ini disebut masking. 

Specularity mapping untuk mengubah kehalusan permukaan



Illumination maaping untuk memodelkan distribusi cahaya yang datang dari berbagai arah



Geometrical Mapping adalah salah satu bagian penting dari texture mapping. Geometrical mapping secara keseluruhan ditentukan dengan dengan transformasi tiga dimensi terhadap kamera, Transformasi model yang menggambarkan geometri scene dan pemberian parameter pada permukaan dengan tujuan memetakan tekstur ke permukaan.

Gambar 10 Teknik pemetaan teksture

87

3. Jenis - Jenis Texture pada OpenGl 

GL_TEXTURE_1D

:

Gambar

pada

texture

ini

semuanya

1

dimensi.Mempunyai lebar tetapi tidak memiliki tinggi atau kedalaman 

GL_TEXTURE_2D

:

Gambar

pada

texture

ini

semuanya

2

dimensi.Mempunyai lebar dan tinggi tetapi tidak memiliki kedalaman 

GL_TEXTURE_3D

:

Gambar

pada

texture

ini

semuanya

3

dimensi.Mempunyai lebar, tinggi dan kedalaman. 

GL_TEXTURE_RECTANGLE : Gambar dalam teksture ini 2 dimensi (hanya satu gambar,tidak memiliki multimapping).Koordinat teksture digunakan untuk teksture yang tidak dengan titik yang sebenarnya.



GL_TEXTURE_BUFFER: Gambar dalam teksture ini 1 dimensi (hanya satu gambar,tidak memiliki multimapping).Penyimpanan untuk data ini dating dari sebuah buffer object.



GL_TEXTURE_CUBE_MAP : Terdapat 6 sisi dari

gambar 2D ,dan

semua memiliki ukuran yang sama 

GL_TEXTURE_1D_ARRAY : Gambar di teksture ini semuanya 1 dimensi.Bagaimanapun terdiri dari banyak set dari 1 gambar dimensi, semuanya dengan satu teksture. Panjang array adalah bagian dari ukuran teksture



GL_TEXTURE_2D_ARRAY : Gambar di teksture ini semuanya 2 dimensi.Bagaimanapun terdiri dari banyak set dari 2 gambar dimensi, semuanya dengan satu teksture. Panjang array adalah bagian dari ukuran teksture.



GL_TEXTURE_CUBE_MAP_ARRAY : Gambar di teksture ini semuanya peta kubus. Terdiri dari banyak set peta kubus,semuanya dengan satu teksture.Panjang array * 6 (angka dari sisi kubus) adalah bagian dari ukuran teksture



GL_TEXTURE_2D_MULTISAMPLE : Gambar di teksture ini 2 dimensi (hanya satu gambar,tidak ada multimapping).Kebanyakan pixel di gambar ini terdiri dari banyak contoh di dalamnya hanya satu nilai



GL_TEXTURE_2D_MULTISAMPLE_ARRAY : Kombinasi 2D array dan jenis 2D multisample.tidak ada multimapping

88

D. Aktivitas Pembelajaran Pembuatan kode program untuk texture terhadapa objek 3 dimensi dirancang dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan operasi transformasi geometri.

Kegiatan Praktikum 6.1 Keluaran Program

Perancangan class diagram

89

lwjgl.OpenGL CGApplication

Texture -width : int -height : int +getWidth() : int +getHight() : int

TextureMappingTransformasi -Camera : CGApplication = cmr -Texture : CGApplication = textr +loadImage() : void +main() : void

Texture.java import import import import import import import import

static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.*; java.awt.Font; org.lwjgl.LWJGLException; org.lwjgl.Sys; org.lwjgl.input.Keyboard; org.lwjgl.opengl.Display; org.lwjgl.opengl.DisplayMode;

public abstract class CGApplication { protected long lastFrame; protected int fps; protected long last; protected String windowTitle = ""; protected int width; protected int height; protected boolean fullscreen; protected boolean vsync; public final int DEFAULT_FONT_SIZE = 14; protected boolean showFPS; protected int oldfps; protected int activeFontTextureId; public void start(int width, int height, boolean fullscreen, boolean vsync, boolean showFPS, String windowTitle) { this.windowTitle = windowTitle; this.height = height; this.width = width; this.fullscreen = fullscreen; this.vsync = vsync; this.showFPS = showFPS; try {

90

createWindow(); init(); while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { render(); Display.update(); } deinit(); Display.destroy(); } catch (Exception e) { e.printStackTrace(); System.exit(0); } } public abstract void render(); public abstract void deinit(); private void createWindow() throws LWJGLException { Display.setTitle(windowTitle); Display.setFullscreen(fullscreen); Display.setVSyncEnabled(vsync); DisplayMode displayMode = null; DisplayMode d[] = Display.getAvailableDisplayModes(); for (int i = 0; i < d.length; i++) { if (d[i].getWidth() == width && d[i].getHeight() == height && d[i].getBitsPerPixel() == 32) { displayMode = d[i]; break; } } Display.setDisplayMode(displayMode); Display.create(); } private void setOrthoMode() { glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glPushMatrix(); glLoadIdentity(); gluOrtho2D(0, width, height, 0); glMatrixMode(GL_MODELVIEW); glPushMatrix(); glLoadIdentity(); } private void unsetOrthoMode() { glPopMatrix(); glMatrixMode(GL_PROJECTION); glPopMatrix(); glMatrixMode(GL_MODELVIEW); } public abstract void init(); }

GCApplication.java import java.awt.Color; import java.awt.Graphics;

91

import import import import import import import import import import import import import import import import

java.awt.color.ColorSpace; java.awt.geom.AffineTransform; java.awt.image.AffineTransformOp; java.awt.image.BufferedImage; java.awt.image.ColorModel; java.awt.image.ComponentColorModel; java.awt.image.DataBuffer; java.awt.image.DataBufferByte; java.awt.image.Raster; java.awt.image.WritableRaster; java.io.IOException; java.net.URL; java.nio.ByteBuffer; java.nio.ByteOrder; java.util.Hashtable; javax.imageio.ImageIO;

import org.newdawn.slick.util.ResourceLoader; public class Texture { private ColorModel glAlphaColorModel = new ComponentColorModel( ColorSpace.getInstance(ColorSpace.CS_sRGB), new int[] { 8, 8, 8, 8 }, true, false, ComponentColorModel.TRANSLUCENT, DataBuffer.TYPE_BYTE); private ColorModel glColorModel = new ComponentColorModel( ColorSpace.getInstance(ColorSpace.CS_sRGB), new int[] { 8, 8, 8, 0 }, false, false, ComponentColorModel.OPAQUE, DataBuffer.TYPE_BYTE); private ByteBuffer imageData; private int width; private int height; private ByteBuffer convertImageData(BufferedImage bufferedImage) { ByteBuffer imageBuffer; WritableRaster raster; BufferedImage texImage; int texWidth = bufferedImage.getWidth(); int texHeight = bufferedImage.getHeight(); if (bufferedImage.getColorModel().hasAlpha()) { raster= Raster.createInterleavedRaster( DataBuffer.TYPE_BYTE,texWidth, texHeight,

4,

null); texImage = new BufferedImage(glAlphaColorModel, raster, false,new Hashtable<String, Object>()); } else { raster =Raster.createInterleavedRaster( DataBuffer.TYPE_BYTE,texWidth,texHeight,3,null); texImage= new BufferedImage(glColorModel, raster, false,new Hashtable<String, Object>());

92

} AffineTransform tx = AffineTransform.getScaleInstance(1, -1); tx.translate(0, -bufferedImage.getHeight(null)); AffineTransformOp op = new AffineTransformOp(tx, AffineTransformOp.TYPE_NEAREST_NEIGHBOR); bufferedImage = op.filter(bufferedImage, null); Graphics g = texImage.getGraphics(); g.setColor(new Color(0f, 0f, 0f, 0f)); g.fillRect(0, 0, texWidth, texHeight); g.drawImage(bufferedImage, 0, 0, null); this.width = texWidth; this.height = texHeight; byte[] data=((DataBufferByte) texImage.getRaster().getDataBuffer()).getData(); imageBuffer = ByteBuffer.allocateDirect(data.length); imageBuffer.order(ByteOrder.nativeOrder()); imageBuffer.put(data, 0, data.length); imageBuffer.flip(); return imageBuffer; } public boolean load(String ref) { URL url = ResourceLoader.getResource(ref); if (url == null) { return false; } try { BufferedImage bufferedImage ImageIO.read(url); imageData = convertImageData(bufferedImage); } catch (IOException e) { return false; }

=

return true; } public ByteBuffer getImageData() { return imageData; } public int getWidth() { return width; } public int getHeight() { return height; } }

TextureMappingTranformasi.java import org.lwjgl.BufferUtils; import setting.CGApplication; import setting.Texture;

93

import static org.lwjgl.opengl.GL11.*; import static org.lwjgl.util.glu.GLU.*; public class TextureMappingTransformasi extends CGApplication { private Texture m_texture; private int m_texID; private float angle; @Override public void init() { // Load image data m_texture = new Texture(); if (!m_texture.load("pic/tree.png")) { System.out.println("Failed to load texture\n"); System.exit(1); return; } // Generate ID m_texID IntBuffer textureIDBuffer = BufferUtils.createIntBuffer(1); glGenTextures(textureIDBuffer); m_texID = textureIDBuffer.get(0); // Activate texture m_texID glBindTexture(GL_TEXTURE_2D, m_texID); // Copy image data into texture memory glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_texture.getWidth(),m_texture.getHeight(), 0, GL_RGBA, GL_UNSIGNED_BYTE,m_texture.getImageData()); // Set magnification and minification filter glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glDisable(GL_TEXTURE_2D); } @Override public void update(int delta) { angle += 0.05f; } private void drawTexturedQuads() { glBegin(GL_QUADS); glTexCoord2d(0, 0); glVertex3f(-2.0f, -2.0f, 0.0f); glTexCoord2d(1, 0); glVertex3f(2.0f, -2.0f, 0.0f); glTexCoord2d(1, 1); glVertex3f(2.0f, 2.0f, 0.0f); glTexCoord2d(0, 1); glVertex3f(-2.0f, 2.0f, 0.0f); glEnd();

94

} @Override public void render() { glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f, (width) / (height), 1.0f, 100.0f); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Transformasi glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // Zoom-out glTranslatef(0.0f, 0.0f, -7.0f); // Rotasi glRotatef(angle, 0, 1, 0); glEnable(GL_DEPTH_TEST); glEnable(GL_ALPHA_TEST); glAlphaFunc(GL_GREATER, 0.1f); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); // Texturing glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, m_texID); drawTexturedQuads(); glRotatef(90, 0, 1, 0); drawTexturedQuads(); glDisable(GL_DEPTH_TEST); glDisable(GL_ALPHA_TEST); glDisable(GL_TEXTURE_2D); glDisable(GL_BLEND); renderText(); } private void renderText() { drawString(0, height – getDefaultFont().getLineHeight(),"Tekxture dengan Transformasi."); } public void deinit() { glDeleteTextures(m_texID); } public static void main(String[] args) { TextureMappingTransformasi app = new TextureMappingTransformasi(); app.start(800, 600, false, false, true,"Mapping Teksturing"); } }

95

E. Latihan Soal Buatlah ilustrasi teksture mapping pada sebuah gedung seperti dalam keluaran program di bawah ini :

Disediakan dua buah file gambar seperti berikut ini :

96

gedungA.png

gedungB.png

F. Rangkuman Texturing merupakan proses mewarnai, memberi tekstur, atau memberi efek material pada sebuah model 3D. Texture mapping adalah teknik shading untuk pengolahan gambar yang memetakan sebuah fungsi pada permukaan tiga dimensi dalam scene. Fungsi yang dipetakan mencakup satu dimensi, dua dimensi, dan tiga dimensi dan dapat digambarkan sebagai array atau fungsi matematika atau gambar. Texture mapping merupakan teknik pemetaan sebuah tekstur pada pola gambar wireframe, dimana wireframe yang telah dibuat akan ditampilkan memiliki kulit luar seperti tekstur yang diinginkan. OpenGl menyediakan banyak sekali jenis texture yang dapat digunakan untuk membuat objek 2 dimensi dan 3 dimensi menjadi sangat menarik.

97

G. Umpan Balik IPK

Hasil Yang Dicapai

Rencana Tindak Lanjut

Peserta diklat dapat memahami jenis-jenis tekture dalam OpenGL dan berapa proses pencapaian kompetensinya Peserta diklat mampu menulis kode

program

dengan

memanfaatkan jenis-jenis teksture yang dalam library OpenGL dan berapa besar proses pencapaian kompetensinya

H. Kunci Jawaban Perancangan class diagram

lwjgl.OpenGL CGApplication

TextureGedung -Texture : CGApplication = txture +loadImage() : void +main() : void

Texture -width : int -height : int +getWidth() : int +getHight() : int

CGApplication.java Sama dengan kode program pada kegiatan praktikum 6.1

98

Texture.java Sama dengan kode program pada kegiatan praktikum 6.1

TextureGedung.java import import import import import import import import import import import import import import import import import import import import

setting.CfgApplication; setting.Texture; java.awt.geom.Point2D; static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.*; java.io.IOException; java.nio.IntBuffer; java.util.logging.FileHandler; java.util.logging.Level; java.util.logging.Logger; org.lwjgl.BufferUtils; org.lwjgl.LWJGLException; org.lwjgl.input.Keyboard; org.lwjgl.input.Mouse; org.lwjgl.opengl.Display; static org.lwjgl.opengl.Display.update; org.lwjgl.opengl.DisplayMode; org.lwjgl.opengl.GL11; static org.lwjgl.opengl.GL12.GL_CLAMP_TO_EDGE; org.lwjgl.util.glu.GLU;

public class TeksturGedung extends CGApplication { public static final int DISPLAY_HEIGHT = 480; public static final int DISPLAY_WIDTH = 640; private final int[] m_texID = new int[14]; public final static int NO_WRAP = -1; private Texture m_texture; public static void main(String[] args) { // TODO code application logic here TeksturGedung main = new TeksturGedung(); main.start(800,600,false,false,true,"Tekstur Gedung"); } public void render() { glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f,(width)/(height), 1.0f, 700.0f); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glClearColor(0.0f, 0.0f, 0.0f, 0.0f); glEnable(GL_DEPTH_TEST); glEnable(GL_ALPHA_TEST); glAlphaFunc(GL_GREATER, 0.1f); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glEnable(GL_TEXTURE_2D); glPushMatrix();

99

glTranslatef(-50, 0, 25); for (int row = 0; row < 2; row++) { glPushMatrix(); for (int col = 0; col < 6; col++) { drawBuilding(4, 6, 10); glTranslatef(6, 0, 0); drawBuilding(4, 12, 11); glTranslatef(6, 0, 0); drawBuilding(4, 10, 10); glTranslatef(4, 0, 0); } glPopMatrix(); glTranslatef(0, 0, 12); } glPopMatrix(); glPushMatrix(); glTranslatef(-50, 0, -50); for (int row = 0; row < 2; row++) { glPushMatrix(); for (int col = 0; col < 6; col++) { drawBuilding(4, 6, 10); glTranslatef(6, 0, 0); drawBuilding(4, 12, 11); glTranslatef(6, 0, 0); drawBuilding(4, 10, 10); glTranslatef(4, 0, 0); } glPopMatrix(); glTranslatef(0, 0, 12); } glDisable(GL_DEPTH_TEST); glDisable(GL_ALPHA_TEST); glDisable(GL_TEXTURE_2D); glDisable(GL_BLEND); } private void update() { } public void destroy() { Mouse.destroy(); Keyboard.destroy(); Display.destroy(); } public void deinit() { } public void init() { IntBuffer textureIDBuffer = BufferUtils.createIntBuffer(14); glGenTextures(textureIDBuffer); m_texID[0] = textureIDBuffer.get(0); m_texID[1] = textureIDBuffer.get(1); m_texID[2] = textureIDBuffer.get(2); m_texID[3] = textureIDBuffer.get(3); m_texID[4] = textureIDBuffer.get(4); m_texID[5] = textureIDBuffer.get(5); m_texID[6] = textureIDBuffer.get(6);

100

m_texID[7] = textureIDBuffer.get(7); m_texID[8] = textureIDBuffer.get(8); m_texID[9] = textureIDBuffer.get(9); m_texID[10] = textureIDBuffer.get(10); m_texID[11] = textureIDBuffer.get(11); m_texID[12] = textureIDBuffer.get(12); m_texID[12] = textureIDBuffer.get(12); loadTexture(m_texID[10], "pic/gedungA.png", false, GL_LINEAR, NO_WRAP); loadTexture(m_texID[11], "pic/gedungB.png", false, GL_LINEAR, NO_WRAP); } private void drawBuilding(float width, float height, int texID) { width = width / 2; glBindTexture(GL_TEXTURE_2D, m_texID[texID]); glBegin(GL_QUADS); // front side glTexCoord2d(0, 0); glVertex3f(-width, 0, width); glTexCoord2d(1, 0); glVertex3f(width, 0, width); glTexCoord2d(1, 1); glVertex3f(width, height, width); glTexCoord2d(0, 1); glVertex3f(-width, height, width); // right side glTexCoord2d(0, 0); glVertex3f(width, 0, width); glTexCoord2d(1, 0); glVertex3f(width, 0, -width); glTexCoord2d(1, 1); glVertex3f(width, height, -width); glTexCoord2d(0, 1); glVertex3f(width, height, width); // back side glTexCoord2d(0, 0); glVertex3f(width, 0, -width); glTexCoord2d(1, 0); glVertex3f(-width, 0, -width); glTexCoord2d(1, 1); glVertex3f(-width, height, -width); glTexCoord2d(0, 1); glVertex3f(width, height, -width); // left side glTexCoord2d(0, 0); glVertex3f(-width, 0, -width); glTexCoord2d(1, 0); glVertex3f(-width, 0, width); glTexCoord2d(1, 1); glVertex3f(-width, height, width); glTexCoord2d(0, 1); glVertex3f(-width, height, -width); // top side glVertex3f(-width, height, width);

101

glVertex3f(width, height, width); glVertex3f(width, height, -width); glVertex3f(-width, height, -width); glEnd(); } private void loadTexture(int texID, String path, boolean transparent,int filter, int wrap) { m_texture = new Texture(); if (!m_texture.load(path)) { System.out.println("Failed to load texture\n"); return; } glBindTexture(GL_TEXTURE_2D, texID); if (transparent) { glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA, m_texture.getWidth(), m_texture.getHeight(), 0, GL_RGBA, GL_UNSIGNED_BYTE, m_texture.getImageData()); } else { glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, m_texture.getWidth(), m_texture.getHeight(), 0, GL_RGB , GL_UNSIGNED_BYTE, m_texture.getImageData()); } glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, filter); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, filter); if (wrap == -1) { return; } glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, wrap); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, wrap); } }

102

103

104

Transformasi Proyeksi

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 7 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisis pemanfaatan teknik kamera dengan transformasi proyeksi 2. Melalui praktikum peserta diklat dapat menulis kode program untuk melakukan pergerakkan objek 3 dimensi melalui transformasi proyeksi

B. Indikator Pencapaian Kompetensi 1. Peserta diklat dapat memahami teknik pengambilan gambar dengan kamera 2. Peserta diklat dapat menerapkan transformasi proyeksi, transformasi viewing, dan transformasi modeling 3. Peserta diklat dapat menulis kode program untuk melakukan pengerakan objek 3 dimensi melalui transformasi proyeksi, transformasi viewing, dan transformasi modeling

C. Uraian Materi 1. Kamera Dalam grafika 3D, sudut pandang (point of view) adalah bagian dari kamera. Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya untuk menentukan sudut pandang kita pada sebuah lingkungan kerja, sehingga sering disebut virtual camera. Sebuah kamera dipengaruhi oleh dua buah faktor penting. 

Faktor pertama adalah lokasi (camera location). Lokasi sebuah kamera ditentukan dengan sebuah titik (x,y,z).



Faktor kedua adalah arah pandang kamera. Arah pandang kamera ditunjukkan dengan sebuah sistem yang disebut sistem koordinat acuan pandang atau sistem (U,N,V).

105

Arah pandang kamera sangat penting dalam membuat sebuah citra, karena letak dan arah pandang kamera menentukan apa yang terlihat oleh sebuah kamera. Penentuan apa yang dilihat oleh kamera biasanya ditentukan dengan sebuah titik (x,y,z) yang disebut camera interest. Pada kamera, dikenal istilah field of view yaitu daerah yang terlihat oleh sebuah kamera. Field of view pada grafika 3D berbentuk piramid, karena layar monitor sebuah komputer berbentuk segiempat. Objek-objek yang berada dalam field of view ini akan terlihat dari layar monitor, sedang objek-objek yang berada di luar field of view ini tidak terlihat pada layar monitor. Field of view ini sangat penting dalam pemilihan objek yang akan diproses dalam rendering. Objek-objek diluar field of view biasanya tidak akan diperhitungkan, sehingga perhitungan dalam proses rendering, tidak perlu dilakukan pada seluruh objek.

Gambar 10. Analogi pengambilan gambar oleh kamera

Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita harus melakukan beberapa proses, yaitu: 

melakukan pengesetan kamera dalam bentuk setting lensa kamera (Transformasi Proyeksi ),



mengarah kamera dengan mengatur letak tripod (Transformasi Viewing),



mengatur letak obyek (Transformasi Modeling), dan



mengatur skala dan layout dari foto (Transformasi Viewport)

Transformasi Viewport dengan menggunakan perintah glViewport(). Pada bab ini, akan dipelajari transformasi-transformasi lainnya.

106

2. Transformasi Proyeksi Lensa kamera dan mata manusia memiliki daerah penglihatan (viewing volume)

yang

berbentuk kerucut,

namun

karena

bentuk

display

yang

biasanya berbentuk segiempat membuat OpenGL (dan hampir semua API grafika komputer lain) lebih efisien memodelkan daerah penglihatan sebagai volume berbentuk piramida. Tipe transformasi proyeksi ada dua macam, bergantung pada parameter dan bentuk

piramidanya. Dua tipe transformasi tersebut adalah

Ortogonal/Paralel

(Orthogonal

Transformation)

dan

Transformasi Transformasi

Perspektif(Perspective Transformation).

Gambar 11 Transformasi Ortogonal dan Transformasi Proyektif. Transformasi orthogonal dengan parameter default. Transformasi ini membuat jarak benda relatif terhadap kamera tidak berpengaruh pada

citra benda

tersebut. Biasanya transformasi ini digunakan pada aplikasi-aplikasi teknik seperti gambar teknik (cf. Gambar 6). Untuk merubah parameter transformasi ortogonal dapat

107

menggunakan perintah

glOrtho() dengan didahului proses merubah status

OpenGL

mode

ke

proyeksi

dengan

perintah

glMatrixMode(GL_PROJECTION).

Gambar 12. Transformasi ortogonal Pada transformasi jenis ini jarak benda akan mempengaruhi gambar yang di buat. Parameter transformasi jenis ini dapat dirubah dengan menggunakan gluPerspective()/glFrustum() , juga dengan didahului proses

merubah status

OpenGL ke mode proyeksi dengan perintah glMatrixMode(GL_PROJECTION). glMatrixMode(GL_PROJECTION); glLoadIdentity( ); gluPerspective(fovy, aspect, near, far);

fovy adalah sudut antara bidang bottom dan up.Dalam gambar berikut ini ditunjukkan ilustrasi dari implementasi kode program di atas.

108

Gambar 23 Ilustrasi transformasi ortogonal dari kode program

3. Transformasi Viewing Untuk menghasilkan gambar, kamera perlu diletakkan pada posisi yang tepat

di depan

pemandangan yang

diinginkan.

Secara

default,

dalam

OpenGL kemera akan berada pada posisi (0,0,0) dengan menghadap ke arah z = -1 dengan sumbu y mengarah ke atas kamera. Hal ini dapat dilakukan dengan menggunakan perintah gluLookAt() dengan didahului proses merubah status

OpenGL

ke

mode

proyeksi

dengan

perintah

glMatrixMode(GL_MODELVIEW). 4. Transformasi Modeling Selain posisi dan orientasi kamera yang dapat dirubah-rubah, secara natural obyek juga dapat berpindah posisi dan orientasi relatif

terhadap yang lain.

Transformasi obyek dapat direpresentasikan dengan dua cara, yaitu: 

menggunakan matriks transformasi (glLoadMatrix)



menggunakan operasi transformasi (glRotate , glTranslate )

dengan didahului proses merubah status OpenGL ke mode proyeksi dengan perintah glMatrixMode(GL_MODELVIEW).

D. Aktivitas Pembelajaran Pembuatan

kode

program

untuk

mentransformasi

3

dimensi

melalui

pemanfaatan seperti pada teknik kamera untuk melihat dan menggerakkan objek 3 dimensi.

109

Kegiatan Praktikum 7.1 Keluaran Program

Perancangan class diagram

lwjgl.OpenGL Block -x : int -y : int -z : int -width : int -height : int -dept : int -shape : int +getWidth() : int +getHight() : int +render() : void

TextureMapping -camera_x : float -camera_y : float -camera_z : float -camera_rot : float +kontrolKeyboard() : void +main() : void

Block.java import import import import import import import import import

110

java.util.Random; static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.*; java.io.IOException; java.util.logging.FileHandler; java.util.logging.Level; java.util.logging.Logger; org.lwjgl.LWJGLException; org.lwjgl.input.Keyboard;

import import import public public public

org.lwjgl.input.Mouse; org.lwjgl.opengl.Display; org.lwjgl.opengl.DisplayMode; class Block { float x, y, z, width, height, depth, shade; Random rand;

public Block(float xx, float yy, float zz, float ww, float hh, float dd) { x = xx; y = yy; z = zz; width = ww; height = hh; depth = dd; rand = new Random(); shade = (rand.nextFloat() + 0.2f); } public void tick() { } public void render() { glBegin(GL_QUADS); glColor3f(0, shade, 1); //Front glTexCoord2f(0, 0); glVertex3f(x, y, z); glTexCoord2f(1, 0); glVertex3f(x + width, y, z); glTexCoord2f(1, 1); glVertex3f(x + width, y + height, z); glTexCoord2f(0, 1); glVertex3f(x, y + height, z); //Back glVertex3f(x, y, z + depth); glVertex3f(x + width, y, z + depth); glVertex3f(x + width, y + height, z + depth); glVertex3f(x, y + height, z + depth); //Left glVertex3f(x, y, z); glVertex3f(x, y, z + depth); glVertex3f(x, y + height, z + depth); glVertex3f(x, y + height, z); //Right glVertex3f(x + width, y, z); glVertex3f(x + width, y, z + depth); glVertex3f(x + width, y + height, z + depth); glVertex3f(x + width, y + height, z); //Top glVertex3f(x, y, z); glVertex3f(x + width, y, z); glVertex3f(x + width, y, z + depth); glVertex3f(x, y, z + depth); //Bottom glVertex3f(x, y + height, z);

111

glVertex3f(x + width, y + height, z); glVertex3f(x + width, y + height, z + depth); glVertex3f(x, y + height, z + depth); glEnd(); } }

UjiCamera.java import import import import import import import import import import import import import import

java.util.Random; static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.*; java.io.IOException; java.util.ArrayList; java.util.logging.FileHandler; java.util.logging.Level; java.util.logging.Logger; org.lwjgl.LWJGLException; org.lwjgl.Sys; org.lwjgl.input.Keyboard; org.lwjgl.input.Mouse; org.lwjgl.opengl.Display; org.lwjgl.opengl.DisplayMode;

public class UjiCamera { public static float camera_x, camera_y, camera_z, camera_rot; public static ArrayList blocks = new ArrayList(); public UjiCamera() { try { Display.setDisplayMode(new DisplayMode(800, 600)); Display.setTitle("Transformai Proyeksi dengan Kamera"); Display.create(); } catch (LWJGLException e) { e.printStackTrace(); } glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective((float) 45, 800f / 600f, 0.1f, 1000.0f); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glShadeModel(GL_SMOOTH); glEnable(GL_DEPTH_TEST); glEnable(GL_TEXTURE_2D); glDepthFunc(GL_LEQUAL); glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); generateWorld(); glTranslatef(0, 15, 0); float dt, time, lastTime = 0; Mouse.setGrabbed(true); while (!Display.isCloseRequested() && !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) { time = Sys.getTime(); dt = (time - lastTime) / 1000.0f;

112

lastTime = time; render(); tick(); Display.update(); Display.sync(60); } Display.destroy(); System.exit(0); } public void tick() { camera_x = 0; camera_y = 0; camera_z = 0; camera_rot = 0; if (Keyboard.isKeyDown(Keyboard.KEY_SPACE)) { camera_z = +1; } else if (Keyboard.isKeyDown(Keyboard.KEY_MINUS)) { camera_z = -1; } if (Keyboard.isKeyDown(Keyboard.KEY_RIGHT)) { camera_x = +1; } else if (Keyboard.isKeyDown(Keyboard.KEY_LEFT)) { camera_x = -1; } if (Keyboard.isKeyDown(Keyboard.KEY_DOWN)) { camera_y = -1; } else if (Keyboard.isKeyDown(Keyboard.KEY_UP)) { camera_y = +1; } while (Keyboard.next()) { if (Keyboard.isKeyDown(Keyboard.KEY_R)) { generateWorld(); } } for (int i = 0; i < blocks.size(); i++) { blocks.get(i).tick(); } camera_rot += Mouse.getDX(); } public void render() { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glTranslatef(camera_x, camera_y, camera_z); glRotatef(camera_rot, 0, 1, 0); for (int i = 0; i < blocks.size(); i++) { blocks.get(i).render(); } } public void generateWorld() { blocks.clear(); int heightlevel = 0; Random r = new Random(); for (int i = 0; i < 50; i++) { for (int j = 0; j < 50; j++) {

113

if (r.nextBoolean() == false) { heightlevel -= 4; } else { heightlevel += 4; } blocks.add(new Block((i * 4)-64, -8+heightlevel,(j*4)-64,4,4,4)); float y = -8 + heightlevel; for (int k = 0; k < 10; k++) { blocks.add(new Block((i * 4)-64,y-(k * 4), (j * 4)-64,4,4,4)); } } } } public static void main(String[] arguments) { new UjiCamera(); } }

Keterangan Tombol keyboard Panah Atas(Pg Up)-> Pergerakkan ke atas Tombol keyboard Panah Bawah(Pg Dn)-> Pergerakkan ke bawah Tombol keyboard Panah Kanan(End)-> Pergerakkan ke kanan Tombol keyboard Panah Kiri(Home)-> Pergerakkan ke kiri Tombol keyboard Spasi-> Pergerakkan ke maju Tombol keyboard Minus-> Pergerakkan ke mundur

E. Latihan Soal 1. Perhatikan gambar dibawah ini sebuah titik Pref berada dalam Word Coordinates system dilihat menggunakan kamera di posisi Peye. Dalam hal ini kamera bertindak sebagai Viewer Coordinates System. Jelaskan ilustrasi gambar di bawah ini :

114

2. Perhatikan gambar di bawah ini, Gambar (a) Obyek grafik yang berada di dunia dinyatakan dalam ruang koordinat 3D. (b) Gambar obyek tersebut ditampilkan di layar yang dinyatakan sebagai koordinat bidang 2D setelah melalui proses proyeksi.

Jelaskan ilustrasi yang ditunjukkan dalam gambar di atas.

F. Rangkuman Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya untuk menentukan sudut pandang kita pada sebuah world, sehingga sering disebut virtual camera.Lensa kamera dan mata manusia memiliki daerah penglihatan (viewing volume) yang berbentuk kerucut, namun karena bentuk display yang biasanya berbentuk segiempat membuat OpenGL (dan hampir semua API grafika komputer lain) lebih efisien memodelkan daerah penglihatan

115

sebagai volume berbentuk piramida.

Tipe transformasi proyeksi ada dua

macam, bergantung pada parameter dan bentuk transformasi tersebut adalah

Transformasi

piramidanya. Dua tipe

Ortogonal/Paralel

(Orthogonal

Transformation) dan Transformasi Perspektif(Perspective Transformation).

G. Umpan Balik IPK

Hasil Yang Dicapai

Rencana Tindak Lanjut

Peserta diklat dapat memahami teknik pengambilan gambar dengan kamera dan berapa proses pencapaian kompetensinya Peserta diklat dapat menerapkan transformasi proyeksi, transformasi viewing, dan transformasi modeling dan berapa besar proses pencapaian kompetensinya Peserta diklat dapat menulis kode program untuk melakukan pengerakan objek 3 dimensi melalui transformasi proyeksi, transformasi viewing, dan transformasi modeling dan berapa besar proses pencapaian kompetensinya

H. Kunci Jawaban Jawaban no 1 Gambar pada soal no 1 menunjukkan : (a) Sebuah titik dengan posisi Pref pada obyek silinder dilihat (menggunakan kamera) pada posisi Peye. (b) Sistem koordinat dunia yang digunakan untuk mengukur posisi titik Pref dan posisi mata Peye.

116

Untuk menyatakan titik-titik dalam Word Coordinates system menjadi titik-titik dalam Viewer Coordinates System maka diperlukan beberapa parameter berikut:



Posisi mata pengamat Peye.



Posisi titik referensi Pref.



vektor arah pandang atas Vup

Jawaban no 2 Titik-titik dalam Viewer Coordinates system tersimpan dalam koordinat ruang 3D. Titik-titik ini akan ditampilkan di layar yang dinyatakan sebagai koordinat bidang 2D. Untuk itu kita perlu mentransformasi titik-titik dalam koordinat ruang 3D menjadi titik-titik dalam koordinat bidang 2D. Yang menjadi permasalahan adalah bagaimana mentransformasi titik-titik dalam ruang 3D kedalam bidang 2D. Jawabannya adalah proyeksi. Proyeksi digunakan untuk mentransformasi titik dalam ruang 3D kedalam bidang 2D.

117

118

119

120

Rendering

A. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 8 ini peserta diklat diharapkan dapat : 1. Melalui diskusi peserta diklat dapat menganalisis pemanfaatan rendering pada image melalui lighting dan shading. 2. Melalui praktikum peserta diklat dapat menulis kode program untuk melakukan rendering pada image melalui lighting dan shanding.

B. Indikator Pencapaian Kompetensi 1. Peserta diklat mampu menggambarkan proses rendering pada sebuah image 2. Peserta diklat mampu menerapkan proses lighting dan shading 3. Peserta diklat mampu menulis kode program untuk melakukan rendering pada sebuah image melalui lighting dan shanding

C. Uraian Materi Rendering merupakan salah satu teknik pencitraan objek 3 dimensi untuk mendapatkan image yang realistis dengan penambahan beberapa efek, seperti pencahayaan dan shading. Kebanyakan manusia menggemari sesuatu yang hidup, bukan yang kaku dan statik.

1. Warna Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari benda-benda di depan mata. Tidak ada ketentuan jumlah warna dasar tetapi dalam implementasi dengan komputer hanya dibutuhkan tiga warna dasar. Ada berbagai model untuk menyatakan warna dasar serta rentang warna yang dihasilkan, salah satu diantaranya adalah RGB. Model warna RGB dapat digambarkan sebagai sebuah kotak yang mempunyai tiga sumbu yaitu : R(red), G(green), B(blue), dimana nilai masing-masing sumbu berkisar dari 0 sampaii 1. Warna ditentukan berdasarkan lokasi warna tersebut terhadap Sumbu RGB.

121

2. Pencahayaan (Lighting) Salah satu tujuan dari grafika komputer adalah menghasilkan tampilan yang senyata mungkin, dan karena pengaruh cahaya sangat besar terhadap hasil nyata maka dalam membuat tampilan akhir faktor pencahayaan harus diperhitungkan pula. Tetapi mengingat bahwa grafika komputer adalah model matematika dari kehidupan nyata maka pencahayaan juga harus diubah menjadi model matematika. Model matematika itu harus memenuhi persyaratan sebagai berikut : 

Menghasilkan efek seperti cahaya sungguhan



Dapat dihitung dengan cepat

Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua elemen penting yang sangat berkaitan erat dengan shading model, yaitu : 

Keakuratan dalam menggambarkan objek.



Teknik pencahayaan yang baik.

Saat cahaya menimpa permukaan benda maka sebagian cahaya akan dipantulkan dan sebagian lain diserap. Bergantung kepada frekuensi atau panjang gelombang yang dipantulkan dan diserap maka kita akan melihat warna. Mata kita selain sensitif terhadap warna juga sensitif terhadap intensitas cahaya (brightness). Secara awam kita menyebut intensitas cahaya sebagai kecerahan. Bergantung kepada materi penyusun benda maka ada tiga kemungkinan arah pantulan cahaya ketika cahaya menimpa permukaan benda : diffuse, specular, translucent.

a)

Cahaya Tersebar (Diffuse)

Suatu objek yang mempunyai permukaan yang kasar maka cahaya yang dipantulkan cenderung akan menyebar ke segala arah, cahaya yang menyebar ini disebut cahaya tersebar.

Beberapa

cahaya

menembus

permukaan dan diradiasi kembali secara seragam ke dalam semua arah. Penghitungan cahaya tersebar menggunakan m, v dan s. 

Sebagaimana cahaya tersebar disebarkan secara seragam dalam semua arah, lokasi mata, v, tidak penting kecuali kalau v.m < 0 jika diinginkan intensitas cahaya I = 0

122



Hubungan antara kecerahan permukaan dan orientasinya cahaya didasarkan pada cos(θ).

Keterangan : = kuat cahaya tersebar (diffuse) = kuat cahaya di sumber cahaya = koefisien pantulan tersebar (diffuse)

3. Metode Flat Shading Flat

shading

mempunyai

adalah

salah

satu

teknik

shading

dimana

satu

face

warna yang sama. Pada metode ini sebuah intensitas tunggal

dihitung untuk masing-masing Polygon, semua titik pada permukaan Polygon dipaparkan dengan nilai intensitas yang sama. Karakteristik flat shading diantaranya : 

Pemberian tone yang sama untuk setiap Polygon



Penghitungan jumlah cahaya mulai dari titik tunggal pada permukaan.



Penggunaan satu normal untuk seluruhnya.

Secara umum flat shading dapat menghasilkan shading yang akurat dengan ketentuan sebagi berikut : 

Objek berbentuk polihendra (segi banyak), yaitu jaring yang mempunyai ruang terhingga dan tertutup.

Semua sumber cahaya jauh dari permukaan objek, maka

adalah tetap

untuk semua permukaan Polygon. Posisi penglihatan yang cukup jauh dari permukaan sehingga

adalah

tetap untuk semua permukaan Polygon. Definisi matematik : ̅ : Vektor sumber cahaya (arah) membentur permukaan (yang disingkat untuk ' L', tetapi ingat ini adalah suatu garis vektor). ̅ : Vektor sudut pandang (eyepoint) pemandangan di permukaan (yang disingkat untuk ' V', tetapi ingat ini adalah suatu garis vektor).

123

̅ : Vektor normal (tegak lurus) pada permukaan (yang disingkat untuk ' N', tetapi ingat ini adalah suatu garis vektor). Sekalipun semua kondisi-kondisi ini tidak benar, kita masih bisa memperkirakan efek cahaya permukaan dengan menggunakan permukaan Polygon kecil dengan menggunakan flat shading dan menghitung intensitas untuk setiap permukaan, khususnya pada pusat Polygon.

4. Metode Gouraud Shading Metode ini merender sebuah permukaan Polygon dengan interpolasi linier yaitu nilai intensitas yang mengenai setiap permukaan berbeda. Warna yang dipantulkan dihitung tiap Membuat

suatu

vertex

kemudian

permukaan Polygon

secara

dengan

halus

diinterpolasikan.

menginterpolasikan

nilai

intensitas secara linier ke seberang permukaan. Nilai intensitas untuk masingmasing Polygon dipasangkan sepanjang

tepi

(edges)

dengan nilai dari Polygon yang bersebelahan

yang

umum,

dengan

begitu menghentikan

penghapusan intensitas yang dapat terjadi di flat shading. Penggunaan diinterpolasikan menggunakan

level

abu-abu

yang

berbeda

di antara titik. Masing-masing gouraud

shading

di sepanjang

permukaan

Polygon

Polygon dibuat

dengan melakukan perhitungan sebagai

berikut : 

Tentukan satuan vektor normal rata-rata pada setiap titik ujung Polygon.



Pakaikan model iluminasi untuk setiap titik untuk menghitung intensitas titik.



Interpolasikan secara linier intensitas titik pada permukaan Polygon.

D. Aktivitas Pembelajaran Pembuatan kode program untuk rendering terhadapa objek 3 dimensi dirancang dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan operasi transformasi geometri.

124

Kegiatan Praktikum 8.1 Keluaran Program

Perancangan class diagram

125

lwjgl.OpenGL CGApplication

Texture -width : int -height : int +getWidth() : int +getHight() : int

LightingShading -Camera : CGApplication = cmr -Texture : CGApplication = textr +loadImage() : void +main() : void

Camera -viewCamX : int -viewCamY : int -viewCamZ : int -upCamX : int -upCamY : int -upCamZ : int -posCamX : int -posCamY : int -posCamZ : int -camaera_speed : int +moveCamera() : void +rotateCamera() : void +strafeCamera() : void +render() : void

CGApplication.java Sama dengan kode program pada kegiatan praktikum 6.1

Texture.java Sama dengan kode program pada kegiatan praktikum 6.1

Camera.java import import import import public

126

static org.lwjgl.util.glu.GLU.*; org.lwjgl.input.Keyboard; org.lwjgl.input.Mouse; org.lwjgl.opengl.Display; class Camera { private float viewCamX, viewCamY, viewCamZ, upCamX, upCamY, upCamZ,posCamX, posCamY, posCamZ, CAMERA_SPEED; private void moveCamera(float speed) {

float x = viewCamX - posCamX; float z = viewCamZ - posCamZ; posCamX = posCamX + x * speed; posCamZ = posCamZ + z * speed; viewCamX = viewCamX + x * speed; viewCamZ = viewCamZ + z * speed; } private void rotateCamera(float speed) { float x = viewCamX - posCamX; float z = viewCamZ - posCamZ; viewCamZ =(float)(posCamZ+Math.sin(speed)*x+ Math.cos(speed) * z); viewCamX = (float) (posCamX + Math.cos(speed) * x – Math.sin(speed) * z); } private void strafeCamera(float speed) { float x = viewCamX - posCamX; float z = viewCamZ - posCamZ; float orthoX = -z; float orthoZ = x; posCamX = posCamX + orthoX * speed; posCamZ = posCamZ + orthoZ * speed; viewCamX = viewCamX + orthoX * speed; viewCamZ = viewCamZ + orthoZ * speed; } private void mouseMove() { int width, height, mouseX, mouseY; width = Display.getWidth(); height = Display.getHeight(); int midX = width >> 1; int midY = height >> 1; float angleY = 0.0f; float angleZ = 0.0f; // Get mouse position mouseX = Mouse.getX(); mouseY = Mouse.getY(); if ((mouseX == midX) && (mouseY == midY)) { return; } Mouse.setCursorPosition(midX, midY); angleY = (float) ((midX - mouseX)) / 1000; angleZ = (float) ((midY - mouseY)) / 1000; viewCamY += angleZ * 2; if ((viewCamY - posCamY) > 8) { viewCamY = posCamY + 8; } if ((viewCamY - posCamY) < -8) { viewCamY = posCamY - 8; } rotateCamera(-angleY); } public void init() {

127

posCamX = 0.0f; posCamY = 1.0f; posCamZ = 8.0f; viewCamX = 0.0f; viewCamY = 1.0f; viewCamZ = 0.0f; upCamX = 0.0f; upCamY = 1.0f; upCamZ = 0.0f; CAMERA_SPEED = 0.01f; Mouse.setGrabbed(true); } public void setCameraSpeed(float speed) { CAMERA_SPEED = speed; } public void update() { if (Keyboard.isKeyDown(Keyboard.KEY_W)) { moveCamera(CAMERA_SPEED); } if (Keyboard.isKeyDown(Keyboard.KEY_S)) { moveCamera(-CAMERA_SPEED); } if (Keyboard.isKeyDown(Keyboard.KEY_A)) { strafeCamera(-CAMERA_SPEED); } if (Keyboard.isKeyDown(Keyboard.KEY_D)) { strafeCamera(CAMERA_SPEED); } mouseMove(); } public void render() { gluLookAt(posCamX, posCamY, posCamZ, viewCamX, viewCamY, viewCamZ,upCamX, upCamY, upCamZ); } }

LightingShading.java import import import import import import import import import

java.nio.FloatBuffer; java.nio.IntBuffer; org.lwjgl.BufferUtils; org.lwjgl.input.Keyboard; setting.CGApplication; setting.Camera; setting.Texture; static org.lwjgl.opengl.GL11.*; static org.lwjgl.util.glu.GLU.*;

public class LightingShading extends CGApplication { private Texture m_texture; private final int[] m_texID = new int[2]; private boolean KEY_0_pressed, KEY_1_pressed, KEY_2_pressed, light0_ON,light1_ON, light2_ON; public final static int NO_WRAP = -1;

128

private Camera camera; @Override public void init() { camera = new Camera(); camera.init(); camera.setCameraSpeed(0.005f); KEY_0_pressed = KEY_1_pressed = KEY_2_pressed = false; light0_ON = light1_ON = light2_ON = false; IntBuffer textureIDBuffer = BufferUtils.createIntBuffer(2); glGenTextures(textureIDBuffer); textureIDBuffer.get(m_texID); loadTexture(m_texID[0], "pic/marble.png", false, GL_LINEAR, GL_REPEAT); loadTexture(m_texID[1], "pic/crate.png", false, GL_LINEAR, NO_WRAP); FloatBuffer ambientPointLight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.5f, 0.5f, 0.5f, 1.0f }).flip(); FloatBuffer diffusePointLight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.5f, 0.5f, 0.5f, 1.0f }).flip(); FloatBuffer specularPointLight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 1.0f, 1.0f, 1.0f }).flip(); FloatBuffer ambientDirectionalLight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.0f, 1.0f, 0.0f, 1.0f }).flip(); FloatBuffer diffuseDirectionalLight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 0.0f, 1.0f, 0.0f, 1.0f }).flip(); FloatBuffer ambientSpotLight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 0.0f, 0.0f, 1.0f }).flip(); FloatBuffer diffuseSpotLight = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 0.0f, 0.0f, 1.0f }).flip(); FloatBuffer directionallightPosition = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 6.0f, 0.5f, 0.0f, 0.0f }).flip(); FloatBuffer pointlightPosition = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 6.0f, 0.5f, 0.0f, 1.0f }).flip(); FloatBuffer spotlightPosition = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 10.0f, 3.0f, 0.0f, 1.0f }).flip(); FloatBuffer spotlightDirection = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { -1.0f, 0.0f, -1.0f, 1.0f }).flip(); FloatBuffer matAmbient = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] { 1.0f, 1.0f, 1.0f, 1.0f }).flip(); FloatBuffer matDiff = (FloatBuffer) BufferUtils.createFloatBuffer(4).put(new float[] {

129

1.0f, 1.0f, 1.0f, 1.0f }).flip(); FloatBuffer matSpecular = (FloatBuffer) BufferUtils .createFloatBuffer(4).put(new float[] { 1.0f, 1.0f, 1.0f, 1.0f }).flip(); glLight(GL_LIGHT0, GL_AMBIENT, ambientPointLight); glLight(GL_LIGHT0, GL_DIFFUSE, diffusePointLight); glLight(GL_LIGHT0, GL_SPECULAR, specularPointLight); glLight(GL_LIGHT0, GL_POSITION, pointlightPosition); glLight(GL_LIGHT1,GL_AMBIENT,ambientDirectionalLight); glLight(GL_LIGHT1, GL_DIFFUSE, diffuseDirectionalLight); glLight(GL_LIGHT1,GL_POSITION, directionallightPosition); glLight(GL_LIGHT2, GL_AMBIENT, ambientSpotLight); glLight(GL_LIGHT2, GL_DIFFUSE, diffuseSpotLight); glLight(GL_LIGHT2, GL_POSITION, spotlightPosition); glLightf(GL_LIGHT2, GL_SPOT_CUTOFF, 15.0f); glLightf(GL_LIGHT2, GL_SPOT_EXPONENT, 5.0f); glLight(GL_LIGHT2,GL_SPOT_DIRECTION, spotlightDirection); glEnable(GL_COLOR_MATERIAL); glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE); glMaterial(GL_FRONT, GL_SPECULAR, matSpecular); glMaterial(GL_FRONT, GL_AMBIENT, matAmbient); glMaterial(GL_FRONT, GL_DIFFUSE, matDiff); glMaterialf(GL_FRONT, GL_SHININESS, 10.0f); } @Override public void update(int delta) { camera.update(); toggleKey(); } public void toggleKey() { if (Keyboard.isKeyDown(Keyboard.KEY_0)) { if (!KEY_0_pressed) { light0_ON = !light0_ON; KEY_0_pressed = true; } } else { KEY_0_pressed = false; } if (Keyboard.isKeyDown(Keyboard.KEY_1)) { if (!KEY_1_pressed) { light1_ON = !light1_ON; KEY_1_pressed = true; } } else { KEY_1_pressed = false; } if (Keyboard.isKeyDown(Keyboard.KEY_2)) { if (!KEY_2_pressed) { light2_ON = !light2_ON; KEY_2_pressed = true; } } else {

130

KEY_2_pressed = false; } } void drawCube(int texID, float width, float height) { width = width / 2; glBindTexture(GL_TEXTURE_2D, texID); glBegin(GL_QUADS); glNormal3f(0, 0, 1); glTexCoord2d(0, 0); glVertex3f(-width, 0, width); glTexCoord2d(1, 0); glVertex3f(width, 0, width); glTexCoord2d(1, 1); glVertex3f(width, height, width); glTexCoord2d(0, 1); glVertex3f(-width, height, width); // right side glNormal3f(1, 0, 0); glTexCoord2d(0, 0); glVertex3f(width, 0, width); glTexCoord2d(1, 0); glVertex3f(width, 0, -width); glTexCoord2d(1, 1); glVertex3f(width, height, -width); glTexCoord2d(0, 1); glVertex3f(width, height, width); // back side glNormal3f(0, 0, -1); glTexCoord2d(0, 0); glVertex3f(width, 0, -width); glTexCoord2d(1, 0); glVertex3f(-width, 0, -width); glTexCoord2d(1, 1); glVertex3f(-width, height, -width); glTexCoord2d(0, 1); glVertex3f(width, height, -width); // left side glNormal3f(-1, 0, 0); glTexCoord2d(0, 0); glVertex3f(-width, 0, -width); glTexCoord2d(1, 0); glVertex3f(-width, 0, width); glTexCoord2d(1, 1); glVertex3f(-width, height, width); glTexCoord2d(0, 1); glVertex3f(-width, height, -width); // top side glNormal3f(0, 1, 0); glTexCoord2d(0, 0); glVertex3f(-width, height, width); glTexCoord2d(1, 0); glVertex3f(width, height, width); glTexCoord2d(1, 1); glVertex3f(width, height, -width); glTexCoord2d(0, 1);

131

glVertex3f(-width, height, -width); // bottom side glNormal3f(0, -1, 0); glTexCoord2d(0, 0); glVertex3f(-width, 0, width); glTexCoord2d(1, 0); glVertex3f(width, 0, width); glTexCoord2d(1, 1); glVertex3f(width, 0, -width); glTexCoord2d(0, 1); glVertex3f(-width, 0, -width); glEnd(); } void drawFloor(int texID, float width) { // floor glBindTexture(GL_TEXTURE_2D, texID); glBegin(GL_QUADS); glNormal3f(0, 1, 0); glTexCoord2d(0, 0); glVertex3f(-width, 0, width); glTexCoord2d(width, 0); glVertex3f(width, 0, width); glTexCoord2d(width, width); glVertex3f(width, 0, -width); glTexCoord2d(0, width); glVertex3f(-width, 0, -width); glEnd(); } private

void

loadTexture(int

texID,

String

path,

boolean

transparent, int filter, int wrap) { m_texture = new Texture(); if (!m_texture.load(path)) { System.out.println("Failed to load texture\n"); return; } glBindTexture(GL_TEXTURE_2D, texID); if (transparent) { glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA, m_tex ture.getWidth(), m_texture.getHeight(), 0, GL_RGBA, GL_UNSIGNED_BYTE, m_texture.getImageData()); } else { glTexImage2D(GL_TEXTURE_2D,0,GL_RGB, m_texture.getWidth(), m_texture.getHeight(), 0, GL_RGB, GL_UNSIGNED_BYTE, m_texture.getImageData()); } glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,filter); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, filter); if (wrap == NO_WRAP) {

132

return; } glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, wrap); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, wrap); } private void toggleLighting(int lightID, boolean on) { if (on) { glEnable(lightID); } else { glDisable(lightID); } } public void render() { // Setting up default viewport glViewport(0, 0, width, height); // Set perspective projection glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f, (width) / (height), 1.0f, 100.0f); // Transformation glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // Clear color buffer to black glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Set background color to black glClearColor(0.0f, 0.0f, 0.0f, 0.0f); camera.render(); // Zoom out glTranslatef(0.0f, -3.0f, -10.0f); // Enable lighting glEnable(GL_LIGHTING); // toggle lighting toggleLighting(GL_LIGHT0, light0_ON); toggleLighting(GL_LIGHT1, light1_ON); toggleLighting(GL_LIGHT2, light2_ON); // Enable Depth Testing for correct z-ordering glEnable(GL_DEPTH_TEST); // Enable texture 2D glEnable(GL_TEXTURE_2D); drawFloor(m_texID[0], 10); // Draw cube drawCube(m_texID[1], 2, 2); glDisable(GL_DEPTH_TEST); glDisable(GL_TEXTURE_2D); glDisable(GL_LIGHTING); renderText(); } private void renderText() { drawString(300, height - 25 ,"Lighting & Shading"); drawString(100, height - 42 * getDefaultFont().getLineHeight(), "Tekan 0, 1, 2, Untuk ON-OFF point light, directional light, spot light"); } @Override public void deinit() {

133

glDeleteTextures(m_texID[0]); glDeleteTextures(m_texID[1]); } public static void main(String[] args) { LightingShading app = new LightingShading(); app.start(800, 600, false, false, true,"Lighting & Shading"); } }

E. Latihan Soal 1. Rancang dan buatlah Virtual Kota seperti dalam gambar di bawah ini dengan menggunakan file gambar yang sudah disediakan class yang harus dibuat antara lain :  CGApplication.java bisa disalin dari kode program pada Kegiatan Belajar 6-7  Camera.java bisa disalin dari kode program Kegiatan Belajar 6 -7  Texture.java bisa disalin dari kode program Kegiatan Belajar 6 -7  Class baru yang harus dibuat adalah VirtualGedungKota.java yang merupakan implementasi dari kode program

134

File gambar sebagai berikut (berekstensi .jpg atau ,png) :

135

F. Rangkuman Rendering merupakan salah satu teknik pencitraan objek 3 dimensi untuk mendapatkan image yang realistis dengan penambahan beberapa efek, seperti pencahayaan dan shading. Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua elemen penting yang sangat berkaitan erat dengan shading model keakuratan dalam menggambarkan objek dan teknik pencahayaan yang baik. Saat cahaya menimpa permukaan benda maka sebagian cahaya akan dipantulkan dan sebagian lain diserap. Bergantung kepada frekuensi atau panjang gelombang yang dipantulkan dan diserap maka kita akan melihat warna. Mata kita selain sensitif terhadap warna juga sensitif terhadap intensitas cahaya (brightness). Secara awam kita menyebut intensitas cahaya sebagai kecerahan. Flat

shading

mempunyai

adalah

salah

satu

teknik

shading

dimana

satu

face

warna yang sama. Pada metode ini sebuah intensitas tunggal

dihitung untuk masing-masing Polygon, semua titik pada permukaan Polygon

136

dipaparkan dengan nilai intensitas yang sama. Karakteristik flat shading diantaranya pemberian tone yang sama untuk setiap Polygon,penghitungan jumlah cahaya mulai dari titik tunggal pada permukaan dan penggunaan satu normal untuk seluruhnya.

G. Umpan Balik IPK

Hasil Yang Dicapai

Rencana Tindak Lanjut

Peserta diklat mampu menggambarkan proses rendering pada sebuah imagedan berapa proses pencapaian kompetensinya Peserta

diklat

mampu

menerapkan proses lighting dan shading dan berapa besar proses pencapaian kompetensinya Peserta diklat mampu menulis kode program untuk melakukan rendering pada sebuah image melalui lighting dan shanding dan berapa besar proses pencapaian kompetensinya

137

H. Kunci Jawaban Perancangan class diagram

lwjgl.OpenGL CGApplication

Texture -width : int -height : int +getWidth() : int +getHight() : int

VirtualGedungKota -Camera : CGApplication = cmr -Texture : CGApplication = textr +loadImage() : void +main() : void

138

Camera -viewCamX : int -viewCamY : int -viewCamZ : int -upCamX : int -upCamY : int -upCamZ : int -posCamX : int -posCamY : int -posCamZ : int -camaera_speed : int +moveCamera() : void +rotateCamera() : void +strafeCamera() : void +render() : void

PENUTUP

Kesimpulan dan Saran Modul diklat PKB Guru RPL level 7 ini merupakan bagian dari Standar Kompetensi Guru (SKG) pada empat kompetensi utama yaitu pada kompetensi profesional. Kompetensi Inti Guru (KIG) sesuai permendiknas 16 tahun 2007 pada kompetensi profesional pada poin 20 menyebutkan guru harus “Menguasai materi, struktur, konsep dan pola pikir keilmuan yang mendukung mata pelajaran yang

diampu”.

Modul

ini

dibuat

sesuai

dengan

Indikator

Pencapaian

Kompetensi(IPK), dimana setiap IPK dituangkan ke dalam Kegiatan Belajar(KB) 1- sampai KB 8 yang berisikan pengembangan pengetahuan dalam uraian materi dan praktikum yang tertuang dalam kegiatan praktikum. Latihan atau tugas berisikan permasalahan-permasalan yang nyata dalam kehidupan sehari-hari. Solusi yang ditawarkan dalam setiap penyelesaian masalah dalam bentuk UML class diagram dan kode program dalam bahasa C++ dan java sehingga pengguna dapat memilih sesuai dengan bahasa pemrograman yang sering digunakan. Grafik komputer 3D (dimensi) merupakan bentuk dari benda yang memiliki panjang, lebar, dan tinggi. perbedaan dengan grafik 2D pada pemodelan 3D memiliki 3 titik kordinat yakni titik x, y, dan z. Representasi dari data geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika komputer 2D. Tiga Dimensi, biasanya digunakan dalam penanganan grafis. 3D secara umum merujuk pada kemampuan dari sebuah video card (link). pemodelan ini juga berfungsi untuk menampilkan efek realistis pada video maupun game. Grafik 3D merupakan perkembangan dari grafik 2D. Di dalam grafika komputer, 3D merupakan bentuk grafik yang menggunakan representasi data geometri tiga dimensi. Suatu objek rangka 3D apabila disinari dari arah tertentu akan membentuk bayangan pada permukaan gambar. Proses pembuatan grafik komputer 3D dapat dibagi ke dalam tiga fase, yaitu 3D

139

modeling yang mendeskripsikan bentuk dari sebuah objek, layout dan animation yang mendeskripsikan gerakan dan tata letak sebuah objek, dan 3D rendering yang memproduksi image dari objek tersebut Pengguna modul ini terutama guru-guru Rekayasa Perangkat Lunak (RPL) dapat memperkaya dengan memberi latihan-latihan atau tugas yang lebih variatif untuk siswa-siswa SMK sesuai permasalahan di sekolah masing-masing. Pada perkembangan saat ini, pemanfaatan teknologi grafika komputer sangat dibutuhkan untuk memvisualisasikan objek-objek dunia nyata menjadi objek grafis, dan implementasi yang real yaitu digunakannya teknologi grafika komputer pada fraktal untuk pembuatan aplikasi desain suatu benda. Dengan menguasai grafika komputer diharapkan guru dan siswa bisa bersama-sama membuat projek-projek yang dapat digunakan oleh sekolah dan masyarakat.

140

EVALUASI

1. Elemen-elemen yang menjadi konsentrasi utama pada grafika komputer adalah , kecuali….. a. Modeling b. Rendering c. Animation d. Transformation 2. Bagian gambar yang memperlihatkan keseluruhan bentuk dan fitur internal dari sebuah objek disebut…. a. Raster b. Pixel c. Wireframe d. Scene 3. Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi tersebut berasal, format penulisan fungsi OpenGL adalah ... a. Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah contoh glClearColor. b. Semua perintah OpenGL menggunakan awalan GL diikuti dengan huruf kapital pada setiap kata membentuk nama perintah contoh GLClearColor. c. Semua perintah OpenGL menggunakan awalan _gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah contoh _glClearColor. d. Semua perintah OpenGL menggunakan awalan _GL diikuti dengan huruf kapital

pada

setiap

kata

membentuk

nama

perintah

contoh

_GLClearColor. 4. Perhatikan posisi titik dalam koordinat cartesian seperti dalam gambar di bawah, pernyataan yang benar adalah ...

141

a. Satu pixel didefinisikan pada posisi (3,4) b. Satu pixel didefinisikan pada posisi (4,3) c. Satu pixel pada posisi(3,4) dapat membentuk gambar d. Satu pixel pada posisi(4,3) dapat membentuk gambar 5. Perintah glClear(GL_COLOR_BUFFER_BIT); adalah perintah untuk… a. memberikan fungsi warna b. mendefinisikan sebuah objek c. memberi nilai koordinat pada sebuah objek d. menghapus layar 6. Bidang tertutup yang dibentuk minimal 3 simpul (titik) yang terhubung oleh garis (sisi) dan garis-garis tersebut tidak saling memotong merupakan bidang… a. Poligon b. Polyline c. Multigon d. Oktogonal 7. File-file berikut diperlukan dalam pengintegrasian LWJGL ke dalam ide netbeans kecuali... a. Lwjgl-idenetbeans-X.X.zipLwj b. gl-docs-X.X.zip c.Lwjgl-source-X.X.zip d.Lwjgl-applet-X.X.zip 8. Garis a arah horisontal mempunyai panjang 400, dan garis b arah vertikal mempunyai tinggi 320. Tentukan pasangan titik koordinat untuk menggambar garis a dan garis b ... .

142

Mengambar Garis

(0,480)

(320,100)

a (100,240)

b

(0,0)

(640,0)

a. Garis a(100,240)(500,240) dan Garis b(320,100)(320,420) b. Garis a(100,240)(240,500) dan Garis b(320,100)(420,320) c. Garis a(100,240)(500,240) dan Garis b(320,100)(320,-220) d. Garis a(100,240)(240,400) dan Garis b(320,100)(320,320) 9. Gambar dibawah ini adalah proses .... pada bidang komputer grafik

a.

Translasi

b.

Transformasi

c.

Rotasi

d.

Skala

10. Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat dengan translation vector, yaitu (tx,ty), dimana tx adalah translasi menurut sumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru titik yang ditranslasi adalah ... a. x’=x + tx dan y’=y + ty sehingga titik setelah translasi adalah (x’,y’)

143

b. x’=x-tx dan y’=y - ty sehingga titik setelah translasi adalah (x’,y’) c. x’=x * tx dan y’=y * ty sehingga titik setelah translasi adalah (x’,y’) d. x’=x +(2 tx) dan y’=y +(2 ty) sehingga titik setelah translasi adalah (x’,y’) 11. Tiga elemen dasar dalam sistem koordinat 3D yang diperlukan dalam grafika komputer adalah ... a. Titik 3D, vektor 3D, dan matrik 3D b. Translasi 3D, rotasi 3D, dan skala 3D c. Titik 3D, translasi 3D, dan rotasi 3D d. Vektor 3D, translasi 3D, dan rotasi 3D 12. Algoritma yang digunakan untuk menentukan titik-titik dalam dimensi dengan menggunakan pendekatan garis lurus adalah… e. Algoritma DDA f.

Algoritma Bessenham

g. Algoritma differential analyzer h. Algoritma K-Cluster 13. Perintah berikut ini digunakan untuk menampilkan .... void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5);

a. segitiga dengan tiga titik dengan satuan float b. segitiga dengan tiga titik dengan satuan integer c. persegiempat dengan tiga titik dengan satuan integer d. persegiempat dengan tiga titik dengan satuan float 14. Jika diketahui nilai koordinat dua titik (4,5) dan (10,9) maka dengan menggunakan algoritma DDA diperoleh nilai step yang tepat adalah… i.

6

j.

5

k. 4 l.

3

15. Gambar di bawah ini adalah proses pembuatan objek 3D dari sebuah kubus, Hitunglah jumlah titik, sisi(face), dan jumlah titik setiap face ....

144

a. 8 titik, 6 face , dan setiap face terdiri dari 4 vertex b. 8 titik, 6 face , dan setiap face terdiri dari 2 vertex c. 8 titik, 6 face , dan setiap face terdiri dari 6 vertex d. 8 titik, 6 face , dan setiap face terdiri dari 8 vertex

16. Jika diketahui nilai s adalah 2 Tentukan koordinat baru titik (3,4) setalah melalui operasi penskalaan adalah ... a.(5,6) b.(9,12) c.(5,12) d.(9,6) 17. Di bawah ini adalah perintah-perintah untuk memberikan tekstur pada objek 1 dimensi, kecuali… a. GL_TEXTURE_1D b. GL_TEXTURE_RECTANGLE c. GL_TEXTURE_BUFFER d. GL_TEXTURE_1D_ARRAY 18. Penentuan apa yang dilihat oleh kamera biasanya ditentukan dengan sebuah titik (x,y,z) yang disebut... a. camera interest b. field of view c. virtual camera d. camera setting 19. Melakukan pengesetan kamera dalam bentuk setting lensa kamera disebut… a. trnasformasi viewing b. transformasi viewport c. transformasi modeling d. transformasi proyeksi

145

20. Secara umum flat shading dapat menghasilkan shading yang akurat jika objek berbentuk…. a. polyhendra b. polygon c. oktogonal d. polyline

146

GLOSARIUM

3 dimensi biasa disebut 3D atau adalah bentuk dari benda yang memiliki panjang, lebar, dan tinggi. Grafik 3 Dimensi merupakan teknik penggambaran yg berpatokan pada titik koordinat sumbu x(datar), sumbu y(tegak), dan sumbu z(miring).

Algoritma DDA adalah algoritma pembentukan garis berdasarkan perhitungan Δx dan Δy, menggunakan rumus y = m. Δ x. Garis dibuat dengan menentukan dua endpoint yaitu titik awal dan titik akhir.

Flat

shading

mempunyai

adalah

salah

satu

teknik

shading

dimana

satu

face

warna yang sama. Pada metode ini sebuah intensitas tunggal

dihitung untuk masing-masing Polygon, semua titik pada permukaan Polygon dipaparkan dengan nilai intensitas yang sama. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis. Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar.

Grafika Komputer adalah proses untuk menciptakan suatu gambar berdasarkan deskripsi obyek maupun latar belakang yang terkandung pada suatu gambar. Grafis komputer adalah suatu bidang ilmu yang mempelajari bagaimana membangun grafik (gambar) baik 2D maupun 3D yang kelihatan nyata dengan menggunakan komputer. Salah satu bidang grafika komputer yang sangat terkenal adalah desain grafis

Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya untuk menentukan sudut pandang kita pada sebuah world, sehingga sering disebut virtual camera.

147

Lightweight Java Game Library (LWJGL) merupakan salah satu jenis game engine yang berjalan dengan dasar bahasa java (open source dan free). Game engine sendiri merupakan perangkat lunak yang digunakan khusus dalam pembuatan video game.

Lighting atau Pencahayaan pada grafik komputer bertujuan untuk memberikan efek nyata pada objek. Efek nyata disini berarti, cahaya yang disebarkan ke objek dapat memberikan efek cahaya yang sesungguhnya.

Objek grafik 2 dimensi adalah sekumpulan titik-titik 2 dimensi yangdihubungkan dengan garis lurus, baik berupa polyline, polygon atau kurva. OpenGL (Open Graphics Library) adalah sebuah program aplikasi interface yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata membentuk nama perintah (sebagai contoh glClearColor). Polyline adalah suatu fungsi yang digunakan untuk menggambarkan objek 2D yang sudah didefinisikan di depan, dimana setiap titik pada objek mulai titik ke 0, 1, 2,3,..., n dihubungkan dengan garis lurus sehingga membentuk kurva terbuka. Primitive Drawing merupakan cara mudah untuk menggambar pada layar monitor menggunakan teori geometri sederhana. Macam-macam primitive drawing seperti menggambar sebuah titik, garis, atau gabungan antar keduanya.

Rendering merupakan salah satu teknik pencitraan objek 3 dimensi untuk mendapatkan image yang realistis dengan penambahan beberapa efek, seperti pencahayaan dan shading.

Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka perlu di tentukan pusat dan besar sudut putar. sedangkan translasi adalah pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami

148

pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah. Skala adalah suatu operasi yang membuat suatu objek berubah ukurannya baik menjadi mengecil ataupun membesar

secara seragam atau tidak seragam

tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan. sx adalah faktor penskalaan menurut sumbu x dan sy faktor penskalaan menurut sumbu y.

Texturing merupakan proses mewarnai, memberi tekstur, atau memberi efek material pada sebuah model 3D. Texture mapping adalah teknik shading untuk pengolahan gambar yang memetakan sebuah fungsi pada permukaan tiga dimensi dalam scene Titik (Point) atau dalam istilah komputer dikenal dengan Pixel (Picture Element) adalah elemen terkecil dari sebuah gambar atau pola dalam tampilan komputer. Kumpulan dari pixel membentuk sebuah gambar atau pola yang dapat dikenali dalam variasi warna dan jumlah yang banyak. Kumpulan pixel dalam jumlah panjang dan lebar tertentu disebut dengan resolusi. Vertek adalah titik dalam 3 dimensi yang terdiri dari (x,y,z)

149

150

DAFTAR PUSTAKA

Achmad Basuki, Nana Ramadijanti. 2006. Grafika Komputer - Teori dan Implementasinya. Yogyakarta Andi Offset

Chua Hock-Chuan. 2012. 3D Graphics with OpenGL. Basic Theory.

Listian Pratomo. 2007. Membuat Grafik di Java. www.ilmukomputer.com

Maliki, Irfan.2010. Grafika Komputer. Yogyakarta Andi Offset.

Modul 4 Grafika Komputer Universitas Negeri Malang: Transformasi Objek. 2013.

Prihatmanto,

Ary

Setijadi.

2007.

EC5130

–

Grafika

Komputer

dan

Pemrograman GPU. Suplemen Diktat Kuliah. OpenGL Tutorial dengan GLUT: Fixed Pipeline.

______________.2015.

Learning

LWJGL.

http://wiki.lwjgl.org/wiki/Learning_LWJGL (online). ______________.2006. Grafik Komputer :Transformasi Geometri2 Dimensi. Universitas Gunadarma ______________.Diktat Kuliah Grafika Kompute BAB 2 Transformasi 2D .http://pdf.nscpolteksby.ac.id/2-Transformasi%202D-20140317.pdf

151