glsl-2d-primitives
SDF functions to draw 2D shapes in glsl.
Last updated 3 years ago by ayamflow .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install glsl-2d-primitives 
SYNC missed versions from official npm registry.

glsl-2d-primitives

stable

SDF functions to draw 2d shapes in glsl. Antialiased using glsl-aastep.

glsl-2d-primitives

Installation :package:

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:

#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

See also

License :pencil:

MIT. See LICENSE for details.

Current Tags

  • 1.0.3                                ...           latest (3 years ago)

4 Versions

  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 2
Dependencies (2)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |