Pemrograman 3D OpenGL
-
Upload
pandam-laksita -
Category
Documents
-
view
561 -
download
9
description
Transcript of Pemrograman 3D OpenGL
![Page 1: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/1.jpg)
3D Open GLGrafika KomputerSemester Ganjil 2012/13
![Page 2: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/2.jpg)
Outline• Script dasar pemrograman 3D• Script fungsi bentuk 3D
![Page 3: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/3.jpg)
SCRIPT DASAR PEMROGRAMAN 3DTopik 1
![Page 4: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/4.jpg)
Inisialisasi (Script Dasar)#include <windows.h>#include <gl/gl.h>#include <gl/glut.h>
void init(void){ glClearColor(0.0, 0.0, 0.0, 0.0); glShadeModel(GL_FLAT); glLoadIdentity(); gluLookAt(1.0, 2.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); glScalef(2.0, 2.0, 2.0);}
void display(void){ glClear(GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 0.5, 0.0); glutWireCube(1.5); //statement
glFlush();}
![Page 5: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/5.jpg)
void reshape (int w, int h){ glMatrixMode(GL_PROJECTION); glLoadIdentity(); glFrustum(-1.0, 1.0, -1.0, 1.0, 2.0, 20.0); glMatrixMode(GL_MODELVIEW);}
int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500, 500); glutInitWindowPosition(100, 100); glutCreateWindow("Batang Kubus"); init(); glutDisplayFunc(display); glutReshapeFunc(reshape); glutMainLoop();}
![Page 6: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/6.jpg)
Keterangan#include <windows.h>#include <gl/gl.h>#include <gl/glut.h>
• File include yang digunakan untuk memanggil windows dan library glut (library glut diletakkan pada folder “gl”). Pada praktikum hari ini, kita menambahkan library “gl.h” yang ada pada folder gl.
![Page 7: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/7.jpg)
glShadeModel
glShadeModel(GL_FLAT);
• untuk menentukan teknik shading yang akan digunakan.• Ada dua teknik shading yang disediakan, yaitu :• Smooth (GL_SMOOTH) default
Untuk warna lebih dari satu.• Flat (GL_FLAT)
Untuk satu warna.
![Page 8: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/8.jpg)
glLoadIdentity
glLoadIdentity();
• Untuk membersihkan (mereset) modifiabel matrix yang ada saat ini, untuk kebutuhan penggunaan selanjutnya.
• Anda akan selalu memanggil fungsi ini sebelum melakukan “specifying projection, viewing transformations, atau “specifying a model transformation”.
![Page 9: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/9.jpg)
gluLookAt (1)gluLookAt(1.0, 2.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
• Untuk menentukan posisi view point posisi melihat (mata/kamera).
• FormatScriptnya :gluLookAt(Xm, Ym, Zm, Xc, Yc, Zc, Xup, Yup, Zup);
Keterangan :• Xm, Ym, Zm letak mata /camera (view point).• Xc, Yc, Zc posisi center (obyek penglihatan).• Xup, Yup, Zup posisi up mata/kamera.
![Page 10: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/10.jpg)
gluLookAt (2)• Nilai default :
gluLookAt(0.0, 0.0, 0.0, 0.0, 0.0, -100.0, 0.0, 1.0, 0.0);
![Page 11: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/11.jpg)
gluLookAt (3)• Misal diisikan nilai berikut:
gluLookAt(4.0, 2.0, 1.0, 2.0, 4.0, -3.0, 2.0, 2.0, -1.0);
![Page 12: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/12.jpg)
Langkah Praktikum• Buatlah View Point :• Letak Mata/Kamera : 3.0, 3.0, 8.0• Posisi Center : 0.0, 0.0, -1.0• Posisi UP : 0.0, 1.0, 1.0
![Page 13: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/13.jpg)
glScale
glScalef(2.0, 2.0, 2.0);
• Untuk mengubah ukuran obyek.
Scaling an obyek
![Page 14: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/14.jpg)
Langkah Praktikum• Buatlah skala dengan ukuran :• X : 2.0• Y : 2.0• Z : 1.0
• Buatlah skala dengan ukuran :• X : 2.0• Y : 1.5• Z : 1.0
• Kembalikan ke nilai :• X : 2.0• Y : 2.0• Z : 2.0
![Page 15: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/15.jpg)
Mengingat Kembali..!!glOrtho(-2.0, 2.0, -2.0, 2.0, -2.0, 2.0 ); ???
glClear(GL_COLOR_BUFFER_BIT); ???
glColor3f(1.0, 0.5, 0.0); ???
glutWireCube(1.5); //statement• Statement Yang akan di isi dengan script-script bangun 3D
glFlush(); ???
![Page 16: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/16.jpg)
glMatrixMode
glMatrixMode(GL_PROJECTION);
• Untuk mengindikasikan tekstur matrix yang digunakan sebelum memproses perintah transformasi.
• Terdapat 3 matrix mode, yaitu : • Gl Mode View (GL_MODELVIEW)• Gl Projection (GL_PROJECTION)• Gl Texture (GL_TEXTURE)
• Note Jangan sampai lupa untuk mereset matrix mode dengan perintah “glLoadIdentity();”.
![Page 17: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/17.jpg)
glFrustum (1)glFrustum(-1.0, 1.0, -1.0, 1.0, 2.0, 20.0);
• Untuk membuat perspektif View.• Format Scriptnya :
glFrustum(L, R, B, U, N, F);
Keterangan :• L left• R right• B bottom• U up• N near• F far
![Page 18: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/18.jpg)
glFrustum (2)• Perspective Viewing Volume Specified by glFrustum();
![Page 19: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/19.jpg)
Mengingat Kembali..!!glutInit(&argc, argv); ???
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); ???
glutInitWindowSize(500, 500); ???
glutInitWindowPosition(100, 100); ???
glutCreateWindow("Batang Kubus"); ???
init(); ???
glutDisplayFunc(display); ???
glutMainLoop(); ???
![Page 20: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/20.jpg)
glutReshapeFunc
glutReshapeFunc(reshape);
• Perintah yang digunakan untuk “me-reshape” prosedur dengan nama “reshape”.
![Page 21: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/21.jpg)
FUNGSI BENTUK 3DTopik 2
![Page 22: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/22.jpg)
Cube• Script Untuk membuat kubus adalah :
glutWireCube(n);
• Keterangan :n : ukuran besarnya kubus
![Page 23: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/23.jpg)
Langkah Praktikum• Buatlah kubus dengan ukuran 3.
![Page 24: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/24.jpg)
Sphere• Script Untuk membuat bola adalah :
glutWireSphere(A, B, C);
• Keterangan :A : diameterB : slicesC : stacks
![Page 25: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/25.jpg)
Langkah Praktikum• Buatlah Bola dengan ukuran :• Diameter : 3.0• Slices : 20.0• Stacks : 10.0
![Page 26: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/26.jpg)
Torus (Donat)• Script untuk membuat donat adalah :
glutWireTorus(A, B, C, D);
• Keterangan :A : Inner radiusB : Outer radiusC : SideD : Rings
![Page 27: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/27.jpg)
Langkah Praktikum• Buatlah Torus dengan ukuran :• Inner rad : 1.0• Outer rad : 2.0• Slices : 10.0• Rings : 20.0
![Page 28: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/28.jpg)
Cone (Kerucut)• Script Untuk membuat kerucut adalah :
glutWireCone(A, B, C, D);
• Keterangan :A : diameter penampangB : tinggi (height)C : sliceD : stack
![Page 29: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/29.jpg)
Langkah Praktikum• Buatlah Cone dengan ukuran :• Diameter : 1.5• Tinggi : 10.0• Slices : 20.0• Stacks : 15.0
![Page 30: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/30.jpg)
Teapot (teko teh)• Script Untuk membuat teapot adalah :
glutWireTeapot(X);
• Keterangan :X : ukuran besarnya teapot.
![Page 31: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/31.jpg)
Langkah Praktikum• Buatlah Teapot dengan ukuran : 2.0
![Page 32: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/32.jpg)
Icosahedron• Icosahedron merupakan bangun ruang dengan 12 titik, 20
permukaan, dan 30 sisi.• Script Untuk membuat Icosahedron adalah :
glutWireIcosahedron();
![Page 33: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/33.jpg)
Octahedron• Octahedron merupakan bangun ruang dengan 8 sisi atau
permukaan.• Script Untuk membuat Octahedron adalah :
glutWireOctahedron();
![Page 34: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/34.jpg)
Tetrahedron• Tetrahedron merupakan bangun ruang dengan 4 sisi tetapi
bukan persegi / kotak / kubus / balok.• Script Untuk membuat Tetrahedron adalah :
glutWireTetrahedron();
![Page 35: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/35.jpg)
Dodecahedron• Dodecahedron merupakan bangun ruang dengan 12
permukaan, 30 titik ujung dan 20 titik.• Script Untuk membuat Dodecahedron adalah :
glutWireDodecahedron();
![Page 36: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/36.jpg)
Langkah Praktikum• Buatlah obyek Wire Icosahedron.
• Buatlah obyek Wire Octahedron.
• Buatlah obyek Wire Tetrahedron.
• Buatlah obyek Dodecahedron.
• Munculkan kempatnya sekaligus, apa yang terjadi ???“Gambar akan saling menumpuk”
![Page 37: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/37.jpg)
glTranslate• Gl Translate digunakan untuk memposisikan obyek 3D yang dibuat
dengan script fungsi 3D.
• Format penulisan script :
glPushMatrix();glTranslatef(X, Y, Z);//statement 3D
glPopMatrix();
• Keterangan :X : posisi x awalY : posisi y awalZ : posisi z awal
![Page 38: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/38.jpg)
Langkah Praktikum• Buatlah Wire Icosahedron dengan posisi : 1.5, 3.0, 1.0
• Buatlah Wire Octahedron dengan posisi : 3.0, -0.5, 1.0
• Buatlah Wire Tetrahedron dengan posisi : -1.0, -3.0, 1.0
• Buatlah Wire Dodecahedron dengan posisi : -2.5, 1.0, 1.0
![Page 39: Pemrograman 3D OpenGL](https://reader036.fdocuments.us/reader036/viewer/2022081415/55cf9b86550346d033a66559/html5/thumbnails/39.jpg)
Tugas Online (Klasiber)• Buatlah bentuk wire 3D,
dengan output menyerupai gambar disamping ini. (warna bebas)
• Kumpulkan ekstensi “.exe” nya dengan format :
<nim>.exeContoh :
05523241• Pengumpulan dilakukan
dengan meng-upload pada link upload di klasiber.