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:

regl to setup the webgl

icosphere to make a unit sphere mesh

resl loads the compressed land mesh

pack-mesh/unpack inflates the binary format back into a mesh

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: