{"id":19867469,"url":"https://github.com/erkaman/glsl-gradient-palette","last_synced_at":"2026-03-17T11:02:36.381Z","repository":{"id":141382880,"uuid":"58149318","full_name":"Erkaman/glsl-gradient-palette","owner":"Erkaman","description":"Module for creating gradient palettes for usage in glsl.","archived":false,"fork":false,"pushed_at":"2016-05-05T18:01:23.000Z","size":778,"stargazers_count":21,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T22:07:28.001Z","etag":null,"topics":["demo","gradient","gradient-palette","javascript","noise","palette","procedural","procedural-generation","webgl"],"latest_commit_sha":null,"homepage":"http://erkaman.github.io/glsl-gradient-palette/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Erkaman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-05-05T17:41:28.000Z","updated_at":"2024-04-25T18:40:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4b9f730-0378-4843-b938-f13bd10183ec","html_url":"https://github.com/Erkaman/glsl-gradient-palette","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"6d3b16a6c79f82a51aaa91b5da883216da2797c7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fglsl-gradient-palette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fglsl-gradient-palette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fglsl-gradient-palette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fglsl-gradient-palette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Erkaman","download_url":"https://codeload.github.com/Erkaman/glsl-gradient-palette/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251998238,"owners_count":21677956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","gradient","gradient-palette","javascript","noise","palette","procedural","procedural-generation","webgl"],"created_at":"2024-11-12T15:29:26.118Z","updated_at":"2025-10-03T14:52:26.681Z","avatar_url":"https://github.com/Erkaman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# glsl-gradient-palette\n\n[![NPM](https://nodei.co/npm/glsl-gradient-palette.png)](https://www.npmjs.com/package/glsl-gradient-palette)\n\nThis module can be used to create gradient color palettes. These can be used to colorize noise functions and procedurally\ngenerate textures in shaders. Below is an example of such a procedural texture.\n\n\u003cimg src=\"images/lava.png\" width=\"356\" height=\"366\" /\u003e\n\nMore examples can be found in the provided [demo](http://erkaman.github.io/glsl-gradient-palette/)\n\n## Usage\n\nTo create a gradient palette, you basically give the API a sequential list of colors. The API will then create a\npalette, by linearly interpolating between these colors. It is very easy to create a palette:\n\n```javascript\n    var simple =  [\n        [0.0, [1.0,0.0,0.0]],\n        [0.5, [0.0,0.0,0.0]],\n        [1.0, [0.0,0.0,1.0]],\n    ];\n\n    simplePaletteTexture = createGradientPalette(gl,simple);\n```\n\nabove, we create a palette where we first interpolate from red to black, and then from black to red. To be more specific,\nFrom `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\n`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\nlook like this:\n\n\u003cimg src=\"images/simple.png\" width=\"356\" height=\"366\" /\u003e\n\nin the upper parts of the image, we can see the palette, and below, we see what happens if we use the palette to\ncolorize a noise function.\n\nIt is easy to use the created palette in a shader. `createGradientPalette` will return the created palette as a\ntexture(as a `gl-texture2d`), and this texture can be sent to a shader by doing\n\n```javascript\n   sphereShader.uniforms.uPalette = simplePaletteTexture.bind()\n```\n\nnow we can use it to colorize a noise function by sampling from it, based on the noise value:\n\n```glsl\n   float t = noise(vPosition);\n   vec3 tex =   texture2D(uPalette, vec2(t, 0.0) ).xyz;\n```\n\nand that results in the textured sphere seen above.\n\nBy specifying more colors, we can create more advanced textures. For instance, the palette\n\n```javascript\n\n    var fireball =  [\n        [0.0, [0.4,0.4,0.4]],\n        [0.55, [0.0,0.0,0.0]],\n        [0.60, [1.0,0.0, 0.0]],\n        [0.70, [1.0,1.0, 0.0]],\n        [1.0, [0.4,0.4, 0.0]]\n    ];\n```\n\nresults in\n\n\u003cimg src=\"images/lava.png\" width=\"356\" height=\"366\" /\u003e\n\n## API\n\n### `function createGradientPalette(gl, gradientList[, opts])`\n\nCreates a gradient palette, and returns the created palette stored as a `gl-texture2d`, with a default size of\n`1024x1`.\n\n* `gl` your WebGL context.\n* `gradientList` the list of colors to use when creating the palette. See the previous section for more details.\n* `opts` optional arguments objects. Can currently only contain the property `opts.size`, which specifies the width\nof the created palette texture. Defaults to `1024`.\n\n### `paletteDrawer = new PaletteDrawer(gl, position, size)`\n\nCreates a palette drawer, that can be used for drawing a palette texture on the screen. Useful for visualising a palette.\n\n* `gl` your WebGL context.\n* `position` the pixel position where your palette drawer will be drawn. Stored as an array `[x,y]`.\n* `size` the pixel size of your palette drawer. Stored as an array`[x_size,y_size]`.\n\n\n### `paletteDrawer.draw(paletteTexture, canvasWidth, canvasHeight)`\n\nDraws a palette texture as a simple quad.\n\n* `paletteTexture` the palette texture to draw.\n* `canvasWidth` the width of the canvas.\n* `canvasHeight` the height of the canvas.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkaman%2Fglsl-gradient-palette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferkaman%2Fglsl-gradient-palette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkaman%2Fglsl-gradient-palette/lists"}