35
LAPORAN PRAKTIKUM KOMPUTER GRAFIK NAMA PRAKTIKAN NOMOR MAHASISWA TANGGAL KUMPUL TANDA TANGAN PRAKTIKAN FIRMANSYAH 1214370514 11 JUNI 2014 NAMA PENILAI TANGGAL KOREKSI NILAI TANDA TANGAN DOSEN INDRI SULISTIANINGSIH S.KOM Universitas Pembangunan Panca Budi Fakultas Teknik Jurusan Sistem Komputer Medan 2014 Kelas TI-4C SORE

Laporan Praktikum Komputer Grafik

Embed Size (px)

DESCRIPTION

School Work

Citation preview

Page 1: Laporan Praktikum Komputer Grafik

LAPORAN PRAKTIKUM

KOMPUTER GRAFIK

NAMA PRAKTIKAN NOMOR

MAHASISWA

TANGGAL

KUMPUL

TANDA TANGAN

PRAKTIKAN

FIRMANSYAH 1214370514 11 JUNI 2014

NAMA PENILAI TANGGAL

KOREKSI NILAI

TANDA TANGAN

DOSEN

INDRI SULISTIANINGSIH S.KOM

Universitas Pembangunan Panca Budi

Fakultas Teknik

Jurusan Sistem Komputer

Medan

2014

Kelas

TI-4C SORE

Page 2: Laporan Praktikum Komputer Grafik

DAFTAR ISI

1. Kata Pengantar .......................................................................................... 2

2. Bab I . Pendahuluan .................................................................................. 4

3. Bab II . Dasar Teori ................................................................................... 5

2.1 Teori Dasar Grafika Komputer ........................................................ 5

2.2 Teori Grafika Komputer Tiga Dimensi ........................................... 7

2.3 Pemetaan Tekstur ............................................................................ 14

2.4 Pencahayaan .................................................................................... 16

2.5 Komputer Grafik menggunakan OpenGL ....................................... 17

2.6 Environment Mapping ..................................................................... 19

4. Bab III . Hasil Percobaan ........................................................................ 20

1. Primitive Drawing ............................................................................ 20

2. Sistem koordinat 2D ......................................................................... 22

3. Sistem koordinat 3D ......................................................................... 30

5. Bab IV . Analisa Hasil Percobaan ........................................................... 34

6. Penutup .................................................................................................... 35

7. Daftar Pustaka ......................................................................................... 35

Page 3: Laporan Praktikum Komputer Grafik

KATA PENGANTAR

Bismillahirrahmanirrahim.

Assalamu’alaikum Wr.Wb.

Puji Syukur kami panjatkan kehadirat Allah SWT, yang telah melimpahkan

berbagai rahmat dan Karunia-Nya sehingga kami masih diberi kesempatan untuk

meyelesaikan tugas laporan praktikum ini guna memenuhi tugas mata kuliah

Komputer Grafik ini. Shalawat serta salam semoga senantiasa tercurahkan kehadirat

Nabi kita Muhammad SAW, Keluarga, Sahabat, dan para Pengikutnya yang tetap setia

menjaga dan mengikuti sunnahnya hingga akhir zaman.

Dalam penyusunan laporan praktikum ini, tidak sedikit hambatan yang kami

hadapi. Namun dengan penuh kesabaran dan terutama pertolongan dari Allah SWT

akhirnya laporan praktikum ini dapat terselesaikan, tetapi kami menyadari masih

banyak kekurangan dan jauh dari sempurna, oleh karena itu saran dan kritik yang

kontruktif dari Dosen pembimbing mata kuliah ini sangat kami harapkan demi

perbaikan di masa yang akan datang. Semoga laporan praktikum ini, dapat bermanfaat

dan berguna untuk para mahasiswa terutama untuk diri saya pribadi, atas perhatiannya

kami ucapkan terima kasih.

Medan, 11 Juni 2014

Penyusun :

NAMA : FIRMANSYAH

NPM : 1214370514

Page 4: Laporan Praktikum Komputer Grafik

BAB I

PENDAHULUAN

Laporan praktikum ini merupakan bagian dari mata kuliah Komputer Grafik. Dalam

laporan praktikum ini, praktikan dikenalkan dengan beberapa aspek yang berkaitan dalam

pemrograman komputer grafik. Laporan praktikum ini memuat beberapa modul yang berisi

tentang struktur program OpenGL (Open Graphics Library): primitif drawing, sistem

koordinat 2D, dan sistem koordinat 3D. Modul-modul ini harus dapat dikuasai oleh

mahasiswa sebagai dasar penguasaan Komputer Grafik.

Mahasiswa diharapkan dapat:

• Mampu membuat dan memanfaatkan output primitif (titik, garis, segiempat, kurva,

lingkaran, elips, fill area, dan teks).

• Mampu membuat dan memanfaatkan animasi.

• Mampu membuat dan memanfaatkan pencahayaan pada OpenGL.

• Mampu membuat dan memanfaatkan bayangan.

• Mampu membuat dan memanfaatkan tekstur.

Tujuan Pembelajaran Praktikum Mahasiswa mampu memahami dan menerapkan

aplikasi komputer grafik menggunakan bahasa pemrograman OpenGL.

Rumusan Kompetensi Dasar

• Mahasiswa mampu memahami dan mengaplikasikan sistem grafik pada komputer.

• Mahasiswa mampu memahami dan mengaplikasikan berbagai teknik dan komponen

komputer grafik.

• Mahasiswa mampu memahami dan mengaplikasikan visualisasi obyek.

Page 5: Laporan Praktikum Komputer Grafik

BAB II

DASAR TEORI

2.1 Teori Dasar Grafika Komputer

