WebGL ו-Three.js: איך בונים אתר תלת-ממד שגם טס

למה תלת-ממד בכלל?

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

אבל יש מלכוד: קנבס WebGL לא מנוהל נכון יכול להוריד אתר ל-15 FPS ולשרוף סוללה של טלפון תוך דקות.

העקרונות שלנו לתלת-ממד מהיר

1. רנדור לפי דרישה (On-Demand Rendering)

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

• רנדור רציף רק בזמן אנימציה פעילה

• IntersectionObserver

  משהה סצנות שמחוץ למסך
• השהיה מלאה כשהטאב ברקע

2. תקציב פוליגונים ו-Draw Calls

• מתחת ל-100 draw calls לפריים בסצנה טיפוסית
• Instancing לאלמנטים חוזרים (חלקיקים, אריחים)
• LOD — פחות פירוט לאובייקטים רחוקים

3. HDR Environment Maps חכמים

תאורת HDR היא מה שהופך חומרים מ"פלסטיק משחק ישן" ל"מתכת אמיתית". אבל קובץ HDR מלא שוקל מגה-בייטים. הפתרונות:

• דחיסה ל-HDR ברזולוציה מדודה (1K מספיק כמעט תמיד לתאורה)
• טעינת הסביבה ב-Web Worker כדי לא לחסום את ה-main thread
• שיתוף environment map אחד בין כל הסצנות בדף

4. טקסטורות בתקציב

• KTX2/Basis compression — חיסכון של עד 80% בזיכרון GPU
• Mipmaps תמיד — גם לחדות וגם לביצועים
• טקסטורה אחת של 2048px עדיפה על ארבע של 1024px

אינטגרציה עם React

ב-React משתמשים ב-

@react-three/fiber

1. אף פעם לא setState בתוך useFrame — מוטציה ישירה של refs בלבד
2. Suspense + lazy לטעינת סצנות כבדות אחרי ה-First Paint
3. ErrorBoundary סביב כל קנבס — כשל WebGL לא מפיל את הדף

מדידה לפני הכל

אי אפשר לשפר מה שלא מודדים. כל פרויקט תלת-ממד אצלנו עובר בדיקת FPS על מכשיר אנדרואיד בינוני — לא על MacBook Pro.

הכלים: Chrome DevTools Performance, Spector.js לניתוח draw calls, ו-stats.gl בסביבת פיתוח.

השורה התחתונה

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