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