Transformasi 2d

Transformasi dua dimensi
Dasar Teori

Viewport
Objek yang akan digambar pada layar biasanya memiliki ukuran yang jauh lebih besar dibanding ukuran layar, sehingga perlu dilakukan pemetaan/transformasi yang memungkinkan objek tersebut bisa digambar pada layar. Meskipun demikian, objek seringkali terlalu rumit untuk ditampilkan pada layar dengan koordinat yang sangat terbatas. Sehingga biasanya kita memilih bagian tertentu dari objek untuk ditampilkan pada layar. Didalam memilih objek yang akan ditampilkan biasanya dibatasi oleh sebuah kotak yang disebut dengan jendela (window).
Dalam praktek kita bisa menggunakan seluruh atau sebagian lebar layar untuk menmpilkan objek yang berada pada sebuah jendela. Daerah layar yang dipilih untuk menampilkan objek yang dimaksud disebut viewport. Dalam keadaan normal, viewport akan meliputi seluruh layar lebar. Meskipun demikian, kita bisa memilih bagian tertentu dari layar untuk dijadikan sebuah viewport.
Transformasi
Sejumlah objek seringkali mempunyai sifat simetri. Sehingga untuk menggambar seluruh objek, cukup dilaksanakan dengan melakukan manipulasi terhadap objek yang sudah ada, misalnya dengan pencerminan, pergeseran, atau pemutaran objek yang sudah digambar terlebih dahulu.
Kita akan mempelajari cara mentransformasikan objek grafis khususnya objek grafis 2D sebagai salah satu cara untuk memanipulasi objek grafis dan sistem koordinat yang dipakai dengan cara yang lebih terorganisir dan efisien. Salah satu contoh penting untuk diketahui adalah pemakaian transformasi jendela ke viewport.
Ada dua cara untuk melakukan transformasi, yaitu transformasi objek dan transformasi kordinat. Pada transformasi objek semua titik pada sembarang objek akan dirubah sesuai dengan aturan tertentu sementara kordinatnya tetap. Pada transformasi sistem koordinat, objek tetap tetapi karena sistem koordinatnya diganti maka kedudukan objek harus disesuaikan dengan kedudukan sistem kordinat yangbaru.
Jenis-jenis transformasi
1.Translasi
Sembarang titik pada bidang xy bisa digeser ke sembarang tempat dengan menambahkan besaran pada absis x dan ordinat y. Translasi adalah transformasi dengan bentuk tetap memindahkan objek apa adanya. Dengan menggunakan persamaan Q = PM + tr, maka hasil pergeseran bisa dinyatakan sbb:
(Qx, Qy) = (Px +trx, Py+try)
dimana trx adalah vektor translasi menurut sumbu x sedang try adalah vektor translasi menurut sumbu y, dan matrik M bisa dikatakan sebagai matrix identitas.
Sembarang objek bisa digeser ke posisinya yang baru dengan mengoperasikan persamaan diatas pada setiap titik dari objek tersebut. Hal ini karena setiap garis dari objek tersebut terdiri dari titik-titik yang jumlahnya tak terbatas, maka proses penggeseran bisa berlangsung sangat lama. Tetapi pada kenyataannya kita cukup menggeser dua titik ujungnya saja dan kemudian menggandeng dua titik tersebut untuk membentuk garis hasil pergeseran.
Contoh translasi:
Untuk menggambarkan translasi objek yang berupa garis dengan koordinat A(10,10), B(30,10) dengan vektor translasi (10,20)

Titik A Qx=Px +trx =10 + 10 =20
Qy=Py + try =10+20=30
Hasil translasi A = (20, 30)
Titik B Qx=Px + trx = 30+10 = 40
Qy=Py + try = 10+20 =30
Hasil translasi B = (40, 30)

2.Rotasi
Kita bisa memutar objek searah dengan arah perputaran jarum jam(dinyatakan dengan sudut negatif) atau berlawanan arah dengan arah jarum jam(dinyatakan sebagai sudut positif).
Dengan menganggap bahwa besarnya sudut putar adalah sama dengan , maka posisi sebuah titik yang baru adalah:
Qx = Pxcos() - Pysin()
Qy = Pxsin() + Pycos()
Dengan menggunakan notasi matrix, maka besaran M bisa dikatakan sbb:
M =cos(0) sin(0)
-sin(0) cos(0)

3.Skala
Penskalaan adalah proses untuk memperbesar atau memperkecil suatu gambar. Dengan faktor absolut yang lebih besar dari 1, akan diperoleh gambar yang lebih besar dan semakin menjauh dari titik(0,0). Sebaliknya dengan faktor skala yang mempunyai nilai absolut lebih kecill dari 1, akan diperoleh gambar yang lebih kecil dan mendekat ke titik (0,0).
Dengan menggunakan persamaan Q=PM+tr, maka hasil penggeseran bisa dinyatakan sebagai:
(Qx, Qy)=(SxPx, SyPy)
Dengan Sx adalah faktor skala ke arah mendatar dan Sy adalah faktor skala arah tegak dan ofset vektor tr bernilainol. Dengan menggunakan notasi matrix, maka matrixM bisa dinyatakan sbb:
M= (sx 0)
(0 sy)



PROGRAM TRANSFORMASI

