Adobe Photoshop
Autodesk Maya
Google Maps
Google Earth

Lets get started

For this post, i am using the map data from NYC’s gis website. Here is the link http://gis.nyc.gov/doitt/nycitymap/

The first thing you need to do is decide the area on the map you are going to work on. I am going to start small, just a block from downtown brooklyn for now. My ultimate motive for doing this is to publish it inside BetaVille, the project i am working for as a 3D Artist right now. So, here is the block. All you need is a screenshot of the block.

Screenshot for building the buildings ground up.

Now, Open this up in Photoshop. We are going to use the pen tool to pen on top of the edges of the buildings.

Open it up in photoshop

Select the Pen Tool

Pen on top of the building edges

Export the paths to illustrator

Export Options

Now lets open up Maya and import the illustrator file into the scene. Notice that the plane is vertical to your grid. This happens when your up axis is Y. Now Select all of it and group (Command + G on a mac and Ctrl + G on windows). Rotate the X-Axis to a -90. It should now have nicely lined up with your grid.

Import the file

Looks vertical to the grid

Group them together and rotate

Now we switch the mode to surfaces and then hit Surfaces->Planar on the menu. Make sure the settings are the same as in the screenshot below by clicking on the little box next to Planar. After you make the planar mesh, duplicate it (Command + D on mac and Ctrl + D on win). Now hit the “w” key and move the duplicated mesh up till you can see the initial mesh clearly below it. Now select the initial mesh and delete it.

Change mode to surfaces

Use the Planar tool. Check settings with the screenshot before you use this tool.

Settings for the Planar tool

Duplicate the new mesh and move it up

Select the Old mesh and delete it.

Now you have a nice basic outline of the buildings in the new mesh. Center pivot and move it to the origin on the grid. Switch the mode to Polygons and select Edit Mesh -> Extrude on the menu. Select the small box near it to check the settings and match it with the settings in the screenshot. Now you will see the extrude mesh arrows, all you have to do is select the Y axis arrow and pull it up to give your buildings some height. Hit “5″ to view it in the textured mode.

Change Mode to Polygons

Center the pivot on the new mesh

Move mesh to the origin. you can hold "X" to make it stick to the grid

Select the options for Extrude on the menu

SEttings for Extrude

Right after you select extrude, this is how it looks. Hold the blue arrow and drag it up to add height to your mesh.

Finish Adding height

Press "5" on the keyboard to view the textured version

Now you have the basic figure of the buildings and some height as well. What you dont know is the actual height of the buildings. Lets do some google maps exploring and figure out the height. Pull up the block on google street view.

Look up on google maps

Look into street view

Now, the buildings in Brooklyn are roughly 12 feet high per floor. Using this, we can pretty much calculate the height of the building. You can also look for detailed info on the gis data from the city’s website. For our purposes we are just going to go with the 12 feet per floor assumption.

3 and a half floors, roughly 42 feet

6 floors , so roughly 72 feet

Around 10 floors, so 120 feet

Now lets go back into maya with this newly founded info and finish up the buildings. My grid is set to one line every 12 feet just to keep things simple.

Set the grid settings

Settings for the grid

Select the mesh and hit Mesh -> Separate

Meshes separated

Select the 120 feet building, Press "R" on the keyboard and pull up the height to 120 feet

Similarly for the 72 feet building

And the 42 foot buildings, do them together.

Now lets open up google earth to find out how big the block is. this is the final step to finish up the whole block. Use the measuring tool in google earth to measure the distance. Click on one corner and then click on the next corner to get the distance between the corners. change the scale to feet.

Google Earth Scale tool

Length of the block is around 202 feet

The width is 202 feet as well. A nice square block!

Now go back into maya and select everything. Adjust the mesh so that they line up on one edge to the center of the grid. You can pull the pivot to one corner by pressing (Fn + left on the mac) and pulling the pivot to where you want it. After this, just resize the length and width to 202 feet and we have a nice block from downtown brooklyn all built from ground up.

Switch to Top View

Move Pivot Manually (Fn + Left)

Move Pivot to the center of the grid

Rotate the mesh to line up with the grid.

Freeze transformations

Freeze transformations resets the transformations of the mesh to 0,0,0

Resize the buildings

A whole block from ground up. Thats it Folks!

Edit:
After you complete all of this, go into the outliner and pull out the meshes from the group using the middle mouse button. This makes them individual meshes. Cheers.

Pull em outta there with the middle mouse button.

Feel free to comment and ask questions.

Credits:
Ashwin Ramesh for figuring out how to do this.

Marker

I ve been toying around with Augmented Reality a lot lately. I came across FLARManager which is the easiest way to implement AR. Somehow i haven’t found any code out there till now that displays multiple collada files on multiple markers. So, here is my implementation of the concept.

package {

import com.transmote.flar.FLARManager;

import com.transmote.flar.marker.FLARMarker;

import com.transmote.flar.marker.FLARMarkerEvent;

import com.transmote.flar.utils.geom.FLARPVGeomUtils;

import flash.display.Sprite;

import flash.events.Event;

import org.libspark.flartoolkit.support.pv3d.FLARCamera3D;

import org.papervision3d.lights.PointLight3D;

import org.papervision3d.objects.DisplayObject3D;

import org.papervision3d.objects.parsers.DAE;

import org.papervision3d.render.LazyRenderEngine;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.view.Viewport3D;

public class MultiMarkerMultiDae extends Sprite {

private var flarManager:FLARManager;

private var scene3D:Scene3D;

private var camera3D:FLARCamera3D;

private var viewport3D:Viewport3D;

private var renderEngine:LazyRenderEngine;

private var pointLight3D:PointLight3D;

private var activeMarker1:FLARMarker;

private var activeMarker2:FLARMarker;

private var activeMarker3:FLARMarker;

private var activeMarker:FLARMarker;

private var modelContainer:DisplayObject3D;

private var modelContainer1:DisplayObject3D;

private var modelContainer3:DisplayObject3D;

private var markerId:int;

public function MultiMarkerMultiDae ()

{

// pass the path to the FLARManager xml config file into the FLARManager constructor.

// FLARManager creates and uses a FLARCameraSource by default.

// the image from the first detected camera will be used for marker detection.

this.flarManager = new FLARManager("flar/flarConfig.xml");

// add FLARManager.flarSource to the display list to display the video capture.

this.addChild(Sprite(this.flarManager.flarSource));

// begin listening for FLARMarkerEvents.

this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);

this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);

this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);

// wait for FLARManager to initialize before setting up Papervision3D environment.

this.flarManager.addEventListener(Event.INIT, this.onFlarManagerInited);

}

private function onFlarManagerInited (evt:Event) :void

{

this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);

this.scene3D = new Scene3D();

// initialize FLARCamera3D with parsed camera parameters.

this.camera3D = new FLARCamera3D(this.flarManager.cameraParams);

this.viewport3D = new Viewport3D(this.stage.stageWidth, this.stage.stageHeight);

this.addChild(this.viewport3D);

this.renderEngine = new LazyRenderEngine(this.scene3D, this.camera3D, this.viewport3D);

this.pointLight3D = new PointLight3D();

this.pointLight3D.x = 1000;

this.pointLight3D.y = 1000;

this.pointLight3D.z = -1000;

// load the model.

// (this model has to be scaled and rotated to fit the marker; every model is different.)

var model1:DAE = new DAE(true, "model1", true);

model1.load("assets/model4.dae");

model1.rotationX = 0;

model1.rotationY = 0;

model1.rotationZ = 0;

model1.scale = 10;

// load the model.

// (this model has to be scaled and rotated to fit the marker; every model is different.)

var model2:DAE = new DAE(true, "model2", true);

model2.load("assets/model4.dae");

trace("model4 loaded");

model2.rotationX = 0;

model2.rotationY= 0;

model2.rotationZ = 0;

model2.scale = 10;

// load the model.

// (this model has to be scaled and rotated to fit the marker; every model is different.)

var model3:DAE = new DAE(true, "model3", true);

model3.load("assets/model4.dae");

model3.rotationX = 0;

model3.rotationY= 0;

model3.rotationZ = 0;

model3.scale = 10;

// // create a container for the model, that will accept matrix transformations.

// create a container for the model, that will accept matrix transformations.

