Monday, November 7, 2016

Creating a holographic map of Barovia

TL;DR Download Unity and create a project. Add a terrain game object. Size it to match the map proportions. Add the map as a texture. Use the fixed height terrain tools to paint the appropriate parts of the map to the right elevations. All done.

First Version






With Fog, Sound Effects, et.al.







I have been a big fan of Mike Schley's Dungeons & Dragons maps for a while. Their high resolution and detail make them great for working with on alternate platforms. Recently, I decided to try and convert some of his maps of Barovia from Curse of Strahd to display on HoloLens.

Well... and this is going to be a short post... it turns out to be really easy and not necessarily deserving of too much detail, but I'll pad it a bit to make it look a bit more impressive.

First off, I used Unity, which you can get for free. There are technical preview builds for AR/VR platforms — I used this one for HoloLens. In my case, as I'm building for HoloLens you need that though you could also use the HoloLens emulator. If you wanted you could also build for another platform — this process should work equally well for Occulus, Cardboard, etc., or even just for display within Unity or even output for PC, just wouldn't be a holographic virtual 3D map.

First I trimmed the edges of the Barovia map — not technically necessary but helps to reduce file and image sizes a bit. This left me with a map size of 7050 x 4400 pixels representing ~90K x ~56K feet or 27,538 meters by 17,187 meters.

The map of Barovia has contour lines which will be used for elevation. The contour lines are 1000 feet each or 10K feet from lowest to highest elevation.



The next step was a bit of math to determine the display size. Unity uses arbitrary units and HoloLens works on a scale of 1 Unity unit = 1 meter. I wanted the map to be big, so to fit (barely) my living room, I chose a scale factor of 2000 which ends up with a map size of 3.525 x 2.2 which is both the Unity map size and the size, in meters, of the resulting hologram.

Within Unity I created a 3D terrain. Select the terrain object, and go to settings. Set the length and width to 2.2 and 3.525 (the z and x axis). For the height, if using the same scale as the length and width, it would end up being around 0.05. However, when I tested this it was less dramatic than I would like. After experimenting with various options I settled on a 4x vertical scale on the y axis relative to the x and z, which ended up at 0.2 height. With my vertical scale set, each increase in a contour line — 1000 feet in the map — is an elevation increase of 0.02 in Unity.

The Unity terrain tools are not well loved, and many people use third party tools, but the built in tools are free and you can get what you need done, if a bit slowly. With the terrain selected choose the Paint Texture tool and then Edit Textures. Add the map (the map of Barovia that is) and set it to the same size as the terrain itself (2.2 by 3.525).

Next select the fixed height terrain tool. Using the hard edge brush with a 100 opacity and then a height equal to the elevation (in contour lines) you are painting x 0.02. I tend to vary the size of the brush as I go. Then I painted the map, raising each contour section of the map's elevation. When roughly done there was a fair amount of touch up but as the contour lines themselves stretch between the lower and higher elevations they handle distortion well. Below are examples from a call out map of Yester Hill.


I also looked at smoothing the terrain between elevations, but this quickly started to look like a couple orders of magnitude more work and a lot more artistic judgement than I had time for. Once that was done, I set various HoloLens specific settings, built and deployed to HoloLens. As HoloLens has built in video capture I could create video of the result and save it. And that was version one.

For additional versions I made it darker with moon and moonlight, added spatial sound effects — sound that emanates from a specific location and varies by direction and distance, fog clouds from the Unity standard assets, as well as lightning, and more.

I also added gaze events to open additional maps such as this one of Tsolenka Pass. This map was generated at mini / battle map scale to 5 map feet = 1 physical inch. The map has 1000 feet of elevation which results in a holographic object that is 16.67 feet tall.


Sunday, September 11, 2016

A holographic pit trap

