WebGL ओवरले व्यू

उदाहरण देखें

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

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

WebGL Overlay View का इस्तेमाल करने के लिए, आपको मैप आईडी का इस्तेमाल करके मैप लोड करना होगा. साथ ही, वेक्टर मैप चालू करना होगा. हमारा सुझाव है कि मैप आईडी बनाते समय, टिल्ट और रोटेशन की सुविधा चालू करें. इससे 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() को तब कॉल किया जाता है, जब किसी वजह से रेंडरिंग कॉन्टेक्स्ट खो जाता है. साथ ही, यह वह जगह है जहां आपको पहले से मौजूद किसी भी जीएल स्टेट को साफ़ करना चाहिए, क्योंकि अब इसकी ज़रूरत नहीं है.
• 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);

जीएल स्टेट को रीसेट किया जा रहा है

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

आम तौर पर, 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 की मदद से मैप को बेहतर बनाने के लिए कोडलैब आज़माएं.

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