Code Monkey home page Code Monkey logo

cesium-navigator's Introduction

cesium-navigator

WebGL navigator using the Cesium framework

Initial setup

Before cloning the repository follow the instructions to install Git LFS. This extension is used to store some quite big (trace) file inside the repo. After this preliminary procedure a normal git clone works as expected.

Install NodeJS & NPM. After that, install the dependencies running

npm install

Install the python2 requirements for the analysis scripts using pip running

pip install -r requirements.txt

The python requirements are not necessary to run the navigator app.

How to run it

First start the Cesium local development HTTP server

node server.js

Then start the WebSocket server which simulates position & rotation

node ws_sender.js [interval in ms] [# of sent points] [move sent points]

or using

./scripts/ws_sender.sh

After that, go to http://localhost:8080/app/navigator.html

Keyboard bindings

  • w/up arrow: move camera forward
  • a/left arrow: move camera left
  • s/down arrow: move camera backward
  • d/right arrow: move camera right
  • q: move camera up
  • e: move camera down
  • + (add): zoom in
  • - (sub): zoom out

cesium-navigator's People

Contributors

gianlucabortoli avatar

Watchers

 avatar  avatar

cesium-navigator's Issues

Map controls

  • add controls on the screen to move the map
  • keyboard bindings

Trace analysis scripts

  • split a trace at every bindBuffer call producing multiple csv files (starting from a bindBuffer until the call before the next bindBuffer)
  • given a trace file, draw a chart showing the elapsed time between every bindBuffer call

NB: trace export in CSV file has to be done from the web gui querying for the webgl keyword.

Grouped bar chart

The WTF traces graphs between the bindBuffer functions has to be divided into the 3 groups. Highlight how much time is spent in each group with respect the overall time elapsed between two subsequent bindBuffer calls.
Consider to show the bar chart with 3 different colors matching the 3 groups.

Capture trace re-drawing point

Capture a trace like the previous ones, but re-drawing a point without moving it. Do like the other traces sending only one "position", but it is the same as the original one without any modification.
Check if there is still a bufferSubData call, even though the object is not moved but just repainted on the screen.

Camera rotation

Point's camera should rotate properly in order to simulate the user's view

Traces in different scenarios

Catch WTF traces from the following scenarios:

  • old man moving on the map with all the tiles
  • map with all the tiles moving without the old man (move only the camera)
  • empty map with old man moving

Compare all the traces above to see what's in common and what not.

Timings

  • use google's web tracing framweork to get insights about what is really going on frame-by-frame
  • trace analysis script to see some meaningful timing chart between WrbGL function calls (#7)
  • identify which WebGL functions are used to render a single frame (#6, #7, #8)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.