מציג תלת מימד: 4 שלבים

2025 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2025-01-23 14:46

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

שלב 1: התיאוריה

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

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

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

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

שלב 2: תורת היישום

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

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

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

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

שלב 3: מתמטיקה

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

r = מרחק, t = תטא (זווית אופקית), p = phi (זווית אנכית), A = סיבוב סביב ציר Y (סיבוב אנכי), B = סיבוב סביב ציר Z (סיבוב אופקי)

Kx = (sin (p)*cos (t)*cos (A)+cos (p)*sin (A))*cos (B) -sin (p)*sin (t)*sin (B)

Ky = (sin (p)*cos (t)*cos (A)+cos (p)*sin (A))*sin (B)+sin (p)*sin (t)*cos (B)

Kz = -sin (p)*cos (t)*sin (A)+cos (p)*cos (A)

x = r*Kx

y = r*Ky

z = r*Kz

r^2 = x^2+y^2+z^2

תאורה = Klight/r*(Kx או Ky או Kz)

p = arccos ((x*sin (A)*cos (B)+y*sin (A)*sin (B)+z*cos (A))/r)

t = arccos ((x*cos (B)+y*sin (B) -p*sin (A)*cos (p))/(r*cos (A)*sin (p)))

שלב 4: תכנית

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