מיפוי צללים ב-WebGL: מדריך מקיף לעיבוד בזמן אמת

בעולם הגרפיקה הממוחשבת בתלת מימד, מעטים האלמנטים תורמים יותר לריאליזם ולטבילה מאשר צללים. הם מספקים רמזים חזותיים מכריעים לגבי היחסים המרחביים בין אובייקטים, מיקום מקורות האור והגיאומטריה הכוללת של סצנה. ללא צללים, עולמות תלת מימד יכולים להרגיש שטוחים, מנותקים ומלאכותיים. עבור יישומי תלת מימד מבוססי אינטרנט המופעלים על ידי WebGL, יישום צללים איכותיים בזמן אמת הוא סימן היכר של חוויות ברמה מקצועית. מדריך זה מספק צלילה עמוקה לתוך הטכניקה הבסיסית והנפוצה ביותר להשגת זאת: מיפוי צללים.

בין אם אתם מתכנתים גרפיקה ותיקים או מפתחי אינטרנט המעזים לתמד השלישי, מאמר זה יצייד אתכם בידע להבין, ליישם ולפתור בעיות של צללים בזמן אמת בפרויקטי WebGL שלכם. אנו נצעד מהתיאוריה המרכזית לפרטי יישום מעשיים, תוך בחינת בורות נפוצות והטכניקות המתקדמות המשמשות במנועי גרפיקה מודרניים.

פרק 1: יסודות מיפוי צללים

בלבו, מיפוי צללים היא טכניקה חכמה ואלגנטית שקובעת אם נקודה בסצנה נמצאת בצל על ידי שאלה פשוטה: "האם ניתן לראות את הנקודה הזו על ידי מקור האור?" אם התשובה היא לא, זה אומר שמשהו חוסם את האור, והנקודה חייבת להיות בצל. כדי לענות על שאלה זו מבחינה תכנותית, אנו משתמשים בגישת עיבוד דו-שלבית.

מהו מיפוי צללים? הרעיון המרכזי

הטכניקה כולה סובבת סביב עיבוד הסצנה פעמיים, בכל פעם מנקודת מבט שונה:

• שלב 1: מעבר העומק (נקודת המבט של האור). ראשית, אנו מעבדים את הסצנה כולה ממיקום והכיוון המדויקים של מקור האור. עם זאת, לא אכפת לנו מצבעים או מרקמים בשלב זה. המידע היחיד שאנו צריכים הוא עומק. עבור כל אובייקט שעובד, אנו רושמים את המרחק שלו ממקור האור. אוסף ערכי עומק אלה מאוחסן במרקם מיוחד הנקרא מפת צללים או מפת עומק. כל פיקסל במפה זו מייצג את המרחק לאובייקט הקרוב ביותר מנקודת המבט של האור בכיוון מסוים.
• שלב 2: מעבר הסצנה (נקודת המבט של המצלמה). לאחר מכן, אנו מעבדים את הסצנה כרגיל, מנקודת המבט של המצלמה הראשית. אבל עבור כל פיקסל בודד שצויר, אנו מבצעים חישוב נוסף. אנו קובעים את המיקום של הפיקסל הזה בחלל תלת מימדי ולאחר מכן שואלים: "מה המרחק של הנקודה הזו ממקור האור?" לאחר מכן אנו משווים מרחק זה לערך המאוחסן במפת הצללים שלנו (משלב 1) במיקום המתאים.

ההיגיון הוא פשוט:

• אם המרחק הנוכחי של הפיקסל מהאור גדול מ- המרחק המאוחסן במפת הצללים, זה אומר שיש אובייקט אחר קרוב יותר לאור לאורך אותו קו ראייה. לכן, הפיקסל הנוכחי נמצא בצל.
• אם המרחק של הפיקסל קטן או שווה ל- המרחק במפת הצללים, זה אומר ששום דבר לא חוסם אותו, והפיקסל מואר במלואו.

הגדרת הסצנה

כדי ליישם מיפוי צללים ב-WebGL, אתה צריך מספר רכיבי מפתח:

