Skip to content

Commit

Permalink
perf optimizations
Browse files Browse the repository at this point in the history
  • Loading branch information
laijackylai committed Apr 24, 2022
1 parent f12fdaf commit cce5277
Show file tree
Hide file tree
Showing 4 changed files with 192 additions and 40 deletions.
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,15 @@
"deck.gl": "^8.4.15",
"express": "^4.17.3",
"express-static-gzip": "^2.1.5",
"geobuf": "^3.0.2",
"geotiff": "^1.0.8",
"global": "^4.4.0",
"is-array-buffer": "^2.0.0",
"json-loader": "^0.5.7",
"math.gl": "^3.4.2",
"moment": "^2.29.1",
"papaparse": "^5.3.1",
"pbf": "^3.2.1",
"react": "^16.13.1",
"react-bootstrap": "^2.2.2",
"react-dom": "^16.13.1",
Expand Down Expand Up @@ -86,7 +88,8 @@
"ts-loader": "^9.2.8",
"typescript": "^4.6.2",
"webpack": "^5.35.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
}
}
}
80 changes: 45 additions & 35 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,14 @@ import {StaticMap} from 'react-map-gl';
import {useDispatch, useSelector} from 'react-redux';
import TerrainLayer from '../terrain-layer/terrain-layer';
import './App.css';
import coast from '../data/Hong_Kong_18_Districts.geojson';
import {lightingEffect} from './lighting';
import {
setBearing,
resetViewport,
setZoom,
setMouseEvent
// setTideIndex
} from './redux/action';
import {setBearing, resetViewport, setZoom, setMouseEvent, setTideIndex} from './redux/action';
import {PLYLoader} from '@loaders.gl/ply';
import {PointCloudLayer} from '@deck.gl/layers';
// import useInterval from 'react-useinterval';
// import { load } from '@loaders.gl/core';
import useInterval from 'react-useinterval';
import axios from 'axios';
import geobuf from 'geobuf';
import Pbf from 'pbf';

const MAPBOX_ACCESS_TOKEN =
'pk.eyJ1IjoibGFpamFja3lsYWkiLCJhIjoiY2tjZWZucjAzMDd1eDJzcGJvN2tiZHduOSJ9.vWThniHwg9V1wEO3O6xn_g';
Expand Down Expand Up @@ -107,11 +102,11 @@ function App() {
// ! end playing

// * tidal animation
// const ti = useSelector(state => state.tideIndex)
// useInterval(() => {
// if (ti == 8) dispatch(setTideIndex(0))
// else dispatch(setTideIndex(ti + 1))
// }, 1000)
const ti = useSelector((state) => state.tideIndex);
useInterval(() => {
if (ti == 8) dispatch(setTideIndex(0));
else dispatch(setTideIndex(ti + 1));
}, 1000);

useEffect(() => {
if (zoom != viewState.zoom) {
Expand Down Expand Up @@ -337,28 +332,43 @@ function App() {
}
});

useEffect(() => {
loadCoastlineData();
}, []);

const [coastlineData, setCoastlineData] = useState();
const loadCoastlineData = async () => {
const d = await axios.get('https://127.0.0.1:3001/coastline.pbf', {
responseType: 'arraybuffer'
});
const data = geobuf.decode(new Pbf(d.data));
setCoastlineData(data);
};

// TODO: can try to use kyle barron's library to snap vector features to the terrain (https://github.com/kylebarron/snap-to-tin)
// * now the coastline are snapped to the seafloor, i.e. 0m
const coastLine = new GeoJsonLayer({
id: 'coast-line',
data: coast,
// pickable: false,
// stroked: false,
filled: false,
// extruded: true,
// wireframe: true,
getLineWidth: 1,
lineWidthScale: 5,
lineWidthMinPixels: 1,
getLineColor: [219, 26, 32],
// lineCapRounded: true,
// getElevation: 30,
// getPolygonOffset: () => [0, -10000], // * temp solution
parameters: {
// * turn off depth test to get rid of z-fighting for this layer
depthTest: false
}
});
const coastLine =
coastlineData &&
new GeoJsonLayer({
id: 'coast-line',
data: coastlineData,
// pickable: false,
// stroked: false,
filled: false,
// extruded: true,
// wireframe: true,
getLineWidth: 1,
lineWidthScale: 5,
lineWidthMinPixels: 1,
getLineColor: [219, 26, 32],
// lineCapRounded: true,
// getElevation: 30,
// getPolygonOffset: () => [0, -10000], // * temp solution
parameters: {
// * turn off depth test to get rid of z-fighting for this layer
depthTest: false
}
});

const onViewStateChange = useCallback(({viewState}) => {
setViewState(viewState);
Expand Down
4 changes: 3 additions & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const PORT = process.env.PORT || 3000;

Expand Down Expand Up @@ -83,6 +84,7 @@ module.exports = {
new webpack.HotModuleReplacementPlugin(),
new Dotenv(),
new webpack.ids.DeterministicChunkIdsPlugin({maxLength: 5}),
new CompressionPlugin()
new CompressionPlugin(),
new BundleAnalyzerPlugin()
]
};
Loading

0 comments on commit cce5277

Please sign in to comment.