תלת ממד מתמונות

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

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

בימים שלאחר מכן ראיתי עוד כמה דוגמאות, ותהיתי ״איך (לעזאזל) עושים את זה?״ או במילים אחרות: גם אני רוצה!

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

ואני, עומד בהכרזתי, שאין לי כוונות לרכוש טלפון נייד, חכם ככל שיהיה, ביותר מ-1000 ש״ח נותרתי עם תאוותי הלא ממומשת.

אין אצלי דבר כזה! אז התחלתי לקרוא.
מסתבר שלדבר הזה, שפייסבוק קורא לו Facebook 3D photo, יש היסטוריה ״עתיקה״ עוד מהימים שבהם סרטי האנימציה המצויירים של וולט דיסני, צוירו ביד. בסוף שנות החמישים נוצר ביקוש לכך שהנופים הנראים בסרטים המצויירים ייראו בעלי עומק ויתנו הרגשה תלת ממדית. לצורך כך, נוצר אפקט הפארלקסה. שבו מצויירות מספר שכבות של נוף מהרחוקות עד לקרובות, כאשר בכל פריים בסרט מזיזים כל אחת מהשכבות תזוזה שונה כך שיתקבל אפקט של עומק.

החלוצה בתחום היתה אשה בשם לוטה רייניגר, 1899-1981 שיצרה מגזרות נייר וציירה על זכוכית את השכבות השונות עוד ב- 1922

לוטה רייניגר, 1899-1981
לוטה רייניגר, 1899-1981

Lotte Reiniger – The unsung heroine of early animation from Infocandy on Vimeo.

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


אפקט הפארלקסה -Parallax, תפס גם באופן בולט במשחקי המחשב הראשונים

שימו לב למהירות התנועה השונה של השכבות השונות.

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

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

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

למשל:

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

זה המדריך ששימש אותי

מדריך וידאו למשתמשי גימפ


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

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

בסופו של תהליך יהיו בידכם שתי תמונות:

שתיהן חייבות להיות באותו גודל בדיוק! גודל סביר הוא 1200 על 800 פיקסלים ולהפך וכל מה שדומה.

שתי התמונות צריכות להיות באותו פורמט, jpg  או png

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

xxx.jpg
xxx_depth.jpg

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

יצרתי לה תמונת מפת עומק

והעלתי לפייסבוק – שחקו עם העכבר

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

https://www.arpatech.com/blog/3d-parallax-effect-2d-images-depth-map/

https://www.pixijs.com/

הסבר טוב נוסף יש כאן

https://www.alanzucconi.com/2019/01/01/facebook-3d-photos/

https://www.alanzucconi.com/2019/01/01/parallax-shader/

החבר׳ה האלה יעזרו לכם (בתשלום) וגם קצת בחינם לייצר באנרים תלת ממדיים

https://www.omnivirt.com/3d-photo/

מאמר מפורט על הטכנולוגיה:

https://triaxes.com/articles/manual-depth-map-creation/מ

סגירת תפריט