Animate depth of field

[ragingclaw]

I have been trying to figure out a way to animate the focus distance of the depth of field post process but have come up empty handed. 

I have setup a click event that runs a set of animations changing the (arc) camera's alpha, beta, radius, position, and target. I would like to animate the dof_focus_distance to match that of the camera radius so that the selected object keeps focus.

 

my click event:

scene.onPointerDown = function(e, pickResult) {			
	if (pickResult.hit ) {
		ArcAnimation(0, camera.upperBetaLimit, camera.lowerRadiusLimit, pickResult.pickedMesh.position, pickResult.pickedMesh, true);		
		currentobj = pickResult.pickedMesh;
	}

};

 

I set up the depth of field with the following: (this came for the docs at http://doc.babylonjs.com/tutorials/Using_depth-of-field_and_other_lens_effects)

var params = {
	edge_blur: 1,
	chromatic_aberration: 0,
	distortion: 0,
	dof_focus_distance: 4000,
	dof_aperture: 200,
	grain_amount: 0
};
var lensEffect = new BABYLON.LensRenderingPipeline('lensEffects', params, scene, 1.0, camera);

 

My animation function:

var ArcAnimation = function (toAlpha, toBeta, toRadius, toPosition, obj, arc) {
	var keysAlpha = [], keysBeta = [], keysRadius = [], keysPosition = [];
	var easingFunction = new BABYLON.CubicEase();
	easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
	
	var animCamAlpha = new BABYLON.Animation("animCam", "alpha", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT );
	keysAlpha.push({frame: 0, value: camera.alpha});
	keysAlpha.push({frame: 300, value: toAlpha});

	var animCamBeta = new BABYLON.Animation("animCam", "beta", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT );
	keysBeta.push({frame: 0, value: camera.beta});
	if (arc) {
		keysBeta.push({frame: 150, value: toBeta*0.2});
	}
	keysBeta.push({frame: 300, value: toBeta});

	var animCamRadius = new BABYLON.Animation("animCam", "radius", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT );
	keysRadius.push({frame: 0, value: camera.radius }); 
	keysRadius.push({frame: 300, value: toRadius });

	var animCamPosition = new BABYLON.Animation("animCam", "target", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3 , BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT );
	keysPosition.push({frame: 0, value: camera.target }); 
	
	if (arc) {
		keysPosition.push({frame: 150, value: obj.position.add( new BABYLON.Vector3(0,obj.position.y + obj.position.y*0.5 ,0) )});	
	}
				
	keysPosition.push({frame: 300, value: obj.position });
	
	animCamAlpha.setKeys(keysAlpha);
	animCamBeta.setKeys(keysBeta);
	animCamRadius.setKeys(keysRadius);
	animCamPosition.setKeys(keysPosition);

	animCamAlpha.setEasingFunction(easingFunction);
	animCamBeta.setEasingFunction(easingFunction);
	animCamRadius.setEasingFunction(easingFunction);
	animCamPosition.setEasingFunction(easingFunction);

	camera.animations.push(animCamAlpha);
	camera.animations.push(animCamBeta);
	camera.animations.push(animCamRadius);
	camera.animations.push(animCamPosition);
	scene.beginAnimation(camera, 0, 300, false, 2, function () {
	});
};

 

I attempted to animate the DOF the same but it seems that cannot be done, or I am doing it wrong. I tried like this, among other ways but this was my last attempt before wanting to rage flip my desk:

var keysDofFocusDistance = [], keysDofApeture = [];
var animDof = new BABYLON.Animation("animDof", 'setFocusDepth', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
keysDofFocusDistance.push({frame: 0, value: 4000});
keysDofFocusDistance.push({frame: 100, value: toRadius});
animDof.setKeys(keysDofFocusDistance);
animDof.setEasingFunction(easingFunction);
lensEffect.animations.push(animDof);
scene.beginAnimation(lensEffect.setFocusDepth, 0, 100, false, 2, function () {
	console.log("animated DOF");
});

 

SO, is it possible to animate the depth of field focus (or any properties) at all? Why not allow it to use an object as a focal point? I'm new to babylon so maybe I am just missing something simple. I can modify the value using lensEffect.setFocusDistance(toRadius); but I would really like to get it animated some how. 

thanks,
Charles

 

EDIT: here is a playground http://www.babylonjs-playground.com/#1ENHC8#1

Edited June 14, 2016 by ragingclaw
made a

[GameMonetize]

Hello, I suggest creating a Playground to allow us to help you efficiently

[ragingclaw]

ask and you shall receive! also edited the original post so it doesn't get lost

http://www.babylonjs-playground.com/#1ENHC8#1 zooming out will reset the DOF here

Edited June 14, 2016 by ragingclaw
made a new playground that is better

[GameMonetize]

Here we are

http://www.babylonjs-playground.com/#1ENHC8#2

[ragingclaw]

9 hours ago, Deltakosh said:

Here we are

http://www.babylonjs-playground.com/#1ENHC8#2

YEEEEEEEEEEEA! I was watching your videos yesterday and got the idea to run a ray in the registerBeforeRender function to manually set the focus distance, but this is much less taxing. Thanks David!