תמיכה

בדף הזה מפורטות בעיות ידועות ופתרונות עקיפים למפות וקטוריות ולתכונות של WebGL.

תמיכה בדפדפן או במכשיר

תצוגה מקדימה של תכונת WebGL תומכת באותם דפדפנים ומכשירים כמו ממשק ה-API של JavaScript במפות Google. כדי לבדוק אם הדפדפן במכשיר מסוים תומך ב-WebGL, אפשר להיכנס לאתר get.webgl.org או לאתר caniuse.com. חשוב גם לוודא שהאצת החומרה מופעלת בהגדרות הדפדפן, אחרת מפות וקטוריות יחזרו לרסטר.

רסטר או וקטור?

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

בדיקת היכולות של הדפדפן ב-Chrome

כדי לדעת אילו יכולות של שיפור מהירות באמצעות חומרה מופעלות בהתקנה ספציפית של Chrome, עוברים לכתובת chrome://gpu/ ומוודאים שהפריטים הבאים מופעלים (בצבע ירוק):

  • ‫"OpenGL: Enabled" (ה-OpenGL מופעל)
  • ‫"WebGL: Hardware accelerated" ‏(WebGL: האצת חומרה)
  • ‫"WebGL2: Hardware accelerated" (WebGL2: האצה באמצעות חומרה)

(אלה רק דרישות בסיסיות, ויכולים להיות גורמים אחרים שמשפיעים על התמיכה. אפשר לעיין בקטע 'באגים ידועים' שבהמשך).

הפעלה של שיפור המהירות באמצעות חומרה

כדי לתמוך במפות וקטוריות, צריך להפעיל את התכונה 'שיפור מהירות באמצעות חומרה' ברוב הדפדפנים. כדי להפעיל את שיפור המהירות באמצעות חומרה ב-Chrome וב-Microsoft Edge, פותחים את ההגדרות, בוחרים באפשרות מערכת ומוודאים שהאפשרות שימוש בשיפור מהירות באמצעות חומרה כשניתן מופעלת.

בדיקה תוכנתית של רסטר או וקטור

אפשר לבדוק באופן פרוגרמטי אם מפה היא רסטר או וקטור, על ידי קריאה ל-map.getRenderingType(). בדוגמה הבאה מוצג קוד למעקב אחרי האירוע renderingtype_changed ולהצגת חלון מידע שבו מצוין אם נעשה שימוש במפת רסטר או במפת וקטור.

TypeScript

‫
/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

JavaScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

אפשר גם להשתמש בהקשר של עיבוד WebGL כדי לבדוק את התמיכה ב-WebGL 2:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

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

תמיכה באינטרנט לנייד

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

באגים

באגים מוכרים

  • יש בעיה מוכרת ב-Chrome בחלק ממכשירי macOS עם מעבדים גרפיים של AMD. זה יכול להיות מבלבל במיוחד כשמערכת macOS עוברת באופן דינמי בין מעבדי GPU במכשירים עם כמה מעבדי GPU, ולכן יכול להיות שמפות וקטוריות לא יהיו זמינות בהתאם לאפליקציות אחרות שפועלות או אם מחובר מסך חיצוני. הפעלת העורף הקדמי של ANGLE Metal ב-Chrome, שיושק בקרוב, נראית כפתרון לבעיה הזו במקרים מסוימים. תוכלו לעקוב אחרי תוכניות ההשקה הכלליות בכתובת https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

דיווח על באגים

  • לפני ששולחים דיווח על באג, צריך לעדכן את הדפדפן ואת מנהל ההתקן של יחידת ה-GPU לגרסה העדכנית ביותר.
  • מוודאים שההגדרה של שיפור מהירות באמצעות חומרה ב-chrome://settings/system (Chrome), ב-about:preferences#general (Firefox) וב-edge://settings/system (Microsoft Edge) מופעלת. בדפדפן Safari, ההגדרה הזו מופעלת באופן אוטומטי ב-macOS מגרסה 10.15 ואילך. בגרסאות ישנות יותר של MacOS, צריך לעבור להגדרות המתקדמות של Safari ולוודא שהאפשרות 'שימוש בשיפור מהירות באמצעות חומרה' מופעלת.
  • בדוח על הבאג, צריך לכלול קישור לדוגמת קוד ב-jsfiddle.
  • בנוסף, כדאי לצלם את המסך של chrome://gpu (Chrome),‏ about:support (Firefox) או edge://gpu (Microsoft Edge), ולצרף לדיווח על הבאג מידע שקשור ל-GPU אם נתקלתם בבעיות כלשהן בעיבוד.

ספר לנו מה אתה חושב!

המשוב שלכם חשוב לנו, כי אנחנו שואפים לספק לכם ולמשתמשי הקצה שלכם את חוויית השימוש הכי טובה במפות וקטוריות. נשמח לשמוע אם:

  • יש שגיאות חדשות ב-JavaScript או באגים/קריסות שזיהיתם באפליקציות האינטרנט שלכם.
  • זמן האחזור של הפעלת מפות וקטוריות גרוע משמעותית מזה של מפות רסטר. במקרה כזה, מדדים של רגרסיה בחביון של הפעלת האפליקציה יכולים לעזור מאוד. באופן כללי, אנחנו רוצים לדעת אם חלה עלייה בזמן האחזור של ההפעלה מעבר לסף המקובל.
  • החוויה של המפות הווקטוריות לא חלקה כמו שהיא יכולה להיות. אם אתם מתעדים מדדי FPS או jank, איך הם מושווים בין מפות וקטוריות למפות רסטר?
  • הביצועים משתנים מאוד מדפדפן לדפדפן.

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