Camera animation not smooth when switching camera move styles

Hi, this is my first post on this forum, so let me introduce myself first. My name is Chris and I have recently started learning blend4web and have grown quite accustomed to the API. I have an intership at a 3d/programming company and I'm the programmer for a project. We want to start using blend4web to make interactive demo's.

For this project, I have used camera_animation.js as a basis and continued to build a web shell around it, so it is easy to use for our animators/modelers. The main idea is to have certain camera paths that smoothly walk you trough a set of target/eye locations.

I have mainly used a target camera and every camera animation is smooth, until we wanted to switch to an eye/hover camera, once the camera reaches certain destinations. I figured out that the camera animation does not work for these camera styles, so I tried to work around it.

At the moment, it switches directly to a target camera once it leaves its previous camera target/eye. This however results in the camera instantly rotating to the new target, but the movement will still be the right speed. This results in rough camera movement and is not what we would like it to be.

I hope everything is clear and would appreciate it very much if someone could help.

Thanks.

Hello and welcome to the forums Chris!

Generally, it is better to animate STATIC-typed camera so that it is not affected by any constraints. After the camera reached a required destination, we can change its type to say, TARGET one. But as you have described above, this will result in the camera instant rotation to a new target. Thus, the camera's target point has to be calculated and reassigned so that it matches the current camera's direction, before the camera changed it's type.

This is the way to go in your case, I think.

Thanks for the quick response!

Sorry if I didn't explain it well (English is not my native language)

The camera does stay on the right rotation/orientation when it arrives and changing the camera type works well with EYE camera type (HOVER is not really important for us right now).
That is only when it's standing still.

My problem however is changing the camera type from lets say EYE to TARGET. The very next animation will not be smooth sadly. The animation after that will be, as it was already a TARGET camera.

In my script. Everytime the user clicks on next, "m_app.set_camera_move_style(m_cam.MS_TARGET_CONTROLS);" will be executed before camera animation. So the animation is smooth if the camera is already MS_TARGET_CONTROLS but not when it was m_cam.MS_EYE_CONTROLS.

edit: I made a mistake in the above explanation. It seems that not only when changing from EYE to TARGET but also from TARGET to TARGET makes this occur. It does indeed reset something, but what I
don't understand is why does the switch affect the camera animation.

It looks like once there is a delay between TARGET to TARGET and the animation, it will go smoothly.


STATIC typed camera would be an option for some animations in the scene, but not for all, since we want the user to be able to take over the camera.

Well.
I can't get the exact picture of what you want to achieve and which methods you use, therefore we can find a solution much faster if you can provide me a simplified version of your scene, so that we can see the problem in action.

I understand sorry. I will make an example scene.

Thanks :)

I have prepared an example scene and I have left only the important elements in to show my problem.

link

On top of the screen you see a simple menu. If you click on the right orange button it will go to the next camera location, same with the left button for previous.

In the bottom left corner you see a green button, which u can toggle if you click on it. If the button is green it will be smooth, but if the button is red you will see that the camera quickly looks at the target, but slowly moves to the eye location.

When the red color is on it will execute this code:

function move_style(){
    console.log("change to target");
    m_app.set_camera_move_style(m_cam.MS_TARGET_CONTROLS);

    (function delay () {
        setTimeout(function () {
            //console.log(_delta_target);

            if(_delta_target < 0.02){
                m_app.set_camera_move_style(m_cam.MS_EYE_CONTROLS);
                console.log("change to eye");
            } else {
                delay();
            }

        }, 100)
    })();
}

As you can see, it changes the camera move style to TARGET everytime a user clicks on next. Once it arrives it will change to EYE.

When the green color is active, it only uses the camera animation function, but doesn't change the camera's styles (it doesn't execute this function). This is when it's smooth.

Thanks for the example. Now we can see the picture.

This problem occurs because of the implicit camera pivot recalculation inside the camera.set_move_style method. For target camera it is just being placed to 10 meters in front of the camera.

What you can do to fix this issue is to set the pivot to the right value just after calling the set_move_style function. This can be done with the set_pivot method.

Thank you very much for your time!

This seemed to have worked for switching TARGET to TARGET. I use the get_pivot() method to get the pivot of the old TARGET and save it to set_pivot after changing camera styles.

I'm almost there, but how would I get the pivot point of the current EYE camera, because the get_pivot method seems to crash the code when the current camera style is EYE. Probably because it doesn't have a pivot right?

I tried _cam_anim.current_target, but that seems to instantly rotate to the current target, as expected ofcourse.

How would you calculate or get the current pivot of the EYE camera if the user rotated the camera?

thanks!

Well. If we'll take a look at the app, we can see that the camera switches to EYE only after reaching some specified point. So, if we store the last pivot before switching to EYE camera into some global variable we can then restore it whenever we need it. In our case we should assign it to the camera after changing its type to TARGET again. I think, this should work.

Here is my new example (Red/Green button is disabled):

link

As you can see, the animation is smooth only if you don't look around with the EYE camera.
But if you look around and then navigate to the next location, it will use the old pivot and jump to it.

What I have tried until now is this:

Works for TARGET to TARGET because I can use get_pivot:

m_app.set_camera_move_style(m_cam.MS_TARGET_CONTROLS);
 ////////some statements inbetween////////////
var old_pivot = m_cam.get_pivot(camobj, _cam_anim.current_target);
m_app.set_camera_move_style(m_cam.MS_TARGET_CONTROLS);
m_cam.set_pivot(camobj, old_pivot);

The next code doesn't work:

m_app.set_camera_move_style(m_cam.MS_EYE_CONTROLS);
////////some statements inbetween////////////
var old_pivot = m_cam.get_pivot(camobj, _cam_anim.current_target); //No error but  code execution will stop
m_app.set_camera_move_style(m_cam.MS_TARGET_CONTROLS);
m_cam.set_pivot(camobj, old_pivot);

This does work but instantly rotates the camera to the old pivot.

m_app.set_camera_move_style(m_cam.MS_EYE_CONTROLS);
////////some statements inbetween////////////
var old_pivot = _cam_anim.current_target;
m_app.set_camera_move_style(m_cam.MS_TARGET_CONTROLS);
m_cam.set_pivot(camobj, old_pivot);

The user can look around, so if I use the old pivot point before switching to EYE it will look at the old again and not use the new one based on the target the eye looks at.