Render a 3D Map w/Buildings in Processing

edited March 2016 in Library Questions

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

Answers

  • 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

  • edited March 2016 Answer ✓

    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

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

  • 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);
    }
    

    Screen Shot 2016-03-05 at 11.36.26 AM

  • Another question is how do I make this transparent?

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

  • 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);
    }
    
Sign In or Register to comment.