WebGL ओवरले व्यू

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

सैंपल देखें

WebGL ओवरले व्यू की मदद से, आप सीधे WebGL या तीन ग्राफ़िक वाले लोकप्रिय ग्राफ़िक लाइब्रेरी का इस्तेमाल करके, अपने मैप में कॉन्टेंट जोड़ सकते हैं. WebGL ओवरले व्यू, Google Maps Platform के उसी बैकग्राउंड ऐक्सेस को सीधे ऐक्सेस करता है जिसका इस्तेमाल Google Maps Platform, वेक्टर बेसमैप को रेंडर करने के लिए करता है. शेयर किए गए रेंडर के संदर्भ का इस्तेमाल करने से फ़ायदे मिलते हैं, जैसे कि 3D बिल्डिंग ज्यामिति की मदद से गहराई को बढ़ाना और 2D/3D कॉन्टेंट को बेसमैप रेंडरिंग के साथ सिंक करने की सुविधा. WebGL ओवरले व्यू के साथ रेंडर किए गए ऑब्जेक्ट को अक्षांश/देशांतर निर्देशांक से भी जोड़ा जा सकता है. इसलिए, जब आप मैप को खींचें, ज़ूम करें, पैन करें या झुकाएं, तो ये हिलने-डुलने लगते हैं.

ज़रूरी शर्तें

WebGL ओवरले व्यू का इस्तेमाल करने के लिए, आपको वेक्टर मैप चालू करके मैप आईडी का इस्तेमाल करके मैप लोड करना होगा. हमारा सुझाव है कि आप 3D कैमरा कंट्रोल की अनुमति देने के लिए, मैप आईडी बनाते समय, झुकाने और घुमाने की सुविधा चालू करें. जानकारी के लिए खास जानकारी देखें.

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 बफ़र ऑब्जेक्ट वगैरह. onContextRestored(), WebGLStateOptions इंस्टेंस लेता है, जिसमें एक फ़ील्ड होता है:
    • gl, WebGLRenderingContext का हैंडल है, जिसका इस्तेमाल बेसमैप करता है.
  • onDraw({gl, transformer}) बेसमैप पर सीन को रेंडर करता है. onDraw() के लिए पैरामीटर, WebGLDrawOptions ऑब्जेक्ट है, जिसमें दो फ़ील्ड हैं:
    • gl, WebGLRenderingContext का हैंडल है, जिसका इस्तेमाल बेसमैप करता है.
    • transformer में, मैप निर्देशांक से मॉडल मॉडल व्यू मैट्रिक्स में बदलने के लिए हेल्पर फ़ंक्शन दिए गए हैं. इनका इस्तेमाल मैप निर्देशांकों का दुनिया की जगह, कैमरे की जगह, और स्क्रीन स्पेस में अनुवाद करने के लिए किया जा सकता है.
  • onContextLost() तब कॉल किया जाता है, जब किसी भी वजह से रेंडरिंग का संदर्भ खो जाता है और आप वहां पहले से मौजूद GL स्थिति को साफ़ कर सकते हैं, क्योंकि अब इसकी ज़रूरत नहीं है.
  • onStateUpdate({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);

जीएल स्थिति रीसेट की जा रही है

WebGL ओवरले व्यू, बेसमैप के WebGL रेंडरिंग कॉन्टेक्स्ट को दिखाता है. इस वजह से, यह बहुत ज़रूरी है कि ऑब्जेक्ट को रेंडर करते समय, जीएल स्थिति को उसकी मूल स्थिति पर रीसेट कर दिया जाए. जीएल स्थिति को रीसेट करने में असफल होने से जीएल स्थिति के विवाद हो सकते हैं, जिसकी वजह से मैप और आपके बताए गए कोई भी ऑब्जेक्ट रेंडर नहीं हो पाएंगे.

आम तौर पर, GL स्थिति को रीसेट करने का काम onDraw() हुक में किया जाता है. उदाहरण के लिए, three.js हेल्पर फ़ंक्शन की सुविधा देता है जो GL स्थिति में हुए बदलावों को हटा देता है:

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

अगर मैप या आपके ऑब्जेक्ट रेंडर नहीं हो पाते हैं, तो हो सकता है कि GL स्थिति रीसेट नहीं हुई हो.

निर्देशांक रूपांतरण

वेक्टर मैप पर किसी ऑब्जेक्ट की पोज़िशन, अक्षांश और देशांतर के निर्देशांकों के साथ-साथ ऊंचाई का कॉम्बिनेशन देकर तय की जाती है. हालांकि, 3D ग्राफ़िक के बारे में दुनिया की जगह, कैमरा स्पेस या स्क्रीन स्पेस में दिया गया है. मैप के निर्देशांकों को आम तौर पर इस्तेमाल किए जाने वाले इन स्पेस में बदलना आसान बनाने के लिए, WebGL ओवरले व्यू onDraw() हुक में coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) हेल्पर फ़ंक्शन देता है जो ये काम करता है और 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 लाइब्रेरी है. इसका इस्तेमाल करके, मैप पर 3D ऑब्जेक्ट दिखाया जा सकता है. इस पेज के सबसे ऊपर चलने वाले उदाहरण को बनाने के लिए, WebGL ओवरले व्यू के सिलसिलेवार निर्देशों के बारे में पूरी जानकारी पाने के लिए, WebGL-Accelerated Map Experience कोडलैब बनाना देखें.

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);