Natural Preference for Minification

npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

glsl-2d-primitives

1.0.3 • Public • Published

glsl-2d-primitives

stable

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

glsl-2d-primitives

Installation 📦

npm i glsl-2d-primitives -S

Usagez 📖

circle(vec2 st, float radius)

rectangle(vec2 st, vec2 size)

polygon(vec2 st, float radius, float sides)

Example 💾

#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.40.6));
 
    // Draw a pentagon, without alpha masking 
    gl.FragColor = vec4(vec3(polygon(vUv, 0.45.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 📝

MIT. See LICENSE for details.

install

npm i glsl-2d-primitives

Downloadsweekly downloads

6

version

1.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability