ayamflow / glsl-grid

Draws an antialiased grid along the X/Y/Z direction of a mesh.

glsl-grid

Draws an antialiased grid along the X/Y/Z direction of a mesh. For use with glslify.

Reference from this gamedev post.

Installation 📦

npm i glsl-grid -S

Usage 📖

grid(vec3 pos, vec3 axis, float size)

• vec3 pos The position in world space.
• vec3 axis The axis to draw a grid for. Set to 1.0 to enable, 0.0 to disable. i.e. vec3(0.0, 0.0, 1.0) will draw only along the z axis.
• float size Space between grid tiles.

Example 💾

#pragma glslify: grid = require(glsl-grid)
varying vec3 vPos;

void main() {
    float lines = grid(vPos, vec3(0.0, 0.0, 1.0), 2.0);
    gl_FragColor = vec4(vec3(lines), 1.0);
}

Demo

License 📝

MIT. See LICENSE for details.