Pada bagian ini akan dibahas tentang teori dasar dari grafika komputer, yang akan

digunakan dalam pembahasan teknik environment mapping.

2.1.1 Sistem Koordinat Dua Dimensi

Sistem koordinat digunakan untuk membedakan posisi atau lokasi suatu titik. Sistem

koordinat yang sering digunakan adalah sistem koordinat cartesian dua dimensi seperti yang

digambarkan pada gambar 2.1. Dalam sistem koordinat cartesian dua dimensi digunakan 2

besaran (x,y). Sumbu x digunakan untuk memproyeksikan panjang dan sumbu y untuk tinggi.

Gambar 2. 1 Sistem Koordinat Cartesian dua dimensi, dengan sumbu x dan y

2.1.2 Titik / Pixel

Titik atau pixel (singkatan dari picture element) merupakan elemen penyusun terkecil

dari suatu objek dalam grafika komputer. Titik didefinisikan pada suatu posisi (x,y) dalam

koordinat cartesian. Gambar 2.2 menunjukkan sebuah titik pada posisi (3,4) dalam koordinat

cartesian.

Gambar 2. 2 Titik dengan koordinat cartesian (3,4)

Titik memiliki atribut yaitu warna dari titik tersebut. Selain itu, titik juga memiliki property

yang terdiri dari posisi atau koordinat (x,y) titik tersebut.

Page 6: Laporan Praktikum Komputer Grafik

2.1.3 Garis

Garis merupakan persamaan matematika yang disusun oleh sekumpulan titik. Suatu titik

merupakan penyusun dari garis jika koordinat titik tersebut memenuhi persamaan garis y =

mx + c. Gambar 2.3 menunjukkan sebuah garis dengan koordinat titik – titik ujung (2,2) dan

(5,4).

Gambar 2. 3 Garis dengan koordinat titik – titik ujung (2,2) dan (5,4)

Garis memiliki atribut yang terdiri dari warna, tebal dan jenis dari garis tersebut (gambar 2.4).

Garis juga memiliki property yang terdiri dari koordinat dari titik – titik ujung garis tersebut

(x1,y1) dan (x2,y2).

Gambar 2. 4 Jenis garis

2.1.4 Poligon

Poligon merupakan bidang tertutup yang dibentuk oleh minimal 3 simpul (titik sudut

atau vertices) yang terhubung oleh garis (sisi atau edge). Garis – garis tersebut tidak saling

memotong. Contoh : segitiga, segi lima, segi delapan, dsb.

Gambar 2.5 menunjukkan sebuah poligon yang berupa segi lima.

Gambar 2. 5 Poligon segi lima memiliki lima simpul dan lima sisi

Page 7: Laporan Praktikum Komputer Grafik

Poligon juga memiliki atribut seperti : tebal tepi, jenis tepi, warna tepi dan jenis isi poligon

(gambar 2.6). Property dari poligon terdiri dari koordinat titik – titik sudut penyusunnya.

Gambar 2. 6 Jenis isi poligon (hollow, solid, patterned)

2.2 Teori Grafika Komputer Tiga Dimensi

Teori grafika komputer tiga dimensi yang akan digunakan dalam pembahasan teknik

environment mapping akan dibahas pada bagian ini.

2.2.1 Sistem Koordinat Tiga Dimensi

Koordinat dua dimensi dirasakan kurang memadai dalam merepresentasikan suatu objek

tiga dimensi. Pada grafik tiga dimensi terdapat 2 buah sistem koordinat, yaitu sistem

koordinat cartesian tiga dimensi dan sistem koordinat spheris.

2.2.1.1 Sistem Koordinat Cartesian Tiga Dimensi

Dalam sistem koordinat cartesian dua dimensi hanya terdapat 2 besaran saja (sumbu x

dan y). Sedangkan untuk memodelkan objek tiga dimensi yang memiliki kedalaman,

diperlukan 1 sumbu tambahan yaitu sumbu z, maka digunakanlah sistem koordinat cartesian

tiga dimensi. Sistem koordinat cartesian dibedakan menjadi 2 yaitu, sistem koordinat tangan

kanan dan sistem koordinat tangan kiri.

Sistem koordinat tangan kanan diilustrasikan dengan jari telunjuk tangan kanan sebagai

sumbu x diputar sebesar 90 derajat ke arah jari tengah tangan kanan sebagai sumbu y,

sehingga arah ibu jari tangan kanan sebagai sumbu z mendekati pengamat (arah z positif).

Gambar 2.7 menunjukkan orientasi sumbu koordinat menggunakan sistem koordinat tangan

kanan.

Gambar 2. 7 Sistem Koordinat Tangan Kanan

Page 8: Laporan Praktikum Komputer Grafik

Sedangkan pada sistem koordinat tangan kiri dapat diilustrasikan dengan jari telunjuk

tangan kiri sebagai sumbu x diputar sebesar 90 derajat ke arah jari tengah tangan kiri sebagai

sumbu y, sehingga arah ibu jari tangan kiri sebagai sumbu z menjauhi pengamat (arah z

positif). Gambar 2.8 menunjukkan orientasi sumbu koordinat menggunakan sistem koordinat

tangan kiri. Dalam komputer grafik lebih banyak digunakan sistem koordinat tangan kanan.

Gambar 2. 8 Sistem Koordinat Tangan Kiri

2.2.1.2 Sistem Koordinat Spheris

Pada sistem koordinat spheris, sebuah titik dianggap terletak pada permukaan kulit bola

yang memiliki jari – jari R, dan titik pusat bola berimpit dengan titik pusat sistem koordinat.

Dapat diambil sembarang titik, misalnya titik W sehingga dikenal besaran colatitud dan

azimuth. Colatitud (� ) adalah besarnya sudut yang dibentuk antara sumbu z dan garis yang

