Claude ו-Three.js: מושן גרפיקס בתלת-ממד בלי After Effects

בקצרה: אפשר לבקש מ-Claude לכתוב אנימציה בתלת-ממד כקוד, עם הספרייה Three.js, ולשמור אותה כסרטון. בלי After Effects, בלי מודל וידאו ובלי לדעת לתכנת. מה שקובע אם זה ייראה זול או מקצועי הוא הפרומפט: לפרט כל סצנה, לבקש shaders ותנועת מצלמה, ולבקש מהמודל לבדוק את עצמו בסוף.

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

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

מה ההבדל בין אנימציה שטוחה לתלת-ממד?

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

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

איך זה עובד מאחורי הקלעים?

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

1. Claude כותב את הקוד של האנימציה.
2. הקוד רץ בדפדפן שלא רואים אותו.
3. הדפדפן מצולם כ-60 פעמים בשנייה.
4. התמונות מחוברות לסרטון.

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

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

איזה מודל לבחור?

לפי Penny, זה החלק הכי חשוב. הוא אומר שבדק את כל המודלים, ו-Opus 5.5 נתן את התוצאות הטובות ביותר, עם הבדל שרואים בעין מול Sonnet 5.5 ומול המודלים של OpenAI. עם מודלים אחרים זה עדיין אפשרי, אבל צריך לכוון הרבה יותר בפרומפט.

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

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

כמה זה עולה?

Penny הציג חישוב לקליפ של 15 שניות: הוא צרך כ-37 אלף טוקנים. לפי מחירי ה-API זה יוצא פחות מדולר, ובמנוי Claude, לפי ההערכה שלו, כמה סנטים בודדים. לשם השוואה, לדבריו מודל וידאו מוביל כמו Seedance 2.5 גובה לפי שנייה, וקליפ באותו אורך יעלה כמה מונים יותר.

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

מה חייב להיות בפרומפט?

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

1. Three.js ו-shaders. בלי לבקש במפורש, יוצא שטוח.
2. "שיהיה מקצועי ומלוטש". נשמע מובן מאליו, ולדבריו זה עושה הבדל.
3. "זה ה-showreel שלך למשרת החלומות". לבקש מהמודל להתנהג כאילו הוא מגיש תיק עבודות למשרת מושן גרפיקס. מוזר, אבל לדבריו זה משפר את התוצאה. מזכיר את הימים של "תתנהג כמו מהנדס תוכנה ברמה עולמית".
4. תנועת מצלמה בתלת-ממד, וגם תנועה של האלמנטים בתוך הסצנה. זה מה שמבדיל את זה מרוב הגרפיקה שנוצרת ב-AI.
5. לולאת בדיקה. לבקש מהמודל לעבור על התוצאה ולחפש אלמנטים שעולים אחד על השני, טקסט קטן מדי וטעויות, לפני שמסיימים.

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

למה בכלל להשתמש בזה?

השימוש הראשון ברור: תוכן לרשתות. אבל מה שעניין אותי יותר בסרטון הוא סרטוני ההסבר. Penny הראה אנימציה שמסבירה RAG (שיטה שבה המודל שולף מידע ממאגר לפני שהוא עונה), אחת שמסבירה איך מודל שפה לומד, ואחת שמראה איך הודעה עוברת באינטרנט על גבי כדור ארץ.

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

מה אני הייתי עושה?

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

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

שאלות נפוצות

צריך לדעת לתכנת כדי ליצור מושן גרפיקס עם Claude ו-Three.js?

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

כמה עולה קליפ כזה?

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

זה עובד גם עם ChatGPT?

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

באיזה פורמט יוצא הסרטון?

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

כל שבוע אני מפרק כלי או שיטה אחת כמו זו, ושולח את מה שעובד באמת. הצטרפו לניוזלטר "אלעד עמרני AI".

המאמר מבוסס על הסרטון Claude + Three.js = Premium 3D Motion Graphics של Matt Penny (הערוץ Applied AI ביוטיוב, 15.10.2026). הדוגמאות והמספרים שמיוחסים לו לקוחים משם.