Dengan memakai delphi, Buatlah program dengan tampilan seperti dibawah ini. Bila program dijalankan, ada dua pilihan:
Jenis transformasi Memutar
Jika memilih transformasi memutar kita disuruh menginputkan besar sudut yang diminta dan kemudian inputkan x1, y1, x2, y2 lalu klik gambar maka akan tampil gambar pada kotak paintbox dan klik transformasi maka gambar akan memutar sesuai sudut yang diisi. Dan gambar asli tetap nampak.
Jenis transformasi Perbesar/perkecil
Jika memilih transformasi perbesar/perkecil kita disuruh menginputkan besar skalanya dan kemudian inputkan x1, y1, x2, y2 lalu klik gambar maka akan tampil gambar pada kotak paintbox dan klik transformasi maka gambar akan tampil sesuai skala yang diisi.



programnya adalah sbb:
rogram transformasi gambar
procedure TForm1.GambarClick(Sender: TObject);
begin
if ((IsiX1.Text='')or (IsiX2.text='') or (IsiY1.text='' )or (IsiY2.text='')or
(IsiX1.Text=' ')or (IsiX2.text=' ') or (IsiY1.text=' ' )or (IsiY2.text=' ')) then
MessageDlg('X1, Y1, X2 dan Y2 harus anda isi',mtWarning, [mbOk],0)
else
with ttk do
begin
x1 := strtoint(IsiX1.Text);
y1 := strtoint(IsiY1.Text);
x3 := strtoint(IsiX2.Text);
y3 := strtoint(IsiY2.Text);
x2 := x3;
y2 := y1;
x4 := x1;
y4 := y3;
xn := (x3 + x1) div 2;
yn := (y3 + y1) div 2;
PaintBox1.Canvas.Brush.Color := claqua;
Paintbox1.Canvas.Polygon([Point(x1, y1), Point(x2, y2), point(x3, y3), Point(x4, y4)]);
end;
end;
procedure TForm1.RadioTransformasiClick(Sender: TObject);
begin
if RadioTransformasi.ItemIndex =0 then
begin
Label1.Caption := 'Besar Sudut';
pil.caption:='Derajat';
end
else
begin
Label1.Caption := 'Besar Skala';
pil.caption:='Kali';
end;
end;


{ procedure transformasi }

procedure TForm1.TransformasiClick(Sender: TObject);
var
temp : Titik;
tet : integer;
s, kali : real;
lebar, tinggi : integer;
begin
{transformasi untuk memutar }
if ((IsiX1.Text='')or (IsiX2.text='') or (IsiY1.text='' )or (IsiY2.text='')or
(IsiX1.Text=' ')or (IsiX2.text=' ') or (IsiY1.text=' ' )or (IsiY2.text=' ')
or (IsiPil.text='')or (IsiPil.text=' ') or (RadioTransformasi.ItemIndex=-1)) then
MessageDlg('PENGISIAN DATA BELUM LENGKAP',mtWarning, [mbOk],0)
else
if RadioTransformasi.itemindex = 0 then
begin
with ttk do
begin
tet:=strtoint(IsiPil.text);
s := tet * pi / 180;
temp.x1 := xn + round((x1 - xn)*(cos(s))-(y1 - yn)*(sin(s)));
temp.x2 := xn + round((x2 - xn)*(cos(s))-(y2 - yn)*(sin(s)));
temp.x3 := xn + round((x3 - xn)*(cos(s))-(y3 - yn)*(sin(s)));
temp.x4 := xn + round((x4 - xn)*(cos(s))-(y4 - yn)*(sin(s)));
temp.y1 := yn + round((x1 - xn)*(sin(s))+(y1 - yn)*(cos(s)));
temp.y2 := yn + round((x2 - xn)*(sin(s))+(y2 - yn)*(cos(s)));
temp.y3 := yn + round((x3 - xn)*(sin(s))+(y3 - yn)*(cos(s)));
temp.y4 := yn + round((x4 - xn)*(sin(s))+(y4 - yn)*(cos(s)));
end;
ttk.x1 := temp.x1;
ttk.x2 := temp.x2;
ttk.x3 := temp.x3;
ttk.x4 := temp.x4;
ttk.y1 := temp.y1;
ttk.y2 := temp.y2;
ttk.y3 := temp.y3;
ttk.y4 := temp.y4;
PaintBox1.Canvas.Brush.Color :=clred;
with ttk do
Paintbox1.canvas.Polygon([Point(x1, y1), Point(x2, y2), Point(x3, y3), Point(x4, y4)]);
end

{transformasi untuk memperbesar/memperkecil }
else
begin
kali :=strtofloat(IsiPil.text);
with ttk do
begin
lebar := x3 - x1;
tinggi := y3 - y1;
x1 := xn - round(lebar / 2 * kali );
x3 := xn + round(lebar / 2 * kali );
y1 := yn - round(tinggi / 2 * kali );
y3 := yn + round(tinggi / 2 * kali );
x2 := x3;
y2 := y1;
x4 := x1;
y4 := y3;
end;
PaintBox1.Canvas.Brush.Color := clblue;
with ttk do
Paintbox1.canvas.Polygon([Point(x1, y1), Point(x2, y2), Point(x3, y3), Point(x4, y4)]);
end;
end;

procedure TForm1.KeluarClick(Sender: TObject);
begin
Close;
end;

procedure TForm1.HapusClick(Sender: TObject);
begin
Paintbox1.Refresh;
Label1.caption := 'Pilihan ';
IsiPil.text := ' ';
IsiX1.text := ' ';
IsiX2.text := ' ';
IsiY1.text := ' ';
IsiY2.text := ' ';
RadioTransformasi.itemindex := -1 ;
end;


Downloads :
Transformasi.zip
Transformasi2D.zip
Program2DDelphi.zip

Transformasi 3d

3D Graphics Visual Realism

Realitas grafis 3D
Yang dimaksud realitas grafis 3D adalah bagimana membentuk suatu obyek 3D agar sesuai dengan kenyataan suatu obyek yang dilihat sehari-hari. Sebagian besar obyek nyata bersifat solid atau tidak tembus pandang.
Pada contoh bab sebelumnya obyek yang dibuat masih dalam bentuk rangka (wireframe). Dalam implementasinya model rangka ini masih banyak dipakai untuk mengetahui bagian dlaam suatu obyek.
Relaitas grafis 3D dapat dilakukan dengan : mengarsir poligon, rendering, dan shadowing.
Pewarnaan dan Arsiran (brush)
Terdapat 3 metode pewarnaan dalam grafis baik untuk mewarnai garis (Pen) maupun mengarsir poligon (Brush)
1.dengan variabel default (bawaan C++ Builder). Biasanya digunakan untuk warna2 dasar

untuk mewarnai garis
Canvas->Pen->Color=clRed ;//garis warna merah

untuk mewarnai arsiran
Canvas->Brush->Color=clRed ;//arsiran warna merah


clRed : merah
clBlue:biru
clBlack:hitam
clYellow:kuning
dll

2.dengan RGB
RGB merupakan warna yang dihasilkan kombinasi dari Red[R]-Green[G]-Blue[B], dengan nilai R:0-255 G:0-255 B:0-255, nilai 0 pada masing2 warna adalah hitam , dan 255 adalah warna maksimal

untuk mewarnai garis
Canvas->Pen->Color=RGB(100,100,100) ;//garis warna abu2

untuk mewarnai arsiran
Canvas->Brush->Color=RGB(0,255,0) ;//arsiran warna hijau

 kombinasi warna dapat dilihat di custom color Msword
3.dengan CMY
CMY seperti haknya RGB meruppakan warna yang dikombinasikan Cyan[C],Magenta[M], Yellow[Y]
tidak dibahas disini
4.dengan HSL
HSL seperti haknya RGB meruppakan warna yang dikombinasikan Hue[H],Saturation[S], Lamp[LY]
tidak dibahas disini

Gaya arsiran (style)
Arsiran dari suatu poligon dapat dibentuk dalam beberapa macam dengan perintah arsiran adalah

Canvas->Brush->Style=arsiran
Arsiran:
bsSolid: arsiran homogen/solid/pejal
bsCross:arsiran kotak-kotak
bsDiagonal: arsiran bergaris diagonal
bsVertical: arsiran bergaris tegak
bsHorisontal: arsiran bergaris mendatar
dll

Mode Pen
Garis yang membetuk suatu obyek juga dapat dibentuk

Canvas->Pen->Style=bentuk
Bentuk:
psSolid :garis homogen
psDot:garis berbentuk titik-titik
psDash: garis berbentuk garis kecil2
psDashDot: garis berbentuk kombinasi dash dan dot



