תמיכה

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

תמיכה בדפדפן/מכשיר

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

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

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

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

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

  • "OpenGL: Enabled"
  • "WebGL: 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 מסוימים עם מעבדי 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 להשוואה בין מפות וקטוריות למפות רסטר, נשמח לקבל ממכם משוב על הביצועים. המשוב הזה יעזור לנו לשפר את התכונה.