Shriveling World in Blender

Intro

Shriveling World is a web app intended to explore shriveled maps (multi-modal maps) of different datasets directly in your browser.

The application allows you to get an accurate representation of the model through interactive parameters.
But it is now easier to use advanced 3D software to fine tune the appearance of the outputs.

Why Blender?

We chose Blender because it’s a free and cross platform open source 3D creation suite that allows advanced shading, lighting and rendering options to tweak the visual output of the Shriveling World app.

Of course any 3D tool could be used as long as it supports .obj file.

Download Blender
(At least 2.91.0 Beta as of november 13th 2020)

The tutorial below is designed as a quick start to import data from the Shriveling App and effectively organize your scene in Blender[^version].

Step by step (ooh 🔊)

Export from Shriveling world

When working in Blender you want to dispose of highest quality geometries.

• High definition cones: Cones, coneStep, value 1
• Uncut cones (because current algorithm in Shriveling world is, say, un-perfect): Cones, withLimits, un-check (is checked by default)
• High definition curves: Curves, number of points, value 200 (200 is the maximum, default is 50)
• Extrude countries: Countries, extruded, value - 100
• Export countries: Countries, Export with, check (already checked by default)

After exporting from the app you should have a zip file containing 4 files:

• country.obj, the country limits contained in the 'geojson' input file
• sceneCones.obj, base geometry for terrestrial transport
• sceneCurvesLongHaul.obj, long distance flights
• sceneCurvesShortHaul.obj, short distance flights

Let’s get started.

Import OBJ

1. Open Blender

2. New File > General

3. With your mouse in the 3D Viewport editor’s area remove everything in the scene

   • Press A (Select All)
   • Press X (then confirm by pressing D, Enter or click “Delete” in the contextual pop-up) or press BackSpace (for instant delete)

4. File > Import > Wavefront (.obj)

   In the Blender File View, find and select the .obj file on your system, then click Import OBJ or press Enter. The OBJ import allows only one file at a time.

Objects are named before exportation from 'Shriveling world' and will show in the right Outliner panel:

• cone Tokyo

• cone Hiroshima

• …

• curve HST 001

• curve HST 002

• curve Aircraft 001

• …

  For the sake of organization we can import each .obj file in a collection. We could do this by creating a collection for each additional import and renaming each collection to our needs in the Outliner.

  Select the desired collection in the Outliner before importing the corresponding file as mentioned before.

Now we have imported our meshes, we can work in Blender as we like.
Tweak the geometry, set materials, lights, cameras and make renders.

However a few tips could be helpful.

The beauties of Blender interface

The Viewport is the central part of the screen, where all the objects and the scene are.

• It is often useful to toggle on and off Show overlays. For instance when a group of objects is selected, modified and you want to see the result in render; then toggle off View overlay hides the yellow selection lighting; here is the way:
  • in the top right part of the Viewport toggle the Show overlays checkbox. Grids, red and green lines, the orange halo of selection, etc. will disappear.

Navigating in the scene

• Rotation of the view = maintain middle click and move mouse
• Translation of the view = maintain middle click + Shift and move mouse

Navigating around objects

As objects of the Shriveling project are located in reference to the center of the Earth, it proves convenient to adapt the navigation rules that by default consider the center of the Earth as th main reference point:

• In Blender preferences, accessed by the general menu Edit, and Préferences
• Choose the tab Navigation
• Toggle the box Orbit around selection

Working with 3D objects

J’inclus (temporairement) une initiation à la modélisation sous Blender en français (comme l’équipe actuelle est essentiellement francophone). Son auteur Vincent Nivoliers travaille comme assistant professeur à LIRIS (je suis tombé dessus totalement par hasard) mais revenons à nos moutons…

Moving objects

Select objects and then:

• type G and then mouse movements move selected objects

Move objects to the center:
If you imported the objects unprojected, the World origin where the Cursor of Blender is, is at the center of the earth of the geographical objects generated by Shriveling world. This is also where is located the center of all your objects. Once all the treatments have been done you may want to move your geometry at the center.

