Nearly Picked Makefiles

    glsl-simple-alpha-compositing

    1.0.3 • Public • Published

    glsl-simple-alpha-compositing

    GLSL implementation of the simple alpha compositing function, as described in the W3C Editor's draft in Compositing and Blending.

    Install

    npm install glsl-simple-alpha-compositing

    Usage

    #pragma glslify: simpleAlphaCompositing require(glsl-simple-alpha-compositing); 
     
    vec4 source = vec4(1., 0., 0., .5);
    vec4 backdrop = vec4(0., 1., 0., .3);
     
    vec3 color = simpleAlphaCompositing(source, backdrop);

    An example: set the background color in a GLSL fragment shader.

    The simple alpha compositing can be used to set the background colour in a glsl fragment shader.

    The following code uses the step function to set the alpha channel value to 1 for all the points which distance from the circle centre is less than 0.25, otherwise, the alpha channel is set to 0.

    The simpleAlphaCompositing function is used to compose the blue circle with a yellow background.

    vec3 circleField (vec2 p) {
        // Colors
        vec3 circleColor = vec3(0., 0., 1.); // blue
        vec3 backgroundColor = vec3(1., 1., 0.); // yellow
    
        // Background field
        vec4 background = vec4(backgroundColor, 1.);
    
        // Foreground field, a circle.
        vec2 center = vec2(.5);
        float d = distance(p, center);
        float delta = 0.0005;
        // Note that the circular shape is implemented in the alpha channel.
        vec4 circle = vec4(circleColor, smoothstep(d - delta, d + delta, 0.25));
    
        return simpleAlphaCompositing(circle, background);
    }
    
    void main() {
        vec3 color = circleField(vUv);
        gl_FragColor = vec4(color, 1.0);
    }
    

    Install

    npm i glsl-simple-alpha-compositing

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    61.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • riccardoscalco