Transcript ComputerGraphics10

Grafika Komputer
(TIZ10)
Implementasi Grafik 3D dan
Tranformasi 3D
Disusun oleh Teady Matius
Prodi Teknik Informatika – Universitas Bunda Mulia
Contoh kubus pada posisi
P1(0,0,0); =105;=30
Contoh kubus pada posisi
P1(0,0,0); =105;=-30
Contoh kubus pada posisi
P1(50,-50,100); =105; =30
Contoh kubus pada posisi
P1(50,-50,100); =105; =-30
Struktur Data Grafik 3D
• Data yang dapat disimpan adalah informasi koordinat x,
y dan z untuk masing-masing titik 3D.
• Untuk koordinat proyeksi direpresentasikan dengan xp
dan yp.
Contoh Struktur data untuk Balok
TBalok = record
x, y, z : array[1..8] of Double;
xp, yp : array[1..8] of Double;
warna : TColor;
//Field-field untuk Informasi lainnya
end;
Contoh Deklarasi Variabel untuk
Grafik 3D
var
FormUtama: TFormUtama;
GambarBalok : TBalok;
posX, posY, posZ : Integer;
panjang, lebar, tinggi : Integer;
Alpha, Psi : Double;
L1 : Extended;
x02D, y02D : integer;
Menggambar 3D dengan Delphi
•
•
•
Input dimensi bangun seperti panjang, lebar dan tinggi dapat digunakan
untuk menentukan koordinat titik P(x, y, z) jika diketahui posisi titik awalnya.
Input sudut  dan sudut  digunakan untuk menentukan koordinat titik-titik
proyeksi (Xp dan Yp) dalam proyeksi paralel.
Berdasarkan nilai sudut  dicari nilai L1
L1 := 1 / Tan(Alpha*pi/180);
•
•
•
Setelah mendapatkan nilai L1, cari nilai-nilai titik koordinat Proyeksi
Saran: Untuk mempermudah menggambar garis-garis grafik 3D, penentuan
nilai titik sebaiknya ditentukan secara berurutan mulai dari titik-titik di sisi
belakang, secara berurutan, kemudian titik-titik di sisi depan secara
berurutan. Dalam hal ini penentuan indeks yang berurutan akan
mempermudah menggambarkan grafik 3D
Garis-garis digambarkan dari titik-titik sisi belakang yang sudah berurutan,
kemudian digambarkan garis-garis sisi depan, setelah sisi depan dan sisi
belakang selesai digambar, dapat digambar garis-garis searah sumbu z
Contoh Mengisi Koordinat X, Y, Z
procedure
TFormUtama.ButtonIsiKoordinatClick(Sen
der: TObject);
begin
panjang := StrToInt(EditPanjang.Text);
lebar := StrToInt(EditLebar.Text);
tinggi := StrToInt(EditTinggi.Text);
posX := StrToInt(EditPosX.Text);
posY := StrToInt(EditPosY.Text);
posZ := StrToInt(EditPosZ.Text);
With GambarBalok Do
begin
x[1] := PosX;
x[2] := PosX;
x[3] := PosX + Panjang;
x[4] := PosX + Panjang;
x[5] := PosX;
x[6] := PosX;
x[7] := PosX + Panjang;
x[8] := PosX + Panjang;
y[1]
y[2]
y[3]
y[4]
y[5]
y[6]
y[7]
y[8]
z[1]
z[2]
z[3]
z[4]
z[5]
z[6]
z[7]
z[8]
end;
end;
:=
:=
:=
:=
:=
:=
:=
:=
:=
:=
:=
:=
:=
:=
:=
:=
PosY;
PosY +
PosY +
PosY;
PosY;
PosY +
PosY +
PosY;
PosZ;
PosZ;
PosZ;
PosZ;
PosZ +
PosZ +
PosZ +
PosZ +
Tinggi;
Tinggi;
Tinggi;
Tinggi;
Lebar;
Lebar;
Lebar;
Lebar;
Contoh mengisi nilai-nilai titik
proyeksi xp dan yp
for i:=1 to 8 do
begin
with GambarBalok do
begin
xp[i] := x[i] + z[i] * L1 * cos(Psi*pi/180);
yp[i] := y[i] + z[i] * L1 * sin(Psi*pi/180);
end;
end;
Menggambarkan hasil Proyeksi
Grafik 3D
•
•
•
•
Contoh menggambar sisi-sisi secara dengan
koordinat P(x,y,z) yang sudah berurutan
Setiap garis pada sisi yang berbeda digambar
dengan warna yang berbeda
x02D adalah konversi nilai sumbu x pada koordinat
canvas
y02D adalah konversi nilai sumbu y pada koordinat
canvas
With GambarBalok do
begin
//Membuat Sisi Belakang
Image1.Canvas.Pen.Color := clYellow;
Image1.Canvas.MoveTo(posx02D+xp[4],y02
D-yp[4]);
For i:=1 to 4 do
begin
Image1.Canvas.LineTo(x02D+xp[i],y02Dyp[i]);
end;
//Membuat Sisi Depan
Image1.Canvas.Pen.Color := clBlack;
Image1.Canvas.MoveTo(x02D+xp[8],y02Dyp[8]);
For i:=5 to 8 do
begin
Image1.Canvas.LineTo(x02D+xp[i],y02Dyp[i]);
end;
//Membuat Garis yang searah sumbu Z
Image1.Canvas.Pen.Color := clBlue;
for i:=1 to 4 do
begin
Image1.Canvas.MoveTo(x02D+xp[i],y02Dyp[i]);
Image1.Canvas.LineTo(x02D+xp[i+4],y02D
-yp[i+4]);
end;
End;
Proses Tranformasi 3D
• Perhitungan Tranformasi dilakukan pada
Koordinat 3D
• Hasil Tranformasi dalam koordinat 3D
• Setelah didapat hasil Tranformasi dalam
koordinat 3D, lakukan proses Proyeksi sehingga
didapat koordinat 2D
• Hapus gambar asli berdasarkan koordinat 2D
proyeksi asal.
• Gambarkan grafik hasil proyeksi 3D ke koordinat
2D hasil tranformasi.
Translasi 3D
• Setiap koordinat hanya perlu ditambahkan dengan nilai
translasinya.
• x’ = x + dx
• y’ = y + dy
• z’ = z + dz
1
0