• מקור אור: זה יכול להיות אור כיווני (כמו השמש), אור נקודתי (כמו נורה) או זרקור. סוג האור יקבע את סוג מטריצת ההיטל המשמשת במהלך מעבר העומק.
• אובייקט Framebuffer (FBO): WebGL מעבד בדרך כלל למסגרת ברירת המחדל של המסך. כדי ליצור את מפת הצללים שלנו, אנו זקוקים ליעד עיבוד מחוץ למסך. FBO מאפשר לנו לעבד לתוך מרקם במקום המסך. ה-FBO שלנו יוגדר עם קובץ מצורף של מרקם עומק.
• שתי סטים של שיידרים: תצטרך תוכנית שיידר אחת עבור מעבר העומק (אחת פשוטה מאוד) ואחרת עבור מעבר הסצנה הסופי (שיכיל את לוגיקת חישוב הצללים).
• מטריצות: תצטרך את מטריצות הדגם, התצוגה וההיטל הסטנדרטיות עבור המצלמה. באופן מכריע, תצטרך גם מטריצת תצוגה והיטל עבור מקור האור, שלעתים קרובות משולבות למטריצת "חלל אור" יחידה.

פרק 2: צינור עיבוד דו-שלבי בפירוט

בואו נפרק את שני מעברי העיבוד צעד אחר צעד, תוך התמקדות בתפקידי המטריצות והשיידרים.

שלב 1: מעבר העומק (מנקודת המבט של האור)

המטרה של מעבר זה היא למלא את מרקם העומק שלנו. כך זה עובד:

1. קשור את ה-FBO: לפני הציור, אתה מנחה את WebGL לעבד ל-FBO המותאם אישית שלך במקום לקנבס.
2. הגדר את Viewport: הגדר את מימדי ה-viewport כך שיתאימו לגודל מרקם מפת הצללים שלך (לדוגמה, 1024x1024 פיקסלים).
3. נקה את מאגר העומק: ודא שמאגר העומק של ה-FBO מנוקה לפני העיבוד.
4. צור את מטריצות האור:
   • מטריצת תצוגת אור: מטריצה זו הופכת את העולם לנקודת המבט של האור. עבור אור כיווני, זה נוצר בדרך כלל עם הפונקציה `lookAt`, כאשר ה"עין" היא מיקום האור וה"יעד" הוא הכיוון שהוא מצביע עליו.
   • מטריצת הקרנת אור: עבור אור כיווני, שיש לו קרניים מקבילות, משתמשים ב- היטל אורתוגרפי. עבור אורות נקודתיים או זרקורים, משתמשים ב- היטל פרספקטיבי. מטריצה זו מגדירה את הנפח בחלל (תיבה או חרוט) אשר יטיל צללים.
5. השתמש בתוכנית Depth Shader: זהו שיידר מינימלי. התפקיד היחיד של השיידר של הקודקוד הוא להכפיל את מיקום הקודקוד במטריצות התצוגה וההיטל של האור. השיידר של קטע הוא אפילו פשוט יותר: הוא פשוט כותב את ערך העומק של הקטע (הקואורדינטה z שלו) לתוך מרקם העומק. ב-WebGL מודרני, לעתים קרובות אתה אפילו לא צריך שיידר מותאם אישית של קטע, מכיוון שה-FBO יכול להיות מוגדר כדי ללכוד אוטומטית את מאגר העומק.
6. עיבוד הסצנה: צייר את כל האובייקטים המטילים צללים בסצנה שלך. ה-FBO מכיל כעת את מפת הצללים שהושלמה שלנו.

שלב 2: מעבר הסצנה (מנקודת המבט של המצלמה)

כעת אנו מעבדים את התמונה הסופית, תוך שימוש במפת הצללים שיצרנו כדי לקבוע צללים.

1. בטל את הקישור של ה-FBO: חזור לעיבוד למסגרת הקנבס המוגדרת כברירת מחדל.
2. הגדר את Viewport: הגדר את ה-viewport בחזרה למימדי הקנבס.
3. נקה את המסך: נקה את מאגרי הצבע והעומק של הקנבס.
4. השתמש בתוכנית Scene Shader: כאן קורה הקסם. השיידר הזה מורכב יותר.
   • Vertex Shader: שיידר זה חייב לעשות שני דברים. ראשית, הוא מחשב את מיקום הקודקוד הסופי באמצעות מטריצות הדגם, התצוגה וההיטל של המצלמה כרגיל. שנית, הוא חייב גם לחשב את מיקום הקודקוד מנקודת המבט של האור באמצעות מטריצת חלל האור משלב 1. קואורדינטה שנייה זו מועברת לשיידר הקטע כמשתנה.
   • Fragment Shader: זהו הליבה של לוגיקת הצל. עבור כל מקטע:
     1. קבל את המיקום המוערך בחלל האור משיידר הקודקוד.
     2. בצע חלוקת פרספקטיבה על קואורדינטה זו (חלק את x, y, z ב-w). זה הופך אותו לקואורדינטות התקן מנורמל (NDC), בטווח של -1 עד 1.
     3. הפוך את ה-NDC לקואורדינטות מרקם (הנעות בטווח של 0 עד 1) כדי שנוכל לדגום את מפת הצללים שלנו. זוהי פעולת קנה מידה והטיה פשוטה: `texCoord = ndc * 0.5 + 0.5;`.
     4. השתמש בקואורדינטות המרקם האלה כדי לדגום את מרקם מפת הצללים שנוצר בשלב 1. זה נותן לנו `depthFromShadowMap`.
     5. העומק הנוכחי של הקטע מנקודת המבט של האור הוא רכיב ה-z שלו מהקואורדינטה המותמרת של חלל האור. בואו נקרא לזה `currentDepth`.
     6. השווה את העומקים: אם `currentDepth > depthFromShadowMap`, הקטע נמצא בצל. נצטרך להוסיף הטיה קטנה לבדיקה זו כדי למנוע אובייקט שנקרא "אקנה צל", עליו נדון בהמשך.
     7. בהתבסס על ההשוואה, קבע גורם צל (למשל, 1.0 עבור מואר, 0.3 עבור מוצל).
     8. החל גורם צל זה על חישוב הצבע הסופי (למשל, הכפל את רכיבי התאורה הסביבתית והדיפוזית בגורם הצל).