1. Select the object, e.g the cones
2. From the menu Object, Set Origin, Origin to Geometry this will move a little dot, its Origin somewhere at the center of this object. This point is to become the point of reference of your scene.
3. Move cursor to there: SHIFT + S, Cursor to active
4. Move the Cursor back at World origin: SHIFT + S, Cursor to world origin
5. Select all the objects
6. From the menu Object, Snap, Selection to Cursor

Zoom on objects

In Layout view, choose from the menu View the submenu Frame all

Test and correct normals

At the moment, volumes exported from Shriveling world, cones and countries, may exhibit normals issues. Id est, interior and exterior normal vectors may be inverted. This will cause errors and unexpected results with boolean operations on geometries.

• To show normals of objects:

  • Go to Viewport overlays menu in the top right par of the Viewport window
  • Select Face orientation
  • From now, exterior faces are blue and interior faces are red

• To modify the normals/the orientation of faces

  • In Object mode, select an object
  • Shift to Edit mode by pressing Tab
  • Select all vertices of the object by typing A
  • Press Alt+N for the Normals menu
  • Click Recalculate outside to force all facets as outside (blue)

Cones

The shriveled topology exported as .obj file is composed of individual “cones” each named by the city on top.

Our intention here is to turn the collection of cones into a single multi-cones surface and remove the unneeded artifacts below the surface.

It is quite hard to keep accurate geometry when trying to model the mesh surface depending of the source file and its complexity. But one method looks promising.

1. In the Outliner, duplicate the cones collection (so we can keep track of original cones for comparison later)
2. Hide everything but the new working collection by ctrl-clicking on the eye icon next to it (isolate to optimise the viewport)
3. Select all objects (cones) of that new collection. One object must be active (yellow) in the objects selection (orange). It will become the main object
4. In the 3D Viewport, join every selected cone meshes in one object (Ctrl-J or Cmd-J on macOS). You can rename the joined object as you like
5. Switch to Sculpt Mode and use the Remesh tool in the top-right corner of the 3D Viewport area (the Blender doc about remeshing is unfortunately not up to date). Voxel Size should be 0.1 or less (Warning: it could be computational intensive but a lower value gives more details)
6. Add Decimate modifier to lighten the mesh

Make a copy of the cones collection for further use:

1. In the Outliner, duplicate the cones collection (so we can keep track of original cones for comparison later). (right-click on the collection > Duplicate Collection)
2. Hide everything but the new working collection by ctrl-clicking on the eye icon next to it (isolate to optimise the viewport)

Simplify cones : Method 1 (replaces the methods 2 an 3)

Cones have complex geometry at the base that are complicating any operation on the geometry in Blender. Hence the need to remove it.

1. Select the bottom vertices
   • Select all cones, in Object mode
   • Shift to Edit mode, by typing SHIFT
   • Make sure you are in X Ray, the small icon on top right of the Viewport
   • Select the top vertices of the cones
   • Extend selection with the menu Select, Select more
   • Invert selction with the menu Select, Invert
2. Merge the bottom verttices in a single point
   • Type M and then At center
   • Type G and move down the point so as to generate a buoy like shape
3. Combine the cones into a single, simplified shape
   • Select a cone by mouse click
   • Select all the other cones
   • Use the BoolTool function from the menu Object, BoolTool, Union

Simplify cones : Method 2 : Booleans (Needs at least version 2.91)

Cones have complex geometry at the base that are complicating any operation on the geometry in Blender. Hence the need to remove it. Fortunately at present cones have a tiny cylindrical bottom that we may cut in a sort of slice. The cutting surface must be as close as possible to the upper part of last cylindric part, so as to encompass the complex bottom part of the cones.

The intersection of the base of the cone and the icosphere; note that the sphere enveloppe is very near to the upper part of the end section of the cone

