Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including glsl-proj4 with all npm packages installed. Try it out:

var glslProj4 = require("glsl-proj4")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

glsl-proj4 v1.3.1

proj4 coordinate transforms in glsl


proj4 implementation for glsl

implemented projections:


var regl = require('regl')()
var camera = require('regl-camera')(regl, { distance: 10 })
var glsl = require('glslify')

var proj = require('glsl-proj4')
var p = proj('+proj=aea +lat_1=16 +lat_2=24 +lat_0=19 +lon_0=-157 +x_0=0 +y_0=0'
  + '+ellps=GRS80 +datum=NAD83 +units=m +no_defs')

var mesh = require('./hawaii.json')
var draw = regl({
  frag: `
    precision mediump float;
    void main () {
      gl_FragColor = vec4(0.5,0.5,0.5,1);
  vert: glsl`
    precision mediump float;
    #pragma glslify: forward = require('glsl-proj4/aea/forward')
    #pragma glslify: proj_t = require('glsl-proj4/aea/t')
    uniform proj_t proj;
    uniform float aspect;
    attribute vec2 position;
    void main () {
      vec3 p = forward(proj, position)*vec3(1,aspect,1);
      gl_Position = vec4(p*1e-6,1);
  attributes: {
    position: mesh.positions
  uniforms: Object.assign(p.members('proj'), {
    aspect: function (context) {
      return context.viewportWidth / context.viewportHeight
  elements: mesh.cells
regl.frame(function () {
  regl.clear({ color: [1,1,1,1], depth: true })

javascript api

var proj = require('glsl-proj4')

var p = proj(str)

Create a proj instance p from a proj4 string str.


Return an object that maps member keys under the prefix name to values. You can pass this object as a struct uniform

String name of the projection.

glsl api

#pragma glslify: aea_t = require('glsl-proj4/aea/t')
#pragma glslify: aea_forward = require('glsl-proj4/aea/forward')
#pragma glslify: aea_inverse = require('glsl-proj4/aea/inverse')

#pragma glslify: geocent_t = require('glsl-proj4/geocent/t')
#pragma glslify: geocent_forward = require('glsl-proj4/geocent/forward')
#pragma glslify: geocent_inverse = require('glsl-proj4/geocent/inverse')

#pragma glslify: gnom_t = require('glsl-proj4/gnom/t')
#pragma glslify: gnom_forward = require('glsl-proj4/gnom/forward')
#pragma glslify: gnom_inverse = require('glsl-proj4/gnom/inverse')

#pragma glslify: lcc_t = require('glsl-proj4/lcc/t')
#pragma glslify: lcc_forward = require('glsl-proj4/lcc/forward')
#pragma glslify: lcc_inverse = require('glsl-proj4/lcc/inverse')

#pragma glslify: tmerc_t = require('glsl-proj4/tmerc/t')
#pragma glslify: tmerc_forward = require('glsl-proj4/tmerc/forward')
#pragma glslify: tmerc_inverse = require('glsl-proj4/tmerc/inverse')

vec3 proj_foward(proj_t t, vec3 pt)

Forward project pt using the parameters from t.

vec3 proj_foward(proj_t t, vec2 pt)

Forward project pt using the parameters from t with an altitude of 0.

vec3 proj_inverse(proj_t t, vec3 pt)

Inverse project pt using the parameters from t.

vec3 proj_inverse(proj_t t, vec3 pt)

Inverse project pt using the parameters from t and an altitude of 0.


npm install glsl-proj4



Parts of this library were adapted from proj4js.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free