Add Wind Layer (with luma v4 api).

kujon · Jul 21, 2017 · 559b495 · 559b495
1 parent 16ac706
commit 559b495
Show file tree

Hide file tree

Showing 30 changed files with 7,145 additions and 0 deletions.
diff --git a/examples/wind/README.md b/examples/wind/README.md
@@ -0,0 +1,6 @@
+# Wind Demo
+
+
+Issues with luma.gl
+
+* Texture2D class hard to use?
diff --git a/examples/wind/package.json b/examples/wind/package.json
@@ -0,0 +1,40 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --port 3000 --open --content-base static",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open --content-base static",
+    "build-clean": "rm -rf dist && mkdir dist",
+    "build-copy": "cp -r static/* dist",
+    "build-script": "NODE_ENV=production webpack --env.prod=true",
+    "build": "npm run build-clean && npm run build-script && npm run build-copy"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.16.0",
+    "d3-request": "^1.0.3",
+    "d3-voronoi": "^1.1.1",
+    "deck.gl": "4.0.6",
+    "luma.gl": "4.0.0-beta.1",
+    "react": "^15.4.1",
+    "react-autobind": "^1.0.6",
+    "react-dom": "^15.4.1",
+    "react-map-gl": "^1.7.2",
+    "tween.js": "^16.6.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-2": "^6.18.0",
+    "brfs-babel": "^1.0.0",
+    "transform-loader": "^0.2.3",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "stage-2",
+      "react"
+    ]
+  }
+}
diff --git a/examples/wind/src/app.js b/examples/wind/src/app.js
@@ -0,0 +1,113 @@
+/* global window, document */
+import React, {Component} from 'react';
+import autobind from 'react-autobind';
+import {render} from 'react-dom';
+import MapGL from 'react-map-gl';
+
+import WindDemo from './wind-demo';
+import ControlPanel from './control-panel';
+
+// animation
+import TWEEN from 'tween.js';
+const animate = () => {
+  TWEEN.update();
+  window.requestAnimationFrame(animate);
+};
+
+// Set your mapbox token here
+const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+
+class Root extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewport: {
+        bearing: 0.9642857142857792,
+        latitude: 37.59651729201781,
+        longitude: -96.86543413846587,
+        mapStyle: 'mapbox://styles/mapbox/dark-v9',
+        maxZoom: 8,
+        pitch: 34.095940959409596,
+        zoom: 4.223615382460847,
+        width: 500,
+        height: 500
+      },
+      settings: {
+        time: 0,
+        showParticles: false,
+        showWindDemo: false,
+        showElevation: false
+      }
+    };
+    autobind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this._onResize);
+    this._onResize();
+    animate();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this._onResize);
+  }
+
+  _onResize() {
+    this._updateViewport({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  }
+
+  _updateViewport(viewport) {
+    this.setState({
+      viewport: {...this.state.viewport, ...viewport}
+    });
+  }
+
+  _updateSettings(settings) {
+    this.setState({
+      settings: {...this.state.settings, ...settings}
+    });
+  }
+
+  render() {
+    const {viewport, settings} = this.state;
+
+    return (
+      <div>
+        <MapGL
+          {...viewport}
+          mapboxApiAccessToken={MAPBOX_TOKEN}
+          perspectiveEnabled
+          onChangeViewport={this._updateViewport}>
+
+          <WindDemo viewport={viewport} settings={settings} />
+
+        </MapGL>
+
+        <div className="control-panel">
+          <h1>Wind</h1>
+          <p>Visualize wind on vector fields and particles.</p>
+          <ul>
+            <li>Hold cmd + drag to tilt the map</li>
+            <li>Turn on/off between a particles or vector field layer</li>
+            <li>Slide through every hour of the day to look at wind change</li>
+          </ul>
+          <p>Made with <a href="http://deck.gl">deck.gl</a> by
+            <a href="https://twitter.com/philogb">@philogb</a>
+          </p>
+          <p>Data source: <a href="http://www.census.gov">NCAA</a></p>
+          <hr />
+
+          <ControlPanel settings={settings} onChange={this._updateSettings} />
+
+        </div>
+
+      </div>
+    );
+  }
+}
+
+render(<Root />, document.body.appendChild(document.createElement('div')));
diff --git a/examples/wind/src/control-panel.js b/examples/wind/src/control-panel.js
@@ -0,0 +1,56 @@
+import React, {Component, PropTypes} from 'react';
+import TWEEN from 'tween.js';
+
+const propTypes = {
+  settings: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+export default class ControlPanel extends Component {
+
+  constructor(props) {
+    super(props);
+
+    const timeState = {time: 0};
+
+    this.timeTween = new TWEEN.Tween(timeState)
+      .to({time: 1800}, 60000)
+      .onUpdate(() => this.props.onChange(timeState))
+      .repeat(Infinity);
+  }
+
+  _renderToggle(key, displayName) {
+    return (
+      <div className="input">
+        <label>{displayName}</label>
+        <input type="checkbox"
+          checked={this.props.settings[key] || false}
+          onChange={ e => this.props.onChange({[key]: e.target.checked}) } />
+      </div>
+    );
+  }
+
+  _renderSlider(key, displayName, props) {
+    return (
+      <div className="input">
+        <label>{displayName}</label>
+        <input type="range" {...props}
+          value={this.props.settings[key] | 0}
+          onChange={ e => this.props.onChange({[key]: e.target.value}) } />
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        { this._renderToggle('showParticles', 'particles') }
+        { this._renderToggle('showWind', 'field') }
+        { this._renderToggle('showElevation', 'elevation') }
+        { this._renderSlider('time', 'time', {min: 0, max: 70, step: 0.1}) }
+      </div>
+    );
+  }
+}
+
+ControlPanel.propTypes = propTypes;
diff --git a/examples/wind/src/defaults.js b/examples/wind/src/defaults.js
@@ -0,0 +1,15 @@
+export const SAMPLE = 140;
+export const MARGIN = 10;
+
+export const ELEVATION_DATA_IMAGE = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/wind/elevation.png'; // eslint-disable-line
+export const ELEVATION_DATA_BOUNDS = [-125, 24.4, -66.7, 49.6];
+export const ELEVATION_RANGE = [-100, 4126];
+
+export const LIGHT_UNIFORMS = {
+  lightsPosition: [-70.585, 38.00, 15000],
+  lightsStrength: [1.0, 0.0],
+  ambientRatio: 0.9,
+  diffuseRatio: 0.8,
+  specularRatio: 0.9,
+  numberOfLights: 2
+};