0

0
0
1
0
0
0 Dx

0 Dy
1 Dz 

0 1 
Contoh Implementasi Translasi 3D
procedure TFormUtama.ButtonTranslasiClick(Sender: TObject);
var
i : integer;
begin
//Contoh menghitung Translasi
//Procedure Menghitung nilai translasi
with GambarBalok do
begin
for i:=1 to 8 do
begin
x[i] := x[i] + StrToFloat(EditDx.Text);
y[i] := y[i] + StrToFloat(EditDy.Text);
z[i] := z[i] + StrToFloat(EditDz.Text);
end;
end;
//Setelah selesai dihitung panggil Procedure menggambar
ButtonGambarClick(Sender);
end;
Scalling 3D
•
•
•
•
•
Setiap koordinat hanya perlu dikalikan dengan nilai penskalaannya
x’=x 。Sx
y’=y 。Sy
z’=z 。Sz
Untuk implementasi Zoom-In dan Zoom-out, nilai Sx=Sy=Sz, karena
ukuran objek harus berubah sama besar kearah sumbu x, y maupun
z.
 Sx 0 0 0
 0 Sy 0 0


 0 0 Sz 0


 0 0 0 1
Rotasi 3D
• Rotasi dilakukan berdasarkan perputaran
pada sumbu x, y atau z.
• Masing-masing dihitung sendiri-sendiri.
Rotasi 3D pada sumbu x
• Perputaran pada sumbu x mengakibatkan perubahan pada
koordinat-kordinat y dan z. sedangkan koordinat x tidak berubah
• x’=x;
• y’=y 。cos() - z 。sin()
• z’=y 。sin() + z 。cos()
atau
z’= z 。cos() + y 。sin()
• Matriks untuk Rotasi 3D searah sumbu x adalah:
0
0
1
0 cos( )  sin( )

0 sin( ) cos( )

0
0
0
0
0
0

1
Contoh Implementasi Rotasi pada
Sumbu X
sudut := StrToFloat(EditRotasi.Text) * pi / 180;
with GambarBalok do
begin
for i:=1 to 8 do
begin
//simpan nilai asli koordinat titik yang akan diproses
x0 := x[i];
y0 := y[i];
z0 := z[i];
//Perhatikan x[i] tidak dilakukan perubahan
//karena Rotasi pada sumbu x, nilai x'=x
y[i] := y0 * cos(sudut) – z0 * sin(sudut);
z[i] := y0 * sin(sudut) + z0 * cos(sudut);
end;
end;
//Setelah selesai dihitung panggil Procedure menggambar
ButtonGambarClick(Sender);
Rotasi 3D pada sumbu y
• Perputaran pada sumbu y mengakibatkan perubahan pada
koordinat-koordinat x dan z. sedangkan koordinat y tidak berubah
• x’=x 。cos() - z 。sin()
• y’=y;
• z’=x 。sin() + z 。cos()
atau
z’= z 。cos() + x 。sin()
• Matriks untuk Rotasi 3D searah sumbu y adalah:
cos( )
 0

 sin( )

 0
0  sin( )
1
0
0 cos( )
0
0
0
0
0

1
Rotasi 3D pada sumbu z
• Perputaran pada sumbu z mengakibatkan perubahan pada
koordinat-koordinat x dan y. sedangkan koordinat z tidak berubah
• x’=x 。cos() - y 。sin()
• y’=x 。sin() + y 。cos()
atau
y’= y 。cos() + x 。sin()
• z’=z
• Matriks untuk Rotasi 3D searah sumbu z adalah:
cos( )  sin( )
 sin( ) cos( )

 0
0

0
 0
0
0
1
0
0
0
0

1
Tugas 6PSI1
Lengkapi Contoh program untuk proses
1. Scaling
2. Rotasi pada sumbu y
3. Rotasi pada sumbu z
Tugas 6PSI2
• Buatlah program untuk menggambar sebuah Limas segi
bujur sangkar 3 dimensi. dengan =105; =30
• P5 adalah puncak limas
• P1, P2, P3 dan P4 adalah dasar limas
• P1 terletak pada titik P1(0,0,0)
• Tinggi Limas adalah 100 + 2 digit NIM terakhir anda
• Panjang rusuk-rusuk dasar limas adalah 100.
• Sumbu y terletak pada kolom ke 250 pada koordinat
delphi
• Sumbu x terletak pada baris ke 250 pada koordinat
delphi
• Sumbu x dan sumbu Y bidang proyeksi digambar
dengan garis merah.