ditarik dari titik pusat ke titik W. Azimuth (� ) adalah besarnya sudut antara bidang xz dengan

bidang yang melewati titik W dan sumbu z. Gambar 2.9 menunjukkan sistem koordinat

spheris.

Gambar 2. 9 Sistem Koordinat Spheris

Dengan trigonometri, komponen koordinat spheris dapat dinyatakan dalam bentuk

R, � , dan � yaitu :

Wx = R sin (� ) cos (� )

Wy = R sin (� ) sin (� )

Wz = R cos (� )

Page 9: Laporan Praktikum Komputer Grafik

2.2.2 Refleksi

Refleksi merupakan sifat material yang dapat mencerminkan bentuk objek–objek di

sekitarnya jika terkena sinar. Besarnya sudut pantul bergantung pada besarnya sudut datang

dari sinar dan bentuk permukaan dari objek yang terkena sinar tersebut.

Secara umum refleksi dapat diilustrasikan seperti gambar 2.10 berikut :

Gambar 2. 10 Vektor refleksi R berasal dari vektor V dengan garis normal N dan dengan

sudut

2.2.3 Proyeksi

Proyeksi merupakan proses mentransformasikan titik – titik di sistem koordinat

berdimensi n ke titik – titik di sistem koordinat dengan dimensi yang lebih kecil dari n. Dalam

grafik tiga dimensi, proyeksi didefinisikan dengan pancaran sinar proyeksi yang berasal dari

sebuah pusat proyeksi yang dipancarkan sampai mengenai masing – masing titik dari objek

tiga dimensi dan memotong sebuah bidang proyeksi sehingga terbentuk hasil proyeksi.

Dua teknik proyeksi yang sering digunakan dalam grafik tiga dimensi yaitu proyeksi

perspektif dan proyeksi paralel. Perbedaan diantara kedua teknik itu terletak pada letak pusat

proyeksi terhadap bidang proyeksi. Pada proyeksi perspektif, jarak pusat proyeksi ke bidang

proyeksi terdefinisi. Pada proyeksi paralel jarak pusat proyeksi ke bidang proyeksi tidak

terdefinisi (sangat jauh).

Proyeksi perspektif menghasilkan efek visual yang menyerupai sistem fotografi dan

sistem visual pada manusia. Hal ini membuat proyeksi perspektif menampilkan objek yang

lebih nyata daripada objek yang dihasilkan oleh proyeksi paralel. Proyeksi paralel biasanya

digunakan untuk pengukuran yang pasti. Karena perbandingan panjang objek di ruang tiga

dimensi dengan panjang objek di bidang proyeksi selalu sama.

Page 10: Laporan Praktikum Komputer Grafik

2.2.3.1 Proyeksi Paralel

Proyesi paralel dapat diilustrasikan dengan sebuah titik pada bidang tiga dimensi

W(wx,wy,wz) diproyeksikan ke bidang dua dimensi dengan cara menghapus salah satu

komponen titiknya, misalnya komponen z (membuat nilai wz sama dengan nol) sama dengan

memproyeksikan titik W ke bidang xy. Dalam hal ini bidang xy disebut dengan bidang

pandang (viewplane). Proyeksi dari setiap titik diperoleh dengan menjatuhkan sinar (disebut

proyektor), dengan arah jatuh sinar tegak lurus terhadap bidang proyeksi. Proyeksi ini disebut

dengan proyeksi orthogonal. Gambar 2.11 menggambarkan proyeksi paralel.

Gambar 2. 11 Proyeksi Paralel

2.2.3.2 Proyeksi Perspektif

Proyeksi perspektif sering juga disebut frustrum projection, merupakan sekumpulan

sinar paralel yang diproyeksikan terhadap titik hilang (vanishing point). Jika sekumpulan

sinar sejajar dengan salah satu sumbu koordinat, maka titik hilang disebut dengan titik hilang

sumbu. Sedangkan jika ada titik hilang sumbu yang berpotongan dengan bidang proyeksi

maka disebut dengan titik hilang utama. Objek yang berada di dekat view plane1 akan terlihat

lebih besar bila dibandingkan dengan objek yang letaknya jauh dari view plane, hal ini

membuat proyeksi perspektif lebih terlihat nyata. Gambar 2.12 menunjukkan proyeksi

perspektif.

Gambar 2. 12 Proyeksi Perspektif

1 View Plane adalah bidang pandang berbentuk piramid yang dihasilkan dari suatu proyeksi

Page 11: Laporan Praktikum Komputer Grafik

2.2.4 Kamera Model

Dalam grafika komputer tidak semua objek dapat ditampilkan pada layar, sehingga

diperlukan suatu batasan objek – objek mana saja yang akan ditampilkan. Objek – objek

tersebut dibatasi dengan suatu daerah yang disebut view volume.

Untuk menampilkan ke layar maka harus dilakukan proyeksi terhadap view volume pada

view plane, hanya sebagian dari view plane yang akan ditampilkan pada layar. Bagian dari

view plane ini berbentuk bujur sangkar, disebut dengan viewport seperti terlihat pada gambar

2.13 berikut ini :

Gambar 2. 13 Kamera Model dengan View Frustrum

View plane dibatasi oleh dua plane2 (Near dan Far), yang paralel terhadap view plane

ini disebut dengan view frustrum. Paralel plane yang dekat dengan mata (E) disebut dengan

near plane, sedangkan plane yang letaknya jauh dari mata disebut dengan far plane.

Kombinasi dari lokasi kamera (eye point), view plane, viewport, dan view frustrum

disebut dengan kamera model. Kamera model merupakan suatu cara untuk menempatkan

