Render a 3D Map w/Buildings in Processing

sirianth

like so: https://mapzen.com/projects/tangram/

anyone have any ideas? I've been messing with unfolding maps, but can't figure out how to do it

it has this object:

public abstract class AbstractMapTileUrlProvider extends AbstractMapProvider Handles tiles from URLs, such as web map services, etc.

which theoretically could handle any map, but I can't figure out how to use it and/or I don't know if it can import 3D maps

link to the project I'm working on is here: https://www.instagram.com/p/BBeDQXkiuN-/?taken-by=saitogroup

sirianth

or like this, how do I just import this: http://osmbuildings.org/?lat=37.77813&lon=-122.41797&zoom=15&rotation=0&tilt=30

and maybe change the colors

dimiro

hi, i am pretty sure (~99.%) that you cannot not import this in unfolfding maps..the reason is that this (excellent) library essentially loads the tiles (png files) and simulates the behavior of on line maps with custom mouse actions (mouse wheel actions) that they have written...in your browser if you right click on a 2D map and inspect elements you see the links to each pre rendered png...

if you do the same on these 3D maps you see that it uses a canvas element..i am guessing that they use a 3d js library maybe Three.js while simulating the behavior of maybe leaflet.js,so essentially they draw 3d models on top of their map layer.. but this only my guess

sirianth

If I can't import this, is there some other way of getting 3D tiles into the map?

sirianth

OK, I have a preliminary solution to this problem, but still hear what people have to say. Got it from here: http://hanbyul-here.github.io/tile-exporter/?lon=-122.4151611328&lat=37.7837401052&zoom=16

import peasy.*; //the camera library
PShape s;
PeasyCam cam; //cam object

void setup() {
  size(500, 500, P3D);
  cam = new PeasyCam(this, 600, 400, 0, 1000);

  // The file "bot.svg" must be in the data folder
  // of the current sketch to load successfully
  s = loadShape("tile.obj");
}

void draw() {
  background(0);
  lights();
  directionalLight(255,0,0, -1, 0, 0);
  fill(50,255);
  shape(s, width/2, height/2, 80, 80);
}

sirianth

Another question is how do I make this transparent?

sirianth

Seems like there are transparency problems mentioned in P3D. Did any of these ever get solved?

sirianth

Figured it out. Transparent 3D tile.

import peasy.*; //the camera library
PeasyCam cam; //cam object

//the tile;
PShape s;

void setup() {
  size(1000, 1000, P3D);
  cam = new PeasyCam(this, 0, 0, 0, 0);
  s = loadShape("tile.obj");

}

void draw() {
  background(0);
  lights();
  directionalLight(0, 0, 255, -1, 0, 0);
  directionalLight(255, 255, 255, 0, 0, -1);
  s.setFill(color(255,0,0,50));
  shape(s, width/2, height/2, 80, 80);
  //translate(533, 472, 1.5);
  //box(100, 100, 0);
  //translate(-533, -472, -1.5);
}

sirianth