Jump to content

Recommended Posts

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();
	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 });


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



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

Edited by ragingclaw
made a
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...