https://github.com/ayamflow/glsl-2d-primitives
SDF functions to draw 2d shapes in glsl.
https://github.com/ayamflow/glsl-2d-primitives
Last synced: 4 months ago
JSON representation
SDF functions to draw 2d shapes in glsl.
- Host: GitHub
- URL: https://github.com/ayamflow/glsl-2d-primitives
- Owner: ayamflow
- License: mit
- Created: 2018-03-26T19:55:37.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-27T17:01:58.000Z (about 8 years ago)
- Last Synced: 2025-03-16T09:41:27.507Z (over 1 year ago)
- Language: GLSL
- Size: 8.79 KB
- Stars: 39
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# glsl-2d-primitives
[](http://github.com/badges/stability-badges)
SDF functions to draw 2d shapes in glsl.
Antialiased using [glsl-aastep](https://github.com/glslify/glsl-aastep).
### Installation :package:
```bash
npm i glsl-2d-primitives -S
```
### Usagez :book:
#### circle(vec2 st, float radius)
#### rectangle(vec2 st, vec2 size)
#### polygon(vec2 st, float radius, float sides)
### Example :floppy_disk:
```glsl
#pragma glslify: circle = require(glsl-2d-primitives/circle)
#pragma glslify: rectangle = require(glsl-2d-primitives/rectangle)
#pragma glslify: polygon = require(glsl-2d-primitives/polygon)
attribute vec2 vUv;
uniform sampler2D map;
void main() {
gl_FragColor = texture2D(map, vUv);
// Mask the image with a centered rectangle
gl_FragColor.a = rectangle(vUv, vec2(0.4, 0.6));
// Draw a pentagon, without alpha masking
gl.FragColor = vec4(vec3(polygon(vUv, 0.4, 5.0)), 1.0);
// Mask the image with a ring, combining 2 circles
float ring = circle(vUv, 0.5) * (1.0 - circle(vUv, 0.52));
gl_FragColor.a = ring;
}
```
[Demo](http://thebookofshaders.com/edit.php?log=180326195904)
### See also
- https://thebookofshaders.com/07/
- https://github.com/glslify/glsl-aastep
- https://github.com/marklundin/glsl-sdf-primitives
### License :pencil:
MIT. See [LICENSE](http://github.com/ayamflow/glsl-layer/blob/master/LICENSE) for details.