WebGL ওভারলে ভিউ

স্যাম্পেল দেখুন

WebGL ওভারলে ভিউয়ের সাহায্যে আপনি সরাসরি WebGL ব্যবহার করে অথবা Three.js-এর মতো জনপ্রিয় গ্রাফিক্স লাইব্রেরি ব্যবহার করে আপনার ম্যাপে কন্টেন্ট যোগ করতে পারবেন। WebGL ওভারলে ভিউ, ভেক্টর বেসম্যাপ রেন্ডার করার জন্য Google Maps Platform যে WebGL রেন্ডারিং কন্টেক্সট ব্যবহার করে, সরাসরি সেটির অ্যাক্সেস প্রদান করে। শেয়ার করা রেন্ডারিং কনটেক্সটের এই ব্যবহার বিভিন্ন সুবিধা প্রদান করে যেমন, 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}) একবার কল করা হয়। শেডার, GL বাফার অবজেক্ট ইত্যাদি WebGL স্টেট ইনিশিয়ালাইজ বা বাইন্ড করতে এটি ব্যবহার করুন। onContextRestored()-এ WebGLStateOptions ইনস্ট্যান্স থাকে, যার একটি ফিল্ড আছে:
  • 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 স্টেট রিসেট করা হয়নি।

কোঅর্ডিনেট ট্রান্সফর্মেশন

ভেক্টর ম্যাপে কোনও অবজেক্টের অবস্থান অক্ষাংশ ও দ্রাঘিমাংশের কোঅর্ডিনেটের পাশাপাশি উচ্চতার সংমিশ্রণ প্রদান করে নির্দিষ্ট করা হয়। তবে, 3D গ্রাফিক্স, ওয়ার্ল্ড স্পেস, ক্যামেরা স্পেস বা স্ক্রিন স্পেসে নির্দিষ্ট করা হয়। এইসব বেশি ব্যবহৃত স্পেসে ম্যাপ কোঅর্ডিনেট ট্রান্সফর্ম করা সহজ করতে, WebGL ওভারলে ভিউ onDraw() হুকে coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) হেল্পার ফাংশন প্রদান করে যা নিম্নলিখিতগুলি নেয় এবং Float64Array রিটার্ন করে:

• latLngAltitude: অক্ষাংশ/দ্রাঘিমাংশ/উচ্চতা কোঅর্ডিনেট হয় LatLngAltitude হিসেবে অথবা LatLngAltitudeLiteral হিসেবে।
• rotationArr: ডিগ্রিতে নির্দিষ্ট করা অয়লার রোটেশন অ্যাঙ্গেলের Float32Array।
• scalarArr: কার্ডিনাল অ্যাক্সিসে প্রয়োগ করার জন্য Float32Array স্ক্যালার।

যেমন, Three.js-এ ক্যামেরা প্রোজেকশন ম্যাট্রিক্স তৈরি করতে, নিম্নলিখিত কোডে fromLatLngAltitude() ব্যবহার করা হয়েছে:

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 ওভারলে ভিউ ব্যবহার করার সম্পূর্ণ ওয়াকথ্রু পেতে, Building WebGL-accelerated Map Experiences codelab ব্যবহার করে দেখুন।

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