Search the Community

Hi, I noticed a problem with VRDeviceOrientationFreeCamera: when the window is resized, the content displayed by rig cameras get stretched. It looks exactly the same as when using one camera without calling engine.resize(). I am aware of this post, but I don't use distortion correction, hence there is no post process. I see that it has to do with metrics vResolution, but I don't know if I can update metrics after camera is created and force changes. I messed around with it, without success: http://www.babylonjs-playground.com/#W1NP4#0 Probably one workaround would be to call setCameraRigMode() for each window resize, but that seems terribly wasteful, as lots of new objects are being created (and destroyed). Any help much appreciated!

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

Resizing the window when there is no post process means the views aspect ratio gets updated when the engine.resize() function is used. However resizing the window while a postprocess is enabled means the view gets stretched even while the engine.resize() function is running. The "engine.resize()" function still updates the resolution if there is a post process, since there are no stretched or blurry pixels, it's just the aspect ratio that doesn't change. Everything works if the window is resized and then the page is refreshed but it would be nice for it to update without a refresh (using the "pass" postProcess) Is there a way to update the postprocess ratio when the window is resized? PostProcess code: postProcess0 = new BABYLON.PassPostProcess("Scene copy", 1.0, camera);

Hi I've been trying to get a greyscale texture of the depth buffer to be able to use it to create a "depth of field" post process, however I can't figure out the best way to go about it. The result i'm after is like this To my understanding it seems a material has to be made with a custom vertex and fragment shader that converts (and linearises) values from gl_FragCoord.z into values in gl_FragColor, and this has to be done outside of creating a post process because post processes can't use vertex shaders. I'm wondering if there is a simple way to achieve this in babylon.js or if anyone has got it working so far? Any help or hints in the right direction would be greatly appreciated

Is there any basic tutorial for postprocessing: if I want add this : " var sepiaKernelMatrix = BABYLON.Matrix.FromValues( 0.393, 0.349, 0.272, 0, 0.769, 0.686, 0.534, 0, 0.189, 0.168, 0.131, 0, 0, 0, 0, 0 ); var postProcess = new BABYLON.ConvolutionPostProcess("Sepia", sepiaKernelMatrix, 1.0, null, null, engine, true); " what else I need to do to work? And how to do if I would like add to postProcesses together ? Please any simple(basic) code !