vts-getting-started

VTS: Getting Started with 3D Map Application
Development
www.melown.com
Ladislav Horký, Head of Photogrammetry, Melown Technologies SE

Melown Tech is a software-development company
in the 3D mapping business
www.melown.com

What our software does?
I) Computer-vision and deep-learning driven reality capture
www.melown.com

What our software does?
II) 3D data fusion, virtual landscape streaming and rendering
www.melown.com

Applications
• VR and AR
• interactive simulations
• gaming
• geospatial (3D mapping)
www.melown.com

What this talk is about
I. VTS – an alternative approach to 3D mapping
II. VTS components and concepts
III. Your frst JavaScript 3D map application
www.melown.com

VTS – an alternative approach to
3D mapping
www.melown.com

There is CesiumJS …
… there are Google maps, so ...
www.melown.com

… who needs another 3D map browser?
www.melown.com

virtuallandscape
Who needs another 3D map browser?
• VTS consists of the streaming servers, data management tool suite and the clients
• Tight client-server integration: repetitive and static tasks are moved to BE
integrated system
• Generic geospatial applications
• Augmented reality, virtual reality, gaming
www.melown.com

Who needs another 3D map browser?
• VTS is already the second generation of the technology
• Successor of the proprietary TS renderer, developed in 2013
• Designed to directly compete with Google Maps in Czechia
• Pioneer of 3D content streaming
mature
www.melown.com

… who needs mature integrated system for
virtual-landscape streaming and rendering?
Everyone
!!
who works with lots of 3D data
www.melown.com

VTS strong points
• Data scalability: TBs of 3D and 2.5D data can be fused together within VTS
• High performance streaming servers: bandwidth-optimized dynamic TIN
and orthophoto generation, static tiles streaming
• Lightweight and fast client: available for web, desktop and UNITY
“The more data you have, the more VTS shines.”
www.melown.com

VTS components and concepts
www.melown.com

Streaming servers
VTS Mapproxy
➔
Dynamically converts non-VTS resources to surfaces, bound layers and
free layers
➔
Powerful SRS transforming TMS server
VTSD
➔
Streams static data and fusion products (glues) from VTS storage
➔
Serves mapConfg.json(s) – translated from storage view
www.melown.com

Data management tool suite
vts tool
➔
Swiss-knife of the VTS data management
➔
Add, removes data from the VTS storage, performs the data fusion
generatevrtwo, mapproxy-calipers, mapproxy-tiling, ...
➔
Preparation and preprocessing of data for the VTS Mapproxy
www.melown.com

VTS clients
Web
➔
WebGL, JavaScript based
Desktop
➔
Available on Linux, Windows, Mac, iOS
➔
Common core is available as a rendering-engine independent library
UNITY
➔
Game engine plugin
www.melown.com

Your frst JavaScript
3D map application
www.melown.com

What you need to write your frst app
Browser
– cdn.melown.com
– Clone it from GitHub
– Add it to your project using NPM
mapConfg.json
– Grab one from live JSFiddle examples
– Grab one from Melown Tech website
– Install your instance VTS-Backend: Linux, single debian package, sample
data included
www.melown.com

Basic app: HTML
<html>
<head>
<title>Cadastre sample</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="//cdn.melown.com/libs/vtsjs/builtin/v2/browser/vts-browser.min.css"></link>
<script type="text/javascript" src="//cdn.melown.com/libs/vtsjs/builtin/v2/browser/vts-browser.min.js"></script>
<script type="text/javascript" src="./main.js"></script>
</head>
<body style = "padding: 0; margin: 0;" onload="startDemo()">
<div id="map-div" style="width:100%; height:100%;"></div>
</body>
</html>
Load the browser from CDN
www.melown.com