As one of my first projects for HoloLens I decided to build a pit trap (in case the video below isn't loading).

video


I went through various versions of this. Here is an earlier attempt.

First, I picked up some traps assets from the Unity asset store. Then started messing around with a bunch of options. With Unity I spent a lot of time getting the center of the object positioned at the top of the pit so I could place the pit on the floor, and then sizing the various assets.

Once I added a trap door, I spent way too long adding a workable gravity hinge and a motor to close the lid based on your proximity to the pit and then starting and stopping the spike animation at the same time.
I spent even more time with this not working before I sorted out that I needed a collider on the pit GameObject before I could use the TapToPlace script to move it, and then get my collider to not block the pit door from opening, and making sure the collider wasn't hidden behind the spatial map once I placed it, and on and on.

By far the biggest challenge for this was working with spatial mapping and placement. I'll have a lot more to say about this later. Initially, I tried to remove the spatial map vertices where they intersected the pit and have the spatial map do the occlusion — to give the illusion that the pit trap was actually in the floor. Though I think I now understand why it didn't work, I wasn't able to sort this out at the time. So, instead I added quads with an Occlusion surface material along the lines of the HoloLens Academy 230 project.

Finally, I used the web cam to take a picture of the floor near the pit trap and then mapped that to the surface of the door to make it blend in.

As if my reality wasn't mixed up enough already

When Google Glass first launched, I was excited. Despite the unfortunate (and, I think, unfair) stigma that became attached to Glass it felt like a first step to long awaited augmented and mixed reality devices. So I built a Glass app for KitchMe. And, being one of the first to launch, got my company some nice, pre-glasshole press. I spoke to Robert Scoble about it. Helped cook something for the WSJ. And then it was dead. And I was sad.

Then, suddenly we have a sudden explosion of VR / AR / Mixed Reality devices to play with. I picked up a copy of the Occulus Rift dev kit and played around with that. Tried out Google Cardboard and project Tango. Read whatever I could find on Magic Leap.

And now I'm monkeying around with HoloLens and I love it. It is what I had thought Glass would be, or might become. I have no opinion, as of yet, as to which devices, platforms, or paradigms will win... or if any of this first generation will. But I'm happy to get started with whatever is available.

To start, I went through the various Holographic Academy projects, downloaded the technical preview of Unity for HoloLens. Went through a bunch of free tutorials as well as some paid one's like this Make VR Games in Unity with C# - Cardboard, Gear VR, Oculus.

While not strictly necessary, I also downloaded and learned a bit about Blender. Picked up a Matter and Form 3d Scanner and learned how to make some, barely, competent scans.

For me, this was almost all entirely new. Which is to say it has been a lot of fun learning a whole range of new apps and skills. To go along with all of this I was listening to Tim Ferris interviewing Kevin Kelly and this comment struck me:

Right now there are no experts in VR, we have no idea how it will work – what content, equipment, consumer breakthrough, etc. So anyone has the chance NOW to become that future expert

He discusses how to go about this: get the tools and start monkeying around (paraphrasing). Which is what I am doing, so, uh, confirmation bias I guess.

Anyway, I thought I would go ahead and lightly blog my various comical attempts at building various mixed reality projects! Hopefully, leading to a little self improvement if nothing else. Fun for me, if not for thee.

Monday, December 14, 2015

Nerdy Mapping Fun with Faerun and Google Earth, Part IV, KML Files

In Part I, I discussed the process of getting this awesome and massively detailed map of Northern Faerun by Mike Schley, onto Google Earth.

Going a little further than in previous posts, I wanted to see if I could display different maps at different zooms. For this I needed to create a KML file. This is actually easy to do manually, just create an xml file with a KML extension. You can get a lot of information on what is possible from KML files on Google Maps. Also, KML files use decimal degrees so I had to use the translated coordinates from previous posts.

I created two KML files. You can probably do it in one, but I had some issues with properly nesting the xml, so I separated them. The first file just positions the same four maps (though I'm using versions I created without text overlays) I used in my other posts. Getting the "href" path in the xml right on a Windows machine took a while to sort out, but otherwise this was fairly straightforward.

Then I created a second KML to bring in a detailed view of the Dessarin Valley and set the zoom level so it would only show up when you were in close. For this, I used another one of Mike Schley's maps. It took some work to get the edges more or less lined up and the scale to match, and I could delete the borders, to clean it up a bit, but in this case I was just testing out creating KML files so I wasn't overthinking it. Clearly, it would also be easier with maps designed for this purpose (Mike!?)

Here is the view zoomed out:

And zoomed in just a little:

I also added a placemark for Neverwinter, just to experiment with adding individual elements on the page. You can of course swap out the icons, position the text more elegantly but this was enough for a test.

Here is the first KML file.

<kml xmlns="http://www.opengis.net/kml/2.2">
  <folder>
    <name>Northwest Faerun</name>
    <description></description>
    <groundoverlay>
      <name>Faerun SW Corner</name>
      <description></description>
      <icon>
        <href>D:\[filepath]\nw-faerun-sw.jpg</href>
      </icon>
      <latlonbox>
        <north>41.250</north>
        <south>26.0000</south>
        <east>-118.475</east>
        <west>-150.000</west>
        <rotation>0</rotation>
      </latlonbox>
    </groundoverlay>
    <groundoverlay>
      <name>Faerun SE Corner</name>
      <description></description>
      <icon>
        <href>D:\[filepath]\nw-faerun-se.jpg</href>
      </icon>
      <latlonbox>
        <north>41.250</north>
        <south>26.0000</south>
        <east>-89.950</east>
        <west>-118.475</west>
        <rotation>0</rotation>
      </latlonbox>
    </groundoverlay>
     <groundoverlay>
      <name>Faerun NE Corner</name>
      <description></description>
      <icon>
        <href>D:\[filepath]\nw-faerun-ne.jpg</href>
      </icon>
      <latlonbox>
        <north>56.500</north>
        <south>41.250</south>
        <east>-89.950</east>
        <west>-118.475</west>
        <rotation>0</rotation>
      </latlonbox>
    </groundoverlay>
     <groundoverlay>
      <name>Faerun NW Corner</name>
      <description></description>
      <icon>
        <href>D:\[filepath]\nw-faerun-nw.jpg</href>
      </icon>
      <latlonbox>
        <north>56.500</north>
        <south>41.250</south>
        <east>-150.000</east>
        <west>-118.475</west>
        <rotation>0</rotation>
      </latlonbox>
    </groundoverlay>
    <placemark>
      <name>Neverwinter</name>
      <description>A city.</description>
      <point>
        <coordinates>-124.92085,50.227359,0</coordinates>
      </point>
    </placemark>
  </folder>
</kml>

And here is the Dessarin Valley KML file.

<kml xmlns="http://www.opengis.net/kml/2.2">
    <folder>
          <name>Dessarin Valley</name>
        <description></description>
      <groundoverlay>
        <name>Dessarin Valley</name>
        <description></description>
        <icon>
          <href>D:\[FilePath]\dessarin-valley.jpg</href>
        </icon>
        <region>
          <latlonbox>
            <north>50.400</north>
            <south>45.8</south>
            <east>-117.640</east>
            <west>-122.150</west>
            <rotation>0</rotation>
          </latlonbox>
          <lod>
              <minlodpixels>65000</minlodpixels>
              <maxlodpixels>-1</maxlodpixels>
            </lod>
        </region>
           <latlonbox>
               <north>50.400</north>
            <south>45.8</south>
            <east>-117.640</east>
            <west>-122.150</west>
            <rotation>0</rotation>
          </latlonbox>
      </groundoverlay>
    </folder>
</kml>

Getting this into Google Earth is now just a matter of File | Open and select each KML file. KML files can be used in other mapping software as well.

Nerdy Mapping Fun
  1. In Part I I overlay a map of Faerun on Google Earth.
  2. In Part II, Stitching it Together I repeat this process with the 34 part PDF map.
  3. Part III, Higher Resolution and now moving it around.
  4. In Part IV, KML Files I use KML files to display maps at different zoom levels.

Thursday, October 29, 2015

Nerdy Mapping Fun with Faerun and Google Earth, Part III, Higher Resolution

In Part I, I discussed the process of getting this this awesome and massively detailed map of Northern Faerun by Mike Schley, onto Google Earth.

Anonymous commented on Part I that he thought the map should be shifted North. My position was based on trying to keep the Jungle of Chult within the tropics. However, various older maps of Faerun have considerable variations in distances. Pending new updated maps from Mike / WoTC, I thought it would be reasonable to shift the whole map at least 4 degrees North, putting the Southern edge at 28N and the Northern edge at 56N. You could probably shift at least another 4 degrees depending on which map you use as a reference.

This also moves Baldur's Gate to about San Francisco, Neverwinter to Portland, and Neverwinter to a bit North of Vancouver, BC.

So in this version — I'm using the higher resolution tiled image from Part II — you get the following corners:

  • 150° 0'0.00"W 28° 0'0.00"N
  • 89°42'0.00"W 28° 0'0.00"N
  • 89°42'0.00"W 56°14'0.00"N
  • 150° 0'0.00"W 56°14'0.00"N

The midpoint for calculating the width is at 42° 7'0.00"N.

And here is how it looks.

Northwest Faerun on Google Earth
Nerdy Mapping Fun
  1. In Part I I overlay a map of Faerun on Google Earth.
  2. In Part II, Stitching it Together I repeat this process with the 34 part PDF map.
  3. Part III, Higher Resolution and now moving it around.
  4. In Part IV, KML Files I use KML files to display maps at different zoom levels.

Wednesday, October 28, 2015

Nerdy Mapping Fun with Faerun and Google Earth, Part II, Stitching it Together

In Part I, I discussed the process of getting this this awesome and massively detailed map of Northern Faerun by Mike Schley, onto Google Earth.

In addition to the map I originally used there is a ~34 part PDF version at about 2x the resolution of the JPG image. So, I decided to try using this and adding multiple image maps that I could tile together.

For this, I copied each PDF page into Paint.NET and alligned them. This turned out to be a bit of work as, in some cases, some of the images were off by a pixel or two. I'm not sure if this is an artifact of the conversion to and from the PDF or maybe my accidentally nudging pixels around as I worked. However, after some effort I had a nice 645 MB Paint file.

I then stripped the borders and cut the image into 4 equal 9735x6175 pngs. Before being optimized each image was about 140MB, after about MB.

I then ran a similar process as in Part I, bringing in the image, converting the coordinates to radians, measuring the distance between points and adjusting until they matched the map dimensions. As before, the North–South dimensions match the map, but only the mid-point line is accurate, with the Southern border stretched and the Northern border compressed.

For this version the combined tiles ran from Longitude 150° 0'0.00"W to 93°12'0.00"W and Latitude 24° 0'0.00"N to 52°14'0.00"N.

And looks good with double the resolution of the map in Part I.

Nerdy Mapping Fun
  1. In Part I I overlay a map of Faerun on Google Earth.
  2. In Part II, Stitching it Together I repeat this process with the 34 part PDF map.
  3. Part III, Higher Resolution and now moving it around.
  4. In Part IV, KML Files I use KML files to display maps at different zoom levels.

Nerdy Mapping Fun with Faerun and Google Earth, Part I

Updated with a few math fixes

I purchased this awesome and massive detailed map of Northern Faerun by Mike Schley, a digital version of the one included in the Dungeons & Dragons Sword Coast Adventurer's Guide.

The map weighs in at 10200 x 6600 px — a little less if you shave the borders — and also comes with a 34 page even higher detail PDF version. If I get ambitious I might stitch that together and use that instead.

However, at this scale the map really needs to be on a globe, for which Google Earth will do nicely. Now, some literature suggests Toril is slightly larger than Earth, some literature says the same size, but as far as I know Google Earth doesn't allow for rolling out your own planets, so our Earth will have to do.

First off, it is easy enough to overlay an image in Google Earth. In the menu bar: Add | Image Overlay. Wait a bit for the image to load. Then, change to the Location tab in the New Image Overlay popup and click the "Convert to LatLonQuad" button. This will give you the ability to set the four corners independently.

The Edit Image Overlay dialog's Location tab then lists four corners with Longitude and Latitude. The 1st corner is Southwest (bottom left) then Southeast (bottom right), Northeast (top right) then Northwest (top left).

The map legend is about 1820px = 500 miles. After shaving the borders I ended up with a map that was about 2674 x 1696 miles. Further, I assumed that this is actually a Mercator projection and so the distances are accurate North-South, but that East-West the scale is only accurate at the middle of the map.

Given those assumptions, everything is nicely parallel, with the Southern edge of the map ending up at about 3,124 nautical miles while the Northern edge is only 2,074 nautical miles.

I picked a starting point where Baldur's Gate will end up roughly on top of Los Angeles, CA (Waterdeep at Ashland, OR and Neverwinter at Seattle, WA). Using formulas from Allen Wyatt's ExcelTips I started plugging numbers into Excel.

I converted each LAT/LNG pair into radians using this formula:

=RADIANS((DEGREES*3600+MINUTES*60+SECONDS)/3600)

Then plugged a N-S pair into Excel, and adjusted, to get one edge using this forumula:

=ACOS(SIN(LAT1)*SIN(LAT2)+COS(LAT1)*COS(LAT2)*COS(LON2-LON1))*3443.89849

With that done, I took the mid-point between the North South edges, and plugged those into the same formulas to get the East West coordinates. I plugged those numbers back into the Google Earth location tab on the image overlay. And success!

Hard to see here but if you look close you can see the latitude and longitude markings.

The final values I used were:

  1. 1st Corner: 150° 0'0.00"W Longitude and 24° 0'0.00"N Latitude
  2. 2nd Corner: 92°12'0.00"W Longitude and 24° 0'0.00"N Latitude
  3. 3rd Corner: 92°12'0.00"W Longitude and 52°16'0.00"N Latitude
  4. 4th Corner: 150° 0'0.00"W Longitude and 52°16'0.00"N Latitude
Nerdy Mapping Fun
  1. In Part I I overlay a map of Faerun on Google Earth.
  2. In Part II, Stitching it Together I repeat this process with the 34 part PDF map.
  3. Part III, Higher Resolution and now moving it around.
  4. In Part IV, KML Files I use KML files to display maps at different zoom levels.