Repeating worlds blend bug

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Repeating worlds</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@loaders.gl/[email protected]/dist/dist.min.js"></script>
    <script src="https://unpkg.com/@loaders.gl/[email protected]/dist/dist.min.js"></script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb"
    ></script> 
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

registerLoaders(GLTFLoader);

const parameters = {
  // Uncomment to have deck.gl ignore depth mask
  // Results in better blending, but still wrong  
  // depthMask: false
};

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {lat: 40, lng: -120}, zoom: 0,
    gestureHandling: 'greedy', mapId: 'fae05836df2dc8bb'
  });

  const scenegraphLayer = new deck.ScenegraphLayer({
    id: 'scenegraph',
    data: [[-150, -0]],
    opacity: 0.2,
    sizeScale: 10000000,
    scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb',
    getOrientation: [0, 0, 90],
    getPosition: p => p,
    parameters
  });

  const overlay = new deck.GoogleMapsOverlay({
    layers: [scenegraphLayer]
  });
  overlay.setMap(map);
}

initMap();