this.modelContainer = new DisplayObject3D();

this.modelContainer.addChild(model1);

this.modelContainer.visible = false;

this.scene3D.addChild(this.modelContainer);

this.modelContainer1 = new DisplayObject3D();

this.modelContainer1.addChild(model2);

this.modelContainer1.visible = false;

this.scene3D.addChild(this.modelContainer1);

this.modelContainer3 = new DisplayObject3D();

this.modelContainer3.addChild(model3);

this.modelContainer3.visible = false;

this.scene3D.addChild(this.modelContainer3);

//------------------------------------------------------------------------- ---------

this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);

}

private function onMarkerAdded (evt:FLARMarkerEvent) :void

{

trace("["+evt.marker.patternId+"] added");

if(evt.marker.patternId == 1)

{

trace("Pattern 1 Added");

markerAdded(1);

this.activeMarker1 = evt.marker;

}

if(evt.marker.patternId == 2)

{

trace("Pattern 2 Added");

markerAdded(2);

this.activeMarker2 = evt.marker;

}

if(evt.marker.patternId == 3)

{

trace("Pattern 3 Added");

markerAdded(3);

this.activeMarker3 = evt.marker;

}

this.activeMarker = evt.marker;

}

private function onMarkerUpdated (evt:FLARMarkerEvent) :void

{

trace("["+evt.marker.patternId+"] updated");

if(evt.marker.patternId == 1)

{

trace("Pattern 1 Updated");

markerAdded(1);

this.activeMarker1 = evt.marker;

}

if(evt.marker.patternId == 2)

{

trace("Pattern 2 Updated");

markerAdded(2);

this.activeMarker2 = evt.marker;

}

if(evt.marker.patternId == 3)

{

trace("Pattern 3 Updated");

markerAdded(3);

this.activeMarker3 = evt.marker;

}

}

private function onMarkerRemoved (evt:FLARMarkerEvent) :void {

trace("["+evt.marker.patternId+"] removed");

if(evt.marker.patternId == 1)

{

trace("Pattern 1 Removed");

markerRemoved(1);

}

if(evt.marker.patternId == 2)

{

trace("Pattern 2 Removed");

markerRemoved(2);

}

if(evt.marker.patternId == 3)

{

trace("Pattern 3 Removed");

markerRemoved(3);

}

this.activeMarker = null;

this.activeMarker1 = null;

this.activeMarker2 = null;

this.activeMarker3 = null;

}

private function onEnterFrame (evt:Event) :void {

// apply the FLARToolkit transformation matrix to the Cube.

if (this.activeMarker) {

this.modelContainer.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker.transformMatrix);

}

if (this.activeMarker1) {

this.modelContainer.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker1.transformMatrix);

}

if (this.activeMarker2) {

this.modelContainer1.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker2.transformMatrix);

}

if (this.activeMarker3) {

this.modelContainer3.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker3.transformMatrix);

}

// // apply the FLARToolkit transformation matrix to the Cube.

this.renderEngine.render();

}

//EVENTS FOR ADDED MARKER

private function markerAdded(markerId:int):void

{

trace(markerId);

var x:int = markerId;

switch(x)

{

case 1:

{

trace("1 Yeah");

if(modelContainer1.visible==false)

{

modelContainer1.visible=true;

break;

}

else

break;

}

case 2:

{

if(modelContainer.visible==false)

{

modelContainer.visible=true;

break;

}

else

break;

}

case 3:

{

trace("1 Yeah");

if(modelContainer3.visible==false)

{

modelContainer3.visible=true;

break;

}

else

break;

}

}

}

private function markerRemoved(markerId:int):void

{

var x:int = markerId;

switch(x)

{

case 1:

{

if(modelContainer1.visible==true)

{

modelContainer1.visible=false;

break;

}

else

break;

}

case 2:

{

if(modelContainer.visible==true)

{

modelContainer.visible=false;

break;

}

else

{

break;

}

}

case 3:

{

if(modelContainer3.visible==true)

{

modelContainer3.visible=false;

break;

}

else

break;

}

}

}

}

}

Just link back to me if you use this code. Here is the example of how the code works. Download the marker here.

If it does not load, click here.