kamera dan mengorientasikannya pada ruang tiga dimensi. 2 Plane adalah bidang yang

berbentuk persegi panjang. Salah satu cara yang digunakan dalam kamera model yaitu sistem

koordinat arah pandang.

Sistem koordinat arah pandang sering disebut dengan sistem koordinat uvn, sesuai

dengan nama – nama sumbu koordinat yang menjadi komponennya. Sistem koordinat arah

pandang dapat diilustrasikan dengan bidang pandang berimpit dengan bidang uv, sedangkan

mata terletak pada sumbu n. Hal ini mirip dengan sistem koordinat cartesian, dimana mata

terletak pada sumbu z, dan bidang pandang pada bidang xy.

Gambar 2. 14 Sistem Koordinat Arah Pandang

Page 12: Laporan Praktikum Komputer Grafik

Hubungan antara sistem koordinat arah pandang dengan sistem koordinat cartesian,

diilustrasikan pada gambar 2.14. Dari gambar tersebut, bidang uv merupakan bidang pandang.

Pada bidang pandang ini ditentukan sebuah titik yang disebut dengan titik acuan pandang

(view reference point, VRP), dan dianggap sebagai titik pusat dari sistem koordinat arah

pandang. Dalam sistem koordinat dunia, komponen vektor n dinyatakan sebagai (nx,ny,nz).

Dengan adanya sumbu ke arah n inilah sistem koordinat uvn terbentuk. Sumbu u dan sumbu v

saling tegak lurus. Sedangkan vektor n mempunyai arah tegak lurus terhadap bidang uv, dan

karena sumbu u dan sumbu v terletak pada bidang uv, maka jelaslah bahwa arah vektor n

tegak lurus terhadap sumbu u dan sumbu v.

Jika vektor n dan v diketahui, dengan mudah bisa dihitung komponen vektor u. Karena

arah vektor u tegak lurus pada vektor v dan n, maka vektor u bisa dihitung dengan

menggunakan cross product dari vektor n dan v, yaitu u = n x v. Setelah sistem koordinat arah

pandang lengkap dengan berbagai komponennya, maka perlu ditentukan batas jendela dan

posisi matanya. Jendela terletak pada sistem koordinat bidang pandang, dan batas – batasnya

dinyatakan sebagai (jkr, jat, jkn, jbw). Dari batas – batas tersebut terlihat bahwa pada arah

mendatar, jendela mempunyai batas – batas dari u = jkr sampai v = jkn, pada arah tegak,

jendela mempunyai batas dari u = jat sampai v = jbw. Posisi mata, yaitu m(mu, mv, mn) dapat

diletakkan pada sembarang tempat pada sistem koordinat arah pandang. Posisi mata yang

paling sering dipakai adalah dengan menempatkannya pada sumbu n sejauh M dari VRP,

yaitu pada posisi m = (0, 0,M).

Gambar 2.15 berikut mengilustrasikan posisi jendela dan mata pada sistem koordinat arah

pandang.

Gambar 2.15 Posisi jendela dan mata

2.2.5 Model Layar

Pada grafika komputer, layar penampil memiliki titik pusat koordinat (0,0) terletak pada

posisi paling atas dan paling kiri. Sistem windowing pada komputer grafik berbentuk kotak

Page 13: Laporan Praktikum Komputer Grafik

yang didefinisikan berupa koordinat (kiri,atas) dan (kanan,bawah) seperti yang terlihat pada

gambar 2.16 berikut :

Gambar 2. 16 Titik pusat koordinat pada layar penampil

Dari gambar tersebut, untuk posisi tengah (center), lebar layar dan tinggi layar dapat

dihitung sbb :

horizontal center = ( kiri + kanan ) / 2

vertical center = ( atas + bawah ) / 2

lebar = kanan – kiri

tinggi = bawah – atas

Dalam menampilkan gambar pada layar penampil, dilakukan perbandingan ukuran

window dengan kamera model. Sehingga jika dilakukan perubahan ukuran pada kamera

model, window dapat dengan mudah menyesuaikan ukurannya.

Gambar 2.17 menunjukkan proses untuk menampilkan sebuah titik ke layar.

Gambar 2. 17 Proses untuk menampilkan sebuah titik ke layar

Page 14: Laporan Praktikum Komputer Grafik

2.2.6 Pemotongan (Clipping)

Kadang kala objek – objek yang hendak ditampilkan ada bagian yang berpotongan

dengan view volume sehingga perlu dilakukan proses pemotongan (clipping). Gambar 2.18

menunjukkan proses clipping dan culling.

Gambar 2. 18 Proses pemotongan (clipping) dilakukan pada garis di tengah

dan bawah, proses penghilangan (culled) garis di atas

2.3 Pemetaan Tekstur

Suatu objek akan terlihat lebih nyata dengan adanya tekstur yang sesuai dengan objek tersebut

dibandingkan dengan objek yang tidak memakai tekstur /polos. Gambar 2.19 (a)

menunjukkan objek tanpa tekstur, sedangkan gambar 2.19 (b) menunjukkan objek dengan

tekstur.

(a) (b)

Gambar 2. 19 Perbedaan penggunaan tekstur pada objek (a) Objek tanpa tekstur, (b)

Objek dengan tekstur

Page 15: Laporan Praktikum Komputer Grafik

Dalam komputer grafik, pemakaian tekstur dilakukan dengan melakukan pemetaan

terhadap tekstur pada permukaan objek. Tekstur yang dipetakan dapat berupa gambar atau

pola. Jika tekstur itu berupa pola maka dapat dilakukan perulangan untuk memetakannya,

sehingga ukuran filenya akan lebih kecil dibandingkan jika harus dipetakan seluruhnya.

