WebGL ওভারলে ভিউ

নমুনা দেখুন

WebGL Overlay View-এর সাহায্যে আপনি সরাসরি WebGL ব্যবহার করে, অথবা Three.js-এর মতো জনপ্রিয় গ্রাফিক্স লাইব্রেরি ব্যবহার করে আপনার ম্যাপে কন্টেন্ট যোগ করতে পারেন। WebGL Overlay View সেই একই WebGL রেন্ডারিং কনটেক্সট-এ সরাসরি অ্যাক্সেস দেয়, যা Google Maps Platform ভেক্টর বেসম্যাপ রেন্ডার করার জন্য ব্যবহার করে। এই শেয়ার্ড রেন্ডারিং কনটেক্সট ব্যবহারের ফলে 3D বিল্ডিং জ্যামিতির সাথে ডেপথ অক্লুশন এবং বেসম্যাপ রেন্ডারিংয়ের সাথে 2D/3D কন্টেন্ট সিঙ্ক করার মতো সুবিধা পাওয়া যায়। WebGL Overlay View দিয়ে রেন্ডার করা অবজেক্টগুলোকে অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্কের সাথেও যুক্ত করা যায়, ফলে আপনি যখন ম্যাপটি ড্র্যাগ, জুম, প্যান বা টিল্ট করেন, তখন সেগুলোও নড়াচড়া করে।

প্রয়োজনীয়তা

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 Overlay View একগুচ্ছ হুক প্রদান করে, যেগুলো ভেক্টর বেসম্যাপের WebGL রেন্ডারিং কনটেক্সটের লাইফসাইকেলের বিভিন্ন সময়ে কল করা হয়। এই লাইফসাইকেল হুকগুলোর মাধ্যমেই আপনি ওভারলেতে রেন্ডার করতে চান এমন যেকোনো কিছু সেটআপ, ড্র এবং টিয়ার ডাউন করতে পারেন।

• ওভারলে তৈরি হলে onAdd() কল করা হয়। ওভারলে আঁকার আগে এমন অন্তর্বর্তী ডেটা স্ট্রাকচার তৈরি বা সংগ্রহ করতে এটি ব্যবহার করুন, যেগুলোর জন্য WebGL রেন্ডারিং কনটেক্সটে তাৎক্ষণিক অ্যাক্সেসের প্রয়োজন হয় না।
• রেন্ডারিং কনটেক্সট উপলব্ধ হলে onContextRestored({gl}) একবার কল করা হয়। শেডার, জিএল বাফার অবজেক্ট ইত্যাদির মতো যেকোনো WebGL স্টেট ইনিশিয়ালাইজ বা বাইন্ড করতে এটি ব্যবহার করুন। onContextRestored() একটি WebGLStateOptions ইনস্ট্যান্স গ্রহণ করে, যেটিতে একটিমাত্র ফিল্ড থাকে:
  • gl হলো বেসম্যাপ দ্বারা ব্যবহৃত WebGLRenderingContext এর একটি হ্যান্ডেল।
• onDraw({gl, transformer}) বেসম্যাপে দৃশ্যটি রেন্ডার করে। onDraw() এর প্যারামিটার হলো একটি WebGLDrawOptions অবজেক্ট, যার দুটি ফিল্ড রয়েছে:
  • gl হলো বেসম্যাপ দ্বারা ব্যবহৃত WebGLRenderingContext এর একটি হ্যান্ডেল।
  • transformer ম্যাপ কোঅর্ডিনেট থেকে মডেল-ভিউ-প্রজেকশন ম্যাট্রিক্সে রূপান্তর করার জন্য সহায়ক ফাংশন সরবরাহ করে, যা ম্যাপ কোঅর্ডিনেটকে ওয়ার্ল্ড স্পেস, ক্যামেরা স্পেস এবং স্ক্রিন স্পেসে স্থানান্তর করতে ব্যবহার করা যেতে পারে।
• যেকোনো কারণে রেন্ডারিং কনটেক্সট হারিয়ে গেলে onContextLost() কল করা হয়। এই পর্যায়ে আপনার আগে থেকে বিদ্যমান যেকোনো GL স্টেট মুছে ফেলা উচিত, কারণ সেগুলোর আর প্রয়োজন থাকে না।
• onStateUpdate({gl}) রেন্ডার লুপের বাইরে GL স্টেট আপডেট করে এবং requestStateUpdate কল করা হলে এটি চালু হয়। এটি একটি WebGLStateOptions ইনস্ট্যান্স গ্রহণ করে, যেটিতে একটিমাত্র ফিল্ড থাকে:
  • gl হলো বেসম্যাপ দ্বারা ব্যবহৃত WebGLRenderingContext এর একটি হ্যান্ডেল।
• WebGLOverlayView.setMap(null) ব্যবহার করে ম্যাপ থেকে ওভারলেটি সরানো হলে onRemove() কল করা হয়, এবং এখানেই সমস্ত মধ্যবর্তী অবজেক্টগুলো সরিয়ে ফেলা উচিত।

উদাহরণস্বরূপ, নিম্নলিখিতটি হলো সমস্ত লাইফসাইকেল হুকের একটি মৌলিক বাস্তবায়ন:

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 স্টেট রিসেট করতে ব্যর্থ হলে GL স্টেট কনফ্লিক্ট হওয়ার সম্ভাবনা থাকে, যার ফলে ম্যাপ এবং আপনার নির্দিষ্ট করা যেকোনো অবজেক্টের রেন্ডারিং ব্যর্থ হবে।

জিএল স্টেট রিসেট করার কাজটি সাধারণত onDraw() হুকে করা হয়। উদাহরণস্বরূপ, Three.js একটি হেল্পার ফাংশন প্রদান করে যা জিএল স্টেটের যেকোনো পরিবর্তন মুছে ফেলে:

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

যদি ম্যাপ বা আপনার অবজেক্টগুলো রেন্ডার হতে ব্যর্থ হয়, তাহলে খুব সম্ভবত জিএল স্টেট রিসেট করা হয়নি।

স্থানাঙ্ক রূপান্তর

ভেক্টর ম্যাপে কোনো বস্তুর অবস্থান অক্ষাংশ ও দ্রাঘিমাংশ স্থানাঙ্কের পাশাপাশি উচ্চতা প্রদানের মাধ্যমে নির্দিষ্ট করা হয়। তবে, 3D গ্রাফিক্স ওয়ার্ল্ড স্পেস, ক্যামেরা স্পেস বা স্ক্রিন স্পেসে নির্দিষ্ট করা হয়। ম্যাপের স্থানাঙ্কগুলোকে এই বহুল ব্যবহৃত স্পেসগুলোতে রূপান্তর করা সহজ করার জন্য, WebGL Overlay View তার 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);

উদাহরণ

নিচে একটি জনপ্রিয় ওপেন সোর্স WebGL লাইব্রেরি, Three.js ব্যবহার করে ম্যাপের উপর একটি 3D অবজেক্ট স্থাপন করার একটি সহজ উদাহরণ দেওয়া হলো। এই পৃষ্ঠার শীর্ষে চলমান উদাহরণটি তৈরি করতে WebGL Overlay View ব্যবহারের সম্পূর্ণ নির্দেশিকার জন্য, Building WebGL-accelerated Map Experiences কোডল্যাবটি দেখুন।

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