{"id":18035,"library":"glsl-aastep","title":"GLSL Anti-aliased Step Function","description":"glsl-aastep is a GLSL utility function designed to provide anti-aliased edges for smoothstep-like operations within shaders. It leverages the `GL_OES_standard_derivatives` extension to calculate fragment derivatives, enabling resolution-independent smoothing of transitions across a single pixel width, regardless of magnification. If the extension is unavailable, it gracefully degrades to a standard `step()` function, losing the anti-aliasing effect. The package is currently at version 1.0.1 and appears to be stable, with updates released infrequently as it provides a focused, atomic GLSL function. Its primary differentiation lies in its direct application of standard derivatives for efficient and robust edge smoothing in 2D and 3D rendering contexts, avoiding more complex multi-pass techniques.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"git://github.com/stackgl/glsl-aastep","tags":["javascript","aa","aastep","anti","alias","anti-alias","antialias","derivative","standard"],"install":[{"cmd":"npm install glsl-aastep","lang":"bash","label":"npm"},{"cmd":"yarn add glsl-aastep","lang":"bash","label":"yarn"},{"cmd":"pnpm add glsl-aastep","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a GLSL shader module, not a JavaScript or TypeScript module. It is designed to be processed and included into a larger GLSL shader program using a tool like `glslify`, which handles the `require()` syntax at build time.","wrong":"import { aastep } from 'glsl-aastep'; // Incorrect for GLSL modules\nconst aastep = require('glsl-aastep'); // Incorrect for GLSL modules directly in JS/TS","symbol":"aastep","correct":"#pragma glslify: aastep = require('glsl-aastep')"}],"quickstart":{"code":"import { readFileSync } from 'fs';\nimport { createRequire } from 'module';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\n// For ESM context: create a CommonJS-like require for glslify\nconst require = createRequire(import.meta.url);\nconst glslify = require('glslify');\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// This GLSL template uses glsl-aastep\nconst shaderSourceTemplate = `\nprecision highp float;\n\n#ifdef GL_OES_standard_derivatives\n#extension GL_OES_standard_derivatives : enable\n#endif\n\n// glslify automatically resolves 'glsl-aastep' from node_modules\n#pragma glslify: aastep = require('glsl-aastep')\n\nuniform float iGlobalTime;\nuniform vec2  iResolution;\n\nvoid main() {\n  vec2 uv = vec2(gl_FragCoord.xy / iResolution.xy) - 0.5;\n  uv.x *= iResolution.x / iResolution.y;\n\n  // Simple animation for demonstration\n  float zoom = 1.0 + sin(iGlobalTime * 0.5) * 0.5;\n  uv /= zoom;\n\n  float len = length(uv);\n\n  // Apply anti-aliased step function\n  float color = aastep(0.5, len);\n\n  gl_FragColor.rgb = vec3(color);\n  gl_FragColor.a   = 1.0;\n}\n`;\n\n// Use glslify to bundle the shader source\nconst finalShaderSource = glslify.compile(shaderSourceTemplate);\n\nconsole.log('--- Compiled Shader Source ---');\nconsole.log(finalShaderSource);\nconsole.log('------------------------------');\n\n// Below is conceptual WebGL usage for a browser environment\n// This part would typically run in a browser after the glslify bundling step\nif (typeof document !== 'undefined') {\n  const canvas = document.createElement('canvas');\n  document.body.appendChild(canvas);\n  const gl = canvas.getContext('webgl');\n\n  if (!gl) {\n    console.error('WebGL not supported');\n  } else {\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n\n    const program = gl.createProgram();\n    const vsSource = `attribute vec4 a_position; void main() { gl_Position = a_position; }`;\n    const vertexShader = gl.createShader(gl.VERTEX_SHADER);\n    gl.shaderSource(vertexShader, vsSource);\n    gl.compileShader(vertexShader);\n    gl.attachShader(program, vertexShader);\n\n    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);\n    gl.shaderSource(fragmentShader, finalShaderSource);\n    gl.compileShader(fragmentShader);\n    gl.attachShader(program, fragmentShader);\n\n    gl.linkProgram(program);\n    gl.useProgram(program);\n\n    const positionBuffer = gl.createBuffer();\n    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);\n\n    const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');\n    gl.enableVertexAttribArray(positionAttributeLocation);\n    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);\n\n    const iResolutionUniformLocation = gl.getUniformLocation(program, 'iResolution');\n    const iGlobalTimeUniformLocation = gl.getUniformLocation(program, 'iGlobalTime');\n\n    function render(time) {\n      gl.uniform2f(iResolutionUniformLocation, gl.canvas.width, gl.canvas.height);\n      gl.uniform1f(iGlobalTimeUniformLocation, time * 0.001);\n      gl.clear(gl.COLOR_BUFFER_BIT);\n      gl.drawArrays(gl.TRIANGLES, 0, 6);\n      requestAnimationFrame(render);\n    }\n    requestAnimationFrame(render);\n  }\n}","lang":"javascript","description":"Demonstrates how to use `glslify` in a JavaScript environment to bundle `glsl-aastep` into a final GLSL shader string, then compile and render it within a basic WebGL context to show an anti-aliased circle."},"warnings":[{"fix":"Ensure your GLSL shader includes `#ifdef GL_OES_standard_derivatives\n#extension GL_OES_standard_derivatives : enable\n#endif` at the top, typically after the `precision` declaration, to enable the necessary derivative calculations.","message":"The anti-aliasing functionality of `glsl-aastep` relies on the `GL_OES_standard_derivatives` GLSL extension. If this extension is not enabled in your shader, the function will fall back to a standard `step()` operation, resulting in aliased edges without any smoothing.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add `#ifdef GL_OES_standard_derivatives\\n#extension GL_OES_standard_derivatives : enable\\n#endif` to the preamble of your GLSL shader, before any usage of `aastep`.","cause":"Attempting to use `glsl-aastep` (which internally uses `dFdx` and `dFdy`) without explicitly enabling the `GL_OES_standard_derivatives` extension in your GLSL shader.","error":"Shader compilation error: undeclared identifier 'dFdx'"},{"fix":"Ensure `glsl-aastep` is installed as an npm dependency (`npm install glsl-aastep --save-dev`). Verify that your build pipeline (e.g., Webpack, Rollup) includes `glslify` as a preprocessor or loader for your `.glsl` files, and that your GLSL source correctly uses `#pragma glslify: aastep = require('glsl-aastep')`.","cause":"This error can occur in a JavaScript/TypeScript build process if `glslify` is not correctly configured to process your GLSL shader files, or if you are attempting to `import` or `require` `glsl-aastep` directly as a JS/TS module.","error":"Cannot find module 'glsl-aastep'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}