Secara sederhana dalam pemetaan tekstur dilakukan perhitungan koordinat dunia (world

coordinates) yang berasal dari koordinat teksturnya. Gambar 2.20 mengilustrasikan pemetaan

tekstur.

x = x(s,t)

y = y(s,t)

z = z(s,t)

Gambar 2. 20 Ilustrasi dari pemetaan suatu tekstur

Dalam memetakan suatu tekstur pada suatu permukaan dikenal 4 komponen yang

terlibat. Parametric coordinates, digunakan untuk memodelkan permukaan objek. Texture

coordinates, digunakan untuk mengenali posisi dari tekstur yang akan dipetakan. World

coordinates, dimana pemetaan dilakukan. Screen coordinates, dimana pemetaan dari tekstur

ditampilkan. Gambar 2.21 mengilustrasikan 4 komponen dalam pemetaan tekstur.

Gambar 2. 21 Empat komponen dalam pemetaan tekstur

Page 16: Laporan Praktikum Komputer Grafik

2.4 Pencahayaan

Dalam komputer grafik, faktor pencahayaan cukup penting. Suatu objek akan terlihat

lebih nyata dan menarik jika diberi pencahayaan yang sesuai. Beberapa tipe pencahayaan,

yaitu :

• Directional Light Source, tipe pencahayaan yang sumber cahayanya dianggap terletak

sangat jauh dari objek, sehingga seluruh berkas cahaya yang mengenai objek datang

secara paralel. Contoh directional light di dunia nyata adalah cahaya matahari yang

menyinari bumi.

• Positional Light Source, tipe pencahayaan yang sumber cahaya ini serupa dengan

lampu yang terletak dekat dengan objek yang disinari, sehingga jarak/posisi antara

cahaya dengan objek akan mempengaruhi terang/gelapnya objek.

• Spotlight, tipe pencahayaan yang mirip dengan positional light source, hanya saja

dengan batasan daerah pencahayaan. OpenGL juga telah menyediakan model

pencahayaan yang terdiri dari diffuse, ambient, dan specular.

2.4.1 Diffuse

Diffuse merupakan sifat material yang menyebarkan cahaya ke semua arah. Jika sinar

mengenai suatu objek yang memiliki material diffuse maka permukaan objek tersebut terlihat

lebih jelas. Intensitas cahaya diffuse lebih kecil dikarenakan sifatnya penyebarannya yang ke

semua arah. Gambar 2.22 menggambarkan arah penyebaran cahaya pada model diffuse.

Gambar 2. 22 Arah penyebaran cahaya pada model diffuse

2.4.2 Ambient

Ambient merupakan cahaya latar belakang yang dipantulkan oleh objek secara seragam

ke segala arah. Intensitas cahayanya kecil karena penyebarannya ke segala arah. Gambar 2.23

menunjukkan model pencahayaan dengan ambient.

Page 17: Laporan Praktikum Komputer Grafik

Gambar 2.23 Model pencahayaan dengan ambient

2.4.3 Specular

Model pencahayaan dimana penyebaran cahayanya hanya ke arah tertentu saja,

sehingga hukum yang berlaku disini adalah sudut pantul sama dengan sudut datang cahaya.

Intensitas cahayanya tinggi karena hanya dipantulkan ke satu arah saja. Objek yang memiliki

material ini memiliki kesan berkilau. Gambar 2.24 menunjukkan penyebaran cahaya specular.

Gambar 2. 24 Arah penyebaran cahaya pada model specular

2.5 Komputer Grafik menggunakan OpenGL

OpenGL merupakan sebuah open-source graphics library yang dirancang untuk

berjalan di berbagai platform berbeda (multiplatform). Library yang dikembangkan oleh

perusahaan Silicon Graphics ini, dapat digunakan pada hampir semua tool pemrograman,

seperti Microsoft Visual C++, Visual Basic, Borland C++, Borland Delphi, Java, dll.

2.5.1 Graphics Library Utility Toolkit ( GLUT )

GLUT merupakan pustaka tambahan yang berjalan pada OpenGL, dibuat untuk

mempermudah penanganan window dan interaksi dengan user. Tanpa GLUT, memprogram

OpenGL agak sedikit sulit karena perlu menggunakan fungsi – fungsi penanganan window

dan event dari windows API.

2.5.2 Sintaks Dasar dalam OpenGL

Penamaan fungsi – fungsi dasar dalam OpenGL dimulai dengan tulisan “gl” yang

diikuti dengan kata berikutnya yang diawali dengan huruf kapital. Contohnya : glBegin (),

glClear (), glPixels (), glPolygonMode (), dsb.

Page 18: Laporan Praktikum Komputer Grafik

Beberapa fungsi membutuhkan argumen yang nilainya konstan dan tertentu. Untuk

penulisan konstanta, dimulai dengan tulisan “GL” yang diikuti kata yang ditulis dalam huruf

kapital semua, dengan underscore ( _ ) sebagai penghubungnya. Contohnya:

GL_AMBIENT_AND_DIFUSSE, GL_2D, GL_RGB, GL_CCW, dsb.

Tipe data dalam OpenGL ditulis dengan diawali dengan tulisan “GL” yang diikuti

dengan kata yang ditulis dalam huruf kecil semua.

Contohnya : GLbyte, GLshort, GLint, GLfloat, GLdouble, GLboolean, dsb.

2.5.3 Perintah – perintah dalam OpenGL

Beberapa perintah dalam OpenGL diberi nomor satu, dua dan tiga pada akhir katanya

yang diikuti pula dengan tipenya. Hal ini untuk menunjukkan jumlah parameter yang

digunakan beserta dengan tipe dari parameter tersebut. Contoh : glColor3f (1.0, 0.0, 0.0);

