Fix PointCloudLayer bug where radiusPixels is not working (visgl#449)

* fix bug in PointCloudLayer where radiusPixels is not used * generate evenly distributed point cloud sample
aravindiiitb · Mar 22, 2017 · e2c4d0a · e2c4d0a
1 parent 4accc5b
commit e2c4d0a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,9 +19,11 @@ Ref: http://keepachangelog.com/en/0.3.0/
 
 #### [TBD]
 
-- Fix bug where `onHover` and `onClick` props do not work on `GridLayer` and `HexagonLayer`
+- FIX: `onHover` and `onClick` props now work on `GridLayer` and `HexagonLayer`
 - Picking info from `GeoJsonLayer` and `PolygonLayer` now have `layer` property point to the
   composite layer instead of a sublayer
+- FIX: `PointCloudLayer` use `radiusPixels` instead of `radius`
+
 
 #### [v4.0.0-rc.3]
 

diff --git a/examples/layer-browser/src/data-samples.js b/examples/layer-browser/src/data-samples.js
@@ -40,23 +40,31 @@ export const polygons = choropleths.features
 let _pointCloud = null;
 export function getPointCloud() {
   if (!_pointCloud) {
-    _pointCloud = pointGrid(
-      2e4,
-      [0, -Math.PI / 2, Math.PI * 2, Math.PI / 2],
-      true
-    ).map(([x, y]) => {
-      const R = 1000;
-      const cosx = Math.cos(x);
-      const sinx = Math.sin(x);
+    const RESOLUTION = 100;
+    const R = 1000;
+    _pointCloud = [];
+
+    // x is longitude, from 0 to 360
+    // y is latitude, from -90 to 90
+    for (let yIndex = 0; yIndex <= RESOLUTION; yIndex++) {
+      const y = (yIndex / RESOLUTION - 1 / 2) * Math.PI;
       const cosy = Math.cos(y);
       const siny = Math.sin(y);
+      // need less samples at high latitude
+      const xCount = Math.floor(cosy * RESOLUTION * 2) + 1;
+
+      for (let xIndex = 0; xIndex < xCount; xIndex++) {
+        const x = xIndex / xCount * Math.PI * 2;
+        const cosx = Math.cos(x);
+        const sinx = Math.sin(x);
 
-      return {
-        position: [cosx * R * cosy, sinx * R * cosy, (siny + 1) * R],
-        normal: [cosx * cosy, sinx * cosy, siny],
-        color: [(siny + 1) * 128, (cosy + 1) * 128, 0]
-      };
-    });
+        _pointCloud.push({
+          position: [cosx * R * cosy, sinx * R * cosy, (siny + 1) * R],
+          normal: [cosx * cosy, sinx * cosy, siny],
+          color: [(siny + 1) * 128, (cosy + 1) * 128, 0]
+        });
+      }
+    }
   }
   return _pointCloud;
 }

diff --git a/examples/layer-browser/src/examples/core-layers.js b/examples/layer-browser/src/examples/core-layers.js
@@ -186,7 +186,7 @@ const PointCloudLayerExample = {
     getNormal: d => get(d, 'normal'),
     getColor: d => get(d, 'color'),
     opacity: 1,
-    radius: 4,
+    radiusPixels: 4,
     pickable: true
   }
 };

diff --git a/src/layers/core/point-cloud-layer/point-cloud-layer-vertex.glsl.js b/src/layers/core/point-cloud-layer/point-cloud-layer-vertex.glsl.js
@@ -30,7 +30,7 @@ attribute vec3 instancePickingColors;
 
 uniform float renderPickingBuffer;
 uniform float opacity;
-uniform float radius;
+uniform float radiusPixels;
 uniform vec2 viewportSize;
 
 varying vec4 vColor;
@@ -42,7 +42,7 @@ void main(void) {
 
   // Find the center of the point and add the current vertex
   vec4 position_worldspace = vec4(project_position(instancePositions), 1.0);
-  vec2 vertex = positions.xy * radius / viewportSize * 2.0;
+  vec2 vertex = positions.xy * radiusPixels / viewportSize * 2.0;
   gl_Position = project_to_clipspace(position_worldspace) + vec4(vertex, 0.0, 0.0);
 
   // Apply lighting

diff --git a/src/layers/core/point-cloud-layer/point-cloud-layer.js b/src/layers/core/point-cloud-layer/point-cloud-layer.js
@@ -102,9 +102,9 @@ export default class PointCloudLayer extends Layer {
   }
 
   draw({uniforms}) {
-    const {radius, lightSettings} = this.props;
+    const {radiusPixels, lightSettings} = this.props;
     this.state.model.render(Object.assign({}, uniforms, {
-      radius
+      radiusPixels
     }, lightSettings));
   }