WebGL
הדרך של דף אינטרנט לצייר כל פיקסל בעצמו, על כרטיס המסך. לכן הוא יכול שבירת אור, זוהר ואלפי נקודות, ו-CSS לא. כאן: מה כן WebGL ומה לא, ומה שווה לקחת.
#mouse-memory
דוגמה חיה: זיכרון של עכבר
המנגנון של Lumora. תמונה נסתרת ברבע מהגודל זוכרת איפה העכבר עבר: בכל פריים היא מחשיכה קצת, ונוסף לה קו רך מהמקום הקודם לנוכחי. ה-shader השני קורא אותה כמסכה: איפה שהיא בהירה, הדיוקן השני נחשף, וזוהר בצבע לפי גיל השובל. שתי התמונות באותו מסגור בדיוק, ולכן העין רואה את אותו אדם משתנה, לא תמונה שקופצת. תעביר את העכבר.
הדיוקנאות של התבנית (HorizonX Lumora), לא שלנו. רכיב של הדוקס בלבד (app/docs/webgl/_TrailReveal.tsx): נכנס ל-kit כשדמו יבקש. בלי עכבר ובהפחתת תנועה: הדיוקן הרגיל.
#what
מה זה
- WebGL 2 (2017). הגרסה שכולם כותבים אליה היום, ונתמכת בכל הדפדפנים. ה-shaders שלנו וה-three.js רצים עליה.
- אין WebGL 3. הדור הבא הוא ממשק אחר, WebGPU, כי OpenGL שמתחתיו הפסיק להתפתח. החידוש: compute shaders, חישוב כללי על הכרטיס (מיליוני חלקיקים, נוזלים). שווה רק כשצריך כמויות כאלה, וזה לא אתר תדמית.
- לא כל אפקט מרשים הוא WebGL. canvas דו-ממדי (השובל של העכבר) ו-GSAP על HTML (שובל התמונות, הטבעת) הם עולמות אחרים, זולים יותר.
#horizonx-tools
הכלים של HorizonX, אחד אחד
הקבצים ב-codepens/horizonx - tools (7.11), בתיקיות לפי טכנולוגיה: webgl, canvas-2d, gsap-dom. כל אחד ייצוא מכלי עם סליידרים, ורובם לא שלהם במקור: Codrops, ושחזור פתוח של Apple Music. מה שהם מוסיפים הוא העטיפה: הממשק, הייצוא, MCP של 30 הורדות, ותיקונים קטנים.
| קובץ | מה רואים | איך | מה לוקחים |
|---|---|---|---|
particle-galaxyWebGL | גלקסיה של 15,000 נקודות שמסתובבת | WebGL 2: הנקודות נדגמו מתמונה, וכל התנועה נוסחה ב-shader | המנגנון: צורה מתמונה. כאפקט: מפגן כוח |
liquid-lens-logoWebGL | סרט לוגו של 4 שניות: טיפת שמן שמגדילה ושוברת לקשת | WebGL 2: שבירת אור ב-12 אורכי גל, טשטוש תנועה, bloom ו-grade. שחזור פתוח של Apple Music | המנגנון: סצנה כפונקציה של זמן, ו"מצלמה" כשכבת גימור |
particle-portraitWebGL | צילום שלם, ומעליו ענן אבק כסוף שבורח מהעכבר | WebGL 1: נקודות נדגמו מהפיקסלים הבהירים, לכל אחת עומק z, ציפה בסינוס, והדיפה מהעכבר. התמונה ארוזה ב-base64, 3MB | המנגנון: הדיפה מהעכבר, ועומק לכל נקודה |
glyph-trailWebGL | רשת גליפים קטנים שנדלקים בכתמים צבעוניים אחרי העכבר | WebGL 1: הזיכרון של כל תא מחושב ב-JS ונשלח כתמונה זעירה, shader אחד מצייר את הגליפים (SDF) | המנגנון: זיכרון של עכבר, כמו Lumora, עם קורא אחר |
השמש (ליקוי)WebGL | טבעת אש סביב עיגול שחור, וניצוצות | WebGL: רעש שזז לאורך קצה, ו-bloom | OV מוגזם. רק הנקודות ברקע שוות משהו |
fluid-cursor | נקודה במקום העכבר, עם שובל זוהר | canvas דו-ממדי: sprite אחד מוטבע מאות פעמים | ב-road map: לתמוך, דקה |
trail-persistance | תמונות נזרקות אחרי העכבר ונערמות | GSAP על HTML: מאגר ממוחזר, זריקה לפי מרחק, תור | מתאים לצלם או לסוכנות, בדסקטופ |
comet-glass | רשת אריחי זכוכית חלבית, ושביט אור שעובר מתחתם אחרי העכבר | canvas דו-ממדי: האור מצויר פעם אחת בחצי רזולוציה ומשמש שלוש פעמים, כהה בין האריחים, מטושטש ורווי בתוכם, ושקיפות לכל אריח | המנגנון: אור אחד, הרבה זכוכיות. היופי הוא הקומפוזיציה, לא הטכנולוגיה. גרסה זולה ב-CSS: כתם אור שזז מאחורי רשת עם backdrop-filter |
entrance-bloom | כרטיסים פורחים לטבעת שמסתובבת | GSAP על HTML: שני נשאים מקוננים, כל סיבוב באלמנט משלו | לא יפה מספיק. נשארים הכללים שבו |
#mechanisms
המנגנונים ששווה לשחזר
לא האפקטים, המנגנונים שמתחתם. לוקחים מהמקור הפתוח ובונים בכללים שלנו, כשדמו מבקש. הראשון שכדאי: 1 ו-2 יחד, חוזה אחד לכל אפקט WebGL, עם t מהזמן או מהגלילה.
- סצנה היא פונקציה של זמן. כל פריים נקבע רק לפי t, וכל ערך שזז הוא עקומת keyframes. אז t יכול לבוא מהגלילה, וכל סצנת WebGL הופכת ל-scrub של ScrollTrigger בלי לשנות בה שורה. UkShaderCross עושה את זה כבר למעבר אחד; כאן זו תבנית: "סרט" של כמה שוטים שהגלילה מנגנת.
- חוזה אחד לכל אפקט. build(root, config) שמחזיר update, destroy ו-seek. update מחליף ערכים חי בלי לבנות מחדש; seek מצייר פריים מדויק לפי זמן, וזה מה שמאפשר להקליט וידאו פריים-פריים בלי גמגום; config הוא מטריצת הבחירה שמחולל יכול למלא (THE FLOOD).
- צורה מתמונה. דוגמים תמונה או SVG לענן נקודות (מיקום, צבע, גודל) ודוחסים. מכאן כל צורה יכולה להיות נקודות: לוגו, מוצר, מילה. זה הבסיס למורפינג בין צורות.
- "מצלמה" כשכבת גימור. מה שגורם לזה להיראות כמו וידאו ולא כמו אנימציה: 24 פריימים עם טשטוש תנועה (צמצם חצי פתוח), אור שמצטבר ודולף (bloom), grade, וינייטה, ושום דבר לא חד לגמרי. שלב אחד שאפשר להלביש על כל סצנה.
- איכות מסתגלת. מודדים זמן פריים; חורג מהתקציב, הרזולוציה יורדת; יש מרווח, היא עולה. בהשהיה מרנדרים באיכות מלאה. שייך לכל shader שלנו, במיוחד בטלפון.
- עכבר רפאים. כשאין עכבר (כרטיס ב-/works, הקלטה), מסלול שמזייף אירועי pointermove מניע את האפקט, ועכבר אמיתי (event.isTrusted) מבטל אותו לתמיד. כל אפקט עכבר חי גם בלי משתמש.
#particles
חלקיקים
- נגיעה קטנה בלבד. נקודות חלשות שזזות מאחורי רקע כהה, למשל כשהתפריט במסך מלא נפתח. אף פעם לא המופע עצמו (gsap-animator, עיקרון 7). ואפילו זה מתאים לבערך 1% מהלקוחות.
- הזול: canvas דו-ממדי עם sprite מוטבע, כ-60 שורות שלנו. לא particles.js (נטושה מ-2015) ולא tsParticles (הכל בהגדרות, bloat).
- הרמה הבאה: GPGPU ב-WebGL 2, המיקום של כל נקודה כפיקסל בטקסטורה. נותן תגובה לעכבר ומורפינג בין צורות. ב-three.js עם TSL, כדי שהמעבר ל-WebGPU יבוא בלי לכתוב מחדש.
#not-webgl
מה שלא WebGL, ואיפה הוא
הסמן האחר (נקודה שהולכת איתך, ושובל) מחכה ב-road map, ב-דף הבית של הדוקס. שאר ה-WebGL שכבר רץ אצלנו: Shaders (מעברים בין שתי תמונות) ו-three.js (תלת-ממד אמיתי).
