Results 1 to 3 of 3

Thread: 2d projection for pixel coordinate system

  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    3

    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

  2. #2

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

  3. #3
    Junior Member
    Join Date
    Oct 2010
    Posts
    3

    Re: 2d projection for pixel coordinate system

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

Similar Threads

  1. How to get projection matrix???
    By Fadi Chehimi in forum OpenGL ES general technical discussions
    Replies: 15
    Last Post: 08-02-2007, 02:59 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •