2d projection for pixel coordinate system

Hello everyone!

I want to start using Webgl for 2d sprites in a simple screen coordinate system.

I like to draw sprites with the following bounds e.g [x, y, w, h] (maybe z too)

sprite1.x = 500;

...

and not a coordinate System with floats that begin in the center of the screen.

I try to use 2d ortho projection like i used to in directX but i fail :( it seams like there ist no Ortho mode for webgl... Am i missing something?

What can i do to reach my goal ?

thanks for your help

Re: 2d projection for pixel coordinate system

I believe webgl renders everything that is in the range -1 to +1 in all 3 dimensions. If you want to use a pixel coordinates you simple have to convert your pixel coords to the range -1 to +1 either before or after you send to the GPU. The easiest way would probably be to construct a matrix to covert the coords in the vertex shader. I've not tested this but I think something like:

matrix=[

[2/canvasWidth, 0, 0, -1],

[0,2/canvasHeight, 0, -1],

[0, 0, 0, 0],

[0, 0, 0, 1]

];

then you can construct your sprites out of two tris measured in pixels and simple multiply the coords in the vertex shader:

attribute vec2 pixelPos;

uniform mat4 convertMatrix;

void main(){

gl_Position=convertMatrix * vec4(pixelPos.x,pixelPos.y,0,1);

}

Re: 2d projection for pixel coordinate system

thank you very much!

i will try this one today!