5. עיבוד הסצנה: צייר את כל האובייקטים בסצנה.

פרק 3: בעיות נפוצות ופתרונות

יישום מיפוי צללים בסיסי יחשוף במהירות מספר חפצים חזותיים נפוצים. הבנה ותיקון שלהם חיוניים להשגת תוצאות באיכות גבוהה.

אקנה צל (חפצים להצללה עצמית)

הבעיה: ייתכן שתראה דפוסים מוזרים, שגויים של קווים כהים או דפוסים דמויי מוארה על משטחים שאמורים להיות מוארים במלואם. זה נקרא "אקנה צל". זה מתרחש מכיוון שערך העומק המאוחסן במפת הצללים וערך העומק המחושב במהלך מעבר הסצנה הם עבור אותו משטח. בשל חוסר דיוקים בנקודה צפה והרזולוציה המוגבלת של מפת הצללים, שגיאות זעירות יכולות לגרום לקטע לקבוע באופן שגוי שהוא מאחורי עצמו, וכתוצאה מכך הצללה עצמית.

הפתרון: הטיית עומק. הפתרון הפשוט ביותר הוא להכניס הטיה קטנה ל- `currentDepth` לפני ההשוואה. על ידי גרימה לקטע להיראות מעט קרוב יותר לאור ממה שהוא באמת, אנו דוחפים אותו "החוצה" מהצל שלו.

float shadow = currentDepth > depthFromShadowMap + bias ? 0.3 : 1.0;

מציאת ערך ההטיה הנכון היא איזון עדין. קטן מדי, והאקנה נשאר. גדול מדי, ואתה מקבל את הבעיה הבאה.

Peter Panning

הבעיה: חפץ זה, על שם הדמות שיכולה לעוף ואבדה את צילו, בא לידי ביטוי כפער נראה לעין בין אובייקט לצילו. זה גורם לאובייקטים להיראות כאילו הם צפים או מנותקים מהמשטחים שהם אמורים לנוח עליהם. זוהי התוצאה הישירה של שימוש בהטיית עומק שהיא גדולה מדי.

הפתרון: הטיית עומק בקנה מידה של שיפוע. פתרון חזק יותר מהטיה קבועה הוא לגרום להטיה תלויה בתלילות של המשטח ביחס לאור. מצולעים תלולים יותר נוטים יותר לאקנה ודורשים הטיה גדולה יותר. מצולעים שטוחים יותר זקוקים להטיה קטנה יותר. רוב ממשקי ה-API הגרפיים, כולל WebGL, מספקים פונקציונליות להחלת סוג זה של הטיה אוטומטית במהלך מעבר העומק, אשר מועדף בדרך כלל על פני הטיה ידנית בשיידר של הקטע.

אליאסינג פרספקטיבי (קצוות משוננים)

הבעיה: קצוות הצללים שלך נראים גושיים, משוננים ומפוקסלים. זוהי צורה של אליאסינג. זה קורה מכיוון שהרזולוציה של מפת הצללים היא סופית. פיקסל בודד (או טקסל) במפת הצללים עשוי לכסות שטח גדול על פני השטח בסצנה הסופית, במיוחד עבור משטחים קרוב למצלמה או אלה שנצפו בזווית חדה. חוסר התאמה זה ברזולוציה גורם למראה הגושי האופייני.

