making a vector globe

when you're done, it should look like this:

install some commands if you don't already have them:

$ npm i -g earth-mesh pack-mesh budo

download the natural earth 110m land shapefile:

$ curl -LO http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip

convert the shapefile to simplicial complex triangles and pack that data into a binary format to save space:

$ earth-mesh ne_110m_land.zip -p | pack-mesh -t s16 > land.pmesh

install some libs:

$ npm i regl regl-camera resl icosphere pack-mesh

write a program using:

var regl = require('regl')()
var camera = require('regl-camera')(regl, {
  minDistance: 1.01, distance: 3, maxDistance: 8 })
var icosphere = require('icosphere')
var resl = require('resl')

resl({
  manifest: {
    land: {
      type: 'binary',
      src: 'land.pmesh',
      parser: require('pack-mesh/unpack')
    }
  },
  onDone: ready
})

function ready (assets) {
  var draw = {
    earth: earth(regl),
    land: land(regl, assets.land)
  }
  regl.frame(function () {
    regl.clear({ color: [0,0,0,1], depth: true })
    camera(function () {
      draw.earth()
      draw.land()
    })
  })
}

function earth (regl) {
  var mesh = icosphere(4)
  return regl({
    frag: `
      precision mediump float;
      void main () {
        gl_FragColor = vec4(0.3,0.3,0.3,1);
      }
    `,
    vert: `
      precision mediump float;
      uniform mat4 projection, view;
      attribute vec3 position;
      void main () {
        gl_Position = projection * view * vec4(position,1);
      }
    `,
    attributes: { position: mesh.positions },
    elements: mesh.cells,
    depth: { enable: false, mask: false }
  })
}

function land (regl, mesh) {
  return regl({
    frag: `
      precision mediump float;
      void main () {
        gl_FragColor = vec4(0.5,0.5,0.5,1);
      }
    `,
    vert: `
      precision mediump float;
      uniform mat4 projection, view;
      attribute vec3 position;
      void main () {
        gl_Position = projection * view * vec4(position,1);
      }
    `,
    attributes: { position: mesh.positions },
    elements: mesh.cells,
    cull: { enable: true }
  })
}

run this program in dev mode using budo:

$ budo main.js

then visit http://localhost:9996.

or build this demo into an html page:

$ npm i -g browserify indexhtmlify
$ browserify main.js | indexhtmlify > earth.html