├── .gitignore ├── .npmignore ├── LICENSE ├── bin └── build.js ├── colormap.jpg ├── example ├── build.js ├── draw.js └── jet.js ├── index.js ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | colors.json 3 | *.glsl 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | colormap.jpg 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 James Halliday 2 | 3 | Redistribution and use in source and binary forms, with or without modification, 4 | are permitted provided that the following conditions are met: 5 | 6 | Redistributions of source code must retain the above copyright notice, this list 7 | of conditions and the following disclaimer. 8 | 9 | Redistributions in binary form must reproduce the above copyright notice, this 10 | list of conditions and the following disclaimer in the documentation and/or 11 | other materials provided with the distribution. 12 | 13 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 14 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 15 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 16 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 17 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 18 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 19 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 20 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 21 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 22 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 23 | -------------------------------------------------------------------------------- /bin/build.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | var data = require('colormap/colorScales.js') 3 | var colors = Object.keys(data) 4 | var gen = require('../index.js') 5 | var fs = require('fs') 6 | var path = require('path') 7 | 8 | var file = path.join(__dirname, '..', 'colors.json') 9 | fs.writeFile(file, JSON.stringify(colors)) 10 | colors.forEach(function (name) { 11 | var file = path.join(__dirname, '..', name + '.glsl') 12 | fs.writeFile(file, gen(name, data[name])) 13 | }) 14 | -------------------------------------------------------------------------------- /colormap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glslify/glsl-colormap/c7e07e8679bea87c4ef2fb1761e24476d938ef8b/colormap.jpg -------------------------------------------------------------------------------- /example/build.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | var colors = require('../colors.json') 3 | 4 | colors.forEach(function (color) { 5 | var src = ` 6 | precision mediump float; 7 | #pragma glslify: map = require('../../${color}') 8 | varying vec2 uv; 9 | void main () { 10 | gl_FragColor = map(uv.x*2.0/1.5); 11 | } 12 | `.trim().replace(/^\s{4}/gm,'') + '\n' 13 | fs.writeFile('frag/' + color + '.glsl', src) 14 | }) 15 | -------------------------------------------------------------------------------- /example/draw.js: -------------------------------------------------------------------------------- 1 | var glsl = require('glslify') 2 | var vtext = require('vectorize-text') 3 | var colors = require('../colors.json') 4 | 5 | var canvas = document.createElement('canvas') 6 | canvas.setAttribute('width', window.innerWidth * 0.9) 7 | canvas.setAttribute('height', 30 * colors.length) 8 | document.body.appendChild(canvas) 9 | 10 | var regl = require('regl')(canvas) 11 | var frag = { 12 | alpha: glsl.file('./frag/alpha.glsl'), 13 | autumn: glsl.file('./frag/autumn.glsl'), 14 | bathymetry: glsl.file('./frag/bathymetry.glsl'), 15 | blackbody: glsl.file('./frag/blackbody.glsl'), 16 | bluered: glsl.file('./frag/bluered.glsl'), 17 | bone: glsl.file('./frag/bone.glsl'), 18 | cdom: glsl.file('./frag/cdom.glsl'), 19 | chlorophyll: glsl.file('./frag/chlorophyll.glsl'), 20 | cool: glsl.file('./frag/cool.glsl'), 21 | copper: glsl.file('./frag/copper.glsl'), 22 | cubehelix: glsl.file('./frag/cubehelix.glsl'), 23 | density: glsl.file('./frag/density.glsl'), 24 | earth: glsl.file('./frag/earth.glsl'), 25 | electric: glsl.file('./frag/electric.glsl'), 26 | 'freesurface-blue': glsl.file('./frag/freesurface-blue.glsl'), 27 | 'freesurface-red': glsl.file('./frag/freesurface-red.glsl'), 28 | greens: glsl.file('./frag/greens.glsl'), 29 | greys: glsl.file('./frag/greys.glsl'), 30 | hot: glsl.file('./frag/hot.glsl'), 31 | hsv: glsl.file('./frag/hsv.glsl'), 32 | inferno: glsl.file('./frag/inferno.glsl'), 33 | jet: glsl.file('./frag/jet.glsl'), 34 | magma: glsl.file('./frag/magma.glsl'), 35 | oxygen: glsl.file('./frag/oxygen.glsl'), 36 | par: glsl.file('./frag/par.glsl'), 37 | phase: glsl.file('./frag/phase.glsl'), 38 | picnic: glsl.file('./frag/picnic.glsl'), 39 | plasma: glsl.file('./frag/plasma.glsl'), 40 | portland: glsl.file('./frag/portland.glsl'), 41 | rainbow: glsl.file('./frag/rainbow.glsl'), 42 | 'rainbow-soft': glsl.file('./frag/rainbow-soft.glsl'), 43 | rdbu: glsl.file('./frag/rdbu.glsl'), 44 | salinity: glsl.file('./frag/salinity.glsl'), 45 | spring: glsl.file('./frag/spring.glsl'), 46 | summer: glsl.file('./frag/summer.glsl'), 47 | temperature: glsl.file('./frag/temperature.glsl'), 48 | turbidity: glsl.file('./frag/turbidity.glsl'), 49 | 'velocity-blue': glsl.file('./frag/velocity-blue.glsl'), 50 | 'velocity-green': glsl.file('./frag/velocity-green.glsl'), 51 | viridis: glsl.file('./frag/viridis.glsl'), 52 | warm: glsl.file('./frag/warm.glsl'), 53 | winter: glsl.file('./frag/winter.glsl'), 54 | yignbu: glsl.file('./frag/yignbu.glsl'), 55 | yiorrd: glsl.file('./frag/yiorrd.glsl') 56 | } 57 | 58 | regl.clear({ color: [1,1,1,1], depth: true }) 59 | regl({ 60 | frag: ` 61 | precision mediump float; 62 | uniform float w, h; 63 | varying vec2 uv; 64 | void main () { 65 | float x = mod(floor(w*uv.x)+floor(h*uv.y),2.0); 66 | gl_FragColor = vec4(vec3(x),1); 67 | } 68 | `, 69 | vert: ` 70 | precision mediump float; 71 | attribute vec2 position; 72 | varying vec2 uv; 73 | void main () { 74 | uv = (position+1.0)*0.5; 75 | gl_Position = vec4(position,0,1); 76 | } 77 | `, 78 | attributes: { 79 | position: [-1,-1,-1,1,0.5,-1,-1,1,0.5,-1,0.5,1] 80 | }, 81 | uniforms: { 82 | w: function (context) { 83 | var aspect = context.viewportWidth / context.viewportHeight 84 | return aspect > 1 ? 128 : 128 * aspect 85 | }, 86 | h: function (context) { 87 | var aspect = context.viewportWidth / context.viewportHeight 88 | return aspect > 1 ? 128 * aspect : 128 89 | } 90 | }, 91 | count: 6, 92 | blend: { 93 | enable: true, 94 | func: { src: 'src alpha', dst: 'one minus src alpha' } 95 | }, 96 | depth: { enable: false, mask: false } 97 | })() 98 | colors.forEach(function (name, i) { 99 | var x0 = -1, x1 = 0.5 100 | var y0 = 1-2*i/colors.length 101 | var y1 = 1-2*(i+1)/colors.length 102 | var ty0 = 1-2*(i+1.75)/colors.length 103 | regl({ 104 | frag: frag[name], 105 | vert: glsl` 106 | precision mediump float; 107 | attribute vec2 position; 108 | varying vec2 uv; 109 | void main () { 110 | uv = (position+1.0)*0.5; 111 | gl_Position = vec4(position,0,1); 112 | } 113 | `, 114 | attributes: { 115 | position: [x0,y0,x0,y1,x1,y0,x0,y1,x1,y0,x1,y1] 116 | }, 117 | count: 6, 118 | blend: { 119 | enable: true, 120 | func: { src: 'src alpha', dst: 'one minus src alpha' } 121 | }, 122 | depth: { enable: false, mask: false } 123 | })() 124 | var text = vtext(name, { 125 | lineHeight: 2/colors.length, 126 | triangles: true 127 | }) 128 | regl({ 129 | frag: ` 130 | precision mediump float; 131 | void main () { 132 | gl_FragColor = vec4(0,0,0,1); 133 | } 134 | `, 135 | vert: ` 136 | precision mediump float; 137 | attribute vec2 position; 138 | void main () { 139 | gl_Position = vec4(position.x+0.55,float(${ty0})-position.y,0,1); 140 | } 141 | `, 142 | attributes: { 143 | position: text.positions 144 | }, 145 | elements: text.cells 146 | })() 147 | }) 148 | -------------------------------------------------------------------------------- /example/jet.js: -------------------------------------------------------------------------------- 1 | var glsl = require('glslify') 2 | var regl = require('regl')() 3 | var draw = regl({ 4 | frag: glsl` 5 | precision mediump float; 6 | #pragma glslify: jet = require('../jet') 7 | varying vec2 uv; 8 | void main () { 9 | gl_FragColor = jet(uv.x); 10 | } 11 | `, 12 | vert: ` 13 | precision mediump float; 14 | attribute vec2 position; 15 | varying vec2 uv; 16 | void main () { 17 | uv = (position+1.0)*0.5; 18 | gl_Position = vec4(position,0,1); 19 | } 20 | `, 21 | attributes: { 22 | position: [-4,4,-4,-4,4,0] 23 | }, 24 | count: 3 25 | }) 26 | draw() 27 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = function (name, scale) { 2 | var defs = [], mix = [] 3 | var rgb = scale.map(function (x) { 4 | var c = x.rgb.map(function (r, ri) { return ri < 3 ? r/255 : r }) 5 | return c.length === 4 ? c : c.concat(1) 6 | }) 7 | for (var i = 0; i < scale.length; i++) { 8 | defs.push(`const float e${i} = ${tof(scale[i].index)};`) 9 | defs.push(`const vec4 v${i} = vec4(${rgb[i].join(',')});`) 10 | } 11 | for (var i = 0; i < scale.length-1; i++) { 12 | defs.push(`float a${i} = smoothstep(e${i},e${i+1},x);`) 13 | mix.push(`mix(v${i},v${i+1},a${i})` 14 | + `*step(e${i},x)*step(x,e${i+1})`); 15 | } 16 | var fname = name.replace(/\W+/g,'_') 17 | return ` 18 | vec4 ${fname} (float x) { 19 | ${defs.join('\n ')} 20 | return ${ 21 | mix.length === 1 ? mix[0] 22 | : `max(${mix.slice(0,-1).join(',\n max(') 23 | + ',' + mix[mix.length-1] 24 | + '\n ' + Array(mix.length-1).join(')')})` 25 | }; 26 | } 27 | #pragma glslify: export(${fname}) 28 | `.trim().replace(/^\s{0,4}/gm,'') + '\n' 29 | } 30 | 31 | function tof (x) { 32 | return /\./.test(x) ? String(x) : String(x)+'.0' 33 | } 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-colormap", 3 | "version": "1.0.1", 4 | "description": "colormaps for glsl shaders", 5 | "main": "index.js", 6 | "devDependencies": { 7 | "colormap": "^2.2.0" 8 | }, 9 | "keywords": [ 10 | "glslify", 11 | "webgl", 12 | "glsl", 13 | "colormap" 14 | ], 15 | "author": "substack", 16 | "license": "BSD" 17 | } 18 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # glsl-colormap 2 | 3 | colormaps for glsl shaders 4 | 5 | Works best with [glslify][1]. 6 | 7 | [1]: https://github.com/stackgl/glslify 8 | 9 | ![](colormap.jpg) 10 | 11 | ``` js 12 | var glsl = require('glslify') 13 | var regl = require('regl')() 14 | var draw = regl({ 15 | frag: glsl` 16 | precision mediump float; 17 | #pragma glslify: jet = require('glsl-colormap/jet') 18 | varying vec2 uv; 19 | void main () { 20 | gl_FragColor = jet(uv.x); 21 | } 22 | `, 23 | vert: ` 24 | precision mediump float; 25 | attribute vec2 position; 26 | varying vec2 uv; 27 | void main () { 28 | uv = (position+1.0)*0.5; 29 | gl_Position = vec4(position,0,1); 30 | } 31 | `, 32 | attributes: { 33 | position: [-4,4,-4,-4,4,0] 34 | }, 35 | count: 3 36 | }) 37 | draw() 38 | ``` 39 | 40 | # api 41 | 42 | ``` 43 | #pragma glslify: jet = require("glsl-colormap/jet") 44 | #pragma glslify: hsv = require("glsl-colormap/hsv") 45 | #pragma glslify: hot = require("glsl-colormap/hot") 46 | #pragma glslify: cool = require("glsl-colormap/cool") 47 | #pragma glslify: spring = require("glsl-colormap/spring") 48 | #pragma glslify: summer = require("glsl-colormap/summer") 49 | #pragma glslify: autumn = require("glsl-colormap/autumn") 50 | #pragma glslify: winter = require("glsl-colormap/winter") 51 | #pragma glslify: bone = require("glsl-colormap/bone") 52 | #pragma glslify: copper = require("glsl-colormap/copper") 53 | #pragma glslify: greys = require("glsl-colormap/greys") 54 | #pragma glslify: yignbu = require("glsl-colormap/yignbu") 55 | #pragma glslify: greens = require("glsl-colormap/greens") 56 | #pragma glslify: yiorrd = require("glsl-colormap/yiorrd") 57 | #pragma glslify: bluered = require("glsl-colormap/bluered") 58 | #pragma glslify: rdbu = require("glsl-colormap/rdbu") 59 | #pragma glslify: picnic = require("glsl-colormap/picnic") 60 | #pragma glslify: rainbow = require("glsl-colormap/rainbow") 61 | #pragma glslify: portland = require("glsl-colormap/portland") 62 | #pragma glslify: blackbody = require("glsl-colormap/blackbody") 63 | #pragma glslify: earth = require("glsl-colormap/earth") 64 | #pragma glslify: electric = require("glsl-colormap/electric") 65 | #pragma glslify: alpha = require("glsl-colormap/alpha") 66 | #pragma glslify: viridis = require("glsl-colormap/viridis") 67 | #pragma glslify: inferno = require("glsl-colormap/inferno") 68 | #pragma glslify: magma = require("glsl-colormap/magma") 69 | #pragma glslify: plasma = require("glsl-colormap/plasma") 70 | #pragma glslify: warm = require("glsl-colormap/warm") 71 | #pragma glslify: rainbow-soft = require("glsl-colormap/rainbow-soft") 72 | #pragma glslify: bathymetry = require("glsl-colormap/bathymetry") 73 | #pragma glslify: cdom = require("glsl-colormap/cdom") 74 | #pragma glslify: chlorophyll = require("glsl-colormap/chlorophyll") 75 | #pragma glslify: density = require("glsl-colormap/density") 76 | #pragma glslify: freesurface-blue = require("glsl-colormap/freesurface-blue") 77 | #pragma glslify: freesurface-red = require("glsl-colormap/freesurface-red") 78 | #pragma glslify: oxygen = require("glsl-colormap/oxygen") 79 | #pragma glslify: par = require("glsl-colormap/par") 80 | #pragma glslify: phase = require("glsl-colormap/phase") 81 | #pragma glslify: salinity = require("glsl-colormap/salinity") 82 | #pragma glslify: temperature = require("glsl-colormap/temperature") 83 | #pragma glslify: turbidity = require("glsl-colormap/turbidity") 84 | #pragma glslify: velocity-blue = require("glsl-colormap/velocity-blue") 85 | #pragma glslify: velocity-green = require("glsl-colormap/velocity-green") 86 | #pragma glslify: cubehelix = require("glsl-colormap/cubehelix") 87 | ``` 88 | 89 | # vec4 color = mapfn(float x) 90 | 91 | Each function takes a single parameter `x` from `0` to `1` and returns a 92 | `vec4(red,green,blue,alpha)`. 93 | 94 | # install 95 | 96 | ``` 97 | npm install glsl-colormap 98 | ``` 99 | 100 | # license 101 | 102 | BSD 103 | --------------------------------------------------------------------------------