OpenGL הוא כלי תכנות תלת מימד רב עוצמה המשמש לציור סצנות תלת מימד מורכבות מפרימיטיבים פשוטים. מאמר זה ילמד אתכם כיצד לצייר קובייה פשוטה שתוכלו לסובב אותה כדי לראות אותה בתלת מימד!
לפרויקט זה תזדקק לעורך קוד והכרת ידע בתכנות C.
צעדים
חלק 1 מתוך 3: התקנה ראשונית
שלב 1. התקן את OpenGL כדי להתחיל בצע את השלבים הבאים להתקנת OpenGL במערכת שלך
אם כבר יש לך OpenGL, כמו גם מהדר תואם C מותקן, תוכל לדלג על שלב זה ולעבור לשלב הבא.
שלב 2. צור את המסמך
צור קובץ חדש בעורך הקוד האהוב עליך ושמור אותו כ- mycube.c
שלב 3. הוסף #כולל
אלה הם הכללים הבסיסיים שתזדקק להם לתוכנית שלך. חשוב להבין כי למעשה ישנן דרישות שונות הנדרשות למערכות ההפעלה השונות. הקפד לכלול את כל אלה כדי להבטיח שהתוכנית שלך תכליתית ותוכל לפעול עבור כל משתמש.
// כולל #כלול #כלול #כלול #הגדר GL_GLEXT_PROTOTYPES #ifdef _APPLE_ #include #else #include #endif
שלב 4. הוסף אב טיפוס פונקציות ומשתנים גלובליים
השלב הבא שלך הוא להכריז על כמה טיפוסי פונקציה.
// פונקציות אב טיפוס הצגת חלל (); void specialKeys (); // משתנים גלובליים rotate_y כפול = 0; סיבוב_קס כפול = 0;
שלב 5. הגדר את הפונקציה הראשית ()
int main (int argc, char* argv ) {// אתחל GLUT ועיבד פרמטרים של משתמשים glutInit (& argc, argv); // בקש חלון צבע אמיתי שנאגר בכפול עם Z-buffer glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
שלב 6. צור את החלון
השלב הבא הוא ליצור את החלון שבתוכו תצייר את הקוביה. במדריך זה, החלון נקרא "קובייה מדהימה".
// צור חלון glutCreateWindow ("קובייה מדהימה");
שלב 7. אפשר בדיקת עומק
OpenGL היא שפה קפדנית בכך שהיא לא מניחה שתכונות מיוחדות מופעלות. כדי שהתוכנית שלך תוצג כראוי בתלת מימד באמצעות מאגר ה- Z שבדקת קודם לכן, עליך לאפשר בדיקת עומק. ככל שתמשיכו לחקור את OpenGL, תגלו תכונות רבות שתצטרכו לאפשר כולל תאורה, מרקמים, מול פנים ועוד הרבה יותר.
// הפעל מבחן עומק Z-buffer glEnable (GL_DEPTH_TEST);
שלב 8. הוסף פונקציות להתקשרות חוזרת
להלן פונקציות החזרה אליהן כתבת את אב הטיפוס קודם לכן. בכל פעם דרך הלולאה הראשית, פונקציות אלה יקראו. פונקציית התצוגה מציירת מחדש את הסצנה על סמך כל השינויים במשתנים שנעשו מאז השיחה הקודמת. הפונקציה specialKeys מאפשרת לנו אינטראקציה עם התוכנית.
// פונקציות החזרה glutDisplayFunc (תצוגה); glutSpecialFunc (specialKeys);
שלב 9. הפעל את MainLoop
פעולה זו תזכיר את הפונקציה העיקרית עד שתסגור את התוכנית כדי לאפשר הנפשות ואינטראקציה של משתמשים.
// בקרת מעבר ל- GLUT לאירועים glutMainLoop (); // חזור להחזרת מערכת ההפעלה 0; }
חלק 2 מתוך 3: פונקציית התצוגה ()
שלב 1. להבין את מטרת הפונקציה הזו
כל עבודת ציור הקוביה שלך תתבצע בפונקציה זו. הרעיון הכללי מאחורי הקוביה שלך הוא לצייר את כל ששת הצדדים בנפרד ולמקם אותם במיקום המתאים.
מבחינה רעיונית, כל צד יימשך על ידי הגדרת ארבע הפינות ותאפשר ל- OpenGL לחבר את הקווים ולמלא אותו בצבע שאתה מגדיר. להלן השלבים לביצוע פעולה זו
שלב 2. הוסף glClear ()
השלב הראשון שעליך לבצע בפונקציה זו הוא נקה את הצבע ואת מאגר ה- Z. ללא שלבים אלה, הציורים הישנים עדיין עשויים להיות גלויים מתחת לציורים החדשים וחפצים שצוירו לא יהיו במיקום הנכון על המסך.
תצוגת חלל () {// נקה מסך ו- Z-buffer glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
שלב 3. הוסף glBegin () ו- glEnd ()
OpenGL מגדיר אובייקטים כשילובים של מצולעים שונים. משתמש ב glBegin () הפקודה, אתה מניח למעשה עיפרון שיצייר צורה. כדי להרים את העיפרון ולהתחיל בצורה חדשה, עליך להשתמש ב glEnd () פקודה. במדריך זה תשתמש ב- GL_POLYGON כדי לצייר כל צד של הקוביה אך ניתן להשתמש באפשרויות פרמטר אחרות כגון GL_LINE, GL_QUAD או GL_TRIANGLE ליצירת צורות אחרות.
- כאן תתחיל מהחזית של הקוביה שלך. מאוחר יותר תוסיף צבע לכל 6 הצדדים.
// צד רב צבעוני - GLBegin הקדמי (GL_POLYGON); // קודקודים יתווספו בשלב הבא glEnd ();
שלב 4. הוסף glVertex3f ()
לאחר שהצהרת שאתה רוצה להתחיל במצולע שלך, עליך לעשות זאת להגדיר את הקודקודים של האובייקט. ל- glVertex יש מספר צורות בהתאם למה שאתה רוצה לעשות עם האובייקט שלך.
- הראשון הוא בכמה מימדים אתה עובד. 3 למעלה ב- glVertex3f אומר שאתה מצייר ב -3 ממדים. אפשר גם לעבוד ב 2 או 4 ממדים. F למעלה ב- glVertex3f אומר שאתה עובד עם מספרי נקודה צפה. אתה יכול גם להשתמש במכנסיים קצרים, מספרים שלמים או זוגות.
- שימו לב שנקודות אלה מוגדרות ב- נגד כיוון השעון דֶרֶך. זה לא מאוד חשוב כרגע, אך כאשר תתחיל לעבוד עם תאורה, מרקמים ופנים לטיהור, זה יהפוך להיות חשוב להפליא אז הרגל להגדיר את הנקודות שלך נגד כיוון השעון עכשיו.
- הוסף להוסיף את הקודקודים בין השורות glBegin () ו- glEnd ().
// צד רב צבעוני - 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 ();
שלב 5. הוסף glColor3f ()
glColor פועל באופן דומה ל- glVertex. אתה יכול להגדיר נקודות כמכנסיים קצרים, מספרים שלמים, זוגות או צפים. לכל צבע יש ערך מ -0 עד 1. כל ה -0 הופך את הנקודה לשחורה וכל האחד יהפוך את הנקודה ללבנה. ה- 3 ב- glColor3f () מתייחס למערכת הצבעים RGB ללא ערוץ אלפא. האלפא של צבע מגדיר את השקיפות שלו. כדי לשנות את רמת האלפא, השתמש ב- glColor4f () כאשר הפרמטר האחרון הוא ערך של 0 עד 1 לאטום לשקוף.
- כאשר אתה מתקשר ל- glColor3f () כל קודקוד שנמשך מאותה נקודה ואילך יהיה בצבע זה. לכן, אם אתה רוצה שכל ארבעת הקודקודים יהיו אדומים, פשוט הגדר את הצבע פעם אחת בכל עת לפני פקודות glVertex3f () וכל הקודקודים יהיו אדומים.
- הצד הקדמי המוגדר להלן מראה כיצד להגדיר צבע חדש לכל קודקוד. כשתעשה זאת, תוכל לראות מאפיין מעניין של צבעי OpenGL. מכיוון שלכל קודקוד של המצולע יש צבע משלו, OpenGL ישלב אוטומטית את הצבעים! השלב הבא יראה כיצד להקצות ארבעה קודקודים באותו צבע.
// צד רב צבעוני - GLBegin הקדמי (GL_POLYGON); glColor3f (1.0, 0.0, 0.0); glVertex3f (0.5, -0.5, -0.5); // P1 הוא אדום glColor3f (0.0, 1.0, 0.0); glVertex3f (0.5, 0.5, -0.5); // P2 הוא ירוק glColor3f (0.0, 0.0, 1.0); glVertex3f (-0.5, 0.5, -0.5); // P3 הוא כחול glColor3f (1.0, 0.0, 1.0); glVertex3f (-0.5, -0.5, -0.5); // P4 הוא סגול glEnd ();
שלב 6. לטפל בצדדים האחרים
חשבו מה יהיה המיקום של כל קודקוד עבור חמשת הצדדים האחרים של הקוביה, אך לשם הפשטות, אלה נחשבו עבורך ונכללים ב- פונקציית התצוגה הסופית () לְהַלָן.
// צד לבן - BACK 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 (); // צד סגול - ימין 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 (); // צד ירוק - שמאל 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 (); // צד כחול - 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 (); // צד אדום - 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 (); }
אנו רוצים גם להוסיף שתי שורות קוד אחרונות עבור פונקציה זו. אלו הם glFlush ();
ו glutSwapBuffers ();
שנותנים לנו את אפקט החוצץ הכפול שלמדת עליו קודם.
חלק 3 מתוך 3: אינטראקטיביות משתמשים
שלב 1. הוסף specialKeys ()
כמעט סיימת, אך כרגע אתה יכול לצייר קובייה אך אין לך דרך לסובב אותה. לשם כך תעשו זאת צור מפתחות מיוחדים () פונקציה המאפשרת לנו ללחוץ על מקשי החצים ולסובב את הקוביה!
- פונקציה זו היא הסיבה שהצהרת על המשתנים הגלובליים rotate_x ו- rotate_y. כאשר תלחץ על מקשי החצים ימינה ושמאלה, rotate_y יעלה או ירד ב -5 מעלות. באופן דומה, כאשר אתה לוחץ על מקשי החצים למעלה ולמטה, rotate_x ישתנה בהתאם.
void specialKeys (int key, int x, int y) {// חץ ימינה - הגדל את הסיבוב ב -5 מעלות אם (key == GLUT_KEY_RIGHT) rotate_y += 5; // חץ שמאלה - הפחת סיבוב ב -5 מעלות אחרת אם (key == GLUT_KEY_LEFT) rotate_y - = 5; אחרת אם (key == GLUT_KEY_UP) rotate_x += 5; אחרת אם (key == GLUT_KEY_DOWN) rotate_x -= 5; // בקש עדכון תצוגה glutPostRedisplay (); }
שלב 2. הוסף glRotate ()
ההצהרה האחרונה שלך היא להוסיף את המשפט שיסובב את האובייקט שלך. חזור לפונקציית התצוגה () ולפני הצד הקדמי, הוסף את השורות הבאות:
// אפס טרנספורמציות glLoadIdentity (); // סובב כאשר המשתמש משנה rotate_x ו- rotate_y glRotatef (rotate_x, 1.0, 0.0, 0.0); glRotatef (rotate_y, 0.0, 1.0, 0.0); // צד רב צבעוני - קדמי….
שלב 3. הוסף את הפקודות הבאות כדי לשנות את הקוביה ב -2 לאורך ציר ה- x, 2 לאורך ציר ה- y, לסובב את הקובייה ב -180 מעלות סביב ציר ה- y, ולתרגם את הקובייה ב -0.0 לאורך ציר ה- x
הקפד לסדר את הפקודות האלה כמו גם את הפקודות הקודמות של glRotate () בסדר הנכון כמתואר לעיל. (אם אינך בטוח, הדבר נעשה בקוד הסופי בסוף ההדרכה.)
// טרנספורמציות אחרות glTranslatef (0.1, 0.0, 0.0); glRotatef (180, 0.0, 1.0, 0.0); glScalef (2.0, 2.0, 0.0);
שלב 4. הידור והפעלת הקוד שלך
בהנחה שאתה משתמש ב- gcc כמהדר, הפעל פקודות אלה מהמסוף שלך כדי לאסוף ולבדוק את התוכנית שלך.
ב- Linux: gcc cube.c -o cube -lglut -lGL./ mycube ב- Mac: gcc -o foo foo.c -framework GLUT -framework OpenGL./ mycube ב- Windows: gcc -Wall -ofoo foo.c -lglut32cu - lglu32 -lopengl32./ mycube
שלב 5. בדוק את הקוד המלא שלך
זה אמור להיות כך:
// // קובץ: mycube.c // מחבר: מאט דיילי // נוצר: 25/4/2012 // פרוייקט: קוד מקור ליצירת קובייה ב- OpenGL // תיאור: יוצר חלון OpenGL ומצייר קובייה תלת -ממדית/ / שהמשתמש יכול לסובב באמצעות מקשי החצים // // פקדים: חץ שמאלה -סיבוב שמאלה // חץ ימינה -סיבוב ימינה // חץ למעלה -סיבוב כלפי מעלה // חץ למטה -סיבוב למטה // ------ -------------------------------------------------- -// כולל // ------------------------------------------- --------------- #include #include #include #define GL_GLEXT_PROTOTYPES #ifdef _APPLE_ #include #else #include #endif // ------------- --------------------------------------------- // אבות טיפוס של פונקציות / / ------------------------------------------------- --------- תצוגת ריק (); void specialKeys (); // ------------------------------------------------ ---------- // משתנים גלובליים // ---------------------------------- ------------------------ כפול rotate_y = 0; סיבוב_קס כפול = 0; // ------------------------------------------------ ---------- // תצוגה () פונקציית התקשרות חוזרת // ------------------------------- --------------------------- void display () {// Clear screen and Z-buffer glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // אפס טרנספורמציות glLoadIdentity (); // טרנספורמציות אחרות // glTranslatef (0.1, 0.0, 0.0); // לא כלול // glRotatef (180, 0.0, 1.0, 0.0); // לא כלול // סובב כאשר המשתמש משנה rotate_x ו- rotate_y glRotatef (rotate_x, 1.0, 0.0, 0.0); glRotatef (rotate_y, 0.0, 1.0, 0.0); // טרנספורמציות אחרות // glScalef (2.0, 2.0, 0.0); // לא כלול // צד רב צבעוני - GLBegin קדמי (GL_POLYGON); glColor3f (1.0, 0.0, 0.0); glVertex3f (0.5, -0.5, -0.5); // P1 הוא אדום glColor3f (0.0, 1.0, 0.0); glVertex3f (0.5, 0.5, -0.5); // P2 הוא ירוק glColor3f (0.0, 0.0, 1.0); glVertex3f (-0.5, 0.5, -0.5); // P3 הוא כחול glColor3f (1.0, 0.0, 1.0); glVertex3f (-0.5, -0.5, -0.5); // P4 הוא סגול glEnd (); // צד לבן - BACK 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 (); // צד סגול - ימין 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 (); // צד ירוק - שמאל 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 (); // צד כחול - 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 (); // צד אדום - 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 () פונקציית התקשרות חוזרת // ------------------------------ ---------------------------- void specialKeys (int key, int x, int y) {// חץ ימינה-הגדל את הסיבוב ב- 5 תואר אם (key == GLUT_KEY_RIGHT) rotate_y += 5; // חץ שמאלה - הפחת סיבוב ב -5 מעלות אחרת אם (key == GLUT_KEY_LEFT) rotate_y - = 5; אחרת אם (key == GLUT_KEY_UP) rotate_x += 5; אחרת אם (key == GLUT_KEY_DOWN) rotate_x -= 5; // בקש עדכון תצוגה glutPostRedisplay (); } // ----------------------------------------------- ----------- // main () פונקציה // ------------------------------- --------------------------- int main (int argc, char* argv ) {// אתחל GLUT ועיבד פרמטרים של משתמשים glutInit (& argc, argv); // בקש חלון צבע אמיתי שנאגר בכפול עם Z-buffer glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); // צור חלון glutCreateWindow ("קובייה מדהימה"); // הפעל מבחן עומק Z-buffer glEnable (GL_DEPTH_TEST); // פונקציות החזרה glutDisplayFunc (תצוגה); glutSpecialFunc (specialKeys); // בקרת מעבר ל- GLUT לאירועים glutMainLoop (); // חזור להחזרת מערכת ההפעלה 0; }
