عرض تراكب WebGL

عرض النموذج

من خلال العرض المركّب باستخدام WebGL يمكنك إضافة المحتوى إلى خرائطك باستخدام WebGL مباشرةً، أو مكتبات الرسومات الشائعة مثل Three.js. العرض المركّب باستخدام WebGL يقدّم المساعدة المباشرة الوصول إلى سياق عرض WebGL الذي تستخدمه "منصة خرائط Google" لعرض الخريطة الأساسية للمتجه. ويوفّر هذا الاستخدام لسياق العرض المشترَك هذا مزايا مثل الانغماس العميق باستخدام هندسة المباني ثلاثية الأبعاد، والقدرة على مزامنة 2D/3D المحتوى مع عرض الخريطة الأساسية. يمكن للكائنات المعروضة باستخدام العرض المركّب باستخدام WebGL أيضًا بإحداثيات خطوط الطول/العرض، بحيث تتحرك عند السحب، تكبير/تصغير الخريطة أو تحريكها أو إمالتها.

المتطلبات

لاستخدام طريقة العرض المركّبة باستخدام WebGL، يجب تحميل الخريطة باستخدام معرّف الخريطة مع المتجه تم تمكين الخريطة. ننصحك بشدة بتفعيل ميزة الإمالة والتدوير عند إنشاء معرّف الخريطة، للسماح بالتحكم الكامل في الكاميرا ثلاثية الأبعاد. الاطّلاع على النظرة العامة لمعرفة التفاصيل

إضافة العرض المركّب باستخدام WebGL

لإضافة التراكب إلى خريطتك، نفِّذ google.maps.WebGLOverlayView، ثم تمرير مثيل الخريطة باستخدام setMap:

// Create a map instance.
const map = new google.maps.Map(mapDiv, mapOptions);

// Create a WebGL Overlay View instance.
const webglOverlayView = new google.maps.WebGLOverlayView();

// Add the overlay to the map.
webglOverlayView.setMap(map);

عناصر الجذب لمراحل النشاط

يوفر العرض المركّب باستخدام WebGL مجموعة من العناصر التي يتم استدعاؤها في أوقات مختلفة في دورة حياة عرض WebGL لسياق الخريطة الأساسية المتجهة. هذه تتيح لك الخطّافات الخاصة بدورة الحياة إعداد أي شيء تريده ورسمه وقطعه المعروض في التراكب.

• يتم استدعاء onAdd() عند إنشاء التراكب. يمكنك استخدامه لاسترجاع إنشاء هياكل بيانات وسيطة قبل رسم التراكب والتي لا تتطلّب إمكانية الوصول الفوري إلى سياق عرض WebGL
• يتم استدعاء onContextRestored({gl}) عند استدعاء سياق العرض المتوفرة. يمكنك استخدامه لتهيئة أو ربط أي حالة WebGL مثل أدوات التظليل وGL والكائنات المخزنة مؤقتًا، وما إلى ذلك. تم قطع WebGLStateOptions عن طريق onContextRestored(). مثيل، يحتوي على حقل واحد:
  • gl هو اسم معرِّف لـ WebGLRenderingContext الذي تستخدمه الخريطة الأساسية.
• تعرض onDraw({gl, transformer}) المشهد على الخريطة الأساسية. معلَمات الدالة onDraw() هي كائن WebGLDrawOptions، ويحتوي على الحقول:
  • gl هو اسم معرِّف لـ WebGLRenderingContext الذي تستخدمه الخريطة الأساسية.
  • توفّر transformer دوال مساعدة للتبديل من الخريطة. الإحداثيات لمصفوفة إسقاط عرض النموذج، والتي يمكن استخدامها ترجمة إحداثيات الخريطة إلى فضاء العالم ومساحة الكاميرا والشاشة مساحة.
• يتم استدعاء onContextLost() عند فقدان سياق العرض لأي وهو المكان الذي يجب عليك فيه تنظيف أي حالة GL موجودة مسبقًا، نظرًا لأنه لم يعد هناك حاجة إليه.
• يعدِّل onStateUpdate({gl}) حالة GL خارج حلقة العرض. ويتم استدعاؤه عند استدعاء requestStateUpdate. يستغرق الأمر مثيل WebGLStateOptions الذي يحتوي على حقل واحد:
  • gl هو اسم معرِّف لـ WebGLRenderingContext الذي تستخدمه الخريطة الأساسية.
• يتم استدعاء onRemove() عند إزالة التراكب من الخريطة باستخدام WebGLOverlayView.setMap(null)، وهي المكان الذي يجب إزالة جميع الكائنات الوسيطة.

على سبيل المثال، في ما يلي تنفيذ أساسي لجميع عناصر الجذب خلال مراحل النشاط:

const webglOverlayView = new google.maps.WebGLOverlayView();

webglOverlayView.onAdd = () => {
  // Do setup that does not require access to rendering context.
}

