├── .gitignore ├── .npmignore ├── package.json ├── LICENSE.md ├── index.glsl └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | *.log 4 | .DS_Store 5 | bundle.js 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | *.log 4 | .DS_Store 5 | bundle.js 6 | test 7 | test.js 8 | demo/ 9 | .npmignore 10 | LICENSE.md -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-halftone", 3 | "version": "1.0.4", 4 | "description": "a halftone effect in GLSL", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "author": { 8 | "name": "Matt DesLauriers", 9 | "email": "dave.des@gmail.com", 10 | "url": "https://github.com/mattdesl" 11 | }, 12 | "dependencies": { 13 | "glsl-aastep": "^1.0.0", 14 | "glsl-noise": "0.0.0" 15 | }, 16 | "devDependencies": {}, 17 | "scripts": { 18 | "test": "node test.js" 19 | }, 20 | "keywords": [ 21 | "halftone", 22 | "shader", 23 | "glsl", 24 | "glslify", 25 | "glslbin" 26 | ], 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/stackgl/glsl-halftone.git" 30 | }, 31 | "homepage": "https://github.com/stackgl/glsl-halftone", 32 | "bugs": { 33 | "url": "https://github.com/stackgl/glsl-halftone/issues" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2015 stackgl 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 20 | OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | -------------------------------------------------------------------------------- /index.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: snoise = require('glsl-noise/simplex/2d') 2 | #pragma glslify: aastep = require('glsl-aastep') 3 | 4 | vec3 halftone(vec3 texcolor, vec2 st, float frequency) { 5 | float n = 0.1*snoise(st*200.0); // Fractal noise 6 | n += 0.05*snoise(st*400.0); 7 | n += 0.025*snoise(st*800.0); 8 | vec3 white = vec3(n*0.2 + 0.97); 9 | vec3 black = vec3(n + 0.1); 10 | 11 | // Perform a rough RGB-to-CMYK conversion 12 | vec4 cmyk; 13 | cmyk.xyz = 1.0 - texcolor; 14 | cmyk.w = min(cmyk.x, min(cmyk.y, cmyk.z)); // Create K 15 | cmyk.xyz -= cmyk.w; // Subtract K equivalent from CMY 16 | 17 | // Distance to nearest point in a grid of 18 | // (frequency x frequency) points over the unit square 19 | vec2 Kst = frequency*mat2(0.707, -0.707, 0.707, 0.707)*st; 20 | vec2 Kuv = 2.0*fract(Kst)-1.0; 21 | float k = aastep(0.0, sqrt(cmyk.w)-length(Kuv)+n); 22 | vec2 Cst = frequency*mat2(0.966, -0.259, 0.259, 0.966)*st; 23 | vec2 Cuv = 2.0*fract(Cst)-1.0; 24 | float c = aastep(0.0, sqrt(cmyk.x)-length(Cuv)+n); 25 | vec2 Mst = frequency*mat2(0.966, 0.259, -0.259, 0.966)*st; 26 | vec2 Muv = 2.0*fract(Mst)-1.0; 27 | float m = aastep(0.0, sqrt(cmyk.y)-length(Muv)+n); 28 | vec2 Yst = frequency*st; // 0 deg 29 | vec2 Yuv = 2.0*fract(Yst)-1.0; 30 | float y = aastep(0.0, sqrt(cmyk.z)-length(Yuv)+n); 31 | 32 | vec3 rgbscreen = 1.0 - 0.9*vec3(c,m,y) + n; 33 | return mix(rgbscreen, black, 0.85*k + 0.3*n); 34 | } 35 | 36 | vec3 halftone(vec3 texcolor, vec2 st) { 37 | return halftone(texcolor, st, 30.0); 38 | } 39 | 40 | #pragma glslify: export(halftone) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-halftone 2 | 3 | [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges) 4 | 5 | ![halftone](http://i.imgur.com/GTjatxC.jpg) 6 | 7 | [(glslbin demo)](http://glslb.in/s/4d6e366d) 8 | 9 | A halftone shader in GLSL, adapted from Stefan Gustavson's work [here](http://webstaff.itn.liu.se/~stegu/webglshadertutorial/shadertutorial.html). Bilinear texture sampling and minification are left up to the user to implement (see steps 5 and 9 in Gustavson's tutorial). 10 | 11 | For anti-aliasing, you should enable standard derivatives at the top of your shader, before requiring this module. 12 | 13 | ```glsl 14 | precision highp float; 15 | 16 | #ifdef GL_OES_standard_derivatives 17 | #extension GL_OES_standard_derivatives : enable 18 | #endif 19 | 20 | varying vec2 uv; 21 | uniform vec2 iResolution; 22 | uniform sampler2D u_sampler; 23 | 24 | #pragma glslify: halftone = require('glsl-halftone') 25 | 26 | void main() { 27 | //sample from texture; optionally using manual bilinear filtering 28 | vec4 texcolor = texture2D(u_sampler, uv); 29 | 30 | //aspect corrected texture coordinates 31 | vec2 st = uv; 32 | st.x *= iResolution.x / iResolution.y; 33 | 34 | //apply halftone effect 35 | gl_FragColor.rgb = halftone(texcolor.rgb, st); 36 | gl_FragColor.a = 1.0; 37 | } 38 | ``` 39 | 40 | ## Usage 41 | 42 | [![NPM](https://nodei.co/npm/glsl-halftone.png)](https://www.npmjs.com/package/glsl-halftone) 43 | 44 | #### `vec3 halftone(vec3 color, vec2 uv[, float frequency])` 45 | 46 | Applies a halftone effect to the given texture color using the `uv` coordinates. Higher `frequency` (default 30.0) leads to more tiling and smaller circles. Returns the RGB result. 47 | 48 | ## Contributing 49 | 50 | See [stackgl/contributing](https://github.com/stackgl/contributing) for details. 51 | 52 | ## License 53 | 54 | The halftone effect is public domain, by Stefan Gustavson. This also uses Ashima's glsl-noise, which is MIT. 55 | 56 | The rest of the adaptation is MIT, see [LICENSE.md](http://github.com/stackgl/glsl-halftone/blob/master/LICENSE.md) for details. 57 | --------------------------------------------------------------------------------