Jump to content

Picking Problems when Viewport X,Y are not 0


Recommended Posts

Thought I had just finished Dialog extension, but there is just one more thing.  The last thing added was to align the Panel for centering or docking.  The place where the pick occurs is not actually over the "button", unless the Panel is aligned left-bottom though


Tester : https://googledrive.com/host/0B6-s6ZjHyEwUfjlzYXJKMC1zLXdIaV81REJhbjdfRmczQTJFOEpjWWg2SUIwZVRRS0VsR28


To see issue, go to the Modal Stack Menu, then click on the Top or Center buttons.  The Panel adjusts (immediately if using system camera), but pick area does not.  Then just slide the mouse to the left or right and click again.  Even though the Panel was moved it still thinks the buttons are still there.  (FYI, on Dock Panel, click in bottom right to dismiss).



Here is the code that adjust the camera:

/** * Adjusts camera ortho settings & viewport based on the top panel on the stack. * Called by pushPanel(), popPanel(), & window resize event registered for above */private static _adjustCameraForPanel() : void{     if (!DialogSys._dialogStack || DialogSys._dialogStack.length === 0) return;                 // work with the panel on the top of the stack     var panel = DialogSys._dialogStack[DialogSys._dialogStack.length - 1];    // assign the ortho, based on the half width & height    var halfWidth  = panel.getReqdWidth () / 2;    var halfHeight = panel.getReqdHeight() / 2;    DialogSys._camera.orthoTop    =  halfHeight;    DialogSys._camera.orthoBottom = -halfHeight;    DialogSys._camera.orthoLeft   = -halfWidth;    DialogSys._camera.orthoRight  =  halfWidth;    DialogSys._camera.getProjectionMatrix(); // required to force ortho to take effect after first setting                // keep dialog from being distorted by window size    var hScale = window.innerHeight / halfHeight;    var wScale = window.innerWidth  / halfWidth ;                var h = window.innerHeight * ((hScale > wScale) ? wScale/hScale : 1);    var w = window.innerWidth  * ((hScale < wScale) ? hScale/wScale : 1);                // derive height & width    var height = panel.maxViewportHeight * h / window.innerHeight;     var width  = panel.maxViewportWidth  * w / window.innerWidth ;                // assign x & y, based on layout of panel    var x : number;    switch(panel.horizontalAlignment){        case Panel.ALIGN_LEFT:            x = 0; break;                            case Panel.ALIGN_HCENTER:            x = (1 - width) / 2; break;                            case Panel.ALIGN_RIGHT:            x = 1 - width;    }                var y : number;    switch(panel.verticalAlignment){        case Panel.ALIGN_TOP:            y = 1 - height; break;                            case Panel.ALIGN_VCENTER:            y = (1 - height) / 2; break;                            case Panel.ALIGN_BOTTOM:            y = 0;    }    DialogSys._camera.viewport = new BABYLON.Viewport(x, y, width, height);}

Anybody have an idea?





Link to comment
Share on other sites

Hey Jeff,


I tried debugging the problem (it only affects the picking function when the window is smaller than the dialog).

I think the problem is in this function - https://github.com/BabylonJS/Babylon.js/blob/932165e1520265d793c4309d9fdff0ae270ba375/Babylon/babylon.scene.ts#L1951 (createPickingRay), thou i can't point the right place. I think it is the recalculation of y. But again, I am not really sure about it. Try checking the values coming back from this function and see if they correlate correctly to the position of the objects in the camera's viewport. 

I'll try debugging further, let's see what I find :-)

Link to comment
Share on other sites

The dimension you have the problem in depend on the shape of the panel.  I added a bunch of junk lines to the bottom to make it taller than it is wide, now the problem is in x.  Clicked the "right" button, cannot find anything now.


Will look into calling createPickingRay.



Link to comment
Share on other sites


Sam saying it worked for him, lead me to think I was doing something "special".  Took a while to think of it, but I had found an undocumented feature reading the Scene source code.  I thought, this sounds like something I should be doing:

DialogSys._scene.cameraToUseForPointers = DialogSys._camera;

Wrong.  I do not really know what this is, but it does not "work", whatever that is.  Works great without it.  Will leave it as comments for release.


This extension does not really operate correctly until 2.1.  Multiple cameras were possible, but those minor little adjustments to layermasks in 2.1 really make the approach a lot more useful.  (If this had been available when virtualJoysticks camera was written, perhaps it would have been written so that it worked on CocoonJS's canvas+, where it is most likely to be wanted).  If someone can explain or fix cameraToUseForPointers before 2.1 goes to production, I could get this back in before I release this.


BTW,  I updated the link above, so you can see it now works.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...