WebGL 2D Vertex Shader

gistfile1.txt

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

    attribute vec2 a_texCoord;

    uniform vec2 u_resolution;

    uniform float u_angle;
    uniform vec2 u_pivot;
    uniform vec2 u_scale;
    uniform vec2 u_translation;

    varying vec2 v_texCoord;

    void main () {
        float cos = cos(u_angle);
        float sin = sin(u_angle);

        // translate to pivot point
        vec2 pivotPosition = u_position - u_pivot;

        // rotate
        vec2 rotatedPosition = vec2(
            pivotPosition.x * cos + pivotPosition.y * sin,
            pivotPosition.y * cos - pivotPosition.x * sin
        );

        // scale
        vec2 scaledPosition = rotatedPosition * u_scale;

        // translate
        vec2 translatedPosition = scaledPosition + u_translation + u_pivot;

        // normalize and translate to clipspace (-1 to 1)
        vec2 clipPosition = translatedPosition / u_resolution * 2.0 - 1.0;

        // set position and invert y-axis!
        gl_Position = vec4(clipPosition * vec2(1, -1), 0, 1);

        v_texCoord = a_texCoord;
    }
</script>