# 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.

Some pseudo code (for shader):

scaled_vertex_position = vertex_local_position * scale;
scaled_and_rotated_vertex_position = ..rotate..;
final_vertex_position = scaled_and_rotated_vertex_position + entity_position;

• Thanks for your answer. Sounds like your suggestion would go in the right direction. But I didn't figure out what you exactly mean. Do you have pseudocode for me that would help. Thanks again :) May 19 '14 at 14:13
• Added some pseudo code. May 19 '14 at 15:10
• So I should to the scaling on the cpu. But I don't have access to widths and heights anymore, since it's in a buffer. And I do not want to update the buffer everytime. The link I posted above from the tutorial shows a way exactly how it should be on the vertex shader and the demo works, like I want it, but why doesn't it translate while scaling as it does in my code? May 19 '14 at 17:18
• No, this pseudo code is for shader, not CPU. May 19 '14 at 17:26