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

Örneği Göster

WebGL Yer Paylaşımlı Görüntüleme ile, doğrudan WebGL'yi veya Three.js gibi popüler Grafik kitaplıklarını kullanarak haritalarınıza içerik ekleyebilirsiniz. WebGL Yerleşim Görünümü, Google Haritalar Platformu'nun vektör temel haritasını oluşturmak için kullandığı WebGL görüntüleme bağlamına doğrudan erişim sağlar. Paylaşılan oluşturma bağlamının bu şekilde kullanılması, 3D bina geometrisinde derinliği kapatma ve 2D/3D içeriği temel harita oluşturma işlemiyle senkronize etme gibi avantajlar sağlar. WebGL Yer Paylaşım 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 hareket ederler.

Koşullar

WebGL Yer Paylaşımlı Görünümü kullanmak için haritayı, vektör haritası etkinleştirilmiş bir harita kimliği kullanarak yüklemeniz gerekir. 3D kameranın tam 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

Bindirmeyi haritanıza eklemek için google.maps.WebGLOverlayView kodunu uygulayın, ardından setMap kodunu 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 Yerleşim Görünümü, vektör temel haritasının WebGL oluşturma bağlamının yaşam döngüsü içinde çeşitli zamanlarda çağrılan bir kanca kümesi sağlar. Bu yaşam döngüsü kancaları, yer paylaşımında oluşturulmasını istediğiniz her şeyi yerleştirdiğiniz, çizdiğiniz ve yıktığınız yerdir.

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

WebGL Yerleşim 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şturma işleminin 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 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şturulamazsa GL durumu sıfırlanmamış olabilir.

Dönüşümleri Koordine Etme

Bir nesnenin vektör haritasındaki konumu, enlem ve boylam koordinatlarının yanı sıra rakım kombinasyonu sağlanarak belirlenir. Bununla birlikte, 3D grafikler dünya uzayı, kamera alanı veya ekran alanında belirtilir. WebGL Yer Paylaşım 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ğıdaki bilgileri 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: Float32Array derece cinsinden belirtilen euler dönüş açıları.
• 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ılı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 kaynaklı bir WebGL kitaplığı olan Three.js'nin kullanılmasına ilişkin basit bir örnek verilmiştir. Bu sayfanın üst kısmında gördüğünüz örneği oluştururken WebGL Yer Paylaşımı Görünümü'nü kullanmayla ilgili tam 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);