src='https://carbonplan-assets.s3.amazonaws.com/monogram/dark-small.png'
height='48'
/>

carbonplan / glsl-geo-projection

shader math for geographic projections

[![GitHub][github-badge]][github]
![MIT License][]

[github]: https://github.com/carbonplan/glsl-geo-projection
[github-badge]: https://badgen.net/badge/-/github?icon=github&label
[mit license]: https://badgen.net/badge/license/MIT/blue

why

The libraries d3-geo and d3-geo-projection expose a wide diversity of geographic map projections. While they are a perfect solution in JavaScript, for WebGL applications we need the same math available in GLSL. A specific use case is using the inverse equations to render raster data with arbitrary map projections, as shown in this neat demo. This library exposes snippets of shader code with forward and inverse functions for a variety of projections.

_Note: Work in progress. We're making our way through the projections, largely motivated by our needs to use them. If you want to add one, please open an Issue._

use

Install the package.

``npm i glsl-geo-projection`

Then import the functions you want and insert them into your shader.

`js import { orthographicInvert } from "glsl-geo-projection";

const frag =
${orthographicInvert}

void main()
{
vec2 coordinates = orthographicInvert(x, y);
// ... remaining shader code...
}
;`

Names are identical to those in d3-geo and d3-geo-projection. The naming convention is that each projection has a forward function with its name and an inverse function with its name followed by Invert. For example, orthographic and orthographicInvert, or mercator and mercatorInvert`.

license

All the original code in this repository is MIT licensed. The library is based closely on d3-geo and d3-geo-projection. We request that you please provide attribution if reusing any of our digital content (graphics, logo, copy, etc.).

why

_Note: Work in progress. We're making our way through the projections, largely motivated by our needs to use them. If you want to add one, please open an Issue._

use

Install the package.


npm i glsl-geo-projection

Then import the functions you want and insert them into your shader.

js
import { orthographicInvert } from "glsl-geo-projection";

const frag =
${orthographicInvert}

void main()
{
vec2 coordinates = orthographicInvert(x, y);
// ... remaining shader code...
}

Names are identical to those in d3-geo and d3-geo-projection

. The naming convention is that each projection has a forward function with its name and an inverse function with its name followed by

Invert. For example, orthographic and orthographicInvert, or mercator and mercatorInvert`.