You may adjust the diameter of the icosphere on a single cone before showing all the other cones.

The following instructions have been tested in an un-projected situation. In the projected situation a simple cube can replace the sphere.

This method keeps the geometry as close as the original sceneCones.obj file. In the Blender Preferences the Bool Tool add-on must be activated.
We add a simple geometry first to help with the boolean operations.

1. Create an Ico Sphere with a radius encompassing the base of the geometry (Press Shift + A together, Mesh > Ico Sphere and in the Add Ico Sphere panel: set Subdivision to 6 and Radius to about 43.2 m)
2. Adjust IcoSphere Radius so that it intesects with the lower basis of the cones (where tiny vertical triangular faces are visible)
3. Add Vertex group "Group" to Ico Sphere vertices
   • Switch to Edit Mode (Press Tab)
   • Select All (Press A)
   • Create a Vertex Group (Object Data Properties Tab)
   • Click Assign
4. Select all objects (cones + sphere) of that new collection. The Ico Sphere object must be active (yellow) in the objects selection (orange). It will become the main object.
5. Use Bool Tool Union
   • Add the addon Bool Tool from the preferences of Blender
   • From menu Object sub menu Bool Tool
   • The process may take significant time
   • In case of errors, select a subset of the cones and the Icosphere before executong the union do not work
6. Add Mask Modifier select the Vertex Group and click the invert icon () next to it to display the cones
7. You should get the desired surface

Simplify cones : Method 3 : Remesh (Could be used before 2.91)

1. In the Outliner, duplicate the cones collection (so we can keep track of original cones for comparison later). (right-click on the collection > Duplicate Collection)
2. Hide everything but the new working collection by ctrl-clicking on the eye icon next to it (isolate to optimise the viewport)
3. Select all objects (cones) of that new collection. One object must be active (yellow) in the objects selection (orange). It will become the main object.
4. In the 3D Viewport, join every selected cone meshes in one object (Ctrl-J or Cmd-J on macOS). You can rename the joined object as you like.
5. Switch to Sculpt Mode and use the Remesh tool in the top-right corner of the 3D Viewport area (the Blender doc about remeshing is unfortunately not up to date). Voxel Size should be 0.1 or less (Warning: it could be computational intensive but a lower value gives more details).

Clean up countries border volumes

Steps from a country volume already extruded in Shriveling world. Cleanup step is necessary to have a clean geometry. We will rirstly turn the volume into a surface, then extrude it before converge it to the centre of the earth

1. In Edit mode select all the bottom vertices
2. Type Suppr all Vertices, the volume has become a surface
3. On the left choose Extrude and extrude the surface towards the senter of the earth
4. Select all the bottom vertices
5. Type m, click At center
6. Type n, select the Item tab and for the vertex coordinate values type 0, 0 and 0

You may also want to check and correct normals

It is recommended to simplify the geometry of the contour, as too many vertices (in the thousands) will make further operations costly in memory and computing power.

1. Select the object
2. Make sure to toggle X rays for a correct selection of vertices
3. In Edit mode select all the top vertices
4. In the menus Mesh, Clean up, Decimate geometry
5. Chek the normals

Cut cones at continent/countries border

We consider that you have already extruded the continent shape in _Shiveling world before exporting_.

• Select the cones
• Click in the properties window (bottom right) on the Modifier tab
• Click Add modifier
• Choose Boolean from the Generate section
• Select the Intersect transformation
• Select the continents or countries shape

Curves

Depending on the value set for Curves > number of points[^naming] before exporting, results may vary (higher number should give more accurate curves).

In Blender, the straightforward way to work with things that looks like curve is using, guess what, Curves! We are going to convert our faceless meshes to real curves… but before that:

Temporary comment:
For now the exported mesh geometry for “curves” include center of the earth reference vertex for each “curve”. If we find a solution it would be nice to export the .obj file without those center vertices.

Let’s remove those vertex in Blender.

Remove center vertex

1. Toggle X-Ray (with your mouse in the top right corner of the 3D Viewport press Alt+Z or click on the icon) to enable the selection of overlapping elements.
2. Select all the “curve” objects. Either :
   • by pressing A (Select All) while your mouse is in the 3D Viewport (and with only the wanted objects visible)
   • with one of the selection tools
   • with the Outliner.
     Warning: depending on context (for example if the last active object was hidden from view), one pitfall could be a selection with no active object at all (with only orange outline). Be sure to have an active object (with yellow outline) in the selection before continuing.
3. Switch to Edit Mode (Press Tab).
4. Select all the vertices located at the World Origin with the Select Box tool.
5. Delete them (Press X then Enter)

Move objects to denter of the grid

Once the geometry is in desired shape it is convenient to move the objects to the center of the Blender World.
To do so:

1. Select all objects
2. From the menu Object, Snap, Snap cursor to origin
3. Object, Snap, Selection to cursor

Convert objects to curves

In order to control size of curves we need to convert the imported meshes int curves objects in Blender:

1. Switch to Object Mode (Press Tab)
2. Select all the meshes you want to convert
   • Beware: you should first manually select one curve in the Viewport before selecting all the others; the first selected should appear in yellow and the others on orange; if you have not done this subsequent operations may not work
3. Convert still selected objects to curve (Object > Convert to > Curve from Mesh/Text or press F3 (Menu Search), type “convert” and choose corresponding function)

Set curves width

1. Select the curves you want to modify
2. Open Object Data Properties tab located at the bottom right
3. Check that Fill Mode is set to “Full”
4. Open Geometry panel and in the Bevel subpanel set Depth. A proposed relevant value can be 0.02 m

This operation may be done on only one object and then applied to others.

Apply properties to all selected objects

To apply properties to all selected objects (because changes you make in Object Data Properties only affect active object) right click on the modified Fields to open a contextual menu and choose Copy to Selected. In case you have already joined the curves, this step is not needed.

Rendering

Removing objects from rendering

You may remove from rendering several objects, e.g. countries, and keep then for a later use:

1. in the Scene collection right click on an objet or a collection of objects
2. in the popup menu choose Visibility
3. in the sub-menu choose Disable in render

A quicker and more convenient way consists in adding columns in objects box on top right. Click the tiny funnel on top right, and select the Disable in Renders selection toggle.

Rendering parameters

Rendering parameters can be accessed in the properties box, down right. Click on the Render properties tab.

• In Blender two main Rendering engines are available:
  • EEVEE, by default, is fast with decent result
  • Cycles allows to reach photorealism but can be slow
• It is preferable to synchronize the values of sampling between Render and Viewport, at the level 64. Shadows should be better rendered while working on the scene

Transparent background

So far a transparent background gives good results in rendering. In order to get this:

• Set background to black
  • In the down right properties box select World properties
  • Change Color to black (so that the background does not interfere with the objects in scene)
• You'll also need to remove the background from the render:
  • In the down right properties box select Render properties
  • Down below in section Film click Transparent (Film refers to the historical celluloid ribbon on which cartoons where drawn)

Using HDRI

HDRI, or High Dynamic Range Images, can be used to generate a relevant lighting environment. Good results are obtained with a photo studio lighting environment.

1. Download a studio HRDI (image). Resolution is not an issue since we only use the HDRI for generating a lighting environment, and not for complex reflections on mirror surfaces, so a small size HDRI will be enough.

• The following instructions come from this extremely useful video tutorial

1. Load the HRDI
   • In World properties click on the colored dot beside Color, set it to Environment texture
   • Click Open and catch the HDRI image you have downloaded
2. Move and rotate the HDRI (in order to locate our scene right where it should be in the studio)
   • Click on the top right corner of the render view to open a second render view
   • Change to Shader editor from the top left icon
   • From a menu in the top left part of the Viewport switch from Object to World
   • Add a Texture coordinate node by Shift+A and type Texture coordinate
   • Add a Mapping node by Shift+A and type Mapping
   • Connect the Generated output of the Texture coordinate to the Vector of the Mapping node
   • Connect the Vector of the Mapping node to the Vector of the HDRI node
   • Play around with Location and with Rotation X, Y and Z to locate the objects of the scene right where they should be in the studio :)
3. Remove HDRI image from view:
   • In the bottom right window select Render Properties
   • In the Film section tick the box Transparent

Camera

WIP Explain different Camera settings (Orthographic vs Perspective for example) specific to Shriveling.

If in the first step you removed the default camera, you will need to create a new one.

Create camera

1. In Modelling mode
2. In top left part of the 3D viewport click on Add and then on Camera

Update camera view

Ctrl+Alt+0 in case you have a numpad

It is possible to lock the camera to the current view:

1. type N, a tiny menu on the right of the viewport shows up
2. switch to the View section of this menu
3. then in View lock select Camera to view

Use current view to adjust the camera

• In the menu View_ -> __Align View -> Align Active Camera to View

Objects lost from sight in Camera view

• The camera view may be lost ot a "user perspective" that is precised in the upper left part of the Viewport. Toggling between the two perspectives is done by a click on the Camera icon on the right of the Viewport or by choosing from top left part of the Viewport View -> Camera -> Active camera.

• Objects may be lost from view when zooming or de-zooming with the camera view selected. This unintended behavior can be adapted by changing the camera properties:

  1. Select the camera
  2. Click on the Camera tab in the Object properties box, down right
  3. In section Lens set Clip end at a different value, for instance from 100 m to 1000 m

Materials / Shading / Lighting

WIP Explain briefly which Materials and/or Shaders to use to get nice results.

WIP PBR vs NPR, shadeless, transparency, colors…

Curves material

Good results have been obtained by using an Emission material for curves that allows to set a very bright color.

• First select a curve
• In the right down Material Properties box, create (1) or attribute an existing material (2) to the object:
  1. Create a New material with:
     • Surface set to Emission
     • Color set to Red, Blue or else
     • Strength default value of 1 may be adjusted to 2 or more. This parameter should be considered together with the width of the curve, set by the Bevel value
  2. A tiny button on the left gives access to existing materials. Beware: if you change the material properties here this will affect the other objects using this material

This operation may be done on only one object and then applied to others.

The shaders with nodes

Shaders can be awfully complicated. This is why the Shaders interface is here to help.

• It is strongly recommended to use the Node wrangler addon
• It is relevant to toggle/un-toggle the Overlays
• After a click on the material, Ctrl+T will generate a texture. We can remove the Image texture and remake the connection (thanks to Node wrangler)
• After a click on Mappîng, Ctrl+Shift+click will generate a viewer; connecting the MApping to different variables of the Texture coordinates box will generate colors in the objects that can be used to create gradients; in order to highlight some parts of the geometry we want to emphasize
• In the end reconnect directly the material to the Surface of Material output

Lights

Good results are obtained by using one or several suns and additional punctual sources (point) to highlight some elements of the scene.

Creating a light

• In Layout view, click on internal menu Add and then Light
• Existing lights can be turned into sun or point source in the down right box:
  • click on the Light tab
  • change Point into Sun or vice-versa
• Strength may need to be adjusted to higher values than default 1. Value 2 gives good results
• In case where two Suns are introduced, their Angles must be adjusted to create the desired effect

[^version]: Note: Blender evolves quickly. Since version 2.79b the whole interface has changed and a lot of new features are implemented. The base concepts remain the same so you could get interesting results with any version suited to your computer. However, this tutorial is clearly geared towards recent versions (since 2.80).

[^naming]: In the web-app the naming could be subject to change. “There are only two hard things in Computer Science: cache invalidation and naming things.” -- Phil Karlton. Some jokes about that infamous quote, Reference from David Karlton (Phil’s son) and BTW Stack exchange is your second best friend after Google