Hello everyone! Several month ago we began a new
project. The essence of the project is to create a web application of
OSM 3D viewer and editor. So I'm going to tell you a few words about
main directions of project, that we've been working on over the last
months.
OSM data processing
First
of all, we decided to create a script for OSM
data processing. This script will parse OSM file, then it will select
buildings, remove excess points, analyze a form of each building and
try to recreate it using simple 3D objects. After all the received
information will be added in the DB.
The task consists of developing a set of methods for
visualization of 3D landscape allowing to display real-time area,
that is scalable in size in various levels of detail for displayed
surface. Effective implementation of these methods allows using of
modern computers to conventional graphics cards.
The first step is generation of landscape tops using map
of heights. It is necessary to break landscape on tiles (grid of
three-dimensional nodes) and build a quad-tree which
represents the LOD (level of detail) from them.
Schematic representation of the quad-tree:
The next step is texturing each tile corresponding OSM
texture and setting the algorithm for selecting the desired detail.
3D object editor
Also we are developing 3D object editor using the
Three-JS library. Possibility of rotation, scaling and movement of
objects is implemented. The addition of such primitives as sphere,
cube and cylinder is implemented too.
We can fill the landscape with buildings using these
primitives, as well as custom objects. Soon we will add physics and
improve usability.
Geometry Builder
User can create new difficult object from primitives
using geometry editor, which will be built on the basis of object
editor.
We will develop geometry builder using the constructive
solid geometry library with the help of cgs-functions such as union,
intersection, and subtraction.
Texture editor
Here you can see texture editor.
User can drag the image to the page and select a few
areas, then crop them and save to texture files that can be used, for
example, in object editor.
Main features:
1. Draggable handles
2. Intersection control
3. Possibility to select and crop multiple areas
Texture editor was developed using jQuery UI JavaScript
Library (draggable handles and other UI elements) and jsDraw2D
(Graphics Library for JavaScript).
GUI
GUI is being developed using HTML, CSS, jQuery, AJAX. Main
idea is to select some instances and drag them to editor.
Content consists of three parts:
1. Search
2. Left menu
3. Editor field
User can search different instances. Content (types and
instances) will be filtered in a real-time by the word typed in
search field.
Left menu will contain different types of objects, if
you choose some object, first 20 instances of this objects will be
shown, if you scroll down, next 20 instances will be shown (AJAX).
After selecting the instance, user can drag and drop it
to editor field.