Stress test as pure js

visgl · Sep 25, 2019 · ac68c6d · ac68c6d
1 parent d737ba9
commit ac68c6d
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 236 deletions.
diff --git a/modules/core/package.json b/modules/core/package.json
@@ -32,8 +32,8 @@
   "dependencies": {
     "@loaders.gl/core": "^1.3.2",
     "@loaders.gl/images": "^1.3.2",
-    "@luma.gl/addons": "^7.3.0-beta.3",
-    "@luma.gl/core": "^7.3.0-beta.3",
+    "@luma.gl/addons": "^7.3.0-beta.4",
+    "@luma.gl/core": "^7.3.0-beta.4",
     "gl-matrix": "^3.0.0",
     "math.gl": "^3.0.0",
     "mjolnir.js": "^2.1.2",

diff --git a/modules/mesh-layers/package.json b/modules/mesh-layers/package.json
@@ -33,6 +33,6 @@
     "@deck.gl/core": "^7.3.0-beta"
   },
   "dependencies": {
-    "@luma.gl/addons": "^7.3.0-beta.3"
+    "@luma.gl/addons": "^7.3.0-beta.4"
   }
 }
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "jsdom": false
   },
   "devDependencies": {
-    "@luma.gl/effects": "^7.3.0-beta.3",
+    "@luma.gl/effects": "^7.3.0-beta.4",
     "@probe.gl/bench": "^3.1.1",
     "@probe.gl/test-utils": "^3.1.1",
     "@loaders.gl/csv": "^1.3.1",

diff --git a/test/apps/stress-tests/README.md b/test/apps/stress-tests/README.md
@@ -2,15 +2,23 @@
    <img width="150" heigth="150" src="https://webpack.js.org/assets/icon-square-big.svg" />
 </div>
 
-## Stress Test App
-
-Render a large data set and measure performance.
+## Example: Use deck.gl with Mapbox
 
 Uses [Webpack](https://github.com/webpack/webpack) to bundle files and serves it
 with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
 
 ## Usage
 
+To run this example, you need a [Mapbox access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). You can either set an environment variable:
+
+```bash
+export MapboxAccessToken=<mapbox_access_token>
+```
+
+Or set `mapboxgl.accessToken` directly in `app.js`.
+
+Other options can be found at [using with Mapbox GL](../../../../docs/get-started/using-with-mapbox-gl.md).
+
 To install dependencies:
 
 ```bash

diff --git a/test/apps/stress-tests/app.js b/test/apps/stress-tests/app.js
@@ -1,16 +1,21 @@
-/* global window */
-
-import React, {Component} from 'react';
-import {render} from 'react-dom';
-import DeckGL, {ScatterplotLayer} from 'deck.gl';
-import {StaticMap} from 'react-map-gl';
-import {RenderMetrics} from './render-metrics';
+/* global window, document, requestAnimationFrame */
+import {Deck} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import mapboxgl from 'mapbox-gl';
 
 const NUM_LAYERS = 1000;
 const POINTS_PER_LAYER = 100;
 const SF_MIN = [-122.511289, 37.709481];
 const SF_MAX = [-122.37646761, 37.806013];
 
+const INITIAL_VIEW_STATE = {
+  latitude: 37.752,
+  longitude: -122.427,
+  zoom: 11.5,
+  pitch: 0,
+  bearing: 0
+};
+
 function sfRandomPoints(numPoints, maxVal) {
   const points = new Array(numPoints);
 
@@ -29,99 +34,81 @@ function sfRandomPoints(numPoints, maxVal) {
   return points;
 }
 
-class Root extends Component {
-  constructor(props) {
-    super(props);
-    this.deckRef = React.createRef();
-
-    this.state = {
-      mapViewState: {
-        latitude: 37.752,
-        longitude: -122.427,
-        zoom: 11.5,
-        pitch: 0,
-        bearing: 0
-      },
-      metrics: null
-    };
-
-    this.layers = new Array(NUM_LAYERS);
-
-    this.cameraShakeHandle = null;
-    this._cameraShake = this._cameraShake.bind(this);
-    this._onMetrics = this._onMetrics.bind(this);
-
-    this._initializeLayers();
-  }
-
-  componentDidMount() {
-    this.cameraShakeHandle = window.requestAnimationFrame(this._cameraShake);
-  }
-
-  componentWillUnmount() {
-    window.cancelAnimationFrame(this.cameraShakeHandle);
+window.onload = () => {
+  const numPointsElement = document.getElementById('num-points');
+  const numLayersElement = document.getElementById('num-layers');
+  const fpsElement = document.getElementById('fps');
+  const cpuElement = document.getElementById('cpu');
+  const gpuElement = document.getElementById('gpu');
+
+  numPointsElement.innerHTML = NUM_LAYERS * POINTS_PER_LAYER;
+  numLayersElement.innerHTML = NUM_LAYERS;
+
+  const layers = new Array(NUM_LAYERS);
+
+  for (let i = 0; i < NUM_LAYERS; ++i) {
+    const r = Math.random() * 256;
+    const g = Math.random() * 256;
+    const b = Math.random() * 256;
+    layers[i] = new ScatterplotLayer({
+      data: sfRandomPoints(POINTS_PER_LAYER, 10),
+      id: `scatterplotLayer${i}`,
+      getPosition: d => d.position,
+      getFillColor: [r, g, b],
+      getRadius: d => d.value,
+      opacity: 1,
+      pickable: true,
+      radiusScale: 30,
+      radiusMinPixels: 1,
+      radiusMaxPixels: 30
+    });
   }
 
-  _initializeLayers() {
-    for (let i = 0; i < NUM_LAYERS; ++i) {
-      const r = Math.random() * 256;
-      const g = Math.random() * 256;
-      const b = Math.random() * 256;
-      this.layers[i] = new ScatterplotLayer({
-        data: sfRandomPoints(POINTS_PER_LAYER, 10),
-        id: `scatterplotLayer${i}`,
-        getPosition: d => d.position,
-        getFillColor: [r, g, b],
-        getRadius: d => d.value,
-        opacity: 1,
-        pickable: true,
-        radiusScale: 30,
-        radiusMinPixels: 1,
-        radiusMaxPixels: 30
+  // Set your mapbox token here
+  mapboxgl.accessToken = process.env.MapboxAccessToken; // eslint-disable-line
+
+  const map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/light-v9',
+    // Note: deck.gl will be in charge of interaction and event handling
+    interactive: false,
+    center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
+    zoom: INITIAL_VIEW_STATE.zoom,
+    bearing: INITIAL_VIEW_STATE.bearing,
+    pitch: INITIAL_VIEW_STATE.pitch
+  });
+
+  const deck = new Deck({
+    canvas: 'deck-canvas',
+    width: '100%',
+    height: '100%',
+    initialViewState: INITIAL_VIEW_STATE,
+    controller: true,
+    onViewStateChange: ({viewState}) => {
+      map.jumpTo({
+        center: [viewState.longitude, viewState.latitude],
+        zoom: viewState.zoom,
+        bearing: viewState.bearing,
+        pitch: viewState.pitch
       });
-    }
-  }
-
-  _cameraShake() {
-    this.cameraShakeHandle = window.requestAnimationFrame(this._cameraShake);
-    if (this.deckRef.current) {
-      const deck = this.deckRef.current.deck;
-      const viewState = deck.viewManager.getViewState();
-      deck.setProps({
-        viewState: Object.assign({}, viewState, {
-          latitude: viewState.latitude + (Math.random() * 0.00002 - 0.00001),
-          longitude: viewState.longitude + (Math.random() * 0.00002 - 0.00001)
-        })
-      });
-    }
-  }
-
-  _onMetrics(metrics) {
-    this.setState({metrics: Object.assign({}, metrics)});
-  }
-
-  render() {
-    return (
-      <div>
-        <div style={{position: 'absolute', top: '10px', left: '100px', zIndex: 999}}>
-          <div>
-            Rendering {NUM_LAYERS * POINTS_PER_LAYER} points in {NUM_LAYERS} layers.
-          </div>
-          <RenderMetrics metrics={this.state.metrics} />
-        </div>
-        <DeckGL
-          controller={true}
-          viewState={this.state.mapViewState}
-          ref={this.deckRef}
-          layers={this.layers}
-          _onMetrics={this._onMetrics}
-        >
-          <StaticMap key="map" mapStyle="mapbox://styles/mapbox/light-v9" />
-        </DeckGL>
-      </div>
-    );
-  }
-}
-
-/* global document */
-render(<Root />, document.body.appendChild(document.createElement('div')));
+    },
+    _onMetrics(metrics) {
+      fpsElement.innerHTML = `FPS: ${Math.round(metrics.fps)}`;
+      cpuElement.innerHTML = `CPU Frame Time: ${metrics.cpuTimePerFrame.toFixed(2)}`;
+      gpuElement.innerHTML = `GPU Frame Time: ${metrics.gpuTimePerFrame.toFixed(2)}`;
+    },
+    layers
+  });
+
+  requestAnimationFrame(function shake() {
+    requestAnimationFrame(shake);
+
+    const viewState = deck.viewManager.getViewState();
+    deck.setProps({
+      viewState: Object.assign({}, viewState, {
+        latitude: viewState.latitude + (Math.random() * 0.00002 - 0.00001),
+        longitude: viewState.longitude + (Math.random() * 0.00002 - 0.00001)
+      })
+    });
+  });
+};
diff --git a/test/apps/stress-tests/index.html b/test/apps/stress-tests/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>deck.gl example</title>
+    <style>
+    #container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    #container > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    #metrics {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 999;
+    }
+    </style>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
+  </head>
+  <body>
+    <div id="container">
+      <div id="map"></div>
+      <canvas id="deck-canvas"></canvas>
+    </div>
+    <script src='app.js'></script>
+    <div id="metrics">
+      Rendering <span id="num-points"></span> points in <span id="num-layers"></span> layers
+      <div id="fps"></div>
+      <div id="cpu"></div>
+      <div id="gpu"></div>
+    </div>
+  </body>
+</html>
diff --git a/test/apps/stress-tests/package.json b/test/apps/stress-tests/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frustum-cull",
+  "name": "pure-js-mapbox",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
@@ -8,15 +8,9 @@
     "build": "webpack -p"
   },
   "dependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
-    "react-map-gl": "^4.1.2"
+    "mapbox-gl": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.5",
-    "html-webpack-plugin": "^3.0.7",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.1"

diff --git a/test/apps/stress-tests/render-metrics.js b/test/apps/stress-tests/render-metrics.js