Merge pull request #185 from UDST/feature/basemap-layer-fix

Fix layering issue with basemap tiles

src/engine/Renderer.js

@@ -7,6 +7,12 @@ import Scene from './Scene';
 export default function(container, antialias) {
   var renderer = new THREE.WebGLRenderer({
     antialias: antialias
+
+    // Enabling this removes a lot of z-index intersecting but it also removes
+    // shadows due to a bug in three.js
+    //
+    // See: https://github.com/mrdoob/three.js/issues/7815
+    // logarithmicDepthBuffer: true
   });
 
   // TODO: Re-enable when this works with the skybox

src/layer/GeoJSONLayer.js

@@ -256,7 +256,7 @@ class GeoJSONLayer extends LayerGroup {
               if (style.outlineRenderOrder !== undefined) {
                 style.lineRenderOrder = style.outlineRenderOrder;
               } else {
-                style.lineRenderOrder = (style.renderOrder) ? style.renderOrder + 1 : 2;
+                style.lineRenderOrder = (style.renderOrder) ? style.renderOrder + 1 : 4;
               }
 
               if (style.outlineWidth) {

src/layer/GeoJSONWorkerLayer.js

@@ -266,7 +266,9 @@ class GeoJSONWorkerLayer extends Layer {
       for (var i = 0; i < objects.length; i++) {
         obj = objects[i];
 
-        if (polygonFlat && !obj.flat) {
+        // TODO: Work out why obj.flat is rarely set to something other than
+        // true or false. Potentially undefined.
+        if (polygonFlat && obj.flat === false) {
           polygonFlat = false;
         }
 
@@ -304,7 +306,7 @@ class GeoJSONWorkerLayer extends Layer {
         if (style.outlineRenderOrder !== undefined) {
           style.lineRenderOrder = style.outlineRenderOrder;
         } else {
-          style.lineRenderOrder = (style.renderOrder) ? style.renderOrder + 1 : 2;
+          style.lineRenderOrder = (style.renderOrder) ? style.renderOrder + 1 : 4;
         }
 
         if (style.outlineWidth) {

src/layer/geometry/PointLayer.js

@@ -291,7 +291,7 @@ class PointLayer extends Layer {
 
     if (flat) {
       material.depthWrite = false;
-      mesh.renderOrder = 1;
+      mesh.renderOrder = 4;
     }
 
     if (options.interactive) {

src/layer/geometry/PolygonLayer.js

@@ -404,7 +404,9 @@ class PolygonLayer extends Layer {
 
     if (flat) {
       material.depthWrite = false;
-      mesh.renderOrder = style.renderOrder || 1;
+
+      var renderOrder = (style.renderOrder !== undefined) ? style.renderOrder : 3;
+      mesh.renderOrder = renderOrder;
     }
 
     if (options.interactive) {

src/layer/tile/ImageTile.js

@@ -69,10 +69,16 @@ class ImageTile extends Tile {
     localMesh.rotation.x = -90 * Math.PI / 180;
 
     localMesh.receiveShadow = true;
-    localMesh.renderOrder = 0;
+
+    // Setting this causes a depth-buffer intersection issue on the
+    // all-the-things example
+    // localMesh.renderOrder = 2;
 
     mesh.add(localMesh);
-    mesh.renderOrder = 0;
+
+    // Setting this causes a depth-buffer intersection issue on the
+    // all-the-things example
+    // mesh.renderOrder = 2;
 
     mesh.position.x = this._center[0];
     mesh.position.z = this._center[1];

src/layer/tile/ImageTileLayer.js

@@ -72,26 +72,33 @@ class ImageTileLayer extends TileLayer {
   _onAdd(world) {
     return new Promise((resolve, reject) => {
       super._onAdd(world).then(() => {
+        // TODO: Removed because it causes depth buffer intersection issues
+        // with layer on top for some reason. Need to work out why and fix.
+        //
         // Add base layer
-        var geom = new THREE.PlaneBufferGeometry(2000000, 2000000, 1);
+        // var geom = new THREE.PlaneBufferGeometry(2000000, 2000000, 1);
 
-        var baseMaterial;
-        if (this._world._environment._skybox) {
-          baseMaterial = ImageTileLayerBaseMaterial('#f5f5f3', this._world._environment._skybox.getRenderTarget());
-        } else {
-          baseMaterial = ImageTileLayerBaseMaterial('#f5f5f3');
-        }
+        // var baseMaterial;
+        // if (this._world._environment._skybox) {
+        //   baseMaterial = ImageTileLayerBaseMaterial('#f5f5f3', this._world._environment._skybox.getRenderTarget());
+        // } else {
+        //   baseMaterial = ImageTileLayerBaseMaterial('#f5f5f3');
+        // }
 
-        var mesh = new THREE.Mesh(geom, baseMaterial);
-        mesh.renderOrder = -1;
-        mesh.rotation.x = -90 * Math.PI / 180;
+        // var mesh = new THREE.Mesh(geom, baseMaterial);
 
-        // TODO: It might be overkill to receive a shadow on the base layer as it's
-        // rarely seen (good to have if performance difference is negligible)
-        mesh.receiveShadow = true;
+        // // Setting this causes a depth-buffer intersection issue on the
+        // // all-the-things example
+        // // mesh.renderOrder = -1;
 
-        this._baseLayer = mesh;
-        this.add(mesh);
+        // mesh.rotation.x = -90 * Math.PI / 180;
+
+        // // TODO: It might be overkill to receive a shadow on the base layer as it's
+        // // rarely seen (good to have if performance difference is negligible)
+        // mesh.receiveShadow = true;
+
+        // this._baseLayer = mesh;
+        // this.add(mesh);
 
         // Trigger initial quadtree calculation on the next frame
         //
@@ -114,7 +121,7 @@ class ImageTileLayer extends TileLayer {
     this._throttledWorldUpdate = throttle(this._onWorldUpdate, 100);
 
     this._world.on('preUpdate', this._throttledWorldUpdate, this);
-    this._world.on('move', this._onWorldMove, this);
+    // this._world.on('move', this._onWorldMove, this);
   }
 
   _onWorldUpdate() {