WebGL ওভারলে ভিউ

নমুনা দেখুন

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

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

WebGL ওভারলে ভিউ ব্যবহার করতে, আপনাকে অবশ্যই ভেক্টর ম্যাপ সক্ষম করে একটি মানচিত্র ID ব্যবহার করে মানচিত্রটি লোড করতে হবে। সম্পূর্ণ 3D ক্যামেরা নিয়ন্ত্রণের জন্য আপনি মানচিত্র ID তৈরি করার সময় আমরা কাত এবং ঘূর্ণন সক্ষম করার দৃঢ়ভাবে সুপারিশ করি। বিস্তারিত জানার জন্য ওভারভিউ দেখুন .

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}) কল করা হয়। যেকোন ওয়েবজিএল স্টেট যেমন শেডার, জিএল বাফার অবজেক্ট ইত্যাদি শুরু করতে বা আবদ্ধ করতে এটি ব্যবহার করুন। 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);

উদাহরণ

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

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