WebGL 2D Fragment (Texture) Shader

gistfile1.txt

<script id="2d-fragment-shader" type="x-shader/x-fragment">
    precision mediump float;

    uniform sampler2D u_image;

    uniform float u_alpha;
    uniform vec4 u_frame;   // x, y, width, height

    varying vec2 v_texCoord;

    void main () {
         vec2 framePosition;

        framePosition.x = u_frame.x + (v_texCoord.s * u_frame.z);
        framePosition.y = u_frame.y + (v_texCoord.t * u_frame.a);

        vec4 texture = texture2D(u_image, framePosition);
        gl_FragColor = vec4(texture.rgb, texture.a * u_alpha);
    }
</script>