Basic app: HTML
<html>
<head>
<title>Cadastre sample</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="//cdn.melown.com/libs/vtsjs/builtin/v2/browser/vts-browser.min.css"></link>
<script type="text/javascript" src="//cdn.melown.com/libs/vtsjs/builtin/v2/browser/vts-browser.min.js"></script>
<script type="text/javascript" src="./main.js"></script>
</head>
<body style = "padding: 0; margin: 0;" onload="startDemo()">
<div id="map-div" style="width:100%; height:100%;"></div>
</body>
</html>
Load JavaScript of our app
Full page div that will contain the
map, startDemo() called once the
page is loaded
www.melown.com

Basic app: JavaScript
var browser = null;
function startDemo() {
browser = vts.browser('map-div', {
map: 'http://localhost:8070/store/map-config/cadastre/mapConfig.json'
});
}
MapConfg.json contains URLs of resources and basic
metadata to allow the browser render the scene.
www.melown.com

Basic app: the result
www.melown.com

Setting custom initial view: JavaScript
...
map: 'http://localhost:8070/store/map-config/cadastre/mapConfig.json',
view: {
surfaces: {
gtopo30-dem-global: [ "bmng" ],
cz-dem-local: [ "mapy-cz" ],
Jenstejn-village: [],
Jenstejn-center: []
},
freeLayers: {}
}
});
...
Surfaces derived from DEMs,
dynamically generated
Static 3D surfaces
www.melown.com

...
view: {
surfaces: {
Jenstejn-center: []
},
freeLayers: {}
}
});
...
Bound layers (imagery) draped over
DEM surfaces.
Hide vector and raster cadastre
www.melown.com

...
view: {
surfaces: {
Jenstejn-center: []
},
freeLayers: {}
}
});
...
Symbolic names of resources
are defned in mapConfg.json
www.melown.com

Basic app: after hiding free layers
www.melown.com

Switching cadastre overlays: JavaScript
var flswitch = null;
. . .
Function startDemo () {
. . .
var panel = browser.ui.addControl('flswitch-panel',
'<form id="fl-switch-div" class="fl-switch-div">' +
'<legend>Display cadastre</legend>' +
'<input name="cadastre" type="radio" value="none" checked="checked"> None <br>' +
'<input name="cadastre" type="radio" value="vector"> Vector <br>' +
'<input name="cadastre" type="radio" value="raster"> Raster' +
'</form>'
);
flswitch = panel.getElement('fl-switch-div');
flswitch.on('change', onSwitchFreeLayer);
}
browser.ui takes care of event propagation, provides
convenience wrapper around DOM elements
HTML snippet of control element: form
with three radio buttons
www.melown.com

var flswitch = null;
. . .
Function startDemo () {
. . .
var panel = browser.ui.addControl('flswitch-panel',
'<form id="fl-switch-div" class="fl-switch-div">' +
'<legend>Display cadastre</legend>' +
'<input name="cadastre" type="radio" value="none" checked="checked"> None <br>' +
'<input name="cadastre" type="radio" value="vector"> Vector <br>' +
'<input name="cadastre" type="radio" value="raster"> Raster' +
'</form>'
);
flswitch = panel.getElement('fl-switch-div');
flswitch.on('change', onSwitchFreeLayer);
}
Storing form handle as a global variable,
registering on-change callback
www.melown.com

Switching cadastre overlays: HTML
<html>
<head>
...
<style>
.fl-switch-div {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
position: absolute;
right: 30px;
bottom: 30px;
background-color: #eee;
padding: 10px 20px;
border-radius: 5px;
border: solid 1px #000;
– }
– </style>
</head>
...
Style for the control element div
www.melown.com

Switching cadastre overlays
www.melown.com

Switching surfaces
www.melown.com

Sources of VTS information
vtsdocs.melown.com
github.com/Melown
github.com/Melown/vts-browser-js/wiki/Examples
Live Demo: http://altair.mlwn.se:8070/app/dar-es-salaam/
Getting involved in VTS development
contact: community@melown.com
or fork us on GitHub ;-)
www.melown.com

vts-getting-started

More Related Content

Similar to vts-getting-started (20)

Recently uploaded (20)

vts-getting-started