ComputerGraphics10
Download
Report
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.