poc: measurement tool

aurora-opensource · Oct 3, 2019 · 708c566 · 708c566
1 parent 0147b8c
commit 708c566
Show file tree

Hide file tree

Showing 12 changed files with 585 additions and 46 deletions.
diff --git a/modules/core/package.json b/modules/core/package.json
@@ -16,8 +16,8 @@
   ],
   "scripts": {},
   "dependencies": {
-    "@deck.gl/core": "^7.3.0",
-    "@deck.gl/layers": "^7.3.0",
+    "@deck.gl/core": "^7.4.0-alpha.1",
+    "@deck.gl/layers": "^7.4.0-alpha.1",
     "@deck.gl/mesh-layers": "^7.3.0",
     "@deck.gl/react": "^7.3.0",
     "@streetscape.gl/monochrome": "1.0.1",

diff --git a/modules/core/src/layers/point-cloud-layer/point-cloud-layer-vertex.glsl.js b/modules/core/src/layers/point-cloud-layer/point-cloud-layer-vertex.glsl.js
@@ -67,12 +67,20 @@ vec3 distToRgb(float dist) {
 }
 
 void main(void) {
+  geometry.worldPosition = instancePositions;
+
   // position on the containing square in [-1, 1] space
   unitPosition = positions.xy;
+  geometry.uv = unitPosition;
+  geometry.pickingColor = instancePickingColors;
 
   // Find the center of the point and add the current vertex
-  gl_Position = project_position_to_clipspace(instancePositions, instancePositions64xyLow, vec3(0.));
-  gl_Position.xy += project_pixel_size_to_clipspace(positions.xy * pointSize) * project_uFocalDistance;
+  vec3 offset = vec3(positions.xy * pointSize, 0.0);
+  DECKGL_FILTER_SIZE(offset, geometry);
+
+  gl_Position = project_position_to_clipspace(instancePositions, instancePositions64xyLow, vec3(0.), geometry.position);
+  gl_Position.xy += project_pixel_size_to_clipspace(offset.xy) * project_uFocalDistance;
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
 
   vec4 colorPosition;
   if (colorMode == COLOR_MODE_DISTANCE) {
@@ -87,6 +95,6 @@ void main(void) {
   }
 
   // Set color to be rendered to picking fbo (also used to check for selection highlight).
-  picking_setPickingColor(instancePickingColors);
+  DECKGL_FILTER_COLOR(vColor, geometry);
 }
 `;
diff --git a/test/apps/measure/assets/icons.json b/test/apps/measure/assets/icons.json
@@ -0,0 +1,18 @@
+{
+  "origin": {
+    "x": 0,
+    "y": 0,
+    "width": 128,
+    "height": 128,
+    "anchorX": 92,
+    "anchorY": 118
+  },
+  "reference": {
+    "x": 128,
+    "y": 0,
+    "width": 128,
+    "height": 128,
+    "anchorX": 36,
+    "anchorY": 118
+  }
+}
diff --git a/test/apps/measure/assets/icons.png b/test/apps/measure/assets/icons.png
diff --git a/test/apps/measure/index.html b/test/apps/measure/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>streetscape.gl quick start</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+body { margin: 0; }
+#container { position: fixed; display: flex; width: 100vw; height: 100vh; overflow: hidden; }
+#timeline { background: #fff; padding: 24px 0; position: fixed; bottom: 0; width: 100%; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src='bundle.js'></script>
+  </body>
+</html>
diff --git a/test/apps/measure/package.json b/test/apps/measure/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "streetscape.gl-quick-start",
+  "description": "A template app of streetscape.gl",
+  "version": "0.1.0",
+  "scripts": {
+    "start-local": "webpack-dev-server --env.local --progress --hot --open",
+    "start": "webpack-dev-server --progress --hot --open"
+  },
+  "dependencies": {
+    "@turf/bearing": "^6.0.1",
+    "@turf/distance": "^6.0.1",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
+    "streetscape.gl": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "source-map-loader": "^0.2.3",
+    "webpack": "^4.20.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.1"
+  }
+}
diff --git a/test/apps/measure/src/app.js b/test/apps/measure/src/app.js
@@ -0,0 +1,65 @@
+// Copyright (c) 2019 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
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+/* global document */
+/* eslint-disable no-unused-vars, no-undef */
+import React, {PureComponent} from 'react';
+import {render} from 'react-dom';
+
+import {setXVIZConfig} from '@xviz/parser';
+import {LogViewer, PlaybackControl, VIEW_MODE} from 'streetscape.gl';
+
+import {XVIZ_CONFIG, MAPBOX_TOKEN, MAP_STYLE, CAR} from './constants';
+import log from './log-from-file';
+import TapeMeasureLayer from './tape-measure-layer';
+
+setXVIZConfig(XVIZ_CONFIG);
+
+class Example extends PureComponent {
+  componentDidMount() {
+    log.connect();
+  }
+
+  render() {
+    const customLayers = [new TapeMeasureLayer({id: 'tape-measure', zIndex: 99})];
+
+    return (
+      <div id="container">
+        <LogViewer
+          log={log}
+          mapboxApiAccessToken={MAPBOX_TOKEN}
+          mapStyle={MAP_STYLE}
+          car={CAR}
+          customLayers={customLayers}
+          viewMode={VIEW_MODE.PERSPECTIVE}
+        />
+        <div id="timeline">
+          <PlaybackControl
+            width="100%"
+            log={log}
+            formatTimestamp={x => new Date(x).toUTCString()}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+render(<Example />, document.getElementById('app'));
diff --git a/test/apps/measure/src/constants.js b/test/apps/measure/src/constants.js
@@ -0,0 +1,37 @@
+// Copyright (c) 2019 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
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import {CarMesh} from 'streetscape.gl';
+
+/* eslint-disable camelcase */
+export const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+
+export const MAP_STYLE = 'mapbox://styles/mapbox/light-v9';
+
+export const XVIZ_CONFIG = {
+  PLAYBACK_FRAME_RATE: 10
+};
+
+export const CAR = CarMesh.sedan({
+  origin: [1.08, -0.32, 0],
+  length: 4.3,
+  width: 2.2,
+  height: 1.5,
+  color: [160, 160, 160]
+});
diff --git a/test/apps/measure/src/log-from-file.js b/test/apps/measure/src/log-from-file.js
@@ -0,0 +1,31 @@
+// Copyright (c) 2019 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
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {XVIZFileLoader} from 'streetscape.gl';
+
+export default new XVIZFileLoader({
+  timingsFilePath:
+    'https://raw.githubusercontent.com/uber/xviz-data/master/kitti/2011_09_26_drive_0005_sync/0-frame.json',
+  getFilePath: index =>
+    `https://raw.githubusercontent.com/uber/xviz-data/master/kitti/2011_09_26_drive_0005_sync/${index +
+      1}-frame.glb`,
+  worker: true,
+  maxConcurrency: 4
+});