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

Örneği Görüntüle

WebGL Overlay View 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 oluşturma bağlamının bu şekilde kullanılması, 3D bina geometrisi ile derinlik kapama 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 yatırdığınızda bu nesneler hareket eder.

Koşullar

WebGL Yer Paylaşımlı Görünüm'ü kullanmak için, haritayı, vektör haritasının etkin olduğu bir harita kimliği kullanarak yüklemeniz gerekir. Tam 3D kamera kontrolüne olanak tanımak için harita kimliğini oluştururken yatırma ve döndürmeyi etkinleştirmenizi önemle tavsiye ederiz. Ayrıntılar için genel bakışı inceleyin.

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

Yer paylaşımını haritanıza eklemek için google.maps.WebGLOverlayView öğesini uygulayın ve ardından setMap kullanarak harita örneğinizi 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 temel 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 kurduğunuz, çizdiğiniz ve ortadan kaldırdığınız yerdir.

  • Yer paylaşımı oluşturulduğunda onAdd() çağrılır. Bunu, WebGL oluşturma bağlamına hemen erişim gerektirmeyen, bindirme çizilmeden önce ara veri yapılarını getirmek veya oluşturmak için kullanın.
  • Oluşturma bağlamı kullanılabilir olduğunda onContextRestored({gl}) çağrılır. Gölgelendiriciler ve GL arabellek nesneleri gibi WebGL durumlarını başlatmak veya bağlamak için bunu kullanın. onContextRestored(), tek bir alanı olan WebGLStateOptions örneğini alır:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için herkese açık kullanıcı adı olarak kullanılıyor.
  • onDraw({gl, transformer}), temel haritadaki sahneyi oluşturur. onDraw() parametreleri, iki alanı olan bir WebGLDrawOptions nesnesidir:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için herkese açık kullanıcı adı olarak kullanılıyor.
    • transformer, harita koordinatlarından model görünümü projeksiyonu matrisine dönüşen yardımcı işlevler sağlar. Bu matris, harita koordinatlarını dünya uzayına, kamera uzayına ve ekran alanına çevirmek için kullanılabilir.
  • Oluşturma bağlamı herhangi bir nedenle kaybolduğunda onContextLost() çağrılır ve artık gerekli olmadığı için önceden mevcut 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 için herkese açık kullanıcı adı olarak kullanılıyor.
  • onRemove(), haritadan WebGLOverlayView.setMap(null) ile birlikte 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ı gösterilmektedir:

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 Durumu sıfırlanıyor

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

GL durumunun sıfırlanması normalde onDraw() kancasında gerçekleştirilir. Örneğin, Three.js, GL durumundaki 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 durumu büyük olasılıkla sıfırlanmamıştır.

Dönüşümleri koordine etme

Bir nesnenin vektör haritasındaki konumu, enlem ve boylam koordinatlarının yanı sıra rakımın bir kombinasyonu sağlanarak belirtilir. Ancak 3D grafikler dünya uzayı, kamera alanı veya ekran alanında belirtilir. WebGL Yer Paylaşımlı Görünüm, harita koordinatlarını daha yaygın olarak kullanılan bu alanlara dönüştürmeyi kolaylaştırmak için onDraw() kancasında aşağıdakini alıp Float64Array döndüren coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) yardımcı işlevini sağlar:

  • latLngAltitude: LatLngAltitude veya LatLngAltitudeLiteral biçiminde enlem/boylam/rakım koordinatları.
  • rotationArr: Derece olarak belirtilen euler dönüş açılarının Float32Array kadarı.
  • scalarArr: Kardinal eksene uygulanacak Float32Array skaler değeri.

Örneğin, aşağıda Three.js'de bir kamera projeksiyonu 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, açık kaynak WebGL kitaplığı Three.js'nin kullanılmasına ilişkin basit bir örnek gösterilmektedir. Bu sayfanın üst kısmında çalışırken gördüğünüz örneği oluşturmak için WebGL Overlay View'ı (WebGL Yer Paylaşımlı Görünüm) kullanmayla ilgili tam bir adım adım açıklamalı kılavuz için Building WebGL-Accelerated Map Experiences codelab'i (WebGL hızlandırılmış Harita Deneyimleri Oluşturma) 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);