Merge b393b91 into 46ab2ab

docs/layers/scenegraph-layer.md

@@ -184,6 +184,18 @@ Explicitly define a 4x4 column-major model matrix for the mesh. If provided, wil
 * If an array is provided, it is used as the transform matrix for all objects.
 * If a function is provided, it is called on each object to retrieve its transform matrix.
 
+##### `sizeMinPixels` (Number, optional)
+
+* Default: `0`
+
+The minimum size in pixels for one unit of the scene.
+
+##### `sizeMaxPixels` (Number, optional)
+
+* Default: `Number.MAX_SAFE_INTEGER`
+
+The maximum size in pixels for one unit of the scene.
+
 ## Source
 
 [modules/mesh-layers/src/scenegraph-layer](https://github.com/uber/deck.gl/tree/master/modules/mesh-layers/src/scenegraph-layer)

examples/layer-browser/src/examples/mesh-layers.js

@@ -11,6 +11,9 @@ registerLoaders([GLTFLoader]);
 const GLTF_BASE_URL =
   'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/luma.gl/examples/gltf/';
 
+const CUBE_1x1x1 =
+  'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/layer-browser/cube_1x1x1.glb';
+
 const CUBE_FACE_TO_DIRECTION = {
   [GL.TEXTURE_CUBE_MAP_POSITIVE_X]: 'right',
   [GL.TEXTURE_CUBE_MAP_NEGATIVE_X]: 'left',
@@ -110,12 +113,31 @@ const ScenegraphLayerPbrIblExample = {
   }
 };
 
+const ScenegraphLayerMinMaxExample = {
+  layer: ScenegraphLayer,
+  props: {
+    id: 'scenegraph-layer-minmax',
+    data: dataSamples.points,
+    pickable: true,
+    sizeScale: 80,
+    scenegraph: CUBE_1x1x1,
+    getPosition: d => d.COORDINATES,
+    getOrientation: [0, 0, 0],
+    getTranslation: [0, 0, 0],
+    getScale: [1, 1, 1],
+    _lighting: 'pbr',
+    sizeMinPixels: 5,
+    sizeMaxPixels: 50
+  }
+};
+
 /* eslint-disable quote-props */
 export default {
   'Mesh Layers': {
     SimpleMeshLayer: SimpleMeshLayerExample,
     ScenegraphLayer: ScenegraphLayerExample,
     'ScenegraphLayer (PBR)': ScenegraphLayerPbrExample,
-    'ScenegraphLayer (PBR+IBL)': ScenegraphLayerPbrIblExample
+    'ScenegraphLayer (PBR+IBL)': ScenegraphLayerPbrIblExample,
+    'ScenegraphLayer Min/Max Pixels': ScenegraphLayerMinMaxExample
   }
 };

examples/website/scenegraph-layer/app.js

@@ -102,20 +102,17 @@ export class App extends Component {
           id: 'scenegraph-layer',
           data,
           pickable: true,
-          sizeScale: 500,
+          sizeScale: 250,
           scenegraph: MODEL_URL,
           _animations: ANIMATIONS,
+          sizeMinPixels: 0.1,
+          sizeMaxPixels: 1.5,
           getPosition: d => [
             d[DATA_INDEX.LONGITUDE] || 0,
             d[DATA_INDEX.LATITUDE] || 0,
             d[DATA_INDEX.GEO_ALTITUDE] || 0
           ],
-          getOrientation: d => [
-            this._verticalRateToAngle(d),
-            // TODO: Fix this direction
-            (d[DATA_INDEX.TRUE_TRACK] || 0) - 180,
-            90
-          ],
+          getOrientation: d => [this._verticalRateToAngle(d), -d[DATA_INDEX.TRUE_TRACK] || 0, 90],
           getTranslation: [0, 0, 0],
           getScale: [1, 1, 1],
           transitions: {
@@ -136,6 +133,7 @@ export class App extends Component {
     const track = this.state.hoverObject[DATA_INDEX.TRUE_TRACK] || 0;
     return (
       <Fragment>
+        <div>&nbsp;</div>
         <div>Unique ID: {icao24}</div>
         <div>Call Sign: {callsign}</div>
         <div>Country: {originCountry}</div>
@@ -193,7 +191,7 @@ export class App extends Component {
             mapboxApiAccessToken={MAPBOX_TOKEN}
           />
         </DeckGL>
-        {/* this._renderInfoBox() */}
+        {this._renderInfoBox()}
       </Fragment>
     );
   }

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer-vertex.glsl.js

@@ -17,6 +17,7 @@ _attribute vec3 instanceTranslation;
 
 // Uniforms
 uniform float sizeScale;
+uniform vec2 sizePixels;
 uniform mat4 sceneModelMatrix;
 uniform bool enableOffsetModelMatrix;
 
@@ -67,7 +68,12 @@ void main(void) {
     geometry.uv = pbr_vUV;
   #endif
 
-  vec3 pos = (instanceModelMatrix * (sceneModelMatrix * POSITION).xyz) * sizeScale + instanceTranslation;
+  float sizeMinPixels = sizePixels.x;
+  float sizeMaxPixels = sizePixels.y;
+  float originalSize = project_size_to_pixel(sizeScale);
+  float clampedSize = clamp(originalSize, sizeMinPixels, sizeMaxPixels);
+
+  vec3 pos = (instanceModelMatrix * (sceneModelMatrix * POSITION).xyz) * sizeScale * (clampedSize / originalSize) + instanceTranslation;
 
   if(enableOffsetModelMatrix) {
     DECKGL_FILTER_SIZE(pos, geometry);

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer.js

@@ -44,6 +44,9 @@ const defaultProps = {
   _animations: null,
 
   sizeScale: {type: 'number', value: 1, min: 0},
+  sizeMinPixels: {type: 'number', min: 0, value: 0},
+  sizeMaxPixels: {type: 'number', min: 0, value: Number.MAX_SAFE_INTEGER},
+
   getPosition: {type: 'accessor', value: x => x.position},
   getColor: {type: 'accessor', value: DEFAULT_COLOR},
   opacity: {type: 'number', min: 0, max: 1, value: 1.0},
@@ -249,7 +252,7 @@ export default class ScenegraphLayer extends Layer {
       this.state.animator.animate(context.animationProps.time);
     }
 
-    const {sizeScale, opacity, _composeModelMatrix} = this.props;
+    const {sizeScale, sizeMinPixels, sizeMaxPixels, opacity, _composeModelMatrix} = this.props;
     const numInstances = this.getNumInstances();
     this.state.scenegraph.traverse((model, {worldMatrix}) => {
       model.model.setInstanceCount(numInstances);
@@ -260,6 +263,7 @@ export default class ScenegraphLayer extends Layer {
           sizeScale,
           opacity,
           enableOffsetModelMatrix: _composeModelMatrix,
+          sizePixels: [sizeMinPixels, sizeMaxPixels],
           sceneModelMatrix: worldMatrix,
           // Needed for PBR (TODO: find better way to get it)
           u_Camera: model.model.program.uniforms.project_uCameraPosition