WebGL wrong scaling of rectangle

I'm working with this tutorial http://www.html5rocks.com/en/tutorials/webgl/webgl_transforms/

and my result is, that the rectangle moves in the direction of it's scaling values, and also scales at the same time. So if I scale (2.0, 1.0) it moves right and stretches, but I only want to strecht/scale it. This is my vertex shader, it is nearly the same as in the tutorial (declarations omitted):

void main(void) {
vec2 scaledPosition = a_position * u_scale;

vec2 rotatedPosition = vec2(
scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);

vec2 pos = rotatedPosition + u_translation;

vec2 zeroToOne = pos / u_resolution;
vec2 zeroToTwo = zeroToOne * 2.0;
vec2 clipSpace = zeroToTwo - 1.0;

v_texCoord = a_texCoord;

gl_Position = vec4(clipSpace, 0, 1);
}


What could be the mistake if it is not in the shader? Thanks in advance.

• What exactly are you trying to achieve? When you say you want to scale something, generally that means uniformly expanding/contracting in all directions. May 16 '14 at 1:41

Vertex shader goes through each vertex individually, and applies maths to it.
Here you take position of your vertices, and multiply it by scale. That means if you multiply X by 2.0 (scale), then when you move all vertices right in vertex buffer by 2.0 in shader it will turn into 4.0 (as you multiply then).

What you really want is to have position of entity, and then position of vertices expressed by vertex buffer.
Then you will scale vertices the way as you do, but then will add position of entity (vec2 in your case) to move object around.
So vertex position will be local and scale will be so.

scaled_vertex_position = vertex_local_position * scale;