מאחורי הקלעים · SHOWCASE
Abyss Scroll לוקח את דף הבית של wpzvi.co.il, על חמשת הפרקים שלו, והופך אותו לעולם WebGL אחד רציף: עמוד מים חי שיורדים בו מ-0 עד 512 מטר. בלי תמונות. הכל מצויר בקוד.
באתר המקורי כל פרק הוא תמונה: צב, תמנון, לוויתן, כריש, בית קפה. כאן שאלנו: מה אם הדפדוף בין הפרקים יהיה בעצמו הסיפור? המבקר לא עובר בין מסכים, הוא שוקע. פס הגלילה הפך למד עומק, האור משתנה ממי שמש לאפלת תהום ובחזרה, והמילים הזהובות של הקופי, עליו. תמנון. מהגדול ממרחק. קפה?, זוהרות כמו ביולומינסנציה.
הטקסט הוא HTML אמיתי שנגלל רגיל (נגיש, ניתן לחיפוש, RTL מלא). רק הרקע חי ב-WebGL. שני העולמות מסונכרנים דרך מיפוי גלילה→מצלמה אחד.
| עומק | פרק | יצור | אור |
|---|---|---|---|
| 0 מ׳ | פני המים · הירו | צב ים חולף מעל הראש | תקרת קאוסטיקה, שמש, אלומות |
| 118 מ׳ | השונית · שירותים | תמנון עם 8 קצות זרוע זהובים | טורקיז, להקת דגים, קלפ |
| 248 מ׳ | המים העמוקים · אוטומציות | לוויתנית ועגל שצוללים איתך | כמעט שחור, שלג ימי, מדוזות |
| 382 מ׳ | שטח הציד · ייעוץ | כריש מקיף ניצוץ זהב | תכלת קרה ובהירה, שוב אלומות |
| 512 מ׳ | הקרקעית · צור קשר | קיוסק "קפה בשקט" | ענבר חם, גחליליות, שרשראות אור |
סיפור האור נכתב כרמפת צבע לפי עומק המצלמה. הערפל, הרקע והחלקיקים דוגמים את אותה רמפה, ולכן הכל נשאר קוהרנטי בכל נקודת ביניים:
FogExp2 שצבעו וצפיפותו מונעים מהעומק. צפיפות שיא באזור התהום, דילול ב"שטח הציד".sin(uTime + uv.x) משוקלל לכיוון הזנב, אז הלוויתן באמת משכשך.Points: שלג ימי (1,500), בועות עולות, וזוהר נקודתי (קצות התמנון, נורות הקפה, גחליליות). כולם עטופים סביב המצלמה ב-mod() בשיידר, כך שלעולם לא נגמרים.InstancedMesh אחד, 110 דגיגים בשלוש להקות שמקיפות מרכזים שונים לאורך הצלילה.כל פרק מצהיר data-cam (גובה עולם). בכל פריים נמדד מרכז ה-viewport מול מרכז הקופי של כל פרק, והמצלמה מקבלת אינטרפולציה ליניארית בין העוגנים, עם החלקה אקספוננציאלית 1-exp(-dt*4.2). ככה הטקסט (שנגלל נייטיב) והעולם לא מתנתקים אף פעם, גם בקפיצת גלילה.
לכל יצור יש פרמטר p, ההתקדמות בתוך הפרק שלו. הלוויתנית חוצה ושוקעת לפי p (לא לפי זמן), ולכן היא תמיד בפריים כשעוברים אותה, גם בצילום אוטומטי. הכריש מקיף אליפסה שהפאזה שלה נגררת מהגלילה, ורודף ניצוץ זהב שמוביל אותו ב-0.8 רדיאן.
מד העומק ממיר את גובה המצלמה במקדם 1.9104, שנבחר בקפידה מדעית מדוקדקת כדי שהקרקעית תצא בדיוק 512 מטר. מתכנתים מבינים.
אין אף קובץ תמונה או מודל תלת-ממד. הצב, התמנון, הלוויתנית, הכריש, המדוזות, האלמוגים והקיוסק כולם מצוירים ב-Canvas 2D בזמן טעינה, עם זוהר אפוי (shadowBlur) שמדמה תאורת שוליים. שמונה קצוות הזרועות של התמנון נרשמים בזמן הציור ומקבלים נקודות זהב פועמות בגל שרץ סביבן, כל זרוע מומחית בתחומה.
הפונטים היחידים הם Heebo עברי + לטיני, מוטמעים מקומית. Three.js r166 יושב ב-vendor/. אפס CDN בזמן ריצה.
prefers-reduced-motion: המצלמה נצמדת לגלילה בלי החלקה, יצורים כמעט סטטיים, בלי פעימות זהב.האתר נבנה בלולאה עיוורת-למחצה: כל שינוי עבר סקריפט אימות שמריץ Chrome ללא ראש, גולל לחמש נקודות עומק, מצלם ואוסף שגיאות קונסולה. הצילומים נקראו, נשפטו, ותוקנו. הלוויתנית קיבלה את מסלול הצלילה שלה אחרי שצילום אמצע-הדף תפס אותה מחוץ לפריים, ואת המדוזות הוסיפה בדיוק אותה ביקורת: אמצע הצלילה נראה ריק מדי.