Results 1 to 9 of 9

Thread: Panning a plane

  1. #1
    Junior Member
    Join Date
    Jan 2010
    Posts
    6

    Panning a plane

    Hello, i have written a basic app based on the tutorials from learningwebgl.com. It draws a plane, then applies an image to it. Then you use the mouse to pan and zoom. Basically an image viewer similar to that used in picasa.

    My problem happens during the mouse move functions and getting screen pixels into scene space. When moving the mouse it pans ok, but its off a little bit, not 1:1, and i assume its due to the perspective?

    i set my projection matrix by using the makePerspective function in glUtils from learningwebgl.com:

    Code :
    perspective(45.0, width / height, 0.1, 100.0);

    and my model view matrix with:
    Code :
    lookAt(0.0,0.0,5.0,
              0.0,0.0,0.0,
              0.0,1.0,0.0
    );

    the function for handling the mouse move is:
    Code :
    var angle = 90 / 2;
    var x = (5 * (90 - angle)) / angle;
    var dx = ((e.client.x - last.x) * (x /width));
     
    eye.x += -dx;
    center.x += -dx;
    last.x = e.client.x;

    is my math even close to correct here?

    Thanks, this is exciting stuff!

  2. #2

    Re: Panning a plane

    I can't quite see what you're trying to do with the maths but if you're only planning on pan and zoom why not use the makeOrtho function in glutils file to construct your projection matrix, then you won't need to deal with perspective at all.

  3. #3
    Junior Member
    Join Date
    Jan 2010
    Posts
    6

    Re: Panning a plane

    ive got the ortho made, but i still can't figure out the unit conversions. How to convert pixel distance to world space?

    i have a plane at 0,0,0 and the this.ortho(-1, 1, 1, -1, 0.1, 100.0). i tried:
    Code :
    var dx = (e.client.x - last.x) / width;
    pos.x += dx;

    but its still not 1:1 when panning. Should i even be concerned with canvas width?

    Thanks

  4. #4
    Junior Member
    Join Date
    Jan 2010
    Posts
    8

    Re: Panning a plane

    var dx = (e.client.x - last.x) / width*2;
    pos.x += dx;

    because a canvas is from -1,-1 to 1,1;

  5. #5
    Junior Member
    Join Date
    Jan 2010
    Posts
    6

    Re: Panning a plane

    That worked, thanks guys.

  6. #6
    Junior Member
    Join Date
    Jan 2010
    Posts
    6

    Re: Panning a plane

    So everything is working as expected, however this will be running fullscreen and at 1920x1200 it's chugging really bad. Not sure how 2 triangles and a little texture could cause such lag. I assume it has to do with how im rendering it.

    Basically it calls the following function every 15ms:
    Code :
    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT)
    this.loadIdentity();
    this.ortho(-1, 1, 1, -1, 0.1, 100.0)
     
    this.mvTranslate([this.pos.x,this.pos.y,this.pos.z]);
     
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexPositionBuffer);
    this.gl.vertexAttribPointer(this.vertexPositionAttribute, this.cubeVertexPositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);
     
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexTextureCoordBuffer);
    this.gl.vertexAttribPointer(this.textureCoordAttribute, this.cubeVertexTextureCoordBuffer.itemSize, this.gl.FLOAT, false, 0, 0);
     
    this.gl.activeTexture(this.gl.TEXTURE0);
    this.gl.bindTexture(this.gl.TEXTURE_2D, this.neheTexture);
    this.gl.uniform1i(this.gl.getUniformLocation(this.shaderProgram, "uSampler"), 0);
     
    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
     
    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeVertexIndexBuffer);
    this.setMatrixUniforms();

    Can i do this more efficiently?

    Thanks

  7. #7
    Member
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    90

    Re: Panning a plane

    Which browser are you using? It's been suggested that Minefield's way of copying the rendered image to the page (specifically the way it's combined with the normal HTML) is inefficient; see here: viewtopic.php?f=35&t=2312

    On a slightly different note, I see that in your code you go:

    Code :
    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
     
    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeVertexIndexBuffer);
    this.setMatrixUniforms();

    Does this not cause your matrices and your vertex index buffer to be ignored? Or is there something further down?

  8. #8
    Junior Member
    Join Date
    Jan 2010
    Posts
    6

    Re: Panning a plane

    im using minefield on windows 7. It seems after restarting minefield it got a little better, but nothing near expected. Is this just part of an early spec?

    As for the second question, i took a second look at the lessons and now have:
    Code :
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexTextureCoordBuffer);
    this.gl.vertexAttribPointer(this.textureCoordAttribute, this.cubeVertexTextureCoordBuffer.itemSize, this.gl.FLOAT, false, 0, 0);
     
    this.gl.activeTexture(this.gl.TEXTURE0);
    this.gl.bindTexture(this.gl.TEXTURE_2D, this.neheTexture);
    this.gl.uniform1i(this.gl.getUniformLocation(this.shaderProgram, "uSampler"), 0);
     
    this.setMatrixUniforms();
     
    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);

    the vertexIndexBuffer wasn't used, it was residual from your 3D objects lesson. I'll give it a whirl on chrome and see how it fares.

  9. #9
    Junior Member
    Join Date
    Jan 2010
    Posts
    8

    Re: Panning a plane

    It is most likely that gl.clear is the slowpoke there
    In my measurements on webgl,
    it seemed like gl.clear was always slow and
    it became worse when the size of the canvas increased.

    You can try to put some options off when you init the canvas.

    Code :
    var canvas = document.getElementById('canvas1');
    var context = canvas.getContext('webgl',
                                    { antialias: false,
                                      stencil: false,
                                      depth: true,
                                      alpha: false,
                                      premultipliedAlpha: false });

    These are the options possible but I am not sure if it will help. For more information watch the WebGL-spec 5.2.

Similar Threads

  1. Panning in OpenGLES
    By Pammy in forum Developers Coding:Beginner
    Replies: 0
    Last Post: 08-16-2012, 09:07 PM
  2. user clipping plane
    By wycwang in forum OpenGL ES general technical discussions
    Replies: 1
    Last Post: 10-18-2007, 07:09 PM

Posting Permissions

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