OpenGL adalah alat pemrograman 3D yang kuat yang digunakan untuk menggambar adegan tiga dimensi yang kompleks dari primitif sederhana. Artikel ini akan mengajari Anda cara menggambar kubus sederhana yang dapat Anda putar untuk dilihat dalam tiga dimensi!
Untuk proyek ini, Anda memerlukan editor kode dan pengetahuan tentang pemrograman C.
Langkah
Bagian 1 dari 3: Pengaturan Awal
Langkah 1. Instal OpenGL Untuk memulai, ikuti langkah-langkah ini untuk menginstal OpenGL di sistem Anda
Jika Anda sudah menginstal OpenGL, serta kompiler C yang kompatibel, Anda dapat melewati langkah ini dan melanjutkan ke langkah berikutnya.
Langkah 2. Buat dokumen
Buat file baru di editor kode favorit Anda dan simpan sebagai mycube.c
Langkah 3. Tambahkan #include
Ini adalah termasuk dasar yang Anda perlukan untuk program Anda. Penting untuk disadari bahwa sebenarnya ada berbagai tambahan yang diperlukan untuk sistem operasi yang berbeda. Pastikan untuk menyertakan semua ini untuk memastikan program Anda serbaguna dan dapat dijalankan untuk pengguna mana pun.
// Termasuk #include #include #include #define GL_GLEXT_PROTOTYPES #ifdef _APPLE_ #include #else #include #endif
Langkah 4. Tambahkan prototipe fungsi dan variabel global
Langkah Anda selanjutnya adalah mendeklarasikan beberapa prototipe fungsi.
// Fungsi Prototipe void tampilan(); batalkan kunci khusus(); // Variabel Global double rotate_y=0; putar ganda_x=0;
Langkah 5. Siapkan fungsi main()
int main(int argc, char* argv){ // Inisialisasi GLUT dan memproses parameter pengguna glutInit(&argc, argv); // Meminta jendela warna asli dengan buffer ganda dengan Z-buffer glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
Langkah 6. Buat jendela
Langkah selanjutnya adalah membuat jendela di mana Anda akan menggambar kubus. Dalam tutorial ini, jendelanya disebut "Awesome Cube".
// Buat jendela glutCreateWindow("Kubus Luar Biasa");
Langkah 7. Aktifkan uji kedalaman
OpenGL adalah bahasa yang ketat karena tidak menganggap fitur khusus apa pun diaktifkan. Agar program Anda dapat ditampilkan dengan benar dalam 3 dimensi menggunakan buffer-Z yang Anda lihat sebelumnya, Anda perlu aktifkan uji kedalaman. Saat Anda terus menjelajahi OpenGL, Anda akan menemukan banyak fitur yang perlu Anda aktifkan termasuk pencahayaan, tekstur, cull-facing dan banyak lagi.
// Aktifkan uji kedalaman buffer-Z glEnable(GL_DEPTH_TEST);
Langkah 8. Tambahkan fungsi panggilan balik
Berikut adalah fungsi panggilan balik yang Anda buat untuk prototipe sebelumnya. Setiap kali melalui loop utama, fungsi-fungsi ini akan dipanggil. Fungsi tampilan menggambar ulang adegan berdasarkan perubahan apa pun pada variabel yang dibuat sejak panggilan sebelumnya. Fungsi specialKeys memungkinkan kita untuk berinteraksi dengan program.
// Fungsi panggilan balik glutDisplayFunc(tampilan); glutSpecialFunc(Kunci khusus);
Langkah 9. Mulai MainLoop
Ini akan mengingat fungsi utama sampai Anda menutup program untuk memungkinkan animasi dan interaksi pengguna.
// Berikan kontrol ke GLUT untuk event glutMainLoop(); // Kembali ke OS kembali 0; }
Bagian 2 dari 3: Fungsi tampilan()
Langkah 1. Pahami tujuan dari fungsi ini
Semua pekerjaan menggambar kubus Anda akan dilakukan dalam fungsi ini. Gagasan umum di balik kubus Anda adalah menggambar keenam sisi satu per satu dan menempatkannya di posisi yang sesuai.
Secara konseptual, setiap sisi akan digambar dengan mendefinisikan empat sudut dan membiarkan OpenGL menghubungkan garis dan mengisinya dengan warna yang Anda tentukan. Di bawah ini adalah langkah-langkah untuk melakukan ini
Langkah 2. Tambahkan glClear()
Langkah pertama yang perlu Anda ambil dalam fungsi ini adalah untuk hapus warna dan buffer Z. Tanpa langkah-langkah ini, gambar lama mungkin masih terlihat di bawah gambar baru dan objek yang digambar tidak akan berada di lokasi yang benar di layar.
void display(){ // Bersihkan layar dan Z-buffer glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
Langkah 3. Tambahkan glBegin() dan glEnd()
OpenGL mendefinisikan objek sebagai kombinasi dari poligon yang berbeda. Menggunakan glMulai() perintah, Anda secara efektif meletakkan pensil yang akan menggambar bentuk. Untuk mengangkat pensil dan memulai bentuk baru, Anda harus menggunakan glEnd() memerintah. Dalam tutorial ini Anda akan menggunakan GL_POLYGON untuk menggambar setiap sisi kubus tetapi dimungkinkan untuk menggunakan opsi parameter lain seperti GL_LINE, GL_QUAD, atau GL_TRIANGLE untuk membuat bentuk lain.
- Di sini Anda akan mulai dengan bagian depan kubus Anda. Nanti Anda akan menambahkan warna ke semua 6 sisi.
// Sisi multi-warna - FRONT glBegin(GL_POLYGON); // Simpul akan ditambahkan pada langkah berikutnya glEnd();
Langkah 4. Tambahkan glVertex3f()
Setelah Anda menyatakan bahwa Anda ingin memulai poligon Anda, Anda perlu tentukan simpulnya dari objek. glVertex memiliki beberapa bentuk tergantung pada apa yang ingin Anda lakukan dengan objek Anda.
- Yang pertama adalah berapa banyak dimensi yang Anda kerjakan. 3 di atas di glVertex3f mengatakan Anda menggambar dalam 3 dimensi. Dimungkinkan juga untuk bekerja dalam 2 atau 4 dimensi. F di atas dalam glVertex3f mengatakan Anda bekerja dengan angka floating point. Anda juga dapat menggunakan celana pendek, bilangan bulat atau ganda.
- Perhatikan bahwa titik-titik ini didefinisikan dalam a berlawanan arah jarum jam tata krama. Ini tidak terlalu penting saat ini tetapi ketika Anda mulai bekerja dengan pencahayaan, tekstur, dan cull-facing, ini akan menjadi sangat penting, jadi biasakan mendefinisikan poin Anda berlawanan arah jarum jam sekarang.
- Tambahkan tambahkan simpul antara baris glBegin() dan glEnd().
// Sisi multi-warna - FRONT glBegin(GL_POLYGON); glVertex3f(-0.5, -0.5, -0.5); // P1 glVertex3f(-0.5, 0.5, -0.5); // P2 glVertex3f(0.5, 0.5, -0.5); // P3 glVertex3f(0.5, -0.5, -0.5); // P4 glEnd();
Langkah 5. Tambahkan glColor3f()
glColor bekerja dengan cara yang mirip dengan glVertex. Anda dapat mendefinisikan poin sebagai short, integer, double, atau float. Setiap warna memiliki nilai dari 0 hingga 1. Semua 0 membuat titik menjadi hitam dan semua 1 akan membuat titik menjadi putih. 3 di glColor3f() mengacu pada sistem warna RGB tanpa saluran alfa. Alfa warna menentukan transparansinya. Untuk mengubah level alpha, gunakan glColor4f() dengan parameter terakhir berupa nilai 0 hingga 1 untuk opaque menjadi transparent.
- Saat Anda memanggil glColor3f() setiap simpul yang ditarik dari titik itu akan berwarna itu. Oleh karena itu, jika Anda ingin keempat simpul berwarna merah, cukup atur warnanya sekali kapan saja sebelum perintah glVertex3f() dan semua simpul akan berwarna merah.
- Sisi depan yang ditentukan di bawah ini menunjukkan bagaimana mendefinisikan warna baru untuk setiap simpul. Ketika Anda melakukan ini, Anda dapat melihat properti yang menarik dari warna OpenGL. Karena setiap simpul poligon memiliki warnanya sendiri, OpenGL akan secara otomatis memadukan warna! Langkah selanjutnya akan menunjukkan bagaimana menetapkan empat simpul dengan warna yang sama.
//Sisi multi-warna - FRONT glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 0.0); glVertex3f(0.5, -0.5, -0.5); // P1 berwarna merah glColor3f(0.0, 1.0, 0.0); glVertex3f(0.5, 0.5, -0.5); // P2 berwarna hijau glColor3f(0.0, 0.0, 1.0); glVertex3f(-0.5, 0.5, -0.5); // P3 berwarna biru glColor3f(1.0, 0.0, 1.0); glVertex3f(-0.5, -0.5, -0.5); // P4 berwarna ungu glEnd();
Langkah 6. Tangani sisi lainnya
Cari tahu apa lokasi setiap simpul untuk lima sisi kubus lainnya, tetapi untuk kesederhanaan, ini telah dihitung untuk Anda dan termasuk dalam tampilan akhir () fungsi di bawah.
// Sisi putih - KEMBALI glBegin(GL_POLYGON); glColor3f(1.0, 1.0, 1.0); 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(); // Sisi ungu - KANAN glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 1.0); 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(); // Sisi hijau - KIRI glBegin(GL_POLYGON); glColor3f(0.0, 1.0, 0.0); 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(); // Sisi biru - TOP glBegin(GL_POLYGON); glColor3f(0.0, 0.0, 1.0); 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(); // Sisi merah - BOTTOM glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 0.0); 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(); glFlush(); glutSwapBuffers(); }
Kami juga ingin menambahkan dua baris kode terakhir untuk fungsi ini. Ini adalah glFlush();
dan glutSwapBuffers();
yang memberi kami efek penyangga ganda yang Anda pelajari sebelumnya.
Bagian 3 dari 3: Interaktivitas Pengguna
Langkah 1. Tambahkan specialKeys()
Anda hampir selesai tetapi saat ini, Anda dapat menggambar kubus tetapi tidak memiliki cara untuk memutarnya. Untuk melakukan ini, Anda akan buat kunci khusus() berfungsi untuk memungkinkan kita menekan tombol panah dan memutar kubus!
- Fungsi ini adalah alasan mengapa Anda mendeklarasikan variabel global rotate_x dan rotate_y. Saat Anda menekan tombol panah kanan dan kiri, rotate_y akan bertambah atau berkurang 5 derajat. Demikian pula, ketika Anda menekan tombol panah atas dan bawah, rotate_x akan berubah.
void specialKeys(kunci int, int x, int y) { // Panah kanan - meningkatkan rotasi sebesar 5 derajat jika (kunci == GLUT_KEY_RIGHT) rotate_y += 5; // Panah kiri - kurangi rotasi sebesar 5 derajat jika (kunci == GLUT_KEY_LEFT) rotate_y -= 5; else if (kunci == GLUT_KEY_UP) rotate_x += 5; lain jika (kunci == GLUT_KEY_DOWN) rotate_x -= 5; // Meminta pembaruan tampilan glutPostRedisplay(); }
Langkah 2. Tambahkan glRotate()
Pernyataan terakhir Anda adalah menambahkan pernyataan yang akan memutar objek Anda. Kembali ke fungsi display() dan sebelum sisi FRONT, tambahkan baris berikut:
// Setel ulang transformasi glLoadIdentity(); // Putar saat pengguna mengubah rotate_x dan rotate_y glRotatef(rotate_x, 1.0, 0.0, 0.0); glRotatef(rotasi_y, 0.0, 1.0, 0.0); // Sisi multi-warna - DEPAN ….
Langkah 3. Tambahkan perintah berikut untuk menskalakan kubus sebesar 2 di sepanjang sumbu x, 2 di sepanjang sumbu y, putar kubus sebesar 180 derajat di sekitar sumbu y, dan terjemahkan kubus sebesar 0,1 di sepanjang sumbu x
Pastikan untuk mengatur ini serta perintah glRotate() sebelumnya dalam urutan yang benar seperti yang dijelaskan di atas. (Jika Anda tidak yakin, ini dilakukan dalam kode terakhir di akhir tutorial.)
// Transformasi lainnya glTranslatef(0.1, 0.0, 0.0); glRotatef(180, 0.0, 1.0, 0.0); glScalef(2.0, 2.0, 0.0);
Langkah 4. Kompilasi dan jalankan kode Anda
Dengan asumsi Anda menggunakan gcc sebagai kompiler Anda, jalankan perintah ini dari terminal Anda untuk mengkompilasi dan menguji program Anda.
Di Linux: gcc cube.c -o cube -lglut -lGL./ mycube Di Mac: gcc -o foo foo.c -framework GLUT -framework OpenGL./ mycube Di Windows: gcc -Wall -ofoo foo.c -lglut32cu - lglu32 -lopengl32./ mycube
Langkah 5. Periksa kode lengkap Anda
Seharusnya seperti ini:
// // File: mycube.c // Penulis: Matt Daisley // Dibuat: 25/4/2012 // Proyek: Kode sumber untuk Membuat Kubus di OpenGL // Deskripsi: Membuat jendela OpenGL dan menggambar kubus 3D / / Bahwa pengguna dapat memutar menggunakan tombol panah // // Kontrol: Panah Kiri - Putar Kiri // Panah Kanan - Putar Kanan // Panah Atas - Putar Atas // Panah Bawah - Putar Bawah // ------ -------------------------------------------------- -- // Termasuk // ------------------------------------------- --------------- #include #include #include #define GL_GLEXT_PROTOTYPES #ifdef _APPLE_ #include #else #include #endif // ------------- --------------------------------------------- // Fungsi Prototipe / / -------------------------------------------------- --------- batal tampilan(); batalkan kunci khusus(); // ------------------------------------------------ ---------- // Variabel Global // ---------------------------------- ------------------------ putar ganda_y=0; putar ganda_x=0; // ------------------------------------------------ ---------- // display() Fungsi panggilan balik // -------------------- --------------------------- void display(){ // Bersihkan layar dan Z-buffer glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); // Setel ulang transformasi glLoadIdentity(); // Transformasi Lainnya // glTranslatef(0.1, 0.0, 0.0); // Tidak termasuk // glRotatef(180, 0.0, 1.0, 0.0); // Tidak termasuk // Rotate saat pengguna mengubah rotate_x dan rotate_y glRotatef(rotate_x, 1.0, 0.0, 0.0); glRotatef(rotasi_y, 0.0, 1.0, 0.0); // Transformasi Lainnya // glScalef(2.0, 2.0, 0.0); // Tidak termasuk // Sisi multi-warna - FRONT glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 0.0); glVertex3f(0.5, -0.5, -0.5); // P1 berwarna merah glColor3f(0.0, 1.0, 0.0); glVertex3f(0.5, 0.5, -0.5); // P2 berwarna hijau glColor3f(0.0, 0.0, 1.0); glVertex3f(-0.5, 0.5, -0.5); // P3 berwarna biru glColor3f(1.0, 0.0, 1.0); glVertex3f(-0.5, -0.5, -0.5); // P4 berwarna ungu glEnd(); // Sisi putih - KEMBALI glBegin(GL_POLYGON); glColor3f(1.0, 1.0, 1.0); 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(); // Sisi ungu - KANAN glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 1.0); 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(); // Sisi hijau - KIRI glBegin(GL_POLYGON); glColor3f(0.0, 1.0, 0.0); 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(); // Sisi biru - TOP glBegin(GL_POLYGON); glColor3f(0.0, 0.0, 1.0); 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(); // Sisi merah - BOTTOM glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 0.0); 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(); glFlush(); glutSwapBuffers(); } // ----------------------------------------------- ----------- // specialKeys() Fungsi Panggilan Balik // ------------------------------ ---------------------------- void specialKeys(kunci int, int x, int y) { // Panah kanan - tingkatkan rotasi sebesar 5 derajat jika (kunci == GLUT_KEY_RIGHT) rotate_y += 5; // Panah kiri - kurangi rotasi sebesar 5 derajat jika (kunci == GLUT_KEY_LEFT) rotate_y -= 5; else if (kunci == GLUT_KEY_UP) rotate_x += 5; lain jika (kunci == GLUT_KEY_DOWN) rotate_x -= 5; // Meminta pembaruan tampilan glutPostRedisplay(); } // ----------------------------------------------- ----------- // fungsi utama // ------------------------------- --------------------------- int main(int argc, char* argv){ // Menginisialisasi GLUT dan memproses parameter pengguna glutInit(&argc, argv); // Meminta jendela warna asli buffer ganda dengan Z-buffer glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); // Buat jendela glutCreateWindow("Kubus Luar Biasa"); // Aktifkan uji kedalaman buffer-Z glEnable(GL_DEPTH_TEST); // Fungsi panggilan balik glutDisplayFunc(tampilan); glutSpecialFunc(Kunci khusus); // Berikan kontrol ke GLUT untuk event glutMainLoop(); // Kembali ke OS kembali 0; }