הפתרון: הגדלת רזולוציית מפת הצללים (לדוגמה, מ-1024x1024 ל-4096x4096) יכולה לעזור, אך היא מגיעה במחיר זיכרון וביצועים משמעותי ואינה פותרת במלואה את הבעיה הבסיסית. הפתרונות האמיתיים טמונים בטכניקות מתקדמות יותר.

פרק 4: טכניקות מתקדמות של מיפוי צללים

מיפוי צללים בסיסי מספק בסיס, אך יישומים מקצועיים משתמשים באלגוריתמים מתוחכמים יותר כדי להתגבר על המגבלות שלו, במיוחד אליאסינג.

סינון קרוב לאחוזים (PCF)

PCF היא הטכניקה הנפוצה ביותר לריכוך קצוות צללים ולהפחתת אליאסינג. במקום לקחת דגימה בודדת ממפת הצללים ולקבל החלטה בינארית (בצל או לא בצל), PCF לוקח דגימות מרובות מהאזור סביב הקואורדינטה הממוקדת.

הרעיון: עבור כל קטע, אנו דוגמים את מפת הצללים לא רק פעם אחת, אלא בתבנית רשת (למשל, 3x3 או 5x5) סביב קואורדינטת המרקם המשוערת של הקטע. עבור כל אחת מהדגימות הללו, אנו מבצעים את השוואת העומק. ערך הצל הסופי הוא ה-ממוצע של כל ההשוואות האלה. לדוגמה, אם 4 מתוך 9 דגימות נמצאות בצל, הקטע יהיה מוצל 4/9, וכתוצאה מכך פניומברה חלקה (הקצה הרך של צל).

יישום: זה נעשה כולו בתוך שיידר הקטע. זה כולל לולאה שעוברת על קרנל קטן, דוגמת מפת הצללים בכל היסט ומצטברת את התוצאות. WebGL 2 מציע תמיכה בחומרה (`texture` עם `sampler2DShadow`) שיכולה לבצע את ההשוואה והסינון בצורה יעילה יותר.

הטבה: משפרת באופן דרסטי את איכות הצללים על ידי החלפת קצוות קשים, משוננים בקצוות חלקים ורכים.

עלות: ביצועים יורדים עם מספר הדגימות שנלקחו לכל קטע.

מפות צללים מדורגות (CSM)

CSM הוא הפתרון התקני בתעשייה לעיבוד צללים ממקור אור כיווני יחיד (כמו השמש) על פני סצנה גדולה מאוד. זה מתמודד ישירות עם בעיית האליאסינג הפרספקטיבי.

הרעיון: הרעיון המרכזי הוא שאובייקטים קרובים למצלמה זקוקים לרזולוציית צללים גבוהה בהרבה מאובייקטים רחוקים. CSM מחלק את החרוט הראייה של המצלמה למספר חלקים, או "מפלים", לאורך העומק שלו. לאחר מכן, כל קסקדה מעובדת בנפרד במפת צל באיכות גבוהה. הקסקדה הקרובה ביותר למצלמה מכסה שטח קטן של חלל העולם ולכן יש לה רזולוציה אפקטיבית גבוהה מאוד. קסקדות רחוקות יותר מכסות אזורים גדולים יותר בהדרגה עם אותו גודל מרקם, דבר המקובל מכיוון שפרטים אלה פחות גלויים לשחקן.

יישום: זה מורכב הרבה יותר.

1. ב-CPU, מחלקים את חרוט המצלמה ל-2-4 מפלים.
2. עבור כל מפל, מחשבים מטריצת היטל אורתוגרפית מתאימה היטב לאור המקיפה בצורה מושלמת את אותו חלק מהחרוט.
3. בלולאת העיבוד, מבצעים את מעבר העומק מספר פעמים—פעם אחת עבור כל מפל, ומעבדים למפת צללים שונה (או לאזור של אטלס מרקם).
4. בקטע השיידר הסופי של הסצנה, קובעים לאיזה מפל הקטע הנוכחי שייך בהתבסס על המרחק שלו מהמצלמה.
5. דוגמים את מפת הצללים של הקסקדה המתאימה כדי לחשב את הצל.

הטבה: מספק צללים ברזולוציה גבוהה באופן עקבי על פני מרחקים עצומים, מה שהופך אותו למושלם עבור סביבות חיצוניות.

מפות צללים של שונות (VSM)

VSM היא טכניקה נוספת ליצירת צללים רכים, אך היא נוקטת בגישה שונה מ-PCF.

