Forum

Hard Flip on Camera Animation

13 April 2018 12:53
Hi,

I am using a target camera in my application.
I am using "camera animation function" from blend4web demo application. (refer below code)
I want to record few viewpoints and associate to thumbnails, and user can click that thumbnail to initiate camera animation land to the selected view.
However, I am experiencing hardflip at the end of the animation.
Could you please advise me how to make smooth animaion?

You can try to click 4th thumbnail and click 5th thumbnail at below application link

http://view.realvu3d.com/realvu_t/Nike_29852017-B-XC_2D3D.html?view=1&ShopButton=0


I have debugged down and find that the flip happens at below 2 points.

m_cam.target_set_trans_pivot(camobj,[0.1838626116514206, 0.0975198894739151, -7.0947113037109375],[0.17815424501895905, 0.13133831322193146, 0.24794889986515045]);
// m_cam.target_set_trans_pivot(camobj,[0.18550093472003937, 0.2878197729587555, -7.271351337432861],[0.17801932990550995, 0.13274163007736206, 0.248598113656044]);
m_cam.target_set_trans_pivot(camobj,[0.18550093472003937, 0.2878197729587555, -7.271351337432861],[0.17801932990550995, 0.13274163007736206, 0.248598113656044]);


Is there way to avoid this flip?
Below I attach full eye/target points and animation code that I have used
====
m_cam.target_set_trans_pivot(camobj,[0.11589650809764862, -7.797109603881836, 0.23322825133800507],[0.21059438586235046, -0.2060992568731308, 0.09184259176254272]);
m_cam.target_set_trans_pivot(camobj,[0.11760269105434418, -7.5989274978637695, 0.049272000789642334],[0.20913854241371155, -0.19095583260059357, 0.09884828329086304);
m_cam.target_set_trans_pivot(camobj,[0.11911498755216599, -7.4232659339904785, -0.11378012597560883],[0.20787575840950012, -0.17782051861286163, 0.10492497682571411);
m_cam.target_set_trans_pivot(camobj,[0.12080177664756775, -7.2273359298706055, -0.29564595222473145],[0.2064978927373886, -0.16348810493946075, 0.11155548691749573]);
m_cam.target_set_trans_pivot(camobj,[0.12236254662275314, -7.04604434967041, -0.4639241099357605],[0.20525172352790833, -0.15052565932273865, 0.11755220592021942]);
m_cam.target_set_trans_pivot(camobj,[0.12404933571815491, -6.850114345550537, -0.6457899212837219],[0.20393601059913635, -0.1368398815393448, 0.12388356029987335]);
m_cam.target_set_trans_pivot(camobj,[0.1256100982427597, -6.668822765350342, -0.814068078994751],[0.2027473747730255, -0.12447577714920044, 0.12960347533226013]);
m_cam.target_set_trans_pivot(camobj,[0.12726780772209167, -6.47627067565918, -0.9927982687950134],[0.20151516795158386, -0.11165861785411835, 0.13553299009799957]);
m_cam.target_set_trans_pivot(camobj,[0.12886735796928406, -6.290474891662598, -1.165257215499878],[0.20035576820373535, -0.09959869831800461, 0.14111217856407166]);
m_cam.target_set_trans_pivot(camobj,[0.13047659397125244, -6.103553295135498, -1.3387614488601685],[0.19921864569187164, -0.08777046948671341, 0.1465841829776764]);
m_cam.target_set_trans_pivot(camobj,[0.1321440041065216, -5.909875392913818, -1.518536925315857],[0.1980714201927185, -0.07583717256784439, 0.15210479497909546]);
m_cam.target_set_trans_pivot(camobj,[0.13377262651920319, -5.720701694488525, -1.6941314935684204],[0.19698132574558258, -0.06449823826551437, 0.15735045075416565]);
m_cam.target_set_trans_pivot(camobj,[0.13557575643062592, -5.511259078979492, -1.8885397911071777],[0.19580955803394318, -0.05230963975191116, 0.16298916935920715]);
m_cam.target_set_trans_pivot(camobj,[0.13694263994693756, -5.352488040924072, -2.0359139442443848],[0.19494585692882538, -0.04332564026117325, 0.16714537143707275]);
m_cam.target_set_trans_pivot(camobj,[0.13856157660484314, -5.164440155029297, -2.210463285446167],[0.1939503401517868, -0.032970327883958817, 0.17193597555160522]);
m_cam.target_set_trans_pivot(camobj,[0.1402386724948883, -4.969635963439941, -2.3912839889526367],[0.19295041263103485, -0.02256922796368599, 0.17674776911735535]);
m_cam.target_set_trans_pivot(camobj,[0.1418479084968567, -4.782714366912842, -2.5647881031036377],[0.1920209527015686, -0.012901125475764275, 0.18122045695781708]);
m_cam.target_set_trans_pivot(camobj,[0.14345714449882507, -4.595792770385742, -2.7382922172546387],[0.19112087786197662, -0.0035387189127504826, 0.185551717877388]);
m_cam.target_set_trans_pivot(camobj,[0.14508576691150665, -4.406619071960449, -2.913886785507202],[0.19023987650871277, 0.0056252446956932545, 0.18979117274284363]);
m_cam.target_set_trans_pivot(camobj,[0.14669500291347504, -4.21969747543335, -3.087390899658203],[0.18939894437789917, 0.014372576028108597, 0.19383788108825684]);
m_cam.target_set_trans_pivot(camobj,[0.14831393957138062, -4.031649589538574, -3.2619402408599854],[0.18858259916305542, 0.022864138707518578, 0.1977662742137909]);
m_cam.target_set_trans_pivot(camobj,[0.14984562993049622, -3.853736162185669, -3.4270827770233154],[0.187837615609169, 0.030613241717219353, 0.20135119557380676]);
m_cam.target_set_trans_pivot(camobj,[0.151493638753891, -3.6623103618621826, -3.6047677993774414],[0.18706579506397247, 0.03864159435033798, 0.2050652951002121]);
m_cam.target_set_trans_pivot(camobj,[0.15316104888916016, -3.468632459640503, -3.78454327583313],[0.18631626665592194, 0.04643811285495758, 0.20867213606834412]);
m_cam.target_set_trans_pivot(camobj,[0.15477998554706573, -3.2805845737457275, -3.959092617034912],[0.18561871349811554, 0.05369396507740021, 0.2120288610458374]);
m_cam.target_set_trans_pivot(camobj,[0.15637953579425812, -3.0947887897491455, -4.131551742553711],[0.18495872616767883, 0.060559067875146866, 0.21520480513572693]);
m_cam.target_set_trans_pivot(camobj,[0.1579984724521637, -2.90674090385437, -4.306101322174072],[0.18432030081748962, 0.06719984859228134, 0.2182769924402237]);
m_cam.target_set_trans_pivot(camobj,[0.1595689356327057, -2.724323272705078, -4.475424766540527],[0.1837294101715088, 0.07334616035223007, 0.2211204171180725]);
m_cam.target_set_trans_pivot(camobj,[0.16125573217868805, -2.528393268585205, -4.657290458679199],[0.18312592804431915, 0.07962347567081451, 0.2240244448184967]);
m_cam.target_set_trans_pivot(camobj,[0.16288435459136963, -2.339219331741333, -4.832885265350342],[0.18257389962673187, 0.08536563068628311, 0.22668088972568512]);
m_cam.target_set_trans_pivot(camobj,[0.1645032912492752, -2.1511714458465576, -5.007434844970703],[0.18205498158931732, 0.09076328575611115, 0.22917796671390533]);
m_cam.target_set_trans_pivot(camobj,[0.1661028414964676, -1.9653756618499756, -5.179893970489502],[0.18157149851322174, 0.09579245001077652, 0.23150457441806793]);
m_cam.target_set_trans_pivot(camobj,[0.16776055097579956, -1.772823691368103, -5.35862398147583],[0.18110106885433197, 0.10068579018115997, 0.23376834392547607]);
m_cam.target_set_trans_pivot(camobj,[0.16937948763370514, -1.5847759246826172, -5.533173561096191],[0.18067175149917603, 0.10515157133340836, 0.23583431541919708]);
m_cam.target_set_trans_pivot(camobj,[0.17089177668094635, -1.4091144800186157, -5.696225643157959],[0.18029756844043732, 0.10904370248317719, 0.23763491213321686]);
m_cam.target_set_trans_pivot(camobj,[0.17256887257099152, -1.2143105268478394, -5.87704610824585],[0.1799129694700241, 0.11304427683353424, 0.23948566615581512]);
m_cam.target_set_trans_pivot(camobj,[0.1741878092288971, -1.0262627601623535, -6.051595687866211],[0.1795719861984253, 0.11659114807844162, 0.24112653732299805]);
m_cam.target_set_trans_pivot(camobj,[0.1757485717535019, -0.8449711799621582, -6.219873905181885],[0.1792714148759842, 0.11971767246723175, 0.24257293343544006]);
m_cam.target_set_trans_pivot(camobj,[0.17740628123283386, -0.6524192690849304, -6.398603916168213],[0.1789824366569519, 0.12272348999977112, 0.24396349489688873]);
m_cam.target_set_trans_pivot(camobj,[0.17905429005622864, -0.46099334955215454, -6.57628870010376],[0.17872607707977295, 0.1253901720046997, 0.24519716203212738]);
m_cam.target_set_trans_pivot(camobj,[0.18066352605819702, -0.2740715742111206, -6.74979305267334],[0.17850548028945923, 0.12768474221229553, 0.2462586760520935]);
m_cam.target_set_trans_pivot(camobj,[0.1822824627161026, -0.08602377027273178, -6.924342632293701],[0.178313210606575, 0.1296846568584442, 0.2471838891506195]);
m_cam.target_set_trans_pivot(camobj,[0.1838626116514206, 0.0975198894739151, -7.0947113037109375],[0.17815424501895905, 0.13133831322193146, 0.24794889986515045]);
m_cam.target_set_trans_pivot(camobj,[0.18550093472003937, 0.2878197729587555, -7.271351337432861],[0.17801932990550995, 0.13274163007736206, 0.248598113656044]);
m_cam.target_set_trans_pivot(camobj,[0.18711017072200775, 0.47474154829978943, -7.444855690002441],[0.17791646718978882, 0.1338115632534027, 0.24909308552742004]);
m_cam.target_set_trans_pivot(camobj,[0.1887969672679901, 0.6706715822219849, -7.626721382141113],[0.1778402030467987, 0.13460491597652435, 0.2494601011276245]);
m_cam.target_set_trans_pivot(camobj,[0.1903383433818817, 0.8497111201286316, -7.792909145355225],[0.17779873311519623, 0.1350361853837967, 0.24965962767601013]);
m_cam.target_set_trans_pivot(camobj,[0.1919184923171997, 1.0332547426223755, -7.963277816772461],[0.17778421938419342, 0.13518717885017395, 0.2497294694185257]);
=====
function start_camera_animation(camobj, pos_view, pos_target) {
// console.log("_cam_anim.current_target 0:",_cam_anim.current_target);

// retrieve camera current position
m_cam.target_get_pivot(camobj, _cam_anim.current_target);
m_trans.get_translation(camobj, _cam_anim.current_eye);

// console.log("_cam_anim.current_target:",_cam_anim.current_target);


// set camera starting position
m_vec3.copy(_cam_anim.current_target, _cam_anim.starting_target);
m_vec3.copy(_cam_anim.current_eye, _cam_anim.starting_eye);

// set camera final position
m_vec3.copy(pos_view, _cam_anim.final_eye);
// m_vec3.copy(_cam_anim.current_eye, _cam_anim.final_eye);

m_vec3.copy(pos_target, _cam_anim.final_target);

// start animation
_delta_target = ANIM_TIME;
_cam_anim.timeline = m_time.get_timeline();
// m_cam.correct_up(camobj, m_util.AXIS_Z, true);
}

function init_camera_animation(camobj) {

var t_sensor = m_ctl.create_timeline_sensor();
var e_sensor = m_ctl.create_elapsed_sensor();

var logic_func = function(s) {
// s[0] = m_time.get_timeline() (t_sensor value)
return s[0] - _cam_anim.timeline < ANIM_TIME;
}

var cam_move_cb = function(camobj, id, pulse) {
// waitEnter();

if (pulse == 1) {
if (_anim_stop) {
_cam_anim.timeline = -ANIM_TIME;
return;
}

m_app.disable_camera_controls();
donotchangemenue=true;

// elapsed = frame time (e_sensor value)
var elapsed = m_ctl.get_sensor_value(camobj, id, 1);
var delta = elapsed / ANIM_TIME;

m_vec3.subtract(_cam_anim.final_eye, _cam_anim.starting_eye, _vec3_tmp);
m_vec3.scaleAndAdd(_cam_anim.current_eye, _vec3_tmp, delta, _cam_anim.current_eye);

_delta_target -= elapsed;
delta = 1 - _delta_target * _delta_target / (ANIM_TIME * ANIM_TIME);
m_vec3.subtract(_cam_anim.final_target, _cam_anim.starting_target, _vec3_tmp);
m_vec3.scaleAndAdd(_cam_anim.starting_target, _vec3_tmp, delta, _cam_anim.current_target);
console.log("ce:",_cam_anim.current_eye,"ct",_cam_anim.current_target);

// alert('hi');
m_cam.target_set_trans_pivot(camobj, _cam_anim.current_eye, _cam_anim.current_target);

} else {
// console.log("p0");

m_app.enable_camera_controls(false);
donotchangemenue=false;
if (!_anim_stop)
{
m_cam.target_set_trans_pivot(camobj, _cam_anim.final_eye,
_cam_anim.final_target);
// m_cam.correct_up(camobj, m_util.AXIS_Z, true);
update_back_slide();
// if(isNaN(fov)==false){
// console.log("fov in:",fov);
// if(fov!=init_fov){
// adjustScalForFov(init_fov,fov,camobj);
// }
// }else{
// fov=init_fov;
// }
//

}
else
_anim_stop = false;
}
}

m_ctl.create_sensor_manifold(camobj, "CAMERA_MOVE", m_ctl.CT_CONTINUOUS,
[t_sensor, e_sensor], logic_func, cam_move_cb);
}
16 April 2018 14:49
See the attached project. It can help.
There a vertical axis animation is used.
Alexander (Blend4Web Team)
twitter
17 April 2018 06:11
Thanks!
I have applied vertical axis animation.
It looks a bit better but still have hard transition.
I think if I can increase portion of vertical animation time it would be better.
Is there such nobe that I can control to increase vertical animation time?
http://view.realvu3d.com/realvu_v42/Nike_29852017-B-XC_2D3D.html?view=1&ShopButton=0

Regards,
Justin
 
Please register or log in to leave a reply.