Jump to content

[SOLVED] Camera jittering when following scene graph objects


Recommended Posts

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:


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:


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:


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

Maybe it's related to:

or ?



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

Thanks anyway to the babylon engine community !

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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.


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 :)

Link to comment
Share on other sites

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 :


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 :


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 !!

Link to comment
Share on other sites

[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  :)

Link to comment
Share on other sites

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 :


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 ?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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 :D

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 !

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...