‘3’ digunakan untuk menunjukkan 3 parameter

‘f’ digunakan untuk menunjukkan tipe yang digunakan adalah floating point.

Kadang ada juga perintah – perintah yang diakhiri dengan huruf ‘v’, hal ini

menunjukkan perintah – perintah tersebut dalam format vektor. Jika perintah tidak diakhiri

dengan ‘v’, maka perintah tersebut dalam format skalar.

2.5.4 Header Files

Dalam semua program grafik yang menggunakan OpenGL, perlu disertakan beberapa

file header. File header yang perlu disertakan adalah GLUT yang menyediakan rutin untuk

pengaturan dalam menampilkan, memproyeksikan suatu objek. #include <GL/glut.h>

Gambar 2.25 berikut ini menunjukkan sebuah window OpenGL.

Gambar 2. 25 Tampilan Jendela OpenGL

Page 19: Laporan Praktikum Komputer Grafik

2.6 Environment Mapping

Dalam texture mapping terdapat suatu teknik yang disebut teknik environment mapping.

Teknik ini memantulkan tekstur dari lingkungan di sekelilingnya pada suatu permukaan tiga

dimensi yang melingkupi suatu objek. Teknik environment mapping ini pertama kali

diperkenalkan oleh Blinn dan Newell pada tahun 1976. Suatu objek yang menggunakan

teknik environment mapping, jika dilihat dari berbagai sudut maka dapat memantulkan tekstur

lingkungan pada bagian dimana objek tersebut dilihat sehingga tekstur yang terlihat akan

berbeda jika dilihat pada sudut pandang yang berbeda. Hal ini sedikit berbeda dibandingkan

dengan texture mapping biasa. Pada texture mapping biasa, tekstur yang terlihat akan tetap

sama walaupun dilihat dari sudut pandang manapun.

Contoh dari teknik environment mapping pada dunia nyata dapat diilustrasikan dengan

sebuah mobil yang diparkir di depan halaman sebuah rumah. Jika dilihat dari atas maka atap

permukaan mobil memantulkan awan dan langit dimana mobil itu ada, jika dilihat bagian sisi

mobil yang menghadap pintu rumah, maka akan dipantulkan pintu dan benda – benda lain

yang ada di hadapannya. Jika dilihat pada sisi lainnya maka dapat terlihat pepohonan yang

ada dihadapannya.

Page 20: Laporan Praktikum Komputer Grafik

BAB III

HASIL PERCOBAAN

1. Primitive Drawing

Syntax :

#include<GL/glut.h>

void userdraw()

{

static int tick=0;

void drawDot(int x,int y);

glBegin(GL_LINES);

glVertex2i(300,400);

glVertex2i(350,300);

glVertex2i(350,300);

glVertex2i(400,300);

glVertex2i(400,300);

glVertex2i(350,200);

glVertex2i(350,200);

glVertex2i(400,100);

glVertex2i(400,100);

glVertex2i(300,150);

glVertex2i(300,150);

glVertex2i(200,100);

glVertex2i(200,100);

Page 21: Laporan Praktikum Komputer Grafik

glVertex2i(250,200);

glVertex2i(250,200);

glVertex2i(200,300);

glVertex2i(200,300);

glVertex2i(250,300);

glVertex2i(250,300);

glVertex2i(300,400);

glEnd();

}

void display(void)

{

//clear screen

glClear(GL_COLOR_BUFFER_BIT);

userdraw();

glutSwapBuffers();

}

int main(int argc, char**argv)

{

glutInit(&argc,argv);//Inisialisasi Toolkit

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

glutInitWindowPosition(100,100);

glutInitWindowSize(640,480);

glutCreateWindow("Bintang");

Page 22: Laporan Praktikum Komputer Grafik

glClearColor(0.0f,0.0f,1.0f,0.0f);

gluOrtho2D(0.,640.,-240.,600.);

glutIdleFunc(display);

glutDisplayFunc(display);

glutMainLoop();

return 0;

}

Output :

2. Sistem koordinat 2D

Syntax :

#include <GL/glut.h>

typedef struct

Page 23: Laporan Praktikum Komputer Grafik

{

int x,y;

}point2D_t;

typedef struct

{

float r,g,b;

}color_t;

void setColor(color_t col)

{

glColor3f(col.r, col.g, col.b);

}

void drawPolygon(point2D_t pnt[],int n)

{

int i;

glBegin(GL_LINE_LOOP);

for (i=0; i<n; i++)

{

glVertex2i(pnt[i].x,pnt[i].y);

}

glEnd();

}

void fillpolygon(point2D_t pnt[],int n,color_t color)

Page 24: Laporan Praktikum Komputer Grafik

{

int i;

setColor(color);

glBegin(GL_POLYGON);

for (i=0; i<n; ++i)

{ glVertex2f(pnt[i].x, pnt[i].y);

}

glEnd();

}

void userdraw(void)

