Bug in ActionManager system - wrong event positionning in some cases

[Vousk-prod.]

Hi !

I think I pointed a bug in ActionManager...

 

Before discovering this marvelous system, I used to use scene.pick(evt.x, evt.y)

 

But when the canvas is not full screen absolute position (0, 0), the (evt.x, evt.y) click position is not the good one for scene.pick (because it is considered as relative to the canvas, but the returned values are in fact absolute inside the HTML page, we then need to take account of the canvas position itself to correct the evt position)

 

To correct that, I wrote this :

evtRelPos = getPointerEventRelativePosition(evt, canvas);function getPointerEventRelativePosition( evt, element ){    return { x: evt.clientX - element.getBoundingClientRect().left, y: evt.clientY - element.getBoundingClientRect().top };}scene.pick(evtRelPos.x, evtRelPos.y);

It was all good.

 

But now with the ActionManager I again suffer from the wrong positionning of the events when the canvas is lost somewhere in the HTML page. Maybe it would be easy to correct this with the little piece of code above.

[GameMonetize]

This should work I'm using evt.offsetX which is supposed to take care of the position

[GameMonetize]

Here is an example that works even when the canvas is not fullscreen:

http://www.babylonjs.com/playground/?16

[Vousk-prod.]

Yes... but no

 

evt.offsetX is stupid, it doesn't take correctly CSS positionning in account, only HTML positionning (or something like that...). Don't even mention when a page is composed of a complex mix of absolute, relative, and fixed elements.

 

Look at your exemple through a little jsfiddle :

http://jsfiddle.net/vouskprod/3ueww/

 

Try to locate your mesh, you will need to click above them...

With my little snippet (getPointerEventRelativePosition), your event logic should be fixed.

[GameMonetize]

Ok I did a push with this change. Let me know if this is working. I'm also concerned about performance for this solution (sounds like the price of getBoundingClientRect is not that much)

[Vousk-prod.]

Hmmm... I see no difference ... which version of bjs should I use to test ?

(I tried 1.12, 1.13-beta and 1.13-beta-debug)

 

Here is the fiddle with 1.13-beta, same behaviour as before :

http://jsfiddle.net/vouskprod/3ueww/

 

[EDIT : it works, I forgot to add hand.js lib in this test, but another bug, see post below]

[Vousk-prod.]

In fact, I updated the fiddle to demonstrate that the code is working until we scroll the html page.

 

Try to scroll just a little (reduce your browser size or increase the CSS .some_space class width or height) and you'll have to click your object at a distance equal to scroll amount.

 

http://jsfiddle.net/vouskprod/3ueww/

[Vousk-prod.]

I've just did a new fiddle with some debug log to show difference between ActionManager events positionning and classic one.

Scroll the page to see the problem with ActionManager system (I put a 2000px wide DIV so I'm pretty sure everybody will be able to scroll at least horizontally  )

 

http://jsfiddle.net/vouskprod/DqRUn/

 

(classic positionning calculations and logging info are at the end of the script)

[GameMonetize]

This works for me. Did you clear your cache?

[Vousk-prod.]

Ooh, you know what, I've just noticed that it doesn't work for me... in Firefox. But it works in IE (I guess you're using IE).

I cannot test with Chrome on this PC.

[Vousk-prod.]

(no relation : in IE the response time to change hovered mesh's color to white is a little longer than in Firefox - I'm on an old PC here, maybe it's related -)

[GameMonetize]

but I use the same code as you. this should work then if your code works for you in Firefox

[Vousk-prod.]

Hrm, that's strange, there must be a difference somewhere.

I'll try to figure out the problem, where did you make all these events positionning stuff in your code ?

 

About performance : I did some test here using getBoundingClientRect and it seems that on older PCs it is a little time consuming compared to simple canvas.style.left, canvas.width..., but those don't take windows resizing or dynamic CSS in account, I'll do some experiment with resize event listeners, I'll let you know my results.

[Vousk-prod.]

After some tests getBoundingClientRect seems actually little time consuming. The only way I found is to set a permanent var canvasBounds = getBoundingClientRect(), use this var for every calculations relative to positionning, and update this var each time elements are resized. I put that in the window.addEventListener("resize"), but sometimes the canvas is resized and not the window, I then should use something like canvas.addEventListener("resize") but it seems to be never thrown, it's strange...

Deltakosh I tried to locate where you are using getBoundingClientRect(), to try to figure out the difference between my use which works in every browser and yours which bug in Firefox, but I didn't manage to find this function in your code...

(is it the hand.js file I have to update ?)

[GameMonetize]

For some reasons It was not commited Oo

 

This should be good now (in scene.ts)

[Vousk-prod.]

So the bjs.1.13.beta I'm using in the fiddle to do some tests also does not contain the fix...

That would explain why it doesn't work.

[Vousk-prod.]

Ah ah your code works perfectly well now that it has been commited

No need to debug anything!

 

Regarding getBoundingClientRect()'s cost, this method go recursively through all DOM elements and parents to calculate the actual final pos and width of the element (taking in account margins, paddings, borders, relative/absolute positionning of everything, etc). On my side I confirmed that on older PCs or mobiles/tablets the positionning of elements based on this function is a little delayed when camera or objects are moving fast (positionning is done every frame...), and it cleary makes the whole scene less fluid. That's why I decided to use the following technique instead of recalculating getBoundingClientRect each call (will be a perfect solution when I'll be able to catch a resize event of canvas, but I only manage to catch resize event of windows, don't know why) :

 

The only way I found is to set a permanent var canvasBounds = getBoundingClientRect(), use this var for every calculations relative to positionning, and update this var each time elements are resized. I put that in the window.addEventListener("resize"), but sometimes the canvas is resized and not the window, I then should use something like canvas.addEventListener("resize") but it seems to be never thrown, it's strange...

 

For your code, we can just watch and wait for users feedbacks in case of numerous event listeners. But according to your post :

 

Each time the mouse is moving it checks ALL actionManager to check if they have a trigger to launch. That's why

 

I don't exactly know where and how you call getBoundingClientRect(), but if it's really so often I can tell you for sure that it will make a big performance drop sooner or later...

[GameMonetize]

I'm working on a way to optimize that

[Vousk-prod.]

I'm sure you do. With thousands other improvements and debugging at the same time, while answering tons of forum posts

Do you ever sleep, sometimes ?

[GameMonetize]

not too much:)