WebGL Yer Paylaşımı Görünümü

Örnek Görüntüle

WebGL yer paylaşımlı görünümü sayesinde doğrudan WebGL'yi veya Three.js gibi popüler grafik kitaplıklarını kullanarak haritalara içerik ekleyebilirsiniz. WebGL yer paylaşımı görünümü, Google Haritalar Platformu'nun vektör taban 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 kullanılması, 3D bina geometrisiyle derinlik gizleme ve 2D/3D içeriği temel harita oluşturmayla senkronize etme gibi avantajlar sağlar. WebGL Yer paylaşımı görünümüyle 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 yatırdığınızda hareket ederler.

Şartlar

WebGL yer paylaşımı görünümünü kullanmak için haritayı, vektör haritanın etkin olduğu bir harita kimliği kullanarak yüklemeniz gerekir. Tam 3D kamera kontrolü için harita kimliğini oluştururken eğilme ve döndürme özelliğini 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

Yerleşimi haritanıza eklemek için google.maps.WebGLOverlayView'ü 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 ana haritanı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 yerdir.

  • Yer paylaşımı oluşturulduğunda onAdd() çağrılır. Yer paylaşımı çizilmeden önce WebGL oluşturma bağlamına anında erişim gerektirmeyen ara veri yapılarını almak veya oluşturmak için kullanın.
  • Oluşturma bağlamı kullanılabilir hale geldiğinde onContextRestored({gl}) çağrılır. Bu işlevi, gölgelendiriciler, GL arabellek nesneleri vb. gibi herhangi bir WebGL durumunu başlatmak veya bağlamak için kullanın. onContextRestored(), tek bir alanı olan bir WebGLStateOptions örneği alır:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext öğesinin herkese açık kullanıcı adıdır.
  • onDraw({gl, transformer}), temel haritada sahneyi oluşturur. onDraw() parametreleri, iki alanı olan bir WebGLDrawOptions nesnesi şeklindedir:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext öğesinin herkese açık kullanıcı adıdır.
    • transformer, harita koordinatlarını dünya uzayına, kamera uzayına ve ekran uzayına dönüştürmek için kullanılabilecek harita koordinatlarından model-görüntü-projeksiyon matrisine dönüştürme yardımcı işlevleri sağlar.
  • onContextLost(), oluşturma bağlamı herhangi bir nedenle kaybedildiğinde çağrılır ve artık gerekli olmadığı için önceden var olan GL durumunu temizlemeniz gereken yerdir.
  • onStateUpdate({gl}), GL durumunu oluşturma döngüsünün dışında günceller ve requestStateUpdate çağrıldığında çağrılır. Tek bir alanı olan bir WebGLStateOptions örneği alır:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext öğesinin herkese açık kullanıcı adıdır.
  • Yer paylaşımı WebGLOverlayView.setMap(null) ile haritadan kaldırıldığında onRemove() çağrılır ve tüm ara nesneleri buradan kaldırmanız gerekir.

Örneğin, aşağıdaki kod tüm yaşam döngüsü kancalarının temel bir uygulamasıdır:

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ü, ana 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şturulmamasına yol açar.

GL durumunun sıfırlanması genellikle onDraw() kancasında işlenir. Örneğin, Three.js, GL durumundaki tüm 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şturulamıyorsa GL durumunun sıfırlanmamış olması muhtemeldir.

Koordinat Dönüşümleri

Bir nesnenin vektör haritadaki konumu, enlem ve boylam koordinatlarının yanı sıra rakım bilgisinin bir kombinasyonuyla belirtilir. Ancak 3D grafikler dünya uzayında, kamera uzayında veya ekran uzayında belirtilir. WebGL yer paylaşımlı görünüm, harita koordinatlarını daha yaygın kullanılan bu alanlara dönüştürmeyi kolaylaştırmak için onDraw() kancasında aşağıdakileri alan ve bir Float64Array döndüren coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) yardımcı işlevini sağlar:

  • latLngAltitude: LatLngAltitude veya LatLngAltitudeLiteral olarak enlem/boylam/yükseklik koordinatları.
  • rotationArr: Derece cinsinden belirtilen Float32Array Euler dönme açısı.
  • scalarArr: Kardinal eksene uygulanacak Float32Array skaler.

Örneğin, aşağıdaki kodda Three.js'de kamera projeksiyon matrisi oluşturmak için fromLatLngAltitude() 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 ve açık kaynaklı bir WebGL kitaplığı olan Three.js'in kullanıldığı basit bir örnek verilmiştir. Bu sayfanın üst kısmında gördüğünüz örneği oluşturmak için WebGL yer paylaşımlı görünümünü kullanmayla ilgili eksiksiz bir adım adım açıklamalı kılavuz için WebGL 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);