Jumpy animation question (disregard)

Questions
1

edit: I think I tracked down the problem, I think it is how I’m generating keyframes

I’m trying to create some vehicle animations but they always seem jumpy. I’m generating the keyframes for the vehicle’s position, yaw, roll, pitch angles, and each wheel’s rotation and steering angles from a path following script I wrote in another program, so there is one keyframe for every frame (30fps). I then push all the animations into an AnimationGroup. The animation always seems jumpy no matter how much I simplify the scene, am I doing something wrong? Is there a better way to do it? Here is the link and the code and a snippet from the keyframe file I generated, I’m not sure how to replicate it in a playground.

function createVehicleAnimation(vehicle,path){
	// create dummy mesh to parent
	var bodyDummy = new BABYLON.Mesh(vehicle.name+"_dummy", scene);
	var bodyMeshTask = assetsManager.addMeshTask(vehicle.name+"_Body","",path,vehicle.filename);

	// Loads the not wheels parts of the vehicle and adds Position, yaw, roll, pitch animation keyframes
	bodyMeshTask.onSuccess = function(task) {
		task.loadedMeshes[0].rotation.x = Math.PI/2;
		task.loadedMeshes[0].rotation.y = Math.PI;
		task.loadedMeshes[0].parent = bodyDummy;
		var animPos = new BABYLON.Animation(vehicle.name+"_Body_Pos", "position", fps, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
		var animYaw = new BABYLON.Animation(vehicle.name+"_Body_Yaw", "rotation.y", fps, BABYLON.Animation.ANIMATIONTYPE_FLOAT,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
		var animRoll = new BABYLON.Animation(vehicle.name+"_Body_Roll", "rotation.z", fps, BABYLON.Animation.ANIMATIONTYPE_FLOAT,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
		var animPitch = new BABYLON.Animation(vehicle.name+"_Body_Pitch", "rotation.x", fps, BABYLON.Animation.ANIMATIONTYPE_FLOAT,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
		animPos.setKeys(vehicle.keys[0]);
		animYaw.setKeys(vehicle.keys[1]);
		animRoll.setKeys(vehicle.keys[2]);
		animPitch.setKeys(vehicle.keys[3]);
		animationGroup.addTargetedAnimation(animPos,bodyDummy);
		animationGroup.addTargetedAnimation(animYaw,bodyDummy);
		animationGroup.addTargetedAnimation(animRoll,bodyDummy);
		animationGroup.addTargetedAnimation(animPitch,bodyDummy);
    }
	
	// For each wheel, adds rotation, and steering (if applicable) animation keyframes. Parents the wheels to the bodyDummy
	wheeltasks = []
	for (i=0; i<vehicle.wheels.length; i++) {
		let wheel = vehicle.wheels[i];
		let wheelDummy = new BABYLON.Mesh(vehicle.name+wheel.name+"_dummy", scene);
		wheelDummy.parent = bodyDummy
		let wheeltask = assetsManager.addMeshTask(wheel.name,"",path,wheel.filename);
		wheeltasks.push(wheeltask);
		wheeltask.onSuccess = function(task) {
			task.loadedMeshes[0].rotation.y = 3.14;
			task.loadedMeshes[0].parent = wheelDummy;
			wheelDummy.position = new BABYLON.Vector3(wheel.coords[0],wheel.coords[1],wheel.coords[2]);		
			wheelRotate = new BABYLON.Animation(vehicle.name+wheel.name+"_rotate","rotation.x",fps,BABYLON.Animation.ANIMATIONTYPE_FLOAT,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
			wheelRotate.setKeys(wheel.keys[0]);
			animationGroup.addTargetedAnimation(wheelRotate,wheelDummy);
			if (wheel.steer) {
				wheelSteer = new BABYLON.Animation(vehicle.name+wheel.name+"_steer","rotation.y",fps,BABYLON.Animation.ANIMATIONTYPE_FLOAT,BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
				wheelSteer.setKeys(wheel.keys[1]);
				animationGroup.addTargetedAnimation(wheelSteer,wheelDummy);
			}
		}
	}	
}

var WorkVan1_positionkeys = [
{frame: 0,value: new BABYLON.Vector3(10.8124,-0.2833,5.9682)},
{frame: 1,value: new BABYLON.Vector3(10.8125,-0.2834,5.9694)},
{frame: 2,value: new BABYLON.Vector3(10.8125,-0.2839,5.9730)},
{frame: 3,value: new BABYLON.Vector3(10.8126,-0.2848,5.9791)},
{frame: 4,value: new BABYLON.Vector3(10.8127,-0.2859,5.9875)},
{frame: 5,value: new BABYLON.Vector3(10.8129,-0.2874,5.9984)},
{frame: 6,value: new BABYLON.Vector3(10.8131,-0.2892,6.0117)},
{frame: 7,value: new BABYLON.Vector3(10.8134,-0.2913,6.0274)},
{frame: 8,value: new BABYLON.Vector3(10.8136,-0.2938,6.0455)},
{frame: 9,value: new BABYLON.Vector3(10.8140,-0.2965,6.0661)},
{frame: 10,value: new BABYLON.Vector3(10.8143,-0.2997,6.0891)},
{frame: 11,value: new BABYLON.Vector3(10.8147,-0.3031,6.1144)},
{frame: 12,value: new BABYLON.Vector3(10.8152,-0.3069,6.1422)},
{frame: 13,value: new BABYLON.Vector3(10.8157,-0.3110,6.1725)},
{frame: 14,value: new BABYLON.Vector3(10.8162,-0.3154,6.2051)},

2

Also, I’m pretty sure the jumpiness is not in the keyframes I’m generating, I’ve plotted them in Excel and can’t see any problems. Also, I have rendered them out using CCapture and it plays smooth.

3

Hello could you reproduce the issue in the playground with only one or two boxes ?

This might help a lot troubleshooting.

4

Here, try this, I can’t get my models so I used a shark for the body and hearts for the wheels :slight_smile:

The key frames are the first 1,917 lines
https://playground.babylonjs.com/#FJKV2K#4

This may not be as “jumpy” as my example above since I only have one animation. I just want to know if there is anything I can do to optimize it to smooth it out.

Thanks!

5

Ok, I think there is something wrong with the way I’m creating the keyframes. Disregard for now…

2 Likes