WebGL yer paylaşımlı görünüm

Örneği görüntüle

WebGL yer paylaşımlı görünüm ile doğrudan WebGL'yi veya Three.js gibi popüler grafik kitaplıklarını kullanarak haritalarınıza içerik ekleyebilirsiniz. WebGL yer paylaşımlı görünüm, Google Haritalar Platformu'nun vektör temel haritasını oluşturmak için kullandığı WebGL oluşturma bağlamına doğrudan erişim sağlar. Paylaşılan bir oluşturma bağlamının bu şekilde kullanılması, 3D bina geometrisiyle derinlik oklüzyonu ve 2D/3D içeriği temel harita oluşturma ile senkronize etme gibi avantajlar sağlar. WebGL yer paylaşımlı görünüm ile oluşturulan nesneler, enlem/boylam koordinatlarına da bağlanabilir. Böylece haritayı sürüklediğinizde, yakınlaştırdığınızda, kaydırdığınızda veya eğdiğinizde nesneler de hareket eder.

Şartlar

WebGL yer paylaşımlı görünüm'ü kullanmak için vektör harita etkinleştirilmiş bir harita kimliğiyle haritayı yüklemeniz gerekir. Tam 3D kamera kontrolüne izin vermek için harita kimliğini oluştururken eğme ve döndürme özelliklerini etkinleştirmenizi önemle tavsiye ederiz. Ayrıntılar için genel bakış bölümüne bakın.

WebGL yer paylaşımlı görünümü ekleme

Yer paylaşımını haritanıza eklemek için google.maps.WebGLOverlayView öğesini uygulayın, ardından setMap kullanarak harita örneğinize iletin:

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

Yaşam döngüsü kancaları

WebGL yer paylaşımlı görünümü, vektör taban haritasının WebGL oluşturma bağlamının yaşam döngüsünde çeşitli zamanlarda çağrılan bir dizi kanca sağlar. Bu yaşam döngüsü kancaları, yer paylaşımında oluşturulmasını istediğiniz her şeyi ayarladığınız, çizdiğiniz ve kaldırdığınız yerlerdir.

  • Yer paylaşımı oluşturulduğunda onAdd() çağrılır. Bu işlevi, kaplama çizilmeden önce WebGL oluşturma bağlamına anında erişim gerektirmeyen ara veri yapılarını getirmek veya oluşturmak için kullanın.
  • onContextRestored({gl}), oluşturma bağlamı kullanılabilir olduğunda çağrılır. Gölgelendiriciler, GL arabellek nesneleri vb. WebGL durumlarını ilk kullanıma hazırlamak veya bağlamak için bu yöntemi kullanın. onContextRestored(), tek bir alanı olan bir WebGLStateOptions örneği alır:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için bir tutma yeridir.
  • onDraw({gl, transformer}), sahneyi temel haritada oluşturur. onDraw() parametreleri, iki alanı olan bir WebGLDrawOptions nesnesidir:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için bir tutma yeridir.
    • transformer, harita koordinatlarını model-görünüm-projeksiyon matrisine dönüştürmek için yardımcı işlevler sağlar. Bu işlevler, harita koordinatlarını dünya uzayına, kamera uzayına ve ekran uzayına dönüştürmek için kullanılabilir.
  • onContextLost(), oluşturma bağlamı herhangi bir nedenle kaybolduğunda çağrılır. Artık ihtiyaç duyulmadığı için önceden var olan tüm GL durumlarını burada temizlemeniz gerekir.
  • onStateUpdate({gl}), oluşturma döngüsünün dışında GL durumunu günceller ve requestStateUpdate çağrıldığında başlatılır. Tek bir alanı olan bir WebGLStateOptions örneği alır:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için bir tutma yeridir.
  • onRemove(), yer paylaşımı WebGLOverlayView.setMap(null) ile haritadan kaldırıldığında çağrılır ve tüm ara nesneleri kaldırmanız gereken yerdir.

Örneğin, aşağıda tüm yaşam döngüsü kancalarının temel bir uygulaması verilmiştir:

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 durumunu sıfırlama

WebGL yer paylaşımlı görünüm, temel haritanın WebGL oluşturma bağlamını gösterir. Bu nedenle, nesneleri oluşturmayı tamamladığınızda GL durumunu orijinal durumuna sıfırlamanız son derece önemlidir. GL durumunun sıfırlanmaması, GL durumu çakışmalarına neden olabilir. Bu da hem haritanın hem de belirttiğiniz nesnelerin oluşturulmasının başarısız olmasına yol açar.

GL durumunu sıfırlama işlemi normalde onDraw() kancasında gerçekleştirilir. Örneğin, Three.js, GL durumunda yapılan değişiklikleri temizleyen bir yardımcı işlev sağlar:

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

Harita veya nesneleriniz oluşturulamazsa GL durumunun sıfırlanmamış olması muhtemeldir.

Koordinat Dönüşümleri

Bir nesnenin vektör haritasındaki konumu, enlem ve boylam koordinatlarının yanı sıra yükseklik bilgisi verilerek belirtilir. Ancak 3D grafikler, dünya alanı, kamera alanı veya ekran alanında belirtilir. Harita koordinatlarını bu en çok tercih edilen alanlara dönüştürmeyi kolaylaştırmak için WebGL Yer Paylaşımlı Görünüm, aşağıdaki değerleri alan ve Float64Array döndüren onDraw() kancasında coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) yardımcı işlevini sağlar:

  • latLngAltitude: Enlem/boylam/yükseklik koordinatları LatLngAltitude veya LatLngAltitudeLiteral olarak.
  • rotationArr: Derece cinsinden belirtilen Euler döndürme açılarının Float32Array.
  • scalarArr: Ana eksene uygulanacak skalerlerin Float32Array.

Örneğin, aşağıda Three.js'te kamera projeksiyon matrisi oluşturmak için fromLatLngAltitude() işlevi kullanılmaktadır:

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

Örnek

Aşağıda, haritaya 3D nesne yerleştirmek için popüler bir açık kaynaklı WebGL kitaplığı olan Three.js'in kullanımına ilişkin basit bir örnek verilmiştir. Bu sayfanın üst kısmında çalışan örneği oluşturmak için WebGL yer paylaşımlı görünümünü kullanma hakkında eksiksiz bir adım adım açıklamalı kılavuz için WebGL ile hızlandırılmış harita deneyimleri oluşturma codelab'ini deneyin.

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