כשמסתכלים על משחקי מחשב מודרניים, קשה שלא להתפעל מהתחושה הריאליסטית שהם מעניקים, שבמקרים רבים גורמת להם להראות כמו סרטים. אולם, בניגוד לסרטים, במשחקי מחשב התמונות מחושבות ב"זמן אמת". כיצד זה מתבצע? ננסה לתאר דרך סיפור על משולש אחד, ולשכנע שזה לא כל כך מסובך. נעשה זאת באמצעות אנלוגיה לצביעת משולש על קיר בית.
 
כתב: דורון אורנשטיין
 
למרות שאין הדבר נראה כך, הצורות במשחקי מחשב בנויות ממאות משולשים המחוברים ביניהם.  נתאר תהליך צביעת משולש אחד במחשב דרך אנלוגיה: נניח שאתם וידידתכם מבקשים מצבע לצבוע משולש על קיר. ראשית, אתם מתווכחים על הצבע של הצלע התחתונה: היא רוצה לבן, אתם שחור. הפשרה: קודקוד שמאלי לבן, וימיני שחור. אולם באיזה צבע לצבוע את הצלע ביניהם? הצבע מציע לצבוע שליש בלבן, שליש באפור ושליש בשחור. זה נראה מכוער על הקיר, כמו גם במחשב ("תמונה מפוקסלת"). הצבע נאנח, מחלק את הצלע להרבה ריבועים קטנים (למשל: 1024), ולצביעת כל ריבוע הוא מערבב את השחור והלבן בפרופורציות שונות. למשל, לריבוע שנמצא ב -3/4 המרחק מהלבן, יערבב רבע לבן ו-3/4 שחור, וכולי. בדרך זו ,המעבר בין הצבעים נראה יפה ורציף .
 
חישוב דומה נעשה במחשב: לכל צבע יש ערך מספרי, והמחשב מבצע ממוצע משוקלל בין הערכים, בשיטה הקרויה "אינטרפולציה לינארית" בכדי לקבוע את צבעו של פיקסל הנמצא בין פיקסלים שצבעם כבר נקבע. במקרה כללי יותר, אם תרצו משולש צבעוני, אפשר לעשות ערבוב דומה (ובמחשב: אינטרפולציה) של שלושת צבעי היסוד (אדום, ירוק ,וכחול).
 
אולם מה עם הקודקוד השלישי?. אחרי שתחליטו על צבעו (למשל: אפור), הצבע יכול לצבוע את שתי הצלעות הנוספות באותה צורה על ידי חלוקת כל צלע לריבועים קטנים וערבוב צבעים בהתאם למרחק בין הקודקודים (ובמחשב: אינטרפולציה).
 
אתם אולי מרוצים, אולם הידידה מבקשת לצבוע גם בתוך המשולש. כיצד? השיטה המקובלת במחשב, היא להעביר קווים אופקיים ([1]"scan-line" ) שחותכים שתי צלעות, ולצבוע אותם בתוך המשולש בהתאם לצבע של נקודות החיתוך שכבר צבענו קודם, באמצעות אינטרפולציה נוספת ( [2]"bilinear interpolation"). השיטה מצריכה הרבה עבודה, ובתקווה שהצבע יסכים לה, אתם תקבלו משולש צבוע יפה. (תמונה באתר)
 
אתם מרוצים, אולם הידידה מתלוננת: המשולש הצבוע משעמם! צריך להוסיף טקסטורה, למשל כמו הצורות שעל הסוודר שלה. כיוון שאי אפשר לגזור את הסוודר ולהדביקו לקיר, יש צורך לעשות חישובים ולהתאים בין ריבועים קטנים שבנינו בתוך המשולש לנקודות שעל הסוודר. תהליך צביעה זה ([Texture mapping” [3 " ) הוא אחד האלמנטים המרכזיים שנותנים נופך ריאליסטי לגרפיקה במחשב.
 
לאחר שסיימתם שלב זה, הידידה שוב לא מרוצה: היא מעוניינת שהמשולש יראה תלת ממדי. אכן, חלק מרכזי בגרפיקה במחשב, הוא לתת אשליית תלת מימד. אם המשולש לא מקביל למסך, צריך לבצע חישוב נוסף כדי למצוא את ההיטל של כל נקודה שעליו על המישור הדו-מימדי ([Prospective projection [4). לאחר שסיימתם שלב זה, יש לכם במחשב, ובתקווה גם על הקיר, משולש עם טקסטורה שנראה גם תלת ממדי.
 
אולם, הידידה שוב לא מרוצה. האור שנופל על המשולש מונוטוני ומשעמם. היא מוסיפה תאורה בחדר, כולל מנורת שולחן ונרות. כעת האור משתקף יפה על המשולש. תהליך דומה נעשה במחשב: חישוב התאורה, שכולל את כל מקורות האור, המשפיע על צבע המשולש (אפקטים של ברק, הצללה, וכדומה). כעת יש לכם על הקיר (ובמחשב) משולש יפה עם טקסטורה, שנראה תלת מימדי, עם תאורה מעניינת שנופלת עליו.
 
אולם, הידידה עדיין איננה מרוצה. היא רוצה שתהיה גם שקיפות במשולש, שיראו קצת את הנוף שבחוץ. אתם רצים לקנות חלון שקוף למחצה, וחוזרים על אותו תהליך צביעה על החלון. תהליך זה של הוספת שקיפות [5] נעשה במחשב בגרפיקה תלת ממדית, כמו גם בתוכנות לעריכת תמונות.
 
לבסוף, כשהכל מוכן, מצפה לכם הפתעה מרה. הידידה מביאה תמונה, תולה אותה ומסתירה את המשולש שנבנה בעמל רב!. אכן, תהליך יצירת גרפיקה במחשב הוא לעיתים אכזרי: בשלב אחרון של הכנת התמונה לתצוגה , המחשב בודק את מיקום כל משולש בעולם התלת-מימד (באמצעות שיטה הנקראת "Z-buffer") ולעיתים מסתיר לנו את מה שביקשנו לראות. דמו את עצמכם משחקים במשחק תלת מימד, הולכים במסדרון ורוצים לראות משולש נהדר שעל הקיר. אולם, לפתע מופיעה מפלצת מפחידה שמסתירה אותו ומאיימת עליכם. בניגוד למה שהבטחנו בהתחלה, מצב זה כלל לא פשוט!
 
תיארנו כאן רק חלק מהשלבים הדרושים ליצירת תמונות בגרפיקה תלת מימדית. יצירת התמונות מתבצעת באמצעות מעבד גרפי העובד בצמוד למעבד הראשי. בפועל, סדר הפעולות הוא שונה ממה שתארנו [6] .למשל, יצירת ההיטל על מישור המסך מתבצעת בשלב מוקדם, לפני צביעת המשולש. בנוסף, השמטנו חישובים נוספים, כמו למשל סימולציה פיזיקלית, המשמשת לדוגמה ליצירת תמונות הנראות ריאליסטיות של דם שישפריץ מהמפלצת כשאתם תירו בה.
 
[1] על קווי סריקה
https://en.wikipedia.org/wiki/Scan_line
[2] על אינטרפולציה ביליניארית
https://en.wikipedia.org/wiki/Bilinear_interpolation
[3] על מיפי טקסטורה
https://en.wikipedia.org/wiki/Texture_mapping
[4] על הטלה תלת מימדית
https://en.wikipedia.org/wiki/3D_projection
[5] על טכניקות לערבוב צבעים
https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
[6] על תהליך יצירת הגרפיקה
https://en.wikipedia.org/wiki/Graphics_pipeline