Webpack / deck.gl Exhibit

From 718631125ae39ebffbc2304063ff7f991d6f9cf2 Mon Sep 17 00:00:00 2001 From: Ib Green Date: Tue, 24 Jan 2017 11:26:57 -0800 Subject: [PATCH] Composite GeoJsonLayer, PolygonLayer and PathLayer (#303) * Composite geojson layer, with flat, extrusion and wireframe capability on PolygonLayer * Lighting supported on polygon layer. New lighting shader module. * Lighting supported on polygon layer. New lighting shader module. * v3.1.0-beta.11 * v3.0.0-beta.12 --- examples/exhibits/webpack/config.js | 43 ----------- examples/exhibits/webpack/index.html | 10 --- examples/exhibits/webpack/package.json | 37 --------- examples/hello-world-webpack2/app.js | 69 ----------------- examples/main/layer-examples.js | 21 ++++- index.html | 2 - package.json | 6 +- src/lib/layer.js | 4 - test/bench/index.js | 101 +++++++++++++++---------- test/data/index.js | 5 ++ 10 files changed, 86 insertions(+), 212 deletions(-) delete mode 100644 examples/exhibits/webpack/config.js delete mode 100644 examples/exhibits/webpack/index.html delete mode 100644 examples/exhibits/webpack/package.json delete mode 100644 examples/hello-world-webpack2/app.js diff --git a/examples/exhibits/webpack/config.js b/examples/exhibits/webpack/config.js deleted file mode 100644 index 14bce846c96..00000000000 --- a/examples/exhibits/webpack/config.js +++ /dev/null @@ -1,43 +0,0 @@ -const {resolve} = require('path'); - -module.exports = { - - entry: [ - resolve('../app.js'), - 'webpack/hot/dev-server', - 'webpack-dev-server/client?http://localhost:3000', - ], - - devtool: 'source-maps', - - resolve: { - alias: { - webworkify: 'webworkify-webpack-dropin', - 'gl-matrix': resolve('./node_modules/gl-matrix/dist/gl-matrix.js'), - }, - }, - - module: { - - loaders: [{ - test: /\.json$/, - loader: 'json-loader', - }, { - test: /\.js$/, - loader: 'babel-loader', - include: resolve('../app.js'), - }], - - postLoaders: [{ - include: /node_modules\/mapbox-gl/, - loader: 'transform-loader', - query: 'brfs', - }], - - }, - - node: { - fs: 'empty', - }, - -}; diff --git a/examples/exhibits/webpack/index.html b/examples/exhibits/webpack/index.html deleted file mode 100644 index 463dbecb632..00000000000 --- a/examples/exhibits/webpack/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Webpack / deck.gl Exhibit - - - - - diff --git a/examples/exhibits/webpack/package.json b/examples/exhibits/webpack/package.json deleted file mode 100644 index 9f26fc54c14..00000000000 --- a/examples/exhibits/webpack/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "webpack-exhibit", - "version": "0.0.0", - "description": "A webpack/deck.gl exhibit", - "scripts": { - "link": "(cd .. && rm -f node_modules && ln -s webpack/node_modules)", - "serve": "webpack-dev-server --config config.js --progress --hot --port 3000 --open", - "start": "npm run link && npm run serve" - }, - "author": "Balthazar Gronon ", - "license": "MIT", - "dependencies": { - "babel-polyfill": "^6.20.0", - "deck.gl": "^3.1.0", - "immutable": "^3.8.1", - "luma.gl": "^2.10.4", - "react": "^15.4.1", - "react-dom": "^15.4.1", - "react-map-gl": "^1.7.2" - }, - "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": "^1.4.3", - "json-loader": "^0.5.4", - "transform-loader": "^0.2.3", - "webpack": "^1.14.0", - "webpack-dev-server": "^1.16.2", - "webworkify-webpack-dropin": "^1.1.9" - }, - "babel": { - "presets": ["es2015", "stage-2", "react"] - } -} diff --git a/examples/hello-world-webpack2/app.js b/examples/hello-world-webpack2/app.js deleted file mode 100644 index dbd162cbcf3..00000000000 --- a/examples/hello-world-webpack2/app.js +++ /dev/null @@ -1,69 +0,0 @@ -import 'babel-polyfill'; - -import React, {Component} from 'react'; -import {render} from 'react-dom'; -import DeckGL from 'deck.gl/react'; -import {LineLayer} from 'deck.gl'; -import MapGL from 'react-map-gl'; -/* global document */ - -const token = '' || process.env.MAPBOX_ACCESS_TOKEN || process.env.MapboxAccessToken; // eslint-disable-line - -if (!token) { - throw new Error('Please specify a valid mapbox token'); -} - -class Root extends Component { - - constructor(props) { - super(props); - this.state = { - viewport: { - latitude: 37.785164, - longitude: -122.41669, - zoom: 16.140440, - bearing: -20.55991, - pitch: 60 - }, - width: 500, - height: 500 - }; - } - - render() { - - const {viewport, width, height} = this.state; - - const layers = [new LineLayer({ - data: [{ - sourcePosition: [-122.41669, 37.7853], - targetPosition: [-122.41669, 37.781] - }] - })]; - - return ( - this.setState({viewport: v})} - preventStyleDiffing={false} - mapboxApiAccessToken={token} - perspectiveEnabled - width={width} - height={height}> - - - ); - } - -} - -const root = document.createElement('div'); -document.body.appendChild(root); - -render(, root); diff --git a/examples/main/layer-examples.js b/examples/main/layer-examples.js index 7477449cf31..b3846761de4 100644 --- a/examples/main/layer-examples.js +++ b/examples/main/layer-examples.js @@ -3,6 +3,7 @@ import { ArcLayer, LineLayer, ScreenGridLayer, + HexagonLayer, GeoJsonLayer, // PolygonLayer, @@ -17,6 +18,7 @@ import { ExtrudedChoroplethLayer64, Container + } from 'deck.gl'; import * as dataSamples from './data-samples'; @@ -169,6 +171,20 @@ const ScatterplotLayerMetersExample = { } }; +const HexagonLayerExample = { + layer: HexagonLayer, + props: { + id: 'hexagonLayer', + data: dataSamples.hexagons, + hexagonVertices: dataSamples.hexagons[0].vertices, + getColor: h => [48, 128, h.value * 255], + getElevation: h => h.value, + enable3d: true, + pickable: true, + opacity: 1 + } +}; + // 64 BIT LAYER EXAMPLES const ArcLayer64Example = { @@ -274,12 +290,11 @@ const ExtrudedChoroplethLayer64Example = { } }; - const ExtrudedChoroplethLayer64WireframeExample = { layer: ExtrudedChoroplethLayer64, props: Object.assign({}, ExtrudedChoroplethLayer64Example.props, { - id: 'extrudedChoroplethLayer64-wireframe', - drawWireframe: true + id: 'extrudedChoroplethLayer64-wireframe', + drawWireframe: true }) }; diff --git a/index.html b/index.html index 2cfa1274fb7..38f5c60beb4 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,7 @@ - deck.gl tests - diff --git a/package.json b/package.json index 6ef0b5c45bb..74004699e20 100644 --- a/package.json +++ b/package.json @@ -21,14 +21,14 @@ "scripts": { "start": "(cd examples/main && yarn && npm start)", "compile": "rm -fr dist && buble src -o dist --no modules --y dangerousForOf --objectAssign", - "build": "rnpm run compile && webpack -d --display-modules", + "build": "npm run compile && webpack -d --display-modules", "lint": "eslint src test exhibits/app.js examples", "publish-prod": "npm run build && npm run test && npm publish", "publish-beta": "npm run build && npm run test && npm publish --tag beta", "test": "npm run lint && npm run test-node", - "test-node": "npm run compile && node test/node.js", + "test-node": "node test/node.js", "test-browser": "webpack-dev-server --config webpack.config.test-browser.js --progress --hot --open --port 3010", - "bench-node": "npm run compile && node test/bench/node.js", + "bench": "node test/bench/node.js", "bench-browser": "webpack-dev-server --config webpack.config.bench-browser.js --progress --hot --open --port 3011", "test-fp64": "(cd test/fp64-test && webpack-dev-server --config webpack.config.test-fp64.js --progress --hot --open)", "test-rendering": "(cd test/rendering-test && webpack-dev-server --config webpack.config.test-rendering.js --progress --hot --open)" diff --git a/src/lib/layer.js b/src/lib/layer.js index da472c38aff..7d66e7ff5a1 100644 --- a/src/lib/layer.js +++ b/src/lib/layer.js @@ -58,11 +58,7 @@ export default class Layer { data: props.data || [] }); -<<<<<<< HEAD this.id = props.id; -======= - // this.id = props.id; ->>>>>>> Add benchmarks for node and browser.js (#299) this.props = props; this.oldProps = null; this.state = null; diff --git a/test/bench/index.js b/test/bench/index.js index 57fbda0fa6e..22880188b62 100644 --- a/test/bench/index.js +++ b/test/bench/index.js @@ -2,55 +2,72 @@ /* global console */ import {Suite} from 'benchmark'; import * as data from '../data'; -import {ScatterplotLayer, ChoroplethLayer} from 'deck.gl'; -import {createGLContext} from 'luma.gl'; +import { + // ScatterplotLayer, + PolygonLayer, + ChoroplethLayer, + ExtrudedChoroplethLayer64 +} from 'deck.gl'; -export function testInitializeLayer({gl, layer}) { - const oldContext = {gl}; - const context = {gl}; - let failures = 0; - try { - layer.context = context; - - layer.initializeLayer({ - oldProps: {}, - props: layer.props, - oldContext, - context, - changeFlags: layer.diffProps({}, layer.props, context) - }); - - layer.updateLayer({ - oldProps: {}, - props: layer.props, - oldContext, - context, - changeFlags: layer.diffProps({}, layer.props, context) - }); - } catch (error) { - failures++; - } - return failures; -} - -const gl = createGLContext(); +import {testInitializeLayer} from '../test-utils'; const suite = new Suite(); // add tests suite - -.add('ScatterplotLayer#construct', () => { - return new ScatterplotLayer({data: data.choropleths}); -}) -.add('ChoroplethLayer#construct', () => { - return new ChoroplethLayer({data: data.choropleths}); -}) +// .add('ScatterplotLayer#construct', () => { +// return new ScatterplotLayer({data: data.choropleths}); +// }) +// .add('ChoroplethLayer#construct', () => { +// return new ChoroplethLayer({data: data.choropleths}); +// }) +// .add('PolygonLayer#construct', () => { +// return new PolygonLayer({data: data.choropleths}); +// }) .add('ChoroplethLayer#initialize', () => { const layer = new ChoroplethLayer({data: data.choropleths}); - testInitializeLayer({gl, layer}); + testInitializeLayer({layer}); +}) +.add('PolygonLayer#initialize (flat)', () => { + const layer = new PolygonLayer({data: data.choropleths}); + testInitializeLayer({layer}); +}) +.add('PolygonLayer#initialize (extruded)', () => { + const layer = new PolygonLayer({data: data.choropleths, extruded: true}); + testInitializeLayer({layer}); +}) +.add('PolygonLayer#initialize (wireframe)', () => { + const layer = new PolygonLayer({data: data.choropleths, extruded: true, wireframe: true}); + testInitializeLayer({layer}); +}) +// .add('PolygonLayer#initialize from Immutable', () => { +// const layer = new PolygonLayer({data: data.immutableChoropleths}); +// testInitializeLayer({layer}); +// }) +.add('ExtrudedChoroplethLayer64#initialize', () => { + try { + const layer = new ExtrudedChoroplethLayer64({ + id: 'extrudedChoroplethLayer64', + data: data.choropleths, + getColor: f => [128, 0, 0], + pointLightLocation: [ + 37.751537058389985, + -122.42694203247012, + 1e4 + ], + opacity: 1.0, + pickable: true + }); + testInitializeLayer({layer}); + } catch (error) { + console.error(error); + } }) +// .add('ScatterplotLayer#initialize', () => { +// const layer = new ScatterplotLayer({data: data.points}); +// testInitializeLayer({layer}); +// }) // add listeners .on('start', (event) => { console.log('Starting bench...'); @@ -61,5 +78,7 @@ suite .on('complete', function t() { console.log(`Fastest is ${this.filter('fastest').map('name')}`); }) -// run async -.run({delay: 0.1}); +.run({ + maxTime: 0.01, + delay: 0.1 +}); diff --git a/test/data/index.js b/test/data/index.js index 9423b883d21..6b6296b4e48 100644 --- a/test/data/index.js +++ b/test/data/index.js @@ -1 +1,6 @@ export * from '../../examples/main/data-samples'; + +import * as data from '../../examples/main/data-samples'; + +import Immutable from 'immutable'; +export const immutableChoropleths = Immutable.fromJS(data.choropleths);