[SOLVED] Camera jittering when following scene graph objects

[GGL]

This is my first post here and to begin with, I'd like to give big congratulations to Babylon.js team ! Your framework is really impressive and the best yet for my use case (pedagogical web game about simple astronomy facts)

Now, my problem:

http://babylonjs-playground.com/#1QJOWT#1

I can't find a way for positioning the camera correctly according to the computed scene graph before the render... so the sphere at the center is jittering, and it gets worse if we increase the speed parameter.

The complete system looks like this:

http://babylonjs-playground.com/#1QJOWT#3

I want the camera to stay at earth position and to center on the moon.

I've tried fiddling with scene.beforeCameraRender with no success... I guess I don't understand something about the internal priorities used before rendering each frame. c.f. the not working:

http://babylonjs-playground.com/#1QJOWT#2

I've  searched the forum but couldn't find any solution.

Maybe it's related to:

or ?

http://www.html5gamedevs.com/topic/5509-how-do-you-guys-write-your-timestep-stuff-any-advice/

 

Thanks a lot for any help if anyone has a clue !

Thanks anyway to the babylon engine community !

[GameMonetize]

Hello just set the camera parent to earth and set the lockedTarget to moon:

http://babylonjs-playground.com/#1QJOWT#4

[GGL]

Hello Delta and thanks for the rapid answer, (and thanks for all your work on Babylon.js)

Indeed, there is no more jittering

but in your proposal the camera is actually centered on the earth (the moon is the smallest sphere).

Why is that  when camera.lockedTarget = moon; ?

My goal is to have the camera position at the earth and the camera looking at the moon. Thus the moon appears in the center of the view port and you can see it's phases.
as in http://babylonjs-playground.com/#1QJOWT#1

 

[GGL]

To be more precise, I will have more objects in my scene graph and I want a generic system for moving the camera.

The idea is to have a hook object which the camera should inherit position and a focus object which should always remain at the center of the view-port.

http://babylonjs-playground.com/#1QJOWT#6

In this example the position of earth seems well inherited but the focus is far away from center. How can I have the camera keep the focus object in the middle of the screen ?

I'm afraid, I don't understand how the lockedTarget property affects the camera object.

I guess my synthetic question is :

How can you position the camera on any arbitrary object and then orientate the camera to make it center on another arbitrary object ? Re-doing this before each frame render and hopefully without jitter

[GameMonetize]

Ok it took me times to understand what was going on

So because the camera inherits from a rotating object, the camera is not able to keep its target

 

So here is the solution: http://babylonjs-playground.com/#1QJOWT#7

[GGL]

Thanks @Deltakosh for coping with me !

Indeed the parenting of the camera to a rotating object was interfering with the tracking... and your last playground example shows the objects as intended (and the camera is well positioned)... but there is still this awful jittering !

You can see it better when speed is increased :

http://babylonjs-playground.com/#1QJOWT#8

Notice how the moon appears not perfectly at the center but jitters a bit to the left, as if the camera alignment lags one frame behind.

I wonder if this could be resolved using scene.beforeCameraRender ? Without success :

http://babylonjs-playground.com/#1QJOWT#9

Why is this example not updating the camera's position as the precedent does ?

By the way, I see this in the Scene class documentation :

    beforeCameraRender : () => void

    Function triggered before the camera is rendered, with the concerned camera passed in argument.

But how do I pass the camera as argument ?

 

Well, this is quite a brain-ache and I'm sorry for imposing it to the community. On the other hand there isn't so much documentation about these capabilities of Babylon.js (scene graph dependency calculations and render loop priorities) so the thread matters. Maybe there's even a bug hidden somewhere ?

Hoping we can fix this and understand what's happening behind the scene !!

[Wingnut]

[massive worthless text deleted here]

GGL, I don't know if it would work for you, but BJS mesh allow setPivotMatrix (set pivot point)... used like... mesh.setPivotMatrix(BABYLON.Matrix.Translation(50, 0, 0));  Then rotate the mesh. 

Anyway, read-on.  Adam has a solution in the next post.  Thanks Adam!

"Just a spoonful of computeWorldMatrix helps the medicine... go down."  - Mary Poptart 

[adam]

http://babylonjs-playground.com/#1QJOWT#12

[GGL]

Have I already thanked the BJS community ?

You are awesome ! Thanks @adam for your solution. Indeed, I needed .computeWorldMatrix(true) !!

For documentation here is my commented working code :

http://babylonjs-playground.com/#1QJOWT#14

Thanks again @Deltakosh @Wingnut and @adam !

I'll post my complete work in the Demos and projects section when it's presentable

Last question : How do I mark this thread as solved ?

[jerome]

just edit the title in the first post and add "[SOLVED]"

[Wingnut]

And you can edit your last post... and delete the source code text, but leave the playground url there (we can see the code, there). 

(If you want-to, GGL) 

You are certainly a gracious and cordial forum user, GGL.    Nice manners!  Welcome aboard, how ya doon? 

Let's make Adam and Jerome teach us WHY we needed those computeWorldMatrix things.  heh

Let's ask both/all of these professional-grade programmers (and Deltkakosh, who is space-alien/God-grade programmer)... why we needed to add those.

Let's ask EVERYONE... where our scene.autoUnWiggly = true; ... is located-at.

I think... this is a skeleton that lives in @jerome's closet.  It has come to visit and haunt.    I think it's a "give and take" thing.  In order to have more power in ONE area of BJS, we must sometimes do these computeWorldMatrix things when we are spinning stuff around other spinning stuff.  (pardon my advanced tech lingo). 

It's just a theory.  I am wrong... 41% of the time... so... you know... don't put any weight on my floor  (unless you enjoy falling through floors).   

My words are like bandaids.  "Guaranteed sterile until opened".  My words are guaranteed fact until tested for truth. 

[adam]

7 minutes ago, Wingnut said:

Let's make Adam and Jerome teach us WHY we needed those computeWorldMatrix things.  heh

getAbsolutePosition uses the worldMatrix and to get the correct worldMatrix all your parents need their worldMatrices updated (and in the correct order).

[Wingnut]

Wow.  Excellent.  Thx Adam!  (memorize, memorize, memorize)

[GameMonetize]

I forgot to publish my fix

Now this should work:  http://babylonjs-playground.com/#1QJOWT#7 (Force cache refresh)

[GGL]

WOW !!

 

Now you must tell us what you've done !!

[GGL]

Hello @Wingnut ! You're very mannered as well

About the code snippet, I wonder, is the playground solid and long-term reliable enough for holding software solutions ?

And It's nice to learn here between you "Advanced members" ! Thx adam for the explanation by the way, I get the stuff I think now

What I don't get is the fix from delta guru... where is it commited ? How do I access it ? What magic lays beyond ?

This thread is looking more and more interesting !

Joyful salutations !

[adam]

Looks like it was this:

https://github.com/BabylonJS/Babylon.js/commit/6f50ac94f77ac315e29f23194e1ff66231ebeb2b

[GameMonetize]

Yep

[GGL]

OK,

Well I guess I'll use the nightly babylon.js then

That's a new cool core feature for BJS that was born under our eyes @Deltakosh you rock !!

So nice to watch free software unstoppable and careful building, thx for the marvels dear coders !