המקום שבו WebGL פוגש זכוכית נוזלית
רוב אפקטי ה"זכוכית הנוזלית" באינטרנט משתמשים בשכפול DOM. הם מעתיקים אלמנטים של HTML, מעוותים אותם, מוסיפים טשטוש (blur) ומציבים אותם מתחת לשכבת זכוכית.
השיטה הזו נכשלת עם WebGL. שכפול DOM לא יכול להעתיק פיקסלים מתוך canvas חי. canvas הוא framebuffer שמשתנה בכל frame.
כדי לגרום לזכוכית נוזלית לעבוד על canvas, יש לכם שתי אפשרויות. אתם יכולים לבצע capture ל-canvas בכל frame, מה שגוזל משאבים רבים. או, שתוכלו להעביר את אפקט הזכוכית אל תוך ה-WebGL pipeline עצמו.
בניתי ניסוי כדי לבחון את הגישה השנייה. הייתי צריך רקע עם תנועה כדי להציג את האפקט. שאבתי השראה מדמו של גלים במים (water ripple) אינטראקטיבי של Konmari.
בניתי גרסה משלי עם פיזיקה ריאליסטית של גלים ופרחים צפים.
התוצאה היא סצנת מים ב-WebGL עם פאנל של זכוכית נוזלית. הפאנל הזה מבצע שבירה (refraction) של ה-canvas החי שמתחתיו.
איך זה עובד:
- המים משתמשים בסימולציית ג