תמיכה

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

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

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

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

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

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

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

  • "OpenGL: Enabled"
  • "WebGL: Hardware accelerated"
  • "WebGL2: Hardware accelerated"

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

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

כדי לתמוך במפות וקטורים, צריך להפעיל את התכונה 'שיפור מהירות באמצעות חומרה' ברוב הדפדפנים. כדי להפעיל את שיפור המהירות באמצעות חומרה ב-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 מסוימים עם מעבדי GPU של 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 בגרסה 10.15 ואילך של macOS. בגרסאות ישנות יותר של macOS, צריך לעבור להגדרות המתקדמות של Safari ולוודא שהאפשרות 'שימוש בהאצת חומרה' מופעלת.
  • צריך לכלול בדוח על הבאג קישור לדוגמת קוד ב-jsfiddle.
  • אם נתקלת בבעיות עיבוד, עליך גם לצלם את המסך של chrome://gpu‏ (Chrome), ‏ about:support‏ (Firefox) או edge://gpu‏ (Microsoft Edge) ולצרף את המידע שקשור ל-GPU בדוח הבאג.

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

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

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

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