Nerdy Programmers Mingling
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    image-to-heightmappublic

    image-to-heightmap npm version Build Status

    Convert a JPG or PNG image into a heightmap array

    Initial Motivation

    To use when creating terrains in WebGL

    ex:

    1. Make a hilly terrain in a 3d modeling tool
    2. Save as heightmap image
    3. Use image-to-heightmap on image
    4. Generate a grid of GL_TRIANGLES (tiles) using the heights from the heightmap

    To Install

    $ npm install --save image-to-heightmap

    Usage

    var toHM = require('image-to-heightmap')
     
    // This will generate an 11 x 6 heightmap array from our image 
    // Why 11 x 6 ? 
    // 
    // 10 x 5 tiles means we have 11 x 6 different corners 
    toHM('some-image.png', 10, 5, 2, function (err, heightmap) {
        console.log(heightmap[0][0])
        // The height of the point at the bottom left corner 
    })

    What are tiles ?

    Picture a terrain that's made up of a bunch of equally sized rectangles

    Each rectangle has 4 corners. Each of these corners has a height

    Rectangles will share some corners with adjacent rectangles

    1 tile wide x 1 tile high = 2 corners wide x 2 corners height

    2 tile wide x 3 tile high = 3 corners wide x 4 corners height

    etc ...

    TODO:

    Maybe call this a grid instead of tiles?

    API

    toHM(imageURL, numXTiles, numYTiles, scale, callback)

    imageURL

    Required

    Type: string

    imageURL is the path to the file. It can be a relative path, an http url, a data url, or an in-memory Buffer

    This gets passed into scijs/get-pixels

    numXTiles

    Required

    Type: number

    The number of tiles wide that your terrain will be

    numYTiles

    Type: number

    The number of tiles deep that your terrain will be

    scale

    Type: number

    image-to-heightmap generates heights with 0 <= height <= scale

    A black pixel will have a height of 0

    A white pixel will have a height of scale

    A pixel with rgba of 50, 50, 50, 255 would have a height of (50 / 255 * scale)

    callback

    Type: function

    Called with an error and your 2-dimensional heightmap array

    function cb (err, heightmap) {
      console.log(heightmap[1,1])
      // The height at the top right corner of the bottom left tile
    }

    TODO:

    • Talk about what types of images to use
    • Add defaults? Maybe a default scale of 1?
    • Test edge cases. ex: what happens when trying to make a 0 x 0 grid?

    License

    MIT

    install

    npm i image-to-heightmap

    Downloadslast 7 days

    4

    version

    1.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar