├── .gitignore ├── .npmignore ├── LICENSE.md ├── README.md ├── index.glsl └── package.json /.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 -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2015 Matt DesLauriers 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-crosshatch-filter 2 | 3 | [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges) 4 | 5 | ![crosshatch](http://i.imgur.com/CnCG5u2.png) 6 | 7 | [(glslbin demo)](http://glslb.in/s/47ffb7d1) 8 | 9 | A very basic crosshatch effect for post-processing, from [geeks3d.com](http://www.geeks3d.com/20110219/shader-library-crosshatching-glsl-filter/). 10 | 11 | ```glsl 12 | #pragma glslify: crosshatch = require('glsl-crosshatch-filter') 13 | 14 | void main() { 15 | vec4 texColor = texture2D(sampler, uv); 16 | gl_FragColor.rgb = crosshatch(texColor.rgb); 17 | gl_FragColor.a = texColor.a; 18 | } 19 | ``` 20 | 21 | ## Usage 22 | 23 | [![NPM](https://nodei.co/npm/glsl-crosshatch-filter.png)](https://www.npmjs.com/package/glsl-crosshatch-filter) 24 | 25 | #### `vec3 crosshatch(vec3 texColor)` 26 | 27 | Applies a cross-hatch filter to the `texColor` RGB based on its luminance, using the thresholds `1.0, 0.75, 0.5, 0.3`. Returns the new RGB color. 28 | 29 | #### `vec3 crosshatch(vec3 texColor, float t1, float t2, float t3, float t4)` 30 | 31 | Applies a cross-hatch filter to the `texColor` RGB based on its luminance, using the thresholds from `t1` (brightest) to `t4` (darkest). Returns the new RGB color. 32 | 33 | ## License 34 | 35 | MIT, see [LICENSE.md](http://github.com/mattdesl/glsl-crosshatch-filter/blob/master/LICENSE.md) for details. 36 | -------------------------------------------------------------------------------- /index.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: luma = require('glsl-luma') 2 | 3 | vec3 crosshatch(vec3 texColor, float t1, float t2, float t3, float t4) { 4 | float lum = luma(texColor); 5 | vec3 color = vec3(1.0); 6 | if (lum < t1) { 7 | if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) { 8 | color = vec3(0.0); 9 | } 10 | } 11 | if (lum < t2) { 12 | if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) { 13 | color = vec3(0.0); 14 | } 15 | } 16 | if (lum < t3) { 17 | if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) { 18 | color = vec3(0.0); 19 | } 20 | } 21 | if (lum < t4) { 22 | if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) { 23 | color = vec3(0.0); 24 | } 25 | } 26 | return color; 27 | } 28 | 29 | vec3 crosshatch(vec3 texColor) { 30 | return crosshatch(texColor, 1.0, 0.75, 0.5, 0.3); 31 | } 32 | 33 | #pragma glslify: export(crosshatch) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-crosshatch-filter", 3 | "version": "1.0.0", 4 | "description": "a simple crosshatch effect for 2D scenes", 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-luma": "^1.0.1" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "node test.js" 18 | }, 19 | "keywords": [ 20 | "cross", 21 | "hatch", 22 | "crosshatch", 23 | "sketch", 24 | "shader", 25 | "post", 26 | "process", 27 | "effect", 28 | "glsl", 29 | "glslify", 30 | "glslbin" 31 | ], 32 | "repository": { 33 | "type": "git", 34 | "url": "git://github.com/mattdesl/glsl-crosshatch-filter.git" 35 | }, 36 | "homepage": "https://github.com/mattdesl/glsl-crosshatch-filter", 37 | "bugs": { 38 | "url": "https://github.com/mattdesl/glsl-crosshatch-filter/issues" 39 | } 40 | } 41 | --------------------------------------------------------------------------------