Code Monkey home page Code Monkey logo

ios-arkit-landscapeviz's Introduction

Creating & Importing 3D Landscape Models into ARKit

The workflow below discusses one way to create an Augmented Reality scene of a real-world landscape using Blender3d and Apple's ARKit.

  • Using Blender, a 3D landscape is authored using public domain elevation data and aerial imagery.
  • The 3D landscape is then imported into an ARKit Xcode project to create a 'table-top' Augmented Reality scene.
  • The Augmented Reality scene can be explored by using a pan gesture to rotate and tilt the mountain landscape.

screen

Figure: Mt. Rainier Augmented Reality scene using ARKit.

Part 1: Get Elevation Data

Acquire your elevation data (i.e. DEM or height map) from the public domain. In this example, we fetch an elevation model of Mt. Rainier, Washington.

Part 2: Create 3D Mesh with Height Map

  1. Open Blender.

  2. Delete the default cube.

  3. Add a Plane Mesh.

  4. Create a Subdivision Surface Modifier. Click on Modifiers and do the following (see screenshot below):

  • Choose Add a modifier

  • Choose Subdivision Surface

  • Choose Simple (default is Catmull-Clark)

  • Enter Subdivision View as 6

  • Enter Subdivision View as 6

screen

  1. Create a Displace Modifier. Click on Modifiers and do the following (see screenshot):
  • Choose Add a modifier

  • Choose Displace

  • Under Texture, click New (see screenshot below)

screen

  • Click the right-most icon button from the Texture with the tooltip Show texture in texture tab. See screenshot below.

screen

  • Confirm that the Texture Type is Image or Movie

  • Click the Open button and choose a height map downloaded from Part 1. The mesh will now take on the 3D data from the height map! See screenshot below.

screen

  • Choose a Color Space of linear (deafult is sRGB). See screnshot below.

screen

  • Switch the viewport shading to Solid.

  • Finess the parameters of the previously added Modifiers to work with the data in your landscape of interest. See screenshot below:

    • For the Subsurface Modifier, the Subdivions were updated to View = 9 and Render = 9.
    • For the Displace Modifier, the Strength was change from the deafult of 1.0 to 0.5.

screen

Part 3: Add the Aerial as a Texture

  1. Acquire an aerial image for the same geographic extent as your height map.

  2. Add a material to the 3D mesh (see screenshot below).

screen

  1. With the material selected, click the Texture button.

  2. Click 'New' to create a new texture (see screenshot below).

screen

  1. In Image section, click the Open button and navigate to the image.

screen

  1. Switch to UV Editing mode (see screenshot below).

screen

  • On the bottom left, choose the aerial image.

screen

  1. On the right-window, select the 3D mesh.
  • Select the 3D mesh and enter Edit Mode

  • While your mouse cursor is hovering over the mesh, Press U

  • Choose unwrap

screen

  • Switch back to Object Mode

  • Choose a View Port Shading of Material

screen

  • Switch back from UV Editing mode to Deafult Mode to close the left window.

Part 4: Export for use with ARKit

  1. Choose File (menu) > Export > Collada (dae)

  2. Under the 'Export Data Options', check on Apply Modifiers. This will ensure that the exported plane will have the 3D form of the height map.

  3. Under the 'Texture Options', check on Include Material Textures'

  4. Choose a location for the export and choose Export Collada.

screen

Part 5: Integrate into ARKit project using SceneKit

  1. Create a new Xcode project (use the AR template).

  2. Add the exported Collada (dae) file into the art.scnassets folder.

  3. Add the aerial image used as the material-texture into the art.scnassets folder.

  4. Confirm the 3d model renders correctly in the Scene Editor.

screen

  1. When creatting a scene, simply point to to the .dae file.
	// Create a new scene
	guard let scene = SCNScene(named: "art.scnassets/mt_rainier.dae") else {
		return
	}
        
	// Set the scene to the view
	sceneView.scene = scene
  1. Play with repositioning the 3D landscape in the Scene Editor and run. Point your phone at a table and it should resemble ...

screen

Continue hacking at your AR scene!

Connect

ios-arkit-landscapeviz's People

Contributors

ccabanero avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.