{

point2D_t

petakdasar[4]={{0,0},{0,80},{350,80},{350,0}};

color_t hijau ={0,1,0};

fillpolygon(petakdasar, 4, hijau);

drawPolygon(petakdasar,4);

point2D_t

tangga[4]={{10,10},{50,50},{310,50},{340,10}};

color_t merah ={1,0,0};

fillpolygon(tangga, 4, merah);

drawPolygon(tangga,4);

point2D_t

petaktengah1[4]={{110,50},{100,70},{260,70},{250,50}};

Page 25: Laporan Praktikum Komputer Grafik

color_t kuning ={1,1,0};

fillpolygon(petaktengah1, 4, kuning);

drawPolygon(petaktengah1,4);

point2D_t

petaktengah2[4]={{100,70},{80,90},{280,90},{260,70}};

color_t kuning2 ={1,1,0};

fillpolygon(petaktengah2, 4, kuning2);

drawPolygon(petaktengah2,4);

point2D_t

petaktengah3[4]={{80,90},{70,110},{290,110},{280,90}};

color_t kuning3 ={1,1,0};

fillpolygon(petaktengah3, 4, kuning3);

drawPolygon(petaktengah3,4);

point2D_t

batang2[4]={{160,510},{160,530},{200,530},{200,510}};

color_t hitam4 ={0,0,0};

fillpolygon(batang2, 4, hitam4);

drawPolygon(batang2,4);

point2D_t

batang[4]={{150,120},{170,520},{190,520},{210,120}};

color_t putih2 ={1,1,1};

fillpolygon(batang, 4, putih2);

drawPolygon(batang,4);

Page 26: Laporan Praktikum Komputer Grafik

point2D_t

petaktengah4[4]={{70,110},{70,120},{290,120},{290,110}};

color_t hitam3 ={0,0,0};

fillpolygon(petaktengah4, 4, hitam3);

drawPolygon(petaktengah4,4);

point2D_t

segitiga[3]={{170,530},{180,580},{190,530}};

color_t kuning4 ={1,1,0};

fillpolygon(segitiga, 3, kuning4);

drawPolygon(segitiga,3);

point2D_t

bayangbatang[4]={{160,530},{160,535},{200,535},{200,530}};

color_t putih3 ={1,1,1};

fillpolygon(bayangbatang, 4, putih3);

drawPolygon(bayangbatang,4);

point2D_t

bayangbatang2[4]={{200,510},{200,535},{203,535},{203,510}};

color_t putih4 ={1,1,1};

fillpolygon(bayangbatang2, 4, putih4);

drawPolygon(bayangbatang2,4);

point2D_t

tanggatgh1[4]={{140,10},{140,50},{150,50},{150,10}};

color_t hitam ={0,0,0};

Page 27: Laporan Praktikum Komputer Grafik

fillpolygon(tanggatgh1, 4, hitam);

drawPolygon(tanggatgh1,4);

point2D_t

tanggatgh2[4]={{210,10},{210,50},{220,50},{220,10}};

color_t hitam2 ={0,0,0};

fillpolygon(tanggatgh2, 4, hitam2);

drawPolygon(tanggatgh2,4);

point2D_t

tangga2[4]={{10,10},{50,50},{310,50},{340,10}};

drawPolygon(tangga2,4);

point2D_t

petaktengah11[4]={{110,50},{100,70},{260,70},{250,50}};

drawPolygon(petaktengah11,4);

point2D_t

petaktengah22[4]={{100,70},{80,90},{280,90},{260,70}};

drawPolygon(petaktengah22,4);

point2D_t

petaktengah33[4]={{80,90},{70,110},{290,110},{280,90}};

drawPolygon(petaktengah33,4);

point2D_t

batang3[4]={{150,120},{170,520},{190,520},{210,120}};

drawPolygon(batang3,4);

point2D_t

Page 28: Laporan Praktikum Komputer Grafik

anaktangga[4]={{150,40},{150,45},{210,45},{210,40}};

drawPolygon(anaktangga,4);

point2D_t

anaktangga2[4]={{150,30},{150,35},{210,35},{210,30}};

drawPolygon(anaktangga2,4);

point2D_t

anaktangga3[4]={{150,20},{150,25},{210,25},{210,20}};

drawPolygon(anaktangga3,4);

point2D_t

anaktangga4[4]={{150,10},{150,15},{210,15},{210,10}};

drawPolygon(anaktangga4,4);

}

void display(void)

{

//clear screen

glClear(GL_COLOR_BUFFER_BIT);

userdraw();

glutSwapBuffers();

}

int main(int argc, char **argv)

{

glutInit(&argc,argv);//Inisialisasi Toolkit

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

Page 29: Laporan Praktikum Komputer Grafik

glutInitWindowPosition(100,100);

glutInitWindowSize(500,640);

glutCreateWindow("MONUMEN NASIONAL JAKARTA");

glClearColor(0.0,0.0,1.0,0.0);

gluOrtho2D(0.,350.,-5.,600.);

glutIdleFunc(display);

glutDisplayFunc(display);

glutMainLoop();

return 0;

}

Output :

Page 30: Laporan Praktikum Komputer Grafik

3. Sistem koordinat 3D

Syntax :

#include <Windows.h>

#include <iostream>

#include <gl\GL.h>

#include <gl\GLU.h>

#include <gl\glut.h>

#include <math.h>

void cube()

{

//menggambar kubus dan transformasi tarnslasi ke titik 0.5 0.5 0.5 dan skala 1 1 1

glPushMatrix();

glTranslated(0.5,0.5,0.5);//cube

glScaled(1.0,1.0,1.0);

glutSolidCube(1.0);

glPopMatrix();

}

void setMaterial()

{

//set properties of surfaces material

GLfloat mat_ambient[] = {0.7f,0.7f,0.7f,1.0f}; // ada 4 jenis material yang dipakai, dengan

kombinasi warna tertentu

GLfloat mat_diffuse[] = {0.6f,0.6f,0.6f,1.0f};

Page 31: Laporan Praktikum Komputer Grafik

GLfloat mat_specular[] = {1.0f,1.0f,1.0f,1.0f};

GLfloat mat_shininess[] = {50.0f};

glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambient);

glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffuse);

glMaterialfv(GL_FRONT,GL_SPECULAR,mat_specular);

glMaterialfv(GL_FRONT,GL_SHININESS,mat_shininess);

}

void setLighting()

{

//set light sources

GLfloat lightIntensity[] = {0.7f,0.7f,0.7f,1.0f};//mensetting pencahayaan

GLfloat light_position[] = {2.0f,6.0f,3.0f,0.0f};

glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntensity);

