2d projection for pixel coordinate system

Other Standards WebGL
1

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 :frowning: 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

2

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);
}

3

thank you very much!
i will try this one today!