googlemaps-samples / codelab-3d-maps-webgl-js Goto Github PK

Can I have the sample code of how the airplane gltf model moving on google maps with 3D buildings

https://geo-devrel-io2021-travel.web.app/#flights

Hi

I am doing the code lab using this codes and I got the error during installation and start.
npm fix or force fix will not remove the error.
I am testing the code on localhost

Thanks

webglOverlayView.onDraw = (gl, transformer) => {

should be

webglOverlayView.onDraw = ({gl, transformer}) => {

In this section https://developers.google.com/codelabs/maps-platform/webgl#3, it has a mistake showing the function initWebGLOverlayView(map) but it's WebglOverlayView() and inside this function webglOverlayView.onContextRestored = ({gl}) => {} and webglOverlayView.onDraw = ({gl, coordinateTransformer}) => {}, the parameters are without curly parentheses.

And here: https://developers.google.com/codelabs/maps-platform/webgl#5 , you use the parameter transformer, but in the rest of the documentation and sample code use coordinateTransformer.

I found that webGLOverlayView.onDraw will run infinitely, anyway we can stop it if there is no movement?

Since the map itself is vector and also 3D buildings are available on the map itself, is there a way to extract the building outlines or even the volume of the building?

Actually exactly this example here: https://geo-devrel-io2021-travel.web.app/#hotels (I assume the green Hotel is customly generated based on the polygon or vertices information of the hotel (provided by the API itself)?

I would like the possibility to modify the lighting of the buildings from the native map, and not only the one of the objects rendered afterwards with webgloverlay.

On Step4 :

webGLOverlayView.onDraw = ({gl, coordinateTransformer}) => {};

should be replaced by

  webGLOverlayView.onDraw = ({ gl, transformer }) => {};

Hi,

I've been trying to use google.maps.WebglOverlayView in my toy app, but couldn't make it work.
So I tested this project, and it seems I'm hitting the same issue.

After removing the plugins from webpack.config.js (does not seem to be needed for maps to work, as API is in app.js), and running npm i; npm start, I see the maps opening, but no 3D objects.

I added logging to various places, and while initWebglOverlayView gets called, the event handlers defined there never are (e.g. webglOverlayView.onAdd).

I suspect something might have changed with your APIs, as I see examples in your documentation now using "ThreeJSOverlayView", which is not documented in the "Reference" section of your docs.

Hi and thanks a ton for this great feature in Google maps / this example!

I was trying to use an environment map (with metalness / roughness - values) on my model and noticed that this doesn't seem to work with WebGLOverlayView. The reflections of the environment map on the object are static and are not updating correctly. I'm not sure if the problem is in my setup or in WebGLOverlayViewor in ThreeJS.

The video shows the result with Google Maps and WebGLOverlayView on top and the result with "normal" ThreeJS on the bottom.

Here are my change to your code:

    // load the model    
    loader = new GLTFLoader();
    const source = "pin.gltf";
    loader.load(
      source,
      gltf => {
        gltf.scene.scale.set(25, 25, 25);
        gltf.scene.rotation.x = 180 * Math.PI / 180; // rotations are in radians

        scene.add(gltf.scene);

+        // Load Environment Map
+        new EXRLoader().load("/furry_clouds_2k.exr", texture => {
+          const pmremGenerator = new THREE.PMREMGenerator(renderer);
+          const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);

+          // Apply Environment Map
+          gltf.scene.traverse(o => {
+            if (o.material) {
+              o.material.envMap = exrCubeRenderTarget.texture;
+              o.material.envMapIntensity = 1;
+              o.material.metalness = 1;
+              o.material.roughness = 0.1;
+              o.material.needsUpdate = true;
+            }
+          });
+        });
      }
    );

It's a pretty simple code change and I'm clueless why it's behaving like this. Please help!

PS: I also noticed that your GLTF has all inverted faces. It's not visible in your demo, but if you start changing the material settings, it becomes noticeable. Do you want a PR 🙂 ?

The link on https://developers.google.com/codelabs/maps-platform/webgl in the Prerequisites section referring to the 'Add a map to your website (JavaScript)' page returns a 404 page.
The link contains an href to -> https://codelabs.developers.google.com/codelabs/maps-platform/maps-platform-101-js
But that returns a 404 for me.

I think it should lead to https://developers.google.com/codelabs/maps-platform/maps-platform-101-js

Step 4. " and what you should it them for:" - switch "it" for "use"
Step 5. "...every object manually and then some. To make things..." - Something is missing after "some.

Would you consider adding an example that anchors a mesh or gltf model to a fixed lat/long location on the map and scales it accordingly as the camera is rotated and moved toward/away? That would be tremendously helpful. Sort of like the data layer for the maps/webGL. Thanks in advance.