glLightfv(GL_LIGHT0,GL_POSITION,light_position);

}

void setViewport()

{

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

double winHt = 1.0;//half height of the window

glOrtho(-winHt*64/48,winHt*64/48,-winHt,winHt,0.1,100.0);

}

void setCamera()

Page 32: Laporan Praktikum Komputer Grafik

{

//set the camera

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

gluLookAt(3.3,3.3,3.0,0,0.25,0,0.0,1.0,0.0);

}

void displayObject()

{

setMaterial();

setLighting();

setViewport();

setCamera();

//startDrawing

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

cube();//memanggil fungsi menggambar kubus

glFlush();//mengirim smua objek untuk dirender

}

void main(int argc, char **argv)

{

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB|GLUT_DEPTH);

glutInitWindowSize(640,480);

glutInitWindowPosition(100,100);

Page 33: Laporan Praktikum Komputer Grafik

glutCreateWindow("kubus 3D");

glutDisplayFunc(displayObject);//fungsi dari display object yang menggabungkan kubus

lighting material dan kamera

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

glShadeModel(GL_SMOOTH);

glEnable(GL_DEPTH_TEST);

glEnable(GL_NORMALIZE);

glClearColor(1.0f,1.0f,1.0f,0.0f);

glViewport(0,0,640,480);

glutMainLoop();

}

Output :

Page 34: Laporan Praktikum Komputer Grafik

BAB IV

ANALISA HASIL PERCOBAAN

Analisis dan Perancangan Berorientasi Objek

Pada awalnya terdapat dua pendekatan yang digunakan dalam melakukan analisis

perangkat lunak, yaitu analisis berorientasi data dan berorientasi aksi. Analisis berorientasi

data lebih mengutamakan pada data daripada aksi, begitu juga sebaliknya, analisis

berorientasi aksi lebih mengutamakan pada aksi daripada data.

Kelemahan dari kedua jenis pendekatan ini adalah data dan aksi tidak dapat dipisahkan

pada kenyataannya. Suatu item data tidak dapat berubah kecuali dilakukan aksi pada item data

tersebut. Demikian juga dengan aksi tanpa adanya data yang berhubungan tidak berarti apa –

apa.

Karena kelemahan diatas, maka munculah pendekatan berorientasi objek yang memberi

penekanan yang sama antara data dan aksi. Dalam analisis berorientasi objek, data disebut

sebagai atribut dan aksi sebagai methods.

Analisis berorientasi objek saat ini lebih sering dipakai dalam mengembangkan

perangkat lunak. Selain karena faktor tersebut diatas, faktor pendorong lainnya dalam

penggunaan analisis berorientasi objek, diantaranya karena analisis ini memberi kemudahan

dalam pengembangan perangkat lunak karena analisis ini menggunakan pendekatan yang

“membungkus” kerumitan yang ada. Selain itu dengan menggunakan analisis ini,

pengembang diberi kemudahan dalam melakukan pemeliharaan karena kode program dibagi

ke dalam modul – modul sesuai dengan objeknya, sehingga jika dilakukan perubahan pada

suatu objek tidak banyak mempengaruhi objek - objek lainnya.

Notasi UML3 digunakan dalam analisis berorientasi objek yang merupakan representasi

permasalahan dengan bentuk Diagram Use Case, skenario, Diagram Kelas dan Diagram

Transisi. Diagram use case memberi gambaran mengenai fungsi – fungsi yang ada pada

perangkat lunak secara umum, selain itu juga dapat memberi gambaran interaksi antara kelas

– kelas yang ada.

Page 35: Laporan Praktikum Komputer Grafik

PENUTUP

Bahasa pemrograman Visual C++ termasuk bahasa tingkat menengah penempatan ini

hanya menegaskan bahwa Visual C++ bukan bahasa pemrograman yang berorientasi pada

mesin, yang merupakan ciri bahasa tingkat rendah melainkan berorientasi pada obyek tetapi

dapat dinterprestasikan oleh mesin dengan cepat, secepat bahasa mesin inilah salah satu

kelebihan Visual C++ yaitu memiliki kemudahan dalam menyusun programnya semudah

bahasa tingkat tinggi namun dalam mengesekusi program secepat bahasa tingkat rendah.

Array merupakan bagian dari struktur data yaitu termasuk kedalam struktur data

sederhana yang dapat di definisikan sebagai pemesanan alokasi memory sementara pada

komputer. Apabila kita membuat program dengan data yang sudah kita ketahui batasnya maka

kita menggunakan Array (type data statis), namun apabila datanya belum kita ketahui

batasnya maka gunakan pointer (type data dinamis).

Demikianlah yang bisa saya sampaikan dalam Laporan Praktikum Komputer Grafik ini.

Apabila masih terdapat kekurangan dalam laporan praktikum ini saya mohon dapat

dimaklumi. Atas segala perhatiannya saya ucapkan terima kasih.

DAFTAR PUSTAKA

http://elib.unikom.ac.id/files/disk1/304/jbptunikompp-gdl-pauluskard-15185-3-bab2.pdf

http://elib.unikom.ac.id/files/disk1/117/jbptunikompp-gdl-s1-2007-emilemilia-5821-bab-ii-l-

i.pdf#page=1&zoom=auto,0,522

eprints.undip.ac.id/32226/6/M02_Fitriyeni_chapter_II.pdf

repository.usu.ac.id/bitstream/123456789/20019/4/Chapter%20II.pdf

xa.yimg.com/kq/groups/23340420/221960515/name/Pertemuan1.pdf

lenterajiwaku.files.wordpress.com/2012/09/minggu1.pdf