Grafika Komputer (TIZ10)

Presentasi berjudul: "Grafika Komputer (TIZ10)"— Transcript presentasi:

1 Grafika Komputer (TIZ10)
Implementasi Grafik 3D dan Tranformasi 3D Disusun oleh Teady Matius Prodi Teknik Informatika – Universitas Bunda Mulia

2 Contoh kubus pada posisi P1(0,0,0); =105;=30

3 Contoh kubus pada posisi P1(0,0,0); =105;=-30

4 Contoh kubus pada posisi P1(50,-50,100); =105; =30

5 Contoh kubus pada posisi P1(50,-50,100); =105; =-30

6 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;

7 Contoh Deklarasi Variabel untuk Grafik 3D
FormUtama: TFormUtama; GambarBalok : TBalok; posX, posY, posZ : Integer; panjang, lebar, tinggi : Integer; Alpha, Psi : Double; L1 : Extended; x02D, y02D : integer;

8 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

9 Contoh Mengisi Koordinat X, Y, Z
procedure TFormUtama.ButtonIsiKoordinatClick(Sender: 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 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] := PosY; y[2] := PosY + Tinggi; y[3] := PosY + Tinggi; y[4] := PosY; y[5] := PosY; y[6] := PosY + Tinggi; y[7] := PosY + Tinggi; y[8] := PosY; z[1] := PosZ; z[2] := PosZ; z[3] := PosZ; z[4] := PosZ; z[5] := PosZ + Lebar; z[6] := PosZ + Lebar; z[7] := PosZ + Lebar; z[8] := PosZ + Lebar; end;

10 Contoh mengisi nilai-nilai titik proyeksi xp dan yp
for i:=1 to 8 do begin with GambarBalok do xp[i] := x[i] + z[i] * L1 * cos(Psi*pi/180); yp[i] := y[i] + z[i] * L1 * sin(Psi*pi/180); end;

11 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],y02D-yp[4]); For i:=1 to 4 do Image1.Canvas.LineTo(x02D+xp[i],y02D-yp[i]); end; //Membuat Sisi Depan Image1.Canvas.Pen.Color := clBlack; Image1.Canvas.MoveTo(x02D+xp[8],y02D-yp[8]); For i:=5 to 8 do begin Image1.Canvas.LineTo(x02D+xp[i],y02D-yp[i]); end; //Membuat Garis yang searah sumbu Z Image1.Canvas.Pen.Color := clBlue; for i:=1 to 4 do Image1.Canvas.MoveTo(x02D+xp[i],y02D-yp[i]); Image1.Canvas.LineTo(x02D+xp[i+4],y02D-yp[i+4]); End;

12 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.

13 Translasi 3D Setiap koordinat hanya perlu ditambahkan dengan nilai translasinya. x’ = x + dx y’ = y + dy z’ = z + dz

14 Contoh Implementasi Translasi 3D
procedure TFormUtama.ButtonTranslasiClick(Sender: TObject); var i : integer; begin //Contoh menghitung Translasi //Procedure Menghitung nilai translasi with GambarBalok do for i:=1 to 8 do x[i] := x[i] + StrToFloat(EditDx.Text); y[i] := y[i] + StrToFloat(EditDy.Text); z[i] := z[i] + StrToFloat(EditDz.Text); end; //Setelah selesai dihitung panggil Procedure menggambar ButtonGambarClick(Sender);

15 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.

16 Rotasi 3D Rotasi dilakukan berdasarkan perputaran pada sumbu x, y atau z. Masing-masing dihitung sendiri-sendiri.

17 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:

18 Contoh Implementasi Rotasi pada Sumbu X
sudut := StrToFloat(EditRotasi.Text) * pi / 180; with GambarBalok do begin for i:=1 to 8 do //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; //Setelah selesai dihitung panggil Procedure menggambar ButtonGambarClick(Sender);

19 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:

20 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:

21 Tugas 6PSI1 Lengkapi Contoh program untuk proses Scaling
Rotasi pada sumbu y Rotasi pada sumbu z

22 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 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.