הרעיון: במקום לאחסן רק את העומק במפת הצללים, VSM מאחסן שני ערכים: העומק (המומנט הראשון) והעומק בריבוע (המומנט השני). שני הערכים הללו מאפשרים לנו לחשב את השונות של התפלגות העומק. באמצעות כלי מתמטי הנקרא אי-שוויון צ'בישב, אנו יכולים להעריך את ההסתברות שהקטע נמצא בצל. היתרון המרכזי הוא שניתן לטשטש מרקם VSM באמצעות סינון ליניארי מואץ בחומרה ומיפמפינג, משהו שאינו תקף מבחינה מתמטית למפת עומק סטנדרטית.

חסרון: החולשה העיקרית של VSM היא "דימום אור", שבו אור יכול להופיע כמדמם דרך אובייקטים במצבים עם חוסמי חפיפה, מכיוון שהקירוב הסטטיסטי יכול להתפרק.

פרק 5: טיפים ליישום מעשי וביצועים

בחירת רזולוציית מפת הצללים שלך

הרזולוציה של מפת הצללים שלך היא פשרה ישירה בין איכות וביצועים. מרקם גדול יותר מספק צללים חדים יותר אך צורך יותר זיכרון וידאו ולוקח זמן רב יותר לעיבוד ולדגימה. גדלים נפוצים כוללים:

• 1024x1024: קו בסיס טוב עבור יישומים רבים.
• 2048x2048: מציע שיפור איכותי ניכר עבור יישומי שולחן עבודה.
• 4096x4096: איכות גבוהה, משמש לעתים קרובות עבור נכסי גיבורים או במנועים עם ניפוי יסודי.

זכור ששימוש בזיכרון עולה בריבוע; מרקם של 4096x4096 משתמש פי 16 יותר זיכרון ממרקם של 1024x1024.

מיטוב החרוט של האור

כדי להפיק את המרב מכל פיקסל במפת הצללים שלך, חיוני שנפח ההיטל של האור (התיבה האורתוגרפית שלו או החרוט הפרספקטיבי) יתאים בצורה הדוקה ככל האפשר לאלמנטים בסצנה הזקוקים לצללים. עבור אור כיווני, המשמעות היא התאמת ההיטל האורתוגרפי שלו כדי לכלול רק את החלק הגלוי של החרוט של המצלמה. כל שטח מבוזבז במפת הצללים הוא רזולוציה מבוזבזת.

הרחבות וגרסאות WebGL

WebGL 1 לעומת WebGL 2: בעוד שמיפוי צללים אפשרי ב-WebGL 1, זה הרבה יותר קל ויעיל ב-WebGL 2. WebGL 1 דורש את ההרחבה `WEBGL_depth_texture` כדי ליצור מרקם עומק. ל-WebGL 2 יש פונקציונליות זו מובנית. יתר על כן, WebGL 2 מספק גישה לדוגמי צללים (`sampler2DShadow`), שיכולים לבצע PCF מואץ בחומרה, ומציעים דחיפה משמעותית בביצועים מעל לולאות PCF ידניות בשיידר.

איתור באגים בצללים

ידוע שצללים קשים מאוד לאיתור באגים. הטכניקה השימושית ביותר היא להמחיש את מפת הצללים. שנה זמנית את היישום שלך כדי לעבד את מרקם העומק ממקור אור ספציפי ישירות על ריבוע על המסך. זה מאפשר לך לראות בדיוק מה האור "רואה". זה יכול לחשוף מייד בעיות במטריצות האור שלך, ניפוי חרוט או עיבוד אובייקטים במהלך מעבר העומק.

סיכום

מיפוי צללים בזמן אמת הוא אבן יסוד בגרפיקה תלת מימדית מודרנית, שהופכת סצנות שטוחות, חסרות חיים לעולמות אמינים ודינמיים. בעוד שהרעיון של עיבוד מנקודת המבט של האור הוא פשוט, השגת תוצאות איכותיות וללא חפצים דורשת הבנה מעמיקה של המכניקה הבסיסית, מצינור דו-שלבי ועד להבדלים של הטיית עומק ואליאסינג.

על ידי התחלה עם יישום בסיסי, אתה יכול להתמודד בהדרגה עם חפצים נפוצים כמו אקנה צל וקצוות משוננים. משם, אתה יכול להעלות את הוויזואליה שלך עם טכניקות מתקדמות כמו PCF עבור צללים רכים או מפות צללים מדורגות לסביבות בקנה מידה גדול. המסע לעיבוד צללים הוא דוגמה מושלמת לשילוב של אמנות ומדע שהופך את הגרפיקה הממוחשבת לכל כך משכנעת. אנו מעודדים אותך להתנסות בטכניקות אלה, לדחוף את הגבולות שלהן ולהביא רמה חדשה של ריאליזם לפרויקטי WebGL שלך.