webglOverlayView.onContextRestored = ({gl}) => {
  // Do setup that requires access to rendering context before onDraw call.
}

webglOverlayView.onStateUpdate = ({gl}) => {
  // Do GL state setup or updates outside of the render loop.
}

webglOverlayView.onDraw = ({gl, transformer}) => {
  // Render objects.
}

webglOverlayView.onContextLost = () => {
  // Clean up pre-existing GL state.
}

webglOverlayView.onRemove = () => {
  // Remove all intermediate objects.
}

webglOverlayView.setMap(map);

إعادة ضبط حالة GL

يعرض أسلوب العرض المركّب باستخدام WebGL سياق عرض الخريطة الأساسية لـ WebGL. لأنّ من هذا، من المهم للغاية أن تعيد تعيين حالة GL إلى عند الانتهاء من عرض الكائنات. فشل إعادة تعيين حالة GL إلى حدوث تعارضات في حالة GL، مما قد يؤدي إلى عرض كل من وأي كائنات تحددها للإخفاق.

يتم عادةً تنفيذ عملية إعادة ضبط حالة GL من خلال عنصر التحكّم onDraw(). على سبيل المثال: يوفر Three.js دالة مساعدة تزيل أي تغييرات في حالة GL:

webglOverlayView.onDraw = ({gl, transformer}) => {
  // Specify an object to render.
  renderer.render(scene, camera);
  renderer.resetState();
}

إذا أخفق عرض الخريطة أو الكائنات، فمن المحتمل جدًا أن حالة GL لم تتم إعادة ضبطه.

تنسيق عمليات التحويل

يتم تحديد موضع الكائن على خريطة المتجه من خلال توفير مجموعة من إحداثيات خطوط الطول والعرض، وكذلك الارتفاع. ثلاثي الأبعاد ومع ذلك، يتم تحديد الرسومات في الفضاء العالمي أو مساحة الكاميرا أو مساحة الشاشة. لتسهيل تحويل إحداثيات الخريطة إلى هذه الإحداثيات الأكثر استخدامًا المسافات، توفر طريقة العرض المتراكبة باستخدام WebGL تعمل الدالة المساعدة "coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr)" في عنصر الجذب onDraw() الذي يأخذ ما يلي يكون ناتجها Float64Array:

• latLngAltitude: إحداثيات خط العرض/خط الطول/الارتفاع إما كـ LatLngAltitude أو LatLngAltitudeLiteral.
• rotationArr: Float32Array من زوايا تدوير أويلر محددة بالدرجات.
• scalarArr: Float32Array من الكميات القياسية لتطبيقها على المحور الأساسي.

على سبيل المثال، يستخدم ما يلي fromLatLngAltitude() لإنشاء كاميرا. مصفوفة إسقاط في Three.js:

const camera = new THREE.PerspectiveCamera();
const matrix = coordinateTransformer.fromLatLngAltitude({
    lat: mapOptions.center.lat,
    lng: mapOptions.center.lng,
    altitude: 120,
});
camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);

مثال

في ما يلي مثال بسيط لاستخدام Three.js، علامة مكتبة WebGL الشهيرة ومفتوحة المصدر، لوضع كائن ثلاثي الأبعاد على الخريطة. بالنسبة إلى جولة تفصيلية حول استخدام طريقة العرض المركّبة باستخدام WebGL لإنشاء المثال الذي تراه قيد التشغيل في أعلى هذه الصفحة، جرّب إنشاء درس تطبيقي حول ترميز تجارب الخرائط بتنسيق WebGL

const webglOverlayView = new google.maps.WebGLOverlayView();
let scene, renderer, camera, loader;

webglOverlayView.onAdd = () => {
  // Set up the Three.js scene.
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera();
  const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 ); // Soft white light.
  scene.add(ambientLight);

  // Load the 3D model with GLTF Loader from Three.js.
  loader = new GLTFLoader();
  loader.load("pin.gltf");
}

webglOverlayView.onContextRestored = ({gl}) => {
  // Create the Three.js renderer, using the
  // maps's WebGL rendering context.
  renderer = new THREE.WebGLRenderer({
    canvas: gl.canvas,
    context: gl,
    ...gl.getContextAttributes(),
  });
  renderer.autoClear = false;
}

webglOverlayView.onDraw = ({gl, transformer}) => {
  // Update camera matrix to ensure the model is georeferenced correctly on the map.
  const matrix = transformer.fromLatLngAltitude({
      lat: mapOptions.center.lat,
      lng: mapOptions.center.lng,
      altitude: 120,
  });
camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);

  // Request a redraw and render the scene.
  webglOverlayView.requestRedraw();
  renderer.render(scene, camera);

  // Always reset the GL state.
  renderer.resetState();
}

// Add the overlay to the map.
webglOverlayView.setMap(map);