WebGL ওভারলে ভিউ

নমুনা দেখুন

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

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