Improved styling options for polygon layers and other fixes

dist/vizicities.js

@@ -3482,7 +3482,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	  renderer.gammaOutput = true;
 	
 	  renderer.shadowMap.enabled = true;
-	  renderer.shadowMap.cullFace = _three2['default'].CullFaceBack;
+	
+	  // TODO: Work out which of the shadowmap types is best
+	  // https://github.com/mrdoob/three.js/blob/r56/src/Three.js#L107
+	  // renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+	
+	  // TODO: Check that leaving this as default (CullFrontFace) is right
+	  // renderer.shadowMap.cullFace = THREE.CullFaceBack;
 	
 	  container.appendChild(renderer.domElement);
 	
@@ -14649,6 +14655,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	var GeoJSON = (function () {
 	  var defaultStyle = {
 	    color: '#ffffff',
+	    transparent: false,
+	    opacity: 1,
+	    blending: _three2['default'].NormalBlending,
 	    height: 0,
 	    lineOpacity: 1,
 	    lineTransparent: false,
@@ -16848,18 +16857,28 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	      geometry.computeBoundingBox();
 	
+	      // TODO: Make this work when style is a function per feature
+	      var style = typeof this._options.style === 'function' ? this._options.style(this._geojson.features[0]) : this._options.style;
+	      style = (0, _lodashAssign2['default'])({}, _utilGeoJSON2['default'].defaultStyle, style);
+	
 	      var material;
 	      if (this._options.polygonMaterial && this._options.polygonMaterial instanceof THREE.Material) {
 	        material = this._options.polygonMaterial;
 	      } else if (!this._world._environment._skybox) {
 	        material = new THREE.MeshPhongMaterial({
 	          vertexColors: THREE.VertexColors,
-	          side: THREE.BackSide
+	          side: THREE.BackSide,
+	          transparent: style.transparent,
+	          opacity: style.opacity,
+	          blending: style.blending
 	        });
 	      } else {
 	        material = new THREE.MeshStandardMaterial({
 	          vertexColors: THREE.VertexColors,
-	          side: THREE.BackSide
+	          side: THREE.BackSide,
+	          transparent: style.transparent,
+	          opacity: style.opacity,
+	          blending: style.blending
 	        });
 	        material.roughness = 1;
 	        material.metalness = 0.1;
@@ -17301,6 +17320,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	      // This default style is separate to Util.GeoJSON.defaultStyle
 	      style: {
 	        color: '#ffffff',
+	        transparent: false,
+	        opacity: 1,
+	        blending: _three2['default'].NormalBlending,
 	        height: 0
 	      }
 	    };
@@ -17530,12 +17552,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	      } else if (!this._world._environment._skybox) {
 	        material = new _three2['default'].MeshPhongMaterial({
 	          vertexColors: _three2['default'].VertexColors,
-	          side: _three2['default'].BackSide
+	          side: _three2['default'].BackSide,
+	          transparent: this._options.style.transparent,
+	          opacity: this._options.style.opacity,
+	          blending: this._options.style.blending
 	        });
 	      } else {
 	        material = new _three2['default'].MeshStandardMaterial({
 	          vertexColors: _three2['default'].VertexColors,
-	          side: _three2['default'].BackSide
+	          side: _three2['default'].BackSide,
+	          transparent: this._options.style.transparent,
+	          opacity: this._options.style.opacity,
+	          blending: this._options.style.blending
 	        });
 	        material.roughness = 1;
 	        material.metalness = 0.1;

src/engine/Renderer.js

@@ -20,7 +20,13 @@ export default function(container, antialias) {
   renderer.gammaOutput = true;
 
   renderer.shadowMap.enabled = true;
-  renderer.shadowMap.cullFace = THREE.CullFaceBack;
+
+  // TODO: Work out which of the shadowmap types is best
+  // https://github.com/mrdoob/three.js/blob/r56/src/Three.js#L107
+  // renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+  // TODO: Check that leaving this as default (CullFrontFace) is right
+  // renderer.shadowMap.cullFace = THREE.CullFaceBack;
 
   container.appendChild(renderer.domElement);
 

src/layer/GeoJSONLayer.js

@@ -205,18 +205,28 @@ class GeoJSONLayer extends LayerGroup {
 
     geometry.computeBoundingBox();
 
+    // TODO: Make this work when style is a function per feature
+    var style = (typeof this._options.style === 'function') ? this._options.style(this._geojson.features[0]) : this._options.style;
+    style = extend({}, GeoJSON.defaultStyle, style);
+
     var material;
     if (this._options.polygonMaterial && this._options.polygonMaterial instanceof THREE.Material) {
       material = this._options.polygonMaterial;
     } else if (!this._world._environment._skybox) {
       material = new THREE.MeshPhongMaterial({
         vertexColors: THREE.VertexColors,
-        side: THREE.BackSide
+        side: THREE.BackSide,
+        transparent: style.transparent,
+        opacity: style.opacity,
+        blending: style.blending
       });
     } else {
       material = new THREE.MeshStandardMaterial({
         vertexColors: THREE.VertexColors,
-        side: THREE.BackSide
+        side: THREE.BackSide,
+        transparent: style.transparent,
+        opacity: style.opacity,
+        blending: style.blending
       });
       material.roughness = 1;
       material.metalness = 0.1;

src/layer/geometry/PolygonLayer.js

@@ -38,6 +38,9 @@ class PolygonLayer extends Layer {
       // This default style is separate to Util.GeoJSON.defaultStyle
       style: {
         color: '#ffffff',
+        transparent: false,
+        opacity: 1,
+        blending: THREE.NormalBlending,
         height: 0
       }
     };
@@ -248,12 +251,18 @@ class PolygonLayer extends Layer {
     } else if (!this._world._environment._skybox) {
       material = new THREE.MeshPhongMaterial({
         vertexColors: THREE.VertexColors,
-        side: THREE.BackSide
+        side: THREE.BackSide,
+        transparent: this._options.style.transparent,
+        opacity: this._options.style.opacity,
+        blending: this._options.style.blending
       });
     } else {
       material = new THREE.MeshStandardMaterial({
         vertexColors: THREE.VertexColors,
-        side: THREE.BackSide
+        side: THREE.BackSide,
+        transparent: this._options.style.transparent,
+        opacity: this._options.style.opacity,
+        blending: this._options.style.blending
       });
       material.roughness = 1;
       material.metalness = 0.1;

src/layer/tile/GeoJSONTile.js

@@ -10,6 +10,9 @@ import GeoJSON from '../../util/GeoJSON';
 import Buffer from '../../util/Buffer';
 import PickingMaterial from '../../engine/PickingMaterial';
 
+// TODO: Bring styling and output in line with GeoJSON and Geometry layers, if
+// not adopting those layers for outputting tiles
+
 // TODO: Look into using a GeoJSONLayer to represent and output the tile data
 // instead of duplicating a lot of effort within this class
 

src/util/GeoJSON.js

@@ -23,6 +23,9 @@ var shadow  = new THREE.Color(0x666666);
 var GeoJSON = (function() {
   var defaultStyle = {
     color: '#ffffff',
+    transparent: false,
+    opacity: 1,
+    blending: THREE.NormalBlending,
     height: 0,
     lineOpacity: 1,
     lineTransparent: false,