Added FXAA and fixed tiles

examples/basic/main.js

@@ -2,7 +2,7 @@ var world = VIZI.world('world', {
   skybox: true
 }).setView([51.505, -0.09]);
 
-world._environment._skybox.setInclination(0.5);
+world._environment._skybox.setInclination(0.4);
 
 // Add controls
 VIZI.Controls.orbit().addTo(world);

src/engine/Engine.js

@@ -14,6 +14,7 @@ import ShaderPass from '../vendor/ShaderPass';
 import CopyShader from '../vendor/CopyShader';
 import HorizontalTiltShiftShader from '../vendor/HorizontalTiltShiftShader';
 import VerticalTiltShiftShader from '../vendor/VerticalTiltShiftShader';
+import FXAAShader from '../vendor/FXAAShader';
 
 class Engine extends EventEmitter {
   constructor(container, world) {
@@ -44,16 +45,27 @@ class Engine extends EventEmitter {
   }
 
   // TODO: Set up composer to automatically resize on viewport change
+  // TODO: Update passes that rely on width / height on resize
   _initPostProcessing() {
     var renderPass = new RenderPass(this._scene, this._camera);
 
-    var hblur = new ShaderPass(HorizontalTiltShiftShader);
-    var vblur = new ShaderPass(VerticalTiltShiftShader);
+    var width = this._renderer.getSize().width;
+    var height = this._renderer.getSize().height;
+
+    var pixelRatio = window.devicePixelRatio;
+
+    // TODO: Look at using @mattdesl's optimised FXAA shader
+    // https://github.com/mattdesl/three-shader-fxaa
+    var fxaaPass = new ShaderPass(FXAAShader);
+    fxaaPass.uniforms.resolution.value.set(1 / (width * pixelRatio), 1 / (height * pixelRatio));
+
+    var hblurPass = new ShaderPass(HorizontalTiltShiftShader);
+    var vblurPass = new ShaderPass(VerticalTiltShiftShader);
     var bluriness = 5;
 
-    hblur.uniforms.h.value = bluriness / this._renderer.getSize().width;
-    vblur.uniforms.v.value = bluriness / this._renderer.getSize().height;
-    hblur.uniforms.r.value = vblur.uniforms.r.value = 0.6;
+    hblurPass.uniforms.h.value = bluriness / (width * pixelRatio);
+    vblurPass.uniforms.v.value = bluriness / (height * pixelRatio);
+    hblurPass.uniforms.r.value = vblurPass.uniforms.r.value = 0.6;
 
     var copyPass = new ShaderPass(CopyShader);
     copyPass.renderToScreen = true;
@@ -61,8 +73,9 @@ class Engine extends EventEmitter {
     this._composer = new EffectComposer(this._renderer);
 
     this._composer.addPass(renderPass);
-    this._composer.addPass(hblur);
-    this._composer.addPass(vblur);
+    this._composer.addPass(fxaaPass);
+    this._composer.addPass(hblurPass);
+    this._composer.addPass(vblurPass);
     this._composer.addPass(copyPass);
   }
 

src/engine/Renderer.js

@@ -6,7 +6,7 @@ import Scene from './Scene';
 
 export default function(container) {
   var renderer = new THREE.WebGLRenderer({
-    antialias: true
+    antialias: false
   });
 
   // TODO: Re-enable when this works with the skybox

src/util/GeoJSON.js

@@ -5,6 +5,8 @@
 import THREE from 'three';
 import topojson from 'topojson';
 import geojsonMerge from 'geojson-merge';
+import earcut from 'earcut';
+import extrudePolygon from './extrudePolygon';
 
 // TODO: Make it so height can be per-coordinate / point but connected together
 // as a linestring (eg. GPS points with an elevation at each point)
@@ -196,6 +198,45 @@ var GeoJSON = (function() {
     };
   };
 
+  // TODO: This is only used by GeoJSONTile so either roll it into that or
+  // update GeoJSONTile to use the new GeoJSONLayer or geometry layers
+  var _toEarcut = function(data) {
+    var dim = data[0][0].length;
+    var result = {vertices: [], holes: [], dimensions: dim};
+    var holeIndex = 0;
+
+    for (var i = 0; i < data.length; i++) {
+      for (var j = 0; j < data[i].length; j++) {
+        for (var d = 0; d < dim; d++) {
+          result.vertices.push(data[i][j][d]);
+        }
+      }
+      if (i > 0) {
+        holeIndex += data[i - 1].length;
+        result.holes.push(holeIndex);
+      }
+    }
+
+    return result;
+  };
+
+  // TODO: This is only used by GeoJSONTile so either roll it into that or
+  // update GeoJSONTile to use the new GeoJSONLayer or geometry layers
+  var _triangulate = function(contour, holes, dim) {
+    // console.time('earcut');
+
+    var faces = earcut(contour, holes, dim);
+    var result = [];
+
+    for (i = 0, il = faces.length; i < il; i += 3) {
+      result.push(faces.slice(i, i + 3));
+    }
+
+    // console.timeEnd('earcut');
+
+    return result;
+  };
+
   return {
     defaultStyle: defaultStyle,
     collectFeatures: collectFeatures,

src/vendor/FXAAShader.js

@@ -0,0 +1,96 @@
+// jscs:disable
+/* eslint-disable */
+
+import THREE from 'three';
+
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author davidedc / http://www.sketchpatch.net/
+ *
+ * NVIDIA FXAA by Timothy Lottes
+ * http://timothylottes.blogspot.com/2011/06/fxaa3-source-released.html
+ * - WebGL port by @supereggbert
+ * http://www.glge.org/demos/fxaa/
+ */
+
+var FXAAShader = {
+
+	uniforms: {
+
+		"tDiffuse":   { type: "t", value: null },
+		"resolution": { type: "v2", value: new THREE.Vector2( 1 / 1024, 1 / 512 ) }
+
+	},
+
+	vertexShader: [
+
+		"void main() {",
+
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"uniform sampler2D tDiffuse;",
+		"uniform vec2 resolution;",
+
+		"#define FXAA_REDUCE_MIN   (1.0/128.0)",
+		"#define FXAA_REDUCE_MUL   (1.0/8.0)",
+		"#define FXAA_SPAN_MAX     8.0",
+
+		"void main() {",
+
+			"vec3 rgbNW = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( -1.0, -1.0 ) ) * resolution ).xyz;",
+			"vec3 rgbNE = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( 1.0, -1.0 ) ) * resolution ).xyz;",
+			"vec3 rgbSW = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( -1.0, 1.0 ) ) * resolution ).xyz;",
+			"vec3 rgbSE = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( 1.0, 1.0 ) ) * resolution ).xyz;",
+			"vec4 rgbaM  = texture2D( tDiffuse,  gl_FragCoord.xy  * resolution );",
+			"vec3 rgbM  = rgbaM.xyz;",
+			"vec3 luma = vec3( 0.299, 0.587, 0.114 );",
+
+			"float lumaNW = dot( rgbNW, luma );",
+			"float lumaNE = dot( rgbNE, luma );",
+			"float lumaSW = dot( rgbSW, luma );",
+			"float lumaSE = dot( rgbSE, luma );",
+			"float lumaM  = dot( rgbM,  luma );",
+			"float lumaMin = min( lumaM, min( min( lumaNW, lumaNE ), min( lumaSW, lumaSE ) ) );",
+			"float lumaMax = max( lumaM, max( max( lumaNW, lumaNE) , max( lumaSW, lumaSE ) ) );",
+
+			"vec2 dir;",
+			"dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));",
+			"dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));",
+
+			"float dirReduce = max( ( lumaNW + lumaNE + lumaSW + lumaSE ) * ( 0.25 * FXAA_REDUCE_MUL ), FXAA_REDUCE_MIN );",
+
+			"float rcpDirMin = 1.0 / ( min( abs( dir.x ), abs( dir.y ) ) + dirReduce );",
+			"dir = min( vec2( FXAA_SPAN_MAX,  FXAA_SPAN_MAX),",
+				  "max( vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),",
+						"dir * rcpDirMin)) * resolution;",
+			"vec4 rgbA = (1.0/2.0) * (",
+        	"texture2D(tDiffuse,  gl_FragCoord.xy  * resolution + dir * (1.0/3.0 - 0.5)) +",
+			"texture2D(tDiffuse,  gl_FragCoord.xy  * resolution + dir * (2.0/3.0 - 0.5)));",
+    		"vec4 rgbB = rgbA * (1.0/2.0) + (1.0/4.0) * (",
+			"texture2D(tDiffuse,  gl_FragCoord.xy  * resolution + dir * (0.0/3.0 - 0.5)) +",
+      		"texture2D(tDiffuse,  gl_FragCoord.xy  * resolution + dir * (3.0/3.0 - 0.5)));",
+    		"float lumaB = dot(rgbB, vec4(luma, 0.0));",
+
+			"if ( ( lumaB < lumaMin ) || ( lumaB > lumaMax ) ) {",
+
+				"gl_FragColor = rgbA;",
+
+			"} else {",
+				"gl_FragColor = rgbB;",
+
+			"}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+export default FXAAShader;
+THREE.FXAAShader = FXAAShader;