Membuat arsiran pada grafis 3D
1.Ubah perintah Polyline (membentuk bagan sisi banyak ->2- tetapi berbentuk rangka/kawat (wireframe) menjadi Polygon (dapat diarsir/di blok)
2.tulis perintah untuk membuat arsir sebelum masing-masing polygon
Canvas->Brush->Color=warna
3.jalankan
4.akan terlihat bahwa tampilan gambar belum dapat diidentifikasi secara jelas –saling tumpang tindih (bentuk belum riil), karena proses penggambaran poligon belum memenuhi kaidah/algoritma pelukis (painter’s algorithm)

Algoritma pelukis (painter’s algorithm)
Algoritma pelukis adalah cara/urutan mengarsir suatu obyek yang saling menutupi dimulai dari yang terjauh (dari pengamat) dulu.

Maka agar pada grafis 3D poligon yang jauh akan tertutup oleh poligon yang dekat dengan pengamat, maka setiap poligon harus diurutkan proses pembuatannya dimulai dari yang terjauh dari pengamat/user (nilai koordinat z paling kecil)

Untuk mengurutkan poligon , maka nilai koordinat z dari setiap poligon harus dihitung rata-rata dari ke empat titik yg membetuk poligon.

Berdasarkan z rata-rata setiap poligon ini maka proses penampilan poligon dimulai dari yg bernilai z terkecil (ditulis paling atas pada program)

Implementasi Poligon dan Arsiran
Untuk membuat suatu obyek menjadi solid maka obyek tersebut harus tersusun atas poligon-poligon. Poligon ini tidak harus segi empat, tetapi bisa segitiga, dlsb sesuai dengan keperluan.
Langkah2 poligonisasi sebagai berikut.
1.Identifikasi titik-titik poligon yang membetuk suatu obyek, misal poligon 1 adalah bagian depan kotak (titik 1, titik 2,tiitk 3, dan titik 4), poligon 2 bagian belakang kotak (titik 5,titik 6, titik 7, dan titik8) dan seterusnya.
(Identifikasi ini dilakukan sebelum proses transformasi ke koordinat layar misal ,mulai nomor program 124 dst)
2.Urutkan posisi poligon tersebut berdasarkan nilai z-nya (vpn_pers[I][2]), sehingga poligon dengan nilai z paling kecil diletakkan kapa posisi pertama dst. Hal ini dilakukan agar proses pembuatan arsiran dimulai dari poligon yang paling jauh (algoritma pelukis-painter’s algorithm).
3.Bila tidak ada proses pengurutan maka poligon akan saling tumpang-tindih. Nilai z ini dapat dihitung dari nilai z rata-rata titik-titik yang membentuk poligon
4.Lakukan transformasi ke koordinat layar
5.Gambar poligon beserta arsiran setiap poligon(brush)
Untuk menggambar poligon maka perintah Polyline diganti menjadi Polygon, sedangkan untuk mengarsir, sebelum perintah poligon, perlu diatur arsiran sbb
Canvas ->Brush-> Color=warna arsir

Sampai langkah ini realitas obyek sudah mulai nampak , yakni bagian yang berada di belakang tidak nampak lagi, akan tetapi realitas ini masih dapat ditingkatkan yakni dengan efek rendering , yaitu perubahan warna akibat pencahayaan dari posisi tertentu (tidak di bahas disini, ada di buku-buku referensi grafika komputer), shadowing, yaitu efek bayangan.
Bila obyek yang akan di proses memilki cakupan yang besar, maka agar proses komputasi lebih cepat diperlukan clipping atau pemotongan (teori ada di berbagai buku referensi).

Implementasi Program
Untuk menerapkan visual realism dasar dilakukan tahapan sbb
1.Bari aplikasi sebelumnya ubahlah semua kode
……Polyline…. menjadi …Polygon ………
misal :
PaintBox1->Canvas->Polyline((TPoint*)t6,4);
Diganti menjadi
PaintBox1->Canvas->Polygon((TPoint*)t6,4);
2.Tambahkan perintah untuk mengarsir poligon sebelum/diatas perintah poligon dengan
……… Canvas->Brush->Color=warna..
warna, warna arsiran dapat diatur dengan
(i) konstanta, misal biru -> clBlue
merah -> clRed
kuning->clYellow
misal :
……… Canvas->Brush->Color=clBlue; arsir biru


(ii) kombinasi RGB(Red Green Blue-Merah Hijau Biru) misal :
……… Canvas->Brush->Color=RGB(200,100,0)
artinya nilai Red:100, Green 100, Blue:0
masing-masing warna memiliki range 0-255

misal poligon berwarna merah, maka tambahkan perintah arsir pada setiap poligon sbb
…………..
PaintBox1->Canvas->Color=clRed;
PaintBox1->Canvas->Polygon((TPoint*)t6,4);
……………….


3.Jalankan aplikasi, amati yang terjadi ! Mengapa gambar balok belum seperti yang diharapkan ? artinya wujud balok masih kacau ?

Pengurutan Poligon
Agar bentuk 3d rterlihat riil maka sesuai dengan algoritma pelukis, maka poligon yang lebih jauh diteampilkan lebih dulu. Didalam pemrograman untuk menrpakna tersebut dilakukan langkah sbb
1.Buat nilai rata-rata setiap poligon dan tampung dlaam variabel dengan index tersendiri
2.dengan algoritma untuk sorting (misal: bubble sort) , Urutkan setiap nilai sesuai dengan nilai z-nya.
3.tampilkan poligon tersebut.



Downloads :
3D Graphics Visual Realism.zip
7Grafik3D.zip
Trans3D.zip
Transformasi 3 Dimensi.zip

OpenGL

Pengenalan openGL

OpenGL adalah suatu spefikasi grafik yang low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluan-keperluan pemrograman grfis.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 berbagai 3D accelerators, memamerkan oleh programmer dengan satu, seragam API.
Untuk menyembunyikan kemampuan yang berbeda dari hardware platform, oleh semua yang memerlukan mendukung implementasi penuh fitur opengl set (menggunakan software emulation jika diperlukan).
1.1.Evolusi OpenGL

Pendahulu openGL adalah IRIS GL dari Silicon Grapics.Padamulanya adalah library grafis 2D,yang berefolusi menjasi API program 3D untuk workstation canggih milik perusahaan tersebut.
OpenGL adalah hasil dari usaha SGI untuk mengembangkan dan meningkatkan kemampuan portable IRIS.API grafis yang baru akan menawarkan kemampuan IRIS GL tetapi dengan standar yang lebih terbuka,dengan input dari pembuatan hardware lain dan sistem operasi lain,dan akn memudahkan adaptasi ke hardware platform dan sistem operasi lain.
Untuk lebih mempopulerkan openGL SGI mengijinkan pihak lain untuk mengembangkan standart openGL,dan beberapa vendor menyambut hal tersebut dengan membentuk OpenGL Architecture Review Board (ARB) Pendiri openGL adalah SGI,Digital Equepment Corporation,IBM,Intel dan Microsoft,pada tanggal 1 juli 1992 OpenGL versi 1.0 diperkenalkan.


Letak openGL dalam aplikasi gambar di atas pada umumnya ketika aplikasi berjalan program tersebut memanggil banyak fungsi,beberapa yang dibuat oleh programer dan beberapa yang disediakan oleh sistem operasi bahasa pemrograman.Aplikasi windows membuat output pada layar biasanya dengan memanggil sebual API windows yang disebut Graphics Devise Interfase,yang memungkinkan sebagai penulisan teks pada sebuah windows,menggambar garis 2D sederhana dan lainnya.Implementasi dari openGL mengambil permintaan grafis dari aplikasi dan membangun sebuah gambar berwarna dari grafis 3D,kemudian memberikan gambar tersebut ke GDI untuk ditampilkan pada layar monitor.



1.2.Cara kerja openGL

OpenGL lebih mengarah pada prosedural daripada sebuah deskriptif API grafis.Untuk mendeskripsikan scene dan bagaimana penampilannya,sebenarnya programer lebih tau untuk menentukan hal-hal yang dibutuhkan untuk menghasilkan efek yang di inginkan.Langkah tersebut termasuk memanggil banyak perintah openGL,perintah tersebut digunakan untuk menggambarkan grafis primitif seperti titik,garis dan poligon dalam tiga dimensi.Sebagai tambahan,openGL mendukung lighting,shading,texture mapping,blending,transparancy,dan banyak kemampuan efek khusus lainnya.

OpenGL mempunyai bnayak fungsi dan penggunaan perintah yang sangat luas, penggunaan openGL membutuhkan library tambahan yang harus di letakkan pada direktory system dari windows (OS),yaitu :
OpenGL32.dll
Glu32.dll
Glut32.dll

1.2.1.Inisialisasi awal
Inti dari tahapan ini adalah mengatur view port dan persepektif untuk penampilan
obyek ke dalam layar monitor,viewport adalah besarnya layar monitor(image) yang dipakai
untuk menampilkanobyek,sedangkan persepektif yang dimaksud adalah pengaturan sumbu z
dalam penampilan obyek 3 dimensi,sehingga user dapat melihat obyek seolah-olah dalam
bidang 3 dimensi (X-Y-Z),selain itu penggambaran obyek yang dilakukan oleh programer
juga dapat menggunaan koordinat 3 dimensi.
Selain ke dua tujuan di atas pada tahap ini juga dilakukan koneksi awal dengan library
openGL, koneksi ini dilakukan supaya fungsi-fungsi yang di sediakan openGL dapat
digunakan.Funsi/prosedur yang digunakan :
LoadGlut(‘glut32.dll) - pemanggilan library openGL
InitGL – inisialisasi openGL awal yang harus dilakukan
glViewport – untuk pengaturan viewport
glMatrixMode – pengaturan viewport
gluPerspective – pengaturan persepektif

Contoh script untuk inisialisasi openGL :
Try
LoadGlut(‘glut32.dll’);
InitGL;
Exept on e := exeption do
Begin
messageDlg{e.message,mtError,[mbOk],};
Halt {1};
End;
End;
Script di atas merupakan script yang paling sederhana, dalam artian minimal diperlukan
untuk menginisialisasi penggunaan openGL.Fungsi-fungsi lain seperti yang disebut diatas
seperti glViewport,glMatrixMode,dapat di tambah kan pada script sesuai dengan kebutuhan.

1.2.2.Pembuatan gambar

Didalam openGL pembuatan obyek dilakukan dengan titik-titik 3 dimensi,dengan
mode GL_QUARDS, maka otomatis setiap 4 titik digambar menjadi sebuah bidang segi
empat,sedangkan mode GL_LINES, pada setiap 2 titik digambar manjadi sebuah garis.Di
dalam tahap ini setiap garis atau bidang juga dapat di atur warnanya.
Funsi atau prosedur yang digunakan :
mode GL_QUARDS – menggambarkan segi empat
mode GL_LINES – menggambark garis
glVertex3f- penentuan titik 3 dimensi
glColor3f – penentuan warna

Berikut ini akan diberikan contoh script sederhana (tidak utuh,hanya sepengggaalan)
beserta output yang dihasilkan,untuk menunjukkan proses pembuatan gambar atau obyek
pada delphi,dengan library tambahan open GL.

Contoh pembuatan titik 3 warna :
glClearColor(1,1,1,0); //warna dasar ;1,1,1,0 adalah putih
glBegin(GL_POINTS); //untuk membuat titik
glColor3f(1,0,0); //penentuan warna titik 1 dan posisinya
glVertex3f(-0.1,-0.1,0.1);
glColor3f(0,1,0); //penentuan warna titik 2 dan posisisya
glVertex3f(0.1,-0.1,0.1);
glColor3f(0,0,1); //penentuan titik 3 dan posisinya
glColor3f(0,0.1,-0.1);
glEnd;

Contoh pembuatan garis :
glClearColor(1,1,1,0); // warna background putih
glColor3f(0,0,0); // warna garis hitam
glBegin(GL_LINES); //digunakan untuk membua garis tiap 2 titik yang ada
glVertex3f(0,0,-0.1); //garis 1
glVertex3f(0.3,0.2,0.1);
glVertex3f(0.1,-0.1,-0.2); // garis 2
glVertex3f(0.3,-0.2,0.1);
glEnd;


Contoh pembuatan bidang segi empat :
glClearColor(1,1,1,0); // warna background putih
glBegin(GL_QUARDS); //untuk membuat segi empat dalam tiap4 titik
glColor3f(1,0,0); //posisi titik 1 dengan gradiasi warnanya
glVertex3f(-0.2,0.2,0.2);
glColor3f(1,0,0); //posisi titik 2 dengan gradiasi warnanya
glVertex3f(0.2,0.2,0.2);
glColor3f(1,0,1); //posisi titik 3 dengan gradiasi warnanya
glVertex3f(0.2,-0.2,0.2);
glColor3f(0,1,1); //posisi titik 4 dengan gradiasi warnanya
glVertex3f(-0.2,-0.2,0.2);
glEnd;



Contoh gambar 3D menggunaan openGL pada delphi :

program BasicDelphi;

uses
Windows,Messages,OpenGL;

var
HGLRC_VarG : HGLRC;
HDC_VarG : HDC;
HWND_VarG : HWND;

keys : array [0..255] of bool;
SudutPutar : single = 0.0;

//set ukuran window OpenGL
LebarW : integer = 350;
TinggiW : integer = 350;


function WindowProc(HWND_P : HWND; MESSAGE_P : UINT; WPARAM_P :
WPARAM; LPARAM_P : LPARAM) : LRESULT; stdcall;
begin
case MESSAGE_P of
WM_KEYUP:
begin
keys[WPARAM_P] := false;
result:=0;
end;

WM_KEYDOWN:
begin
keys[WPARAM_P] := true;
result:=0;
end;

end;
Result := DefWindowProc(HWND_P, MESSAGE_P, WPARAM_P, LPARAM_P);
end;

procedure CloseOpenGL;
begin

if HGLRC_VarG <> 0 then
begin
wglMakeCurrent(HDC_VarG, 0);
wglDeleteContext(HGLRC_VarG);
end;

releaseDC(HWND_VarG, HDC_VarG);
destroywindow(HWND_VarG);
UnregisterClass('OpenGl3DwithDelphi',hInstance);

HGLRC_VarG := 0;
HDC_VarG := 0;
HWND_VarG := 0;
end;

function CreateOpenGL(HINST_P : HINST) : boolean stdcall;
var
iPixelFormat : integer;
WCLASSEX : WNDCLASSEX;
pfd : PIXELFORMATDESCRIPTOR;

begin
WCLASSEX.cbSize := Sizeof(WCLASSEX);
WCLASSEX.style := CS_HREDRAW or CS_VREDRAW;
WCLASSEX.lpfnWndProc := @WindowProc;
WCLASSEX.cbClsExtra := 0;
WCLASSEX.cbWndExtra := 0;
WCLASSEX.hInstance := HINST_P;
WCLASSEX.hIcon := LoadIcon(0, IDI_WINLOGO);
WCLASSEX.hCursor := LoadCursor(0,IDC_WAIT);
WCLASSEX.hbrBackground := 0;
WCLASSEX.lpszMenuName := nil;
WCLASSEX.lpszClassName:= 'OpenGl3DwithDelphi';

if RegisterClassEX(WCLASSEX) = 0 then
begin
MessageBox(0, 'Registrasi Window Class gagal, program dihentikan', 'Error window', MB_OK or MB_ICONERROR);
Result := false;
exit;
end;

HWND_VarG := CreateWindowEx(0,'OpenGl3DwithDelphi',
'Gambar 3D(Tekan Esc untuk keluar)',0,0,0,LebarW, TinggiW,0, 0, HINST_P, nil);

if HWND_VarG = 0 then
begin
MessageBox(0, 'Pembuatan OpenGL window gagal, program dihentikan', 'Error window',MB_OK or MB_ICONERROR);
Result:=false;
exit;
end;

pfd.nSize := SizeOf(PIXELFORMATDESCRIPTOR);
pfd.nVersion := 1;
pfd.dwFlags := PFD_DRAW_TO_WINDOW or PFD_SUPPORT_OPENGL or PFD_DOUBLEBUFFER;
pfd.iPixelType := PFD_TYPE_RGBA;
pfd.cColorBits := 16;
pfd.cRedBits := 0;
pfd.cRedShift := 0;
pfd.cGreenBits := 0;
pfd.cBlueBits := 0;
pfd.cBlueShift := 0;
pfd.cAlphaBits := 0;
pfd.cAlphaShift := 0;
pfd.cAccumBits := 0;
pfd.cAccumRedBits := 0;
pfd.cAccumGreenBits := 0;
pfd.cAccumBlueBits := 0;
pfd.cAccumAlphaBits := 0;
pfd.cDepthBits := 16;
pfd.cStencilBits := 0;
pfd.cAuxBuffers := 0;
pfd.iLayerType := PFD_MAIN_PLANE;
pfd.bReserved := 0;
pfd.dwLayerMask := 0;
pfd.dwVisibleMask := 0;
pfd.dwDamageMask := 0;

HDC_VarG := GetDC(HWND_VarG);
if HDC_VarG = 0 then
begin
MessageBox(0, 'Pembuatan Device Context gagal, program dihentikan', 'Error device',MB_OK or MB_ICONERROR);
Result := false;
exit;
end;

iPixelFormat := ChoosePixelFormat(HDC_VarG, @pfd);

if iPixelFormat = 0 then
begin
MessageBox(0, 'Pencarian Pixel Format gagal, program dihentikan', 'Error pixel format',MB_OK or MB_ICONERROR);
Result := false;
exit;
end;

if (not SetPixelFormat(HDC_VarG, iPixelFormat, @pfd)) then
begin
MessageBox(0, 'Set Pixel Format gagal, program dihentikan', 'Error pixel format',MB_OK or MB_ICONERROR);
Result:=false;
exit;
end;

HGLRC_VarG := wglCreateContext(HDC_VarG);
if HGLRC_VarG = 0 then
begin
MessageBox(0, 'Pembuatan Rendering Context gagal, program dihentikan', 'Error rendering context',MB_OK or MB_ICONERROR);
Result := false;
exit;
end;

if (not wglMakeCurrent(HDC_VarG, HGLRC_VarG)) then
begin
MessageBox(0, 'Pengaktifan Rendering Context gagal, program dihentikan', 'Error rendering context',MB_OK or MB_ICONERROR);
Result := false;
exit;
end;

ShowWindow(HWND_VarG, SW_SHOW);

glViewport(0, 0, LebarW, TinggiW);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0, LebarW / TinggiW, 1.0, 1000.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity;

Result := true;
end;

procedure Display_Grafik;
begin
glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
glLoadIdentity();

glTranslated(0.0, 0.0, -5.5);
glRotated(SudutPutar, 1.0, 1.0, 1.0);

//polygon depan
glBegin(GL_LINE_LOOP);
glVertex3d(-1.0, -1.0, 1.0);
glVertex3d( 1.0, -1.0, 1.0);
glVertex3d( 1.0, 1.0, 1.0);
glVertex3d(-1.0, 1.0, 1.0);
glEnd();

//polygon belakang
glBegin(GL_LINE_LOOP);
glVertex3d(-1.0, -1.0, -1.0);
glVertex3d( 1.0, -1.0, -1.0);
glVertex3d( 1.0, 1.0, -1.0);
glVertex3d(-1.0, 1.0, -1.0);
glEnd();

//polygon kanan
glBegin(GL_LINE_LOOP);
glVertex3d( 1.0, -1.0, 1.0);
glVertex3d( 1.0, -1.0, -1.0);
glVertex3d( 1.0, 1.0, -1.0);
glVertex3d( 1.0, 1.0, 1.0);
glEnd();

//polygon kiri
glBegin(GL_LINE_LOOP);
glVertex3d(-1.0, -1.0, 1.0);
glVertex3d(-1.0, -1.0, -1.0);
glVertex3d(-1.0, 1.0, -1.0);
glVertex3d(-1.0, 1.0, 1.0);
glEnd();

//polygon atas
glBegin(GL_LINE_LOOP);
glVertex3d(-1.0, 1.0, 1.0);
glVertex3d( 1.0, 1.0, 1.0);
glVertex3d( 1.0, 1.0, -1.0);
glVertex3d(-1.0, 1.0, -1.0);
glEnd();

//polygon bawah
glBegin(GL_LINE_LOOP);
glVertex3d(-1.0, -1.0, 1.0);
glVertex3d( 1.0, -1.0, 1.0);
glVertex3d( 1.0, -1.0, -1.0);
glVertex3d(-1.0, -1.0, -1.0);
glEnd();

SudutPutar := SudutPutar + 0.1;

SwapBuffers(HDC_VarG);
end;


function WinMain(hInstance: HINST; hPrevInstance: HINST; lpCmdLine: PChar;
nCmdShow: integer): integer; stdcall;
var
msg : TMSG;
Selesai : Bool;

begin
Selesai := false;

if not CreateOpenGL(hInstance) then
begin
CloseOpenGL;
Result := 0;
exit;
end;

glEnable(GL_DEPTH_TEST);
glClearColor(0.0, 0.5, 5.0, 0.5);

while not Selesai do
begin
PeekMessage(msg, 0, 0, 0, PM_REMOVE);

if msg.message <> WM_QUIT then
begin
Display_Grafik;

if keys[VK_ESCAPE] then
Selesai := true;

TranslateMessage(msg);
DispatchMessage(msg);
end

end;

CloseOpenGL;
result := msg.wParam;
end;

begin
WinMain(hInstance, hPrevInst, CmdLine, CmdShow);
end.


Selain OpenGL ada juga tools/library grafik yang dapat dipergunakan yaitu DirectX. Namun tools ini hanya dapat dipergunakan pada Microsoft Windows.
Masing-masing perintah atau fungsi dalam OpenGL mempunyai struktur dan format yang sama.

Perintah dan Arti Keterangan pada openGL
glVertex2i(x,y); Lokasi titik berada di (x,y) Tipe argumennya adalah integer dan 2 dimensi yaitu x dan y
glVertex2f(x,y); Lokasi titik berada di (x,y) Tipe argumennya adalah float dan 2 dimensi yaitu x dan y
glVertex3i(x,y,z); Lokasi titik berada di (x,y,z) Tipe argumennya adalah integer dan 2 dimensi yaitu x, y dan z
glVertex3f(x,y,z); Lokasi titik berada di (x,y,z) Tipe argumennya adalah float dan 2 dimensi yaitu x, y dan z
glClearColour(R, G, B, ?); Warna latar belakang Empat komponen warna yaitu Red, Green, Blue dan alpha
glColor3f(R, G, B); Warna latar muka (pena) Tiga komponen warna yaitu Red, Green dan Blue
glColor4f(R, G, B); Warna latar muka (pena) Empat komponen warna yaitu Red, Green, Blue dan alpha
glPointSize(k); Ukuran titik k piksel Besar kecilnya ukuran titik tergantung pada k (integer)
glBegin(GL_POINTS); Titik Objek primitive (lihat gambar 2.2)
glBegin(GL_LINES); Garis Objek primitive (lihat gambar 2.2)
glBegin(GL_LINE_STRIP); Poligaris Objek primitive (lihat gambar 2.2)
glBegin(GL_LINE_LOOP); Poligaris tertutup (polygon) Objek primitive (lihat gambar 2.2)
glBegin(GL_TRIANGLES); Segitiga Objek primitive (lihat gambar 2.2)
glBegin(GL_TRIANGLE_STRIP); Segitiga Objek primitive (lihat gambar 2.2)
glBegin(GL_TRIANGLE_FAN); Segitiga Objek primitive (lihat gambar 2.2)
glBegin(GL_QUADS); Segiempat Objek primitive (lihat gambar 2.2)
glBegin(GL_QUAD_STRIP); Segiempat Objek primitive (lihat gambar 2.2)
glBegin(GL_POLYGON); Poligon Objek primitive (lihat gambar 2.2)
glBegin(GL_LINE_STIPPLE); Garis putus-putus Objek primitive
glBegin(GL_POLY_STIPPLE); Poligon dengan pola tertentu Objek primitive
glRect(GLint x1, GLint y1, GLint x2, GLint y2); Segiempat siku-siku Objek primitive dan ukuran segiempat ditentukan oleh dua titik yaitu (x1,y1) dan (x2,y2)
glEnd( ); Akhir perintah OpenGL -

Perintah tranformasi pada OpenGL adalah
Translasi – glTranslated
Skala – glScaled
Putar atau rotasi – glRotated

The OpenGL Utility Toolkit (GLUT)
GLUT dapat menyederhanakan implementasi program dengan menggunakan OpenGL. GLUT didesain secara serdehana untuk merender sebuah program yang dibuat dengan OpenGL. Versi GLUT yang ada pada saat ini adalah 3.7.6. GLUT juga mendukung fungsi-fungsi, antara lain:
o Mutiplewindows dalam render window OpenGL.
o Memproses kejadian Callback.
o Dapat menerima reaksi dari input (antara lain mouse dan keyboard).
o Mempermudah cascading fasilitas menu pop-up.
o Mendukung bitmap dan stroke fonts.
o Manajemen windows.




Langkah-langkah menggunakan OpenGL
Membuat aplikasi baru
Pilih menu (File > New > Application). akan tampil form kosong.
Tampilkan code editor (F12)
Tambahkan OpenGL pada klausa uses
uses
Windows, Messages,...,OpenGL;
Tambahkan variabel berikut pada properti form.
{ Private declarations }
fdc : HDC;
FRC : HGLRC;
procedure IdleLoop(Sender : TObject; Var Done : boolean);
Tekan Shift+Ctrl+C agar implementasi prosedur IdleLoop dibuat secara otomatis oleh IDE.
procedure TForm1.IdleLoop(Sender:TObject; Var Done: boolean);
begin

end;
Tambahkan event Handler OnCreate pada form (klik dua kali pada form)
procedure TForm1.FormCreate(Sender : TObject);
var
pfd : TPixelForamatDescriptor;
pixelformat : integer;
begin
{ TAHAP I : Buat Window OpenGL }
FDC := GetDC( Panel1.Handle ); //window openGL akan ditampilkan di panel
FillChar(pfd, sizeof(pfd), 0);
pfd.nSize := sizeof(pfd);
pfd.nVersion := 1;
pfd.dwFlags := PFD_DRAW_TO_WINDOW or PFD_SUPPORT_OPENGL or
PFD_DOUBLEBUFFER;
pfd.iPixelType := PFD_TYPE_RGBA;
pfd.cColorBits := 16;

{$WARNINGS OFF} //biar nggak muncul warning karena penggunaan operator '@'
pf := ChoosePixelFormat(FDC, @pfd);
SetPixelFormat(FDC, pf, @pfd);
{$WARNINGS ON} //kembalikan ke normal

FRC := wglCreateContext(FDC);
wglMakeCurrent(FDC, FRC);

{ TAHAP II : Inisialisasi variabel openGL }
glSetViewport( 0, 0, Panel1.Width, Panel1.Height ); //
glClearColor( 0, 0, 0, 1.0 ); // r:0 g:0 b:0 = hitam

glMatrixMode( GL_PROJECTION );
glLoadIdentity;
gluPerspective( 45, Panel1.Width/Panel1.Height, 1, 500);//FoV, Aspect
Ratio, Near Clip, Far Clip
glMatrixMode( GL_MODELVIEW );
glLoadIdentity;
{ Set Kamera }
gluLookAt( 0, 0, -4, 0, 0, 0, 0, 1, 0 );// posisi.x, posisi.y, posisi.z,
lookat.x, lookat.y, lookat.z, up.x, up.y, up.z

Application.OnIdle := IdleLoop;
end;
Sekarang waktunya mengisi body prosedur IdleLoop
procedure TForm1.IdleLoop(Sender : TObject; Var Done : Boolean);
begin
glClear( GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT );

//prosedur penggambaran
glPushMatrix;
glColor( 0, 0.5, 0, 1); //warna ijo
glBegin(GL_QUADS); //gambar kotak (warna ijo)
glVertex3f( -0.5, -0.5, -0,5 );
glVertex3f( 0.5, -0.5, -0,5 );
glVertex3f( 0.5, 0.5, -0,5 );
glVertex3f( -0.5, 0.5, -0,5 );
glEnd;
glPopMatrix;
glFlush;
SwapBuffers(DC); //update hasil penggambaran ke layar
end;


Downloads:
Pengenalan OpenGL.zip
OpenGl.zip
Balok3dOpenGL.zip

Blog! buat tugas Kampus.

Tugas-tugas kampus emang begitu banyak, nah di blogger nie yang tugas Pemrograman Grafik dosen Pak Yoyok.