├── .gitignore ├── .npmignore ├── index.glsl ├── package.json ├── LICENSE.md └── 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 -------------------------------------------------------------------------------- /index.glsl: -------------------------------------------------------------------------------- 1 | float aastep(float threshold, float value) { 2 | #ifdef GL_OES_standard_derivatives 3 | float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757; 4 | return smoothstep(threshold-afwidth, threshold+afwidth, value); 5 | #else 6 | return step(threshold, value); 7 | #endif 8 | } 9 | 10 | #pragma glslify: export(aastep) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-aastep", 3 | "version": "1.0.1", 4 | "description": "anti-alias smoothstep utility function", 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 | "devDependencies": {}, 14 | "scripts": { 15 | "test": "node test.js" 16 | }, 17 | "keywords": [ 18 | "aa", 19 | "aastep", 20 | "anti", 21 | "alias", 22 | "anti-alias", 23 | "antialias", 24 | "derivative", 25 | "standard", 26 | "float", 27 | "dFdx", 28 | "dFdy", 29 | "GL_OES_standard_derivatives" 30 | ], 31 | "repository": { 32 | "type": "git", 33 | "url": "git://github.com/stackgl/glsl-aastep.git" 34 | }, 35 | "homepage": "https://github.com/stackgl/glsl-aastep", 36 | "bugs": { 37 | "url": "https://github.com/stackgl/glsl-aastep/issues" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-aastep 2 | 3 | [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges) 4 | 5 | ![smooth](http://i.imgur.com/w7El33x.png) 6 | 7 | [(glslbin demo)](http://glslb.in/s/d7b309df) 8 | 9 | Performs a smoothstep using standard derivatives for anti-aliased edges at any level of magnification. If `GL_OES_standard_derivatives` is not available, this falls back to using `step()` without any anti-aliasing. 10 | 11 | For this module to work, you must enable standard derivatives at your top-level shader: 12 | 13 | ```glsl 14 | precision mediump float; 15 | 16 | #ifdef GL_OES_standard_derivatives 17 | #extension GL_OES_standard_derivatives : enable 18 | #endif 19 | 20 | #pragma glslify: aastep = require('glsl-aastep') 21 | 22 | //rest of your shader 23 | ``` 24 | 25 | A full example of 2D circle rendering: 26 | 27 | ```glsl 28 | precision highp float; 29 | 30 | #ifdef GL_OES_standard_derivatives 31 | #extension GL_OES_standard_derivatives : enable 32 | #endif 33 | 34 | #pragma glslify: aastep = require('glsl-aastep') 35 | 36 | uniform float iGlobalTime; 37 | uniform vec3 iResolution; 38 | 39 | void main() { 40 | //centered texture coordinates 41 | vec2 uv = vec2(gl_FragCoord.xy / iResolution.xy) - 0.5; 42 | 43 | //correct aspect 44 | uv.x *= iResolution.x / iResolution.y; 45 | 46 | //animate zoom 47 | uv /= sin(iGlobalTime * 0.2); 48 | 49 | //radial distance 50 | float len = length(uv); 51 | 52 | //anti-alias 53 | len = aastep(0.5, len); 54 | 55 | gl_FragColor.rgb = vec3(len); 56 | gl_FragColor.a = 1.0; 57 | } 58 | ``` 59 | 60 | Suggestions/PRs welcome. 61 | 62 | ## Usage 63 | 64 | [![NPM](https://nodei.co/npm/glsl-aastep.png)](https://www.npmjs.com/package/glsl-aastep) 65 | 66 | #### `float aastep(float threshold, float value)` 67 | 68 | Performs a `step(threshold, value)` function, except that the edge is smoothed across the width of a single fragment to create anti-aliasing at any scale. Returns the smoothed float. 69 | 70 | ## Contributing 71 | 72 | See [stackgl/contributing](https://github.com/stackgl/contributing) for details. 73 | 74 | ## License 75 | 76 | MIT, see [LICENSE.md](http://github.com/stackgl/glsl-aastep/blob/master/LICENSE.md) for details. 77 | --------------------------------------------------------------------------------