Objects noticeably jitter / anchor issue

[MadOPcode]

While using @googlemaps/three I've noticed that 3D objects rendered onto the map using ThreeJSOverlayView jitter.
https://drive.google.com/file/d/1uacSEtHdXIxr5tLRQtKwhRqog6vY_w5T/view?usp=sharing
Apparently this is related to the fact that the objects and the camera are too far from the world's origin. So when the vertices' positions are computed by the shader there's not enough fp precision (see src/fp-precision directory in the linked repo).
So I tried moving the world's origin closer to the camera for which the anchor property of ThreeJSOverlayView exists it seems. And indeed the jittering of the objects in this case is not observed (see src/rel-coords directory in the linked repo). However the coordinates (computed using latLngToVector3Relative) at which the objects are rendered are way off (except for the object which is located exactly at the anchor's position). Compare positions of red boxes which are not in the initial center in fp-precision and rel-coords in the linked repo.
So how to go about these issues?

Environment details

Windows 10 x64, Chrome (latest)

Steps to reproduce

Just clone the repo linked below and follow the README.

Code example

Here's the repo with the described issues:
https://github.com/MadOPcode/googlemaps-threejsoverlayview-issues

[jpoehnelt]

Added a test case for latLngToVector3Relative in #190 using the two coords but it returns a vector within 1 meter (when compared to an external source I used to project the coordinates from epsg:4326 to epsg:3857).

Given the location, this makes me think there is a scaling issue going on.

[jpoehnelt]

Added grid to confirm.

scene.add(new GridHelper(2500, 10));

Which corresponds to:

relative: {
      x: 567.288771994994,
      y: -254.89467016328126,
    },

Probably need to make a reproducible example that doesn't use this library and see if it is caused by something in:

onDraw(
    gl: WebGLRenderingContext,
    transformer: google.maps.CoordinateTransformer
  ): void {
    const { lat, lng, altitude } = this.anchor;

    this.camera.projectionMatrix.fromArray(
      transformer.fromLatLngAltitude(
        { lat, lng },
        altitude,
        this.rotation,
        this.scale
      )
    );

    gl.disable(gl.SCISSOR_TEST);

    this.requestRedraw();
    this.renderer.render(this.scene, this.camera);

    // reset state using renderer.resetState() and not renderer.state.reset()
    this.renderer.resetState();
  }

or is a bug in the transformer (maybe??)

[MadOPcode]

@jpoehnelt should I file a bug for Maps Javascript API to the issue tracker?

[jpoehnelt]

Yeah, please do and add the link back here.

[jpoehnelt]

Reported in public tracker at https://issuetracker.google.com/issues/206669734

[teledemic]

FWIW I get a crazy amount of jitter even on the official basic example, when zoomed in closely to the box and rotating the camera (in chrome). The vertices on the box move a little even when the camera isn't moving. Zoomed out is fine.
https://googlemaps.github.io/js-three/public/basic/

Screen.Recording.2021-12-07.at.3.42.32.PM.mov

[jpoehnelt]

@teledemic Can you create a reproducible example without this library and post to https://issuetracker.google.com/issues/206669734.

[teledemic]

Hm probably not. I'm using this library since I don't know enough about doing it without.

FWIW I switched to this library from https://github.com/ubilabs/threejs-overlay-view because that seems to have been abandoned - that library had other coordinate problems, but did not have the jitter.

[googlemaps-bot]

🎉 This issue has been resolved in version 3.0.3 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)
• v3.0.3

Your semantic-release bot 📦🚀