Use gl_FragDepth extension to fix Voronoi Layer (visgl#186)

ibgreen · gnavvy · commit f16bfd4fe686 · 2016-11-07T14:05:05.000-08:00
diff --git a/example/layer-examples.js b/example/layer-examples.js
@@ -15,7 +15,8 @@ import {
 } from '../src/layers/fp64';
 
 import {
-  EnhancedChoroplethLayer
+  EnhancedChoroplethLayer,
+  VoronoiLayer
 } from '../src/layers/samples';
 
 const ArcLayerExample = props =>
@@ -193,6 +194,15 @@ const EnhancedChoroplethLayerExample = props =>
     onClick: props.onChoroplethClicked
   });
 
+const VoronoiLayerExample = props =>
+  new VoronoiLayer({
+    ...props,
+    data: props.points,
+    pickable: true,
+    onHover: props.onScatterplotHovered,
+    onClick: props.onScatterplotClicked
+  });
+
 // Returns new array N times larger than input array
 // filled with duplicate elements
 // Avoids Array.concat (which generates temporary huge arrays)
@@ -272,7 +282,8 @@ export default {
   },
 
   'Sample Layers': {
-    EnhancedChoroplethLayer: EnhancedChoroplethLayerExample
+    EnhancedChoroplethLayer: EnhancedChoroplethLayerExample,
+    VoronoiLayer: VoronoiLayerExample
   },
 
   'Performance Tests': {
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "babel-preset-stage-2": "^6.3.13",
     "babel-runtime": "^6.11.6",
     "babelify": "^7.2.0",
+    "brfs-babel": "^1.0.0",
     "browserify": "13.0.0",
     "budo": "^8.0.3",
     "d3-color": "^1.0.1",
@@ -118,6 +119,6 @@
     "test-electron": "browserify dist/test/electron.js | testron | faucet",
     "test-shader": "npm run build-dist && budo src/test/shader.js:build/test-bundle.js --dir test --live --open --port 3001 --watch-glob '**/*.{html,css,scss,js,glsl}' -- -t babelify -t glslify",
     "profile-disc": "browserify src/bundle.js --full-paths -t babelify -t glslify | uglifyjs | discify --open",
-    "start": "npm run build-watch && budo example/main.js:example/bundle.js --live --open --port 3000 --css example/main.css --title 'deck.gl' --watch-glob '**/*.{html,css,js,glsl}' -- -t babelify -t envify"
+    "start": "npm run build-watch && budo example/main.js:example/bundle.js --live --open --port 3000 --css example/main.css --title 'deck.gl' --watch-glob '**/*.{html,css,js,glsl}' -- -t brfs-babel -t babelify -t envify"
   }
 }
diff --git a/src/layers/samples/index.js b/src/layers/samples/index.js
@@ -1 +1,2 @@
 export {default as EnhancedChoroplethLayer} from './enhanced-choropleth-layer';
+export {default as VoronoiLayer} from './voronoi-layer';
diff --git a/src/layers/samples/voronoi-layer/voronoi-layer-fragment.glsl b/src/layers/samples/voronoi-layer/voronoi-layer-fragment.glsl
@@ -1,4 +1,4 @@
-// Copyright (c) 2015 Uber Technologies, Inc.
+// Copyright (c) 2016 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -20,12 +20,16 @@
 
 #define SHADER_NAME voronoi-layer-fragment-shader
 
+#extension GL_EXT_frag_depth : enable
+
 #ifdef GL_ES
 precision highp float;
 #endif
 
 varying vec4 vColor;
+varying float vFragDepth;
 
 void main(void) {
   gl_FragColor = vColor;
+  gl_FragDepthEXT = vFragDepth;
 }
diff --git a/src/layers/samples/voronoi-layer/voronoi-layer-vertex.glsl b/src/layers/samples/voronoi-layer/voronoi-layer-vertex.glsl
@@ -1,4 +1,4 @@
-// Copyright (c) 2015 Uber Technologies, Inc.
+// Copyright (c) 2016 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -29,14 +29,23 @@ attribute vec3 instancePickingColors;
 uniform float opacity;
 uniform float radius;
 uniform float renderPickingBuffer;
+uniform mat4 flatMatrix;
 
 varying vec4 vColor;
+varying float vFragDepth;
 
 void main(void) {
-  vec3 center = preproject(instancePositions.xyz);
+  vec3 center = project_position(instancePositions.xyz);
   vec3 vertex = positions * scale(radius * instancePositions.w);
-  gl_Position = project(vec4(center, 1.0)) +
-                project(vec4(vertex, 0.0));
+  vec4 position =
+    project_to_clipspace(vec4(center, 1.0)) +
+    project_to_clipspace(vec4(vertex, 0.0));
+  vec4 positionFlat =
+    project_to_clipspace(vec4(center.xy, 0.0, 1.0)) +
+    project_to_clipspace(vec4(vertex.xy, 0.0, 0.0));
+
+  gl_Position = positionFlat;
+  vFragDepth = position.z / position.w;
 
   vec4 color = vec4(instanceColors / 255.0, opacity);
   vec4 pickingColor = vec4(instancePickingColors / 255.0, 1.);
diff --git a/src/layers/samples/voronoi-layer/voronoi-layer.js b/src/layers/samples/voronoi-layer/voronoi-layer.js
@@ -20,8 +20,8 @@
 import {Layer} from '../../../lib';
 import {assembleShaders} from '../../../shader-utils';
 import {GL, Model, Geometry} from 'luma.gl';
-
-const glslify = require('glslify');
+import {readFileSync} from 'fs';
+import {join} from 'path';
 
 const DEFAULT_COLOR = [255, 0, 255];
 
@@ -65,6 +65,10 @@ export default class VoronoiLayer extends Layer {
       instanceColors: {size: 3, update: this.calculateInstanceColors}
     });
 
+    if (!gl.getExtension('EXT_frag_depth')) {
+      throw new Error('Voronoi needs gl_FragDepth');
+    }
+
     this.setState({model: this.getModel(gl)});
   }
 
@@ -74,6 +78,10 @@ export default class VoronoiLayer extends Layer {
     });
   }
 
+  draw({uniforms}) {
+    this.state.model.render(uniforms);
+  }
+
   getModel(gl) {
     const NUM_SEGMENTS = 32;
     const PI2 = Math.PI * 2;
@@ -95,8 +103,8 @@ export default class VoronoiLayer extends Layer {
       gl,
       id: this.props.id,
       ...assembleShaders(gl, {
-        vs: glslify('./voronoi-layer-vertex.glsl'),
-        fs: glslify('./voronoi-layer-fragment.glsl')
+        vs: readFileSync(join(__dirname, './voronoi-layer-vertex.glsl')),
+        fs: readFileSync(join(__dirname, './voronoi-layer-fragment.glsl'))
       }),
       geometry: new Geometry({
         drawMode: GL.TRIANGLE_FAN,
diff --git a/src/viewport/old-viewport.js b/src/viewport/old-viewport.js
@@ -337,8 +337,8 @@ export default class Viewport {
       this._createMat4(),
       2 * Math.atan((this.height / 2) / this.altitude), // fov in radians
       this.width / this.height,                         // aspect ratio
-      0.1,                                              // near plane
-      this.farZ * 10.0                                  // far plane
+      0.2,                                              // near plane
+      this.farZ * 2                                     // far plane
     );
     /* eslint-enable no-inline-comments */
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export {default as EnhancedChoroplethLayer} from './enhanced-choropleth-layer';`
	`2`	`+export {default as VoronoiLayer} from './voronoi-layer';`