Skip to content

Latest commit

Β 

History

History
150 lines (112 loc) Β· 3.96 KB

README.md

File metadata and controls

150 lines (112 loc) Β· 3.96 KB

dem2mesh

A wasm library to quickly process DEM heightmaps for three.js.

npm version npm bundle size

from heightmap to 3D terrain

Overview

Installation

npm install dem2mesh

alternatively:

yarn add dem2mesh

Initialization

let dem2mesh
import('dem2mesh').then(pkg => {
  dem2mesh = pkg
  dem2mesh.init()
}

Usage

Currently works with 256x256px PNG images as input. The PNG images come from the terrain tile dataset hosted on Amazon.

cf. Get started with Mapzen Terrain Tiles.

The current s3 url format is:

https://s3.amazonaws.com/elevation-tiles-prod/terrarium/${z}/${x}/${y}.png

Fetch one png tile to work with:

let png
fetch(tileURL)
  .then(res => res.arrayBuffer())
  .then(arrayBuffer => png = new Uint8Array(arrayBuffer))

Once initialized the dem2mesh exposes two functions:

  • dem2mesh.png2elevation
  • dem2mesh.png2mesh

dem2mesh.png2elevation(png)

Returns a Float32Array of size 256*256 containing elevation data which can be used to set the positions of a PlaneBufferGeometry geometry.

const heightmap = dem2mesh.png2elevation(png)
const geometry = new PlaneBufferGeometry(size, size, segments + 2, segments + 2)
const nPosition = Math.sqrt(geometry.attributes.position.count)
const nHeightmap = Math.sqrt(heightmap.length)
const ratio = nHeightmap / (nPosition)
let x, y
for (let i = nPosition; i < geometry.attributes.position.count - nPosition; i++) {
  if (
    i % (nPosition) === 0 ||
    i % (nPosition) === nPosition - 1
  ) continue
  x = Math.floor(i / (nPosition))
  y = i % (nPosition)
  geometry.attributes.position.setZ(
    i,
    heightmap[Math.round(Math.round(x * ratio) * nHeightmap + y * ratio)] * 0.075
  )
}

dem2mesh.png2mesh(png, size, segments)

Returns 3 arrays, position, index and uv wich can be used to create a three.js BufferGeometry.

const [position, index, uv] = dem2mesh.png2mesh(png, size, segments)
const geometry = new BufferGeometry()
geometry.setAttribute(
  'position',
  new BufferAttribute(Float32Array.from(position), 3)
)
geometry.setIndex(
  new BufferAttribute(Uint16Array.from(index), 1)
)
geometry.setAttribute(
  'uv',
  new BufferAttribute(Float32Array.from(uv), 2)
)
geometry.computeVertexNormals()

About

This package was built upon the wasm-pack-template.

πŸ“š Read the template tutorial! πŸ“š

The wasm-pack-template is designed for compiling Rust libraries into WebAssembly and publishing the resulting package to NPM.

Be sure to check out other wasm-pack tutorials online for other templates and usages of wasm-pack.

🚴 Contribution

πŸ‘ Clone this Template

git clone https://github.com/blaze33/dem2mesh.git
cd dem2mesh

πŸ› οΈ Build with wasm-pack build

wasm-pack build

πŸ”¬ Test in Headless Browsers with wasm-pack test

wasm-pack test --headless --firefox

πŸ”‹ Batteries Included