https://github.com/ayamflow/glsl-grid
Draws an antialiased grid along the X/Y/Z direction of a mesh.
https://github.com/ayamflow/glsl-grid
glsl glslify grid lines shader webgl
Last synced: 3 months ago
JSON representation
Draws an antialiased grid along the X/Y/Z direction of a mesh.
- Host: GitHub
- URL: https://github.com/ayamflow/glsl-grid
- Owner: ayamflow
- License: mit
- Created: 2019-01-31T07:26:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-31T15:30:24.000Z (over 7 years ago)
- Last Synced: 2025-10-23T10:49:37.930Z (7 months ago)
- Topics: glsl, glslify, grid, lines, shader, webgl
- Language: GLSL
- Size: 141 KB
- Stars: 73
- Watchers: 2
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# glsl-grid
[](http://github.com/badges/stability-badges)
Draws an antialiased grid along the X/Y/Z direction of a mesh.
For use with glslify.
Reference from [this gamedev post](https://www.gamedev.net/forums/topic/529926-terrain-contour-lines-using-pixel-shader/).
### Installation :package:
```bash
npm i glsl-grid -S
```
### Usage :book:
#### 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 :floppy_disk:
```glsl
#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](https://ayamflow.github.io/glsl-grid/demo)
### License :pencil:
MIT. See [LICENSE](http://github.com/ayamflow/glsl-grid/blob/master/LICENSE) for details.