├── .gitignore
├── LICENSE
├── README.md
├── example
    ├── index.js
    ├── sphere_frag.glsl
    └── sphere_vert.glsl
├── images
    ├── lava.png
    └── simple.png
├── index.js
├── package.json
├── quad_frag.glsl
└── quad_vert.glsl


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | .idea/
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This software is released under the MIT license:
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 7 | the Software, and to permit persons to whom the Software is furnished to do so,
 8 | subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # glsl-gradient-palette
 2 | 
 3 | [![NPM](https://nodei.co/npm/glsl-gradient-palette.png)](https://www.npmjs.com/package/glsl-gradient-palette)
 4 | 
 5 | This module can be used to create gradient color palettes. These can be used to colorize noise functions and procedurally
 6 | generate textures in shaders. Below is an example of such a procedural texture.
 7 | 
 8 | <img src="images/lava.png" width="356" height="366" />
 9 | 
10 | More examples can be found in the provided [demo](http://erkaman.github.io/glsl-gradient-palette/)
11 | 
12 | ## Usage
13 | 
14 | To create a gradient palette, you basically give the API a sequential list of colors. The API will then create a
15 | palette, by linearly interpolating between these colors. It is very easy to create a palette:
16 | 
17 | ```javascript
18 |     var simple =  [
19 |         [0.0, [1.0,0.0,0.0]],
20 |         [0.5, [0.0,0.0,0.0]],
21 |         [1.0, [0.0,0.0,1.0]],
22 |     ];
23 | 
24 |     simplePaletteTexture = createGradientPalette(gl,simple);
25 | ```
26 | 
27 | above, we create a palette where we first interpolate from red to black, and then from black to red. To be more specific,
28 | From `0.0` to `0.5` we interpolate between the RGB colors `[1.0,0.0,0.0]` and `[0.0,0.0,0.0]`, and from
29 | `0.5` to `1.0` we interpolate from  `[0.0,0.0,0.0]` to `[0.0,0.0,1.0]`. The palette we just have created will
30 | look like this:
31 | 
32 | <img src="images/simple.png" width="356" height="366" />
33 | 
34 | in the upper parts of the image, we can see the palette, and below, we see what happens if we use the palette to
35 | colorize a noise function.
36 | 
37 | It is easy to use the created palette in a shader. `createGradientPalette` will return the created palette as a
38 | texture(as a `gl-texture2d`), and this texture can be sent to a shader by doing
39 | 
40 | ```javascript
41 |    sphereShader.uniforms.uPalette = simplePaletteTexture.bind()
42 | ```
43 | 
44 | now we can use it to colorize a noise function by sampling from it, based on the noise value:
45 | 
46 | ```glsl
47 |    float t = noise(vPosition);
48 |    vec3 tex =   texture2D(uPalette, vec2(t, 0.0) ).xyz;
49 | ```
50 | 
51 | and that results in the textured sphere seen above.
52 | 
53 | By specifying more colors, we can create more advanced textures. For instance, the palette
54 | 
55 | ```javascript
56 | 
57 |     var fireball =  [
58 |         [0.0, [0.4,0.4,0.4]],
59 |         [0.55, [0.0,0.0,0.0]],
60 |         [0.60, [1.0,0.0, 0.0]],
61 |         [0.70, [1.0,1.0, 0.0]],
62 |         [1.0, [0.4,0.4, 0.0]]
63 |     ];
64 | ```
65 | 
66 | results in
67 | 
68 | <img src="images/lava.png" width="356" height="366" />
69 | 
70 | ## API
71 | 
72 | ### `function createGradientPalette(gl, gradientList[, opts])`
73 | 
74 | Creates a gradient palette, and returns the created palette stored as a `gl-texture2d`, with a default size of
75 | `1024x1`.
76 | 
77 | * `gl` your WebGL context.
78 | * `gradientList` the list of colors to use when creating the palette. See the previous section for more details.
79 | * `opts` optional arguments objects. Can currently only contain the property `opts.size`, which specifies the width
80 | of the created palette texture. Defaults to `1024`.
81 | 
82 | ### `paletteDrawer = new PaletteDrawer(gl, position, size)`
83 | 
84 | Creates a palette drawer, that can be used for drawing a palette texture on the screen. Useful for visualising a palette.
85 | 
86 | * `gl` your WebGL context.
87 | * `position` the pixel position where your palette drawer will be drawn. Stored as an array `[x,y]`.
88 | * `size` the pixel size of your palette drawer. Stored as an array`[x_size,y_size]`.
89 | 
90 | 
91 | ### `paletteDrawer.draw(paletteTexture, canvasWidth, canvasHeight)`
92 | 
93 | Draws a palette texture as a simple quad.
94 | 
95 | * `paletteTexture` the palette texture to draw.
96 | * `canvasWidth` the width of the canvas.
97 | * `canvasHeight` the height of the canvas.
98 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
  1 | /* global requestAnimationFrame */
  2 | 
  3 | var mat4 = require('gl-mat4');
  4 | var vec3 = require('gl-vec3');
  5 | var Geometry = require('gl-geometry');
  6 | var glShader = require('gl-shader');
  7 | var glslify = require('glslify');
  8 | var createOrbitCamera = require('orbit-camera');
  9 | var shell = require("gl-now")();
 10 | var createGui = require("pnp-gui");
 11 | var cameraPosFromViewMatrix = require('gl-camera-pos-from-view-matrix');
 12 | var randomArray = require('random-array');
 13 | var createSphere = require('primitive-icosphere');
 14 | var copyToClipboard = require('copy-to-clipboard');
 15 | var createGradientPalette = require('../index.js').createGradientPalette;
 16 | var PaletteDrawer = require('../index.js').PaletteDrawer;
 17 | 
 18 | var sphereShader, sphereGeo, paletteDrawer;
 19 | 
 20 | var camera = createOrbitCamera([0, -2.0, 0], [0, 0, 0], [0, 1, 0]);
 21 | 
 22 | var mouseLeftDownPrev = false;
 23 | 
 24 | var bg = [0.6, 0.7, 1.0]; // clear color.
 25 | 
 26 | var noiseScale = {val: 4.0};
 27 | var noiseAnimateSpeed = {val: 0.3};
 28 | var paletteType = {val: 4};
 29 | 
 30 | var noiseAnimate = {val: true};
 31 | 
 32 | var paletteTexture;
 33 | var totalTime = 0;
 34 | 
 35 | var earthPaletteTexture;
 36 | var cloudPaletteTexture;
 37 | var redPaletteTexture;
 38 | var somethingPaletteTexture;
 39 | var fireballPaletteTexture;
 40 | var rockPaletteTexture;
 41 | 
 42 | shell.on("gl-init", function () {
 43 |     var gl = shell.gl
 44 | 
 45 |     gl.enable(gl.DEPTH_TEST);
 46 |     gl.enable(gl.CULL_FACE);
 47 |     gl.cullFace(gl.BACK)
 48 |     
 49 |     gui = new createGui(gl);
 50 |     gui.windowSizes = [280, 380];
 51 | 
 52 |    paletteDrawer = new PaletteDrawer(gl, [400, 40], [880, 100] );
 53 | 
 54 |     var sphere = createSphere(1, { subdivisions: 2});
 55 |     sphereGeo = Geometry(gl)
 56 |         .attr('aPosition', sphere.positions).faces(sphere.cells);
 57 | 
 58 |     sphereShader = glShader(gl, glslify("./sphere_vert.glsl"), glslify("./sphere_frag.glsl"));
 59 | 
 60 | 
 61 |     // fix intial camera view.
 62 |     camera.rotate([0,0], [0,0] );
 63 | 
 64 |     /*
 65 |     Initialize all the palettes.
 66 |      */
 67 | 
 68 |     var earth =  [
 69 |         [0.0, [0,0,1]],
 70 |         [0.25, [0,0,0.7]],
 71 |         [0.5, [0,0,0.5]],
 72 |         [0.6, [0.8,0.7,0.1]],
 73 |         [0.62, [0,0.4,0]],
 74 |         [0.7, [0,0.45,0]],
 75 |         [0.80, [0.1,0.3,0.0]],
 76 |         [1.0, [0.1, 0.30, 0.1]],
 77 |     ];
 78 | 
 79 |     var cloud =  [
 80 |         [0.0, [0,0,0.7]],
 81 |         [0.2, [0,0,1.0]],
 82 |         [0.85, [1.0, 1.0, 1.0]],
 83 |         [1.0, [1.0, 1.0, 1.0]],
 84 |     ];
 85 | 
 86 | 
 87 |     
 88 |     var red =  [
 89 |         [0.0, [1.0,0,0.0]],
 90 |         [0.15, [0.5,0,0.1]],
 91 |         [0.3, [0.6,0,0.3]],
 92 |         [0.6, [0.0,0,0.0]],
 93 |         [0.7, [0.25,0.25,0.0]],
 94 |         [0.9, [0.75,0.75,0.0]],
 95 |         [1.0, [1.0, 1.0, 0.0]],
 96 |     ];
 97 | 
 98 | 
 99 |     var something =  [
100 |         [0.0, [0.0,0.3,0.3]],
101 |         [0.1, [1.0,0.0,1.0]],
102 |         [0.2, [0.0,0.0,0.4]],
103 |         [0.3, [0.3,0.6,0.2]],
104 |         [0.4, [0.4,0.4,0.0]],
105 |         [0.5, [0.9,0.7,0.7]],
106 |         [0.6, [0.5,0.0,0.0]],
107 |         [0.7, [0.8,0.3,0.5]],
108 |         [0.8, [0.8,0.8,0.8]],
109 |         [0.9, [0.0,1.0,0.0]],
110 |         [1.0, [0.0, 0.0, 0.0]],
111 |     ];
112 | 
113 |     var fireball =  [
114 |         [0.0, [0.4,0.4,0.4]],
115 |         [0.55, [0.0,0.0,0.0]],
116 |         [0.60, [1.0,0.0, 0.0]],
117 |         [0.70, [1.0,1.0, 0.0]],
118 |         [1.0, [0.4,0.4, 0.0]]
119 |     ];
120 | 
121 |     var rock =  [
122 |         [0.0, [0.2,0.1,0.0]],
123 |         [0.05, [0.1,0.0,0.0]],
124 |         [0.45, [0.25,0.15,0.05]],
125 |         [0.5, [0.30,0.20,0.05]],
126 |         [0.60, [0.45,0.35,0.20]],
127 |         [0.75, [0.40,0.30,0.20]],
128 |         [1.0, [0.5,0.4,0.3]] ];
129 | 
130 | 
131 |     var simple =  [
132 |         [0.0, [1.0,0.0,0.0]],
133 |         [0.5, [0.0,0.0,0.0]],
134 | 
135 |         [1.0, [0.0,0.0,1.0]],
136 |     ];
137 | 
138 |     var opts =  {size:1024};
139 | 
140 |     earthPaletteTexture = createGradientPalette(gl,earth, opts);
141 |     cloudPaletteTexture = createGradientPalette(gl,cloud, opts);
142 |     redPaletteTexture = createGradientPalette(gl,red, opts);
143 |     somethingPaletteTexture = createGradientPalette(gl,something, opts);
144 |     fireballPaletteTexture = createGradientPalette(gl,fireball, opts);
145 |     rockPaletteTexture = createGradientPalette(gl,rock, opts);
146 |     simplePaletteTexture = createGradientPalette(gl,simple, opts);
147 | 
148 | });
149 | 
150 | 
151 | shell.on("gl-render", function (t) {
152 |     var gl = shell.gl
153 |     var canvas = shell.canvas;
154 | 
155 |     if(noiseAnimate.val)
156 |         totalTime += noiseAnimateSpeed.val;
157 | 
158 |     if(paletteType.val == 0) {
159 |         paletteTexture =  earthPaletteTexture;
160 |     } else if(paletteType.val == 1) {
161 |         paletteTexture =  cloudPaletteTexture;
162 |     } else if(paletteType.val == 2) {
163 |         paletteTexture =  redPaletteTexture;
164 |     } else if(paletteType.val == 3) {
165 |         paletteTexture =  somethingPaletteTexture;
166 |     }else if(paletteType.val == 4) {
167 |         paletteTexture =  fireballPaletteTexture;
168 |     }else if(paletteType.val == 5) {
169 |         paletteTexture =  rockPaletteTexture;
170 |     }else if(paletteType.val == 6) {
171 |         paletteTexture =  simplePaletteTexture;
172 |     }
173 | 
174 |     gl.clearColor(bg[0], bg[1], bg[2], 1);
175 |     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
176 |     gl.viewport(0, 0, canvas.width, canvas.height);
177 | 
178 |     var projection = mat4.create();
179 |     var scratchMat = mat4.create();
180 |     var view = camera.view(scratchMat);
181 | 
182 |     mat4.perspective(projection, Math.PI / 2, canvas.width / canvas.height, 0.1, 10000.0);
183 | 
184 |     /*
185 |     Render Sphere
186 |      */
187 | 
188 |     sphereShader.bind();
189 | 
190 |     sphereShader.uniforms.uView = view;
191 |     sphereShader.uniforms.uProjection = projection;
192 |     sphereShader.uniforms.uNoiseScale = noiseScale.val;
193 |     sphereShader.uniforms.uPalette = paletteTexture.bind()
194 |     sphereShader.uniforms.uTime = totalTime;
195 | 
196 | 
197 |     sphereGeo.bind(sphereShader);
198 |     sphereGeo.draw();
199 | 
200 |     /*
201 |     Render Palette.
202 |      */
203 | 
204 |     paletteDrawer.draw(paletteTexture, canvas.width, canvas.height);
205 | 
206 |     /*
207 |     Render GUI.
208 |      */
209 | 
210 |     var pressed = shell.wasDown("mouse-left");
211 |     var io = {
212 |         mouseLeftDownCur: pressed,
213 |         mouseLeftDownPrev: mouseLeftDownPrev,
214 | 
215 |         mousePositionCur: shell.mouse,
216 |         mousePositionPrev: shell.prevMouse
217 |     };
218 |     mouseLeftDownPrev = pressed;
219 | 
220 |     gui.begin(io, "Settings");
221 | 
222 |     gui.textLine("Palette");
223 | 
224 |     gui.radioButton("Earth", paletteType, 0);
225 |     gui.radioButton("Cloud", paletteType, 1);
226 |     gui.radioButton("Red", paletteType, 2);
227 |     gui.radioButton("Something", paletteType, 3);
228 |     gui.radioButton("Fireball", paletteType, 4);
229 |     gui.radioButton("Rock", paletteType, 5);
230 |     gui.radioButton("Simple", paletteType, 6);
231 | 
232 |     gui.separator();
233 | 
234 | 
235 | 
236 |     gui.textLine("Noise Settings");
237 | 
238 |     gui.checkbox("Animate", noiseAnimate );
239 | 
240 |     //gui.sliderFloat("Scale", noiseScale, 0.1, 10.0);
241 |     if(noiseAnimate.val)
242 |         gui.sliderFloat("Animation Speed", noiseAnimateSpeed, 0.0, 5.0);
243 | 
244 |     gui.sliderFloat("Noise Scale", noiseScale, 0.0, 10.0);
245 | 
246 |     gui.end(gl, canvas.width, canvas.height);
247 | });
248 | 
249 | shell.on("tick", function () {
250 | 
251 |     // if interacting with the GUI, do not let the mouse control the camera.
252 |     if (gui.hasMouseFocus())
253 |         return;
254 | 
255 |     if (shell.wasDown("mouse-left")) {
256 |         var speed = 1.3;
257 |         camera.rotate([(shell.mouseX / shell.width - 0.5) * speed, (shell.mouseY / shell.height - 0.5) * speed],
258 |             [(shell.prevMouseX / shell.width - 0.5) * speed, (shell.prevMouseY / shell.height - 0.5) * speed])
259 |     }
260 |     if (shell.scroll[1]) {
261 |         camera.zoom(shell.scroll[1] * 0.01);
262 |     }
263 | });
264 | 


--------------------------------------------------------------------------------
/example/sphere_frag.glsl:
--------------------------------------------------------------------------------
 1 | precision mediump float;
 2 | 
 3 | varying vec3 vPosition;
 4 | 
 5 | uniform float uNoiseScale;
 6 | uniform float uTime;
 7 | uniform sampler2D uPalette;
 8 | 
 9 | #pragma glslify: snoise4 = require(glsl-noise/simplex/4d)
10 | 
11 | float noise(vec3 s) {
12 |     return snoise4( vec4(s, uTime*0.01 ) ) * 0.5 + 0.5; // scale to range [0,1]
13 | }
14 | 
15 | float fbm( vec3 p) {
16 | 	float f = 0.0;
17 |     f += 0.5000*noise( p ); p = p*2.02;
18 |     f += 0.2500*noise( p ); p = p*2.03;
19 |     f += 0.1250*noise( p ); p = p*2.01;
20 |     f += 0.0625*noise( p );
21 |     return f/0.9375;
22 | }
23 | 
24 | void main() {
25 |     float t = fbm(uNoiseScale*(vPosition ) );
26 |     vec3 tex =   texture2D(uPalette, vec2(t, 0.0) ).xyz;
27 |     gl_FragColor = vec4(tex, 1.0);
28 | }
29 | 


--------------------------------------------------------------------------------
/example/sphere_vert.glsl:
--------------------------------------------------------------------------------
 1 | precision mediump float;
 2 | 
 3 | attribute vec3 aPosition;
 4 | 
 5 | varying vec3 vPosition;
 6 | 
 7 | uniform mat4 uProjection;
 8 | uniform mat4 uView;
 9 | 
10 | void main() {
11 |     vPosition = aPosition;
12 |     gl_Position = uProjection * uView * vec4(aPosition, 1.0);
13 | }


--------------------------------------------------------------------------------
/images/lava.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Erkaman/glsl-gradient-palette/6d3b16a6c79f82a51aaa91b5da883216da2797c7/images/lava.png


--------------------------------------------------------------------------------
/images/simple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Erkaman/glsl-gradient-palette/6d3b16a6c79f82a51aaa91b5da883216da2797c7/images/simple.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | var createTexture = require('gl-texture2d');
  2 | var Geometry = require('gl-geometry');
  3 | var glslify = require('glslify');
  4 | var glShader = require('gl-shader');
  5 | var mat4 = require('gl-mat4');
  6 | 
  7 | /*
  8 | PRIVATE
  9 |  */
 10 | 
 11 | // arguments are top-left and bottom-right corners
 12 | function _createQuad(tl, br) {
 13 |     var positions = [];
 14 |     var uvs = [];
 15 | 
 16 |     positions.push( [tl[0], tl[1] ] );
 17 |     positions.push( [ br[0],  tl[1] ] );
 18 |     positions.push( [ tl[0] ,  br[1] ] );
 19 |     positions.push([ br[0], br[1] ] );
 20 | 
 21 |     uvs.push( [0,0 ] );
 22 |     uvs.push( [1,0 ] );
 23 |     uvs.push( [0,1 ] );
 24 |     uvs.push( [1,1 ] );
 25 | 
 26 |     var cells = [];
 27 |     cells.push( [2,1,0] );
 28 | 
 29 |     cells.push( [1,2,3] );
 30 | 
 31 |     return {positions: positions, cells:cells, uvs:uvs};
 32 | }
 33 | 
 34 | function _lerpColors(c1, c2, t) {
 35 |     return [
 36 |         c1[0] * (1.0-t) + c2[0] * (t),
 37 |         c1[1] * (1.0-t) + c2[1] * (t),
 38 |         c1[2] * (1.0-t) + c2[2] * (t)
 39 |     ];
 40 | }
 41 | 
 42 | /*
 43 | Gradient Palette.
 44 |  */
 45 | 
 46 | function createGradientPalette(gl, gradientList, opts) {
 47 | 
 48 |     opts = opts || {};
 49 |     var paletteLength = opts.size || 1024;
 50 |     
 51 |     // sanity checking.
 52 |     if(gradientList.length < 2)
 53 |         throw new Error("gradientList must have at least two elements!");
 54 |     if(gradientList[0][0] != 0.0 )
 55 |         throw new Error("First gradient color must begin at 0.0");
 56 |     if(gradientList[gradientList.length-1][0] != 1.0 )
 57 |         throw new Error("Last gradient color must begin at 1.0");
 58 | 
 59 |     for(var i = 0; i < gradientList.length-1; ++i) {
 60 |         if(gradientList[i+0][0] > gradientList[i+1][0]) {
 61 |             throw new Error("Gradients must be specified in order, yet gradient " + (i+1) + " starts before gradient " + (i+0) );
 62 |         }
 63 |     }
 64 | 
 65 |     var paletteHeight = 1;
 66 | 
 67 |     var paletteData = [];
 68 | 
 69 |     var iColor = 0;
 70 | 
 71 |     /*
 72 |     Create palette data.
 73 |      */
 74 |     for(var i = 0; i < paletteLength; ++i) {
 75 |         var t = i / paletteLength;
 76 | 
 77 |         if(gradientList[iColor+1][0] < t) {
 78 |             ++iColor; // next color.
 79 |         }
 80 | 
 81 |         var c1 = gradientList[iColor+0];
 82 |         var c2 = gradientList[iColor+1];
 83 |         var l = _lerpColors( c1[1], c2[1] , (t - c1[0])/(c2[0]-c1[0]) );
 84 | 
 85 |         paletteData.push(l[0]);
 86 |         paletteData.push(l[1]);
 87 |         paletteData.push(l[2]);
 88 |     }
 89 | 
 90 |     var temp = new Float32Array(paletteLength * paletteHeight * 3)
 91 |     temp.set(paletteData)
 92 | 
 93 |     /*
 94 |     Create palette texture.
 95 |      */
 96 |     var paletteTexture = createTexture(gl, [paletteLength, paletteHeight], gl.RGB, gl.FLOAT);
 97 |     paletteTexture.bind();
 98 |     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, paletteLength, paletteHeight, 0, gl.RGB, gl.FLOAT, temp);
 99 | 
100 |     return paletteTexture;
101 | 
102 | }
103 | 
104 | /*
105 | PaletteDrawer
106 |  */
107 | 
108 | function PaletteDrawer(gl, position, size) {
109 |     this.gl = gl;
110 |     var quad = _createQuad(  position, size);
111 |     this.quadGeo = Geometry(gl).
112 |     attr('aPosition', quad.positions, {size:2} ).
113 |     attr('aUv', quad.uvs, {size:2} ).faces(quad.cells, {size:3});
114 | 
115 |     this.quadShader = glShader(gl, glslify("./quad_vert.glsl"), glslify("./quad_frag.glsl"));
116 | }
117 | 
118 | PaletteDrawer.prototype.draw = function (paletteTexture, canvasWidth, canvasHeight) {
119 | 
120 |     this.quadShader.bind();
121 | 
122 |     var projection = mat4.create()
123 |     mat4.ortho(projection, 0,  canvasWidth, canvasHeight, 0, -1.0, 1.0)
124 |     this.quadGeo.bind(this.quadShader);
125 |     this.quadShader.uniforms.uProj = projection;
126 |     this.quadShader.uniforms.palette = paletteTexture.bind()
127 | 
128 |     this.quadGeo.draw();
129 | 
130 | };
131 | 
132 | module.exports.createGradientPalette=createGradientPalette;
133 | module.exports.PaletteDrawer=PaletteDrawer;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "glsl-gradient-palette",
 3 |   "version": "1.0.0",
 4 |   "description": "Module for creating gradient palettes for usage in glsl.",
 5 |   "scripts": {
 6 |     "start": "budo --verbose example/index.js -t glslify --live --open",
 7 |     "test": "standard"
 8 |   },
 9 |   "keywords": [
10 |     "stackgl",
11 |     "glsl",
12 |     "gl",
13 |     "webgl",
14 |     "procedual",
15 |     "palette",
16 |     "gradient",
17 |     "texture",
18 |     "noise"
19 |   ],
20 |   "author": "Eric Arnebäck <arnebackeric@gmail.com> (https://github.com/Erkaman)",
21 |   "license": "MIT",
22 |   "devDependencies": {
23 |     "copy-to-clipboard": "^2.0.0",
24 |     "gl-camera-pos-from-view-matrix": "^1.0.1",
25 |     "gl-geometry": "^3.1.0",
26 |     "gl-mat4": "^1.1.4",
27 |     "gl-now": "^1.4.0",
28 |     "gl-shader": "^4.2.0",
29 |     "gl-vec3": "^1.0.3",
30 |     "glslify": "^5.0.2",
31 |     "orbit-camera": "^1.0.0",
32 |     "pnp-gui": "0.0.3",
33 |     "primitive-icosphere": "^1.0.2",
34 |     "random-array": "0.0.2",
35 |     "glsl-noise": "0.0.0"
36 |   },
37 |   "dependencies": {
38 |     "gl-texture2d": "^2.0.10",
39 |     "gl-geometry": "^3.1.0",
40 |     "glslify": "^5.0.2",
41 |     "gl-shader": "^4.2.0",
42 |     "gl-mat4": "^1.1.4"
43 |   },
44 |   "directories": {
45 |     "example": "example"
46 |   },
47 |   "browserify": {
48 |     "transform": [
49 |       "glslify"
50 |     ]
51 |   },
52 |   "repository": {
53 |     "type": "git",
54 |     "url": "https://github.com/Erkaman/glsl-gradient-palette.git"
55 |   },
56 |   "homepage": "https://github.com/Erkaman/glsl-gradient-palette#readme"
57 | }
58 | 


--------------------------------------------------------------------------------
/quad_frag.glsl:
--------------------------------------------------------------------------------
1 | precision mediump float;
2 | 
3 | varying vec2 vUv;
4 | 
5 | uniform sampler2D palette;
6 | 
7 | void main() {
8 |   gl_FragColor = vec4( texture2D(palette, vec2(vUv.x, 0.0) ).xyz , 1.0 );
9 | }


--------------------------------------------------------------------------------
/quad_vert.glsl:
--------------------------------------------------------------------------------
 1 | precision mediump float;
 2 | 
 3 | attribute vec2 aPosition;
 4 | attribute vec2 aUv;
 5 | 
 6 | varying vec2 vUv;
 7 | uniform mat4 uProj;
 8 | 
 9 | void main() {
10 |   gl_Position = uProj * vec4(aPosition, 0.0, 1.0);
11 |   vUv = aUv;
12 | }


--------------------------------------------------------------------------------