חוויות תלת-ממד בדפדפן: שליטת מגע שעובדת גם בנייד

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

מודל השליטה הנכון: ג׳ויסטיק לתנועה, גרירה למבט

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

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

מלכודות שגורמות ל"המסך לא זז"

• touch-action: none חייב להיות על אלמנט ה-canvas עצמו; הגדרה על body אינה מספיקה.
• Safari מתעלם מ-user-scalable=no מאז iOS 10 — חייבים לחסום gesturestart/gesturechange/gestureend.
• מאזין pointerdown שרשום רק על ה-canvas יפספס גרירות שמתחילות מעל שכבת ה-HUD.
• יש לדלג על נגיעות שמתחילות על כפתורים ופאנלים, אחרת כל לחיצה מזיזה את המצלמה.
• ניקוי מזהה המצביע חייב לכלול גם pointercancel וגם lostpointercapture.

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

רגישות ומגבלות

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

ביצועים במכשירים בינוניים

• הגבלת devicePixelRatio לערך 2 לכל היותר — ההבדל החזותי זניח והרווח משמעותי.
• מיזוג גיאומטריה סטטית והפחתת מספר קריאות ציור.
• מרקמים דחוסים ובגודל סביר; מרקם 4K בקיר רקע הוא בזבוז נפוץ.
• טעינת מודלים כנכס נפרד ולא כ-base64 בתוך ה-HTML, כדי לאפשר מטמון ופיצול טעינה.
• השהיית לולאת הרינדור כשהלשונית אינה גלויה.

נגישות ומצב חלופי

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

סיכום

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