babylonjs mesh outline layer animation. paste this on babylonjs playground

outline.js

var createScene = function () {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'sphere' shape.
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;

    sphere.renderOutline = true;
    sphere.outlineColor = new BABYLON.Color3(0, 1, 0);
    // sphere.outlineWidth = 0.1;
    animateOutlineWidth(scene, sphere, 0.1, 0.3, 0.0001)

    // Our built-in 'ground' shape.
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

    return scene;

};
function animateOutlineWidth(scene, mesh, initialWidth, finalWidth, speed) {
    var increase = true;
    mesh.outlineWidth = initialWidth;

    scene.registerAfterRender(function() {
        if (increase) {
            mesh.outlineWidth += speed; // Increase outline width
            if (mesh.outlineWidth >= finalWidth) {
                increase = false;
            }
        } else {
            mesh.outlineWidth -= speed; // Decrease outline width
            if (mesh.outlineWidth <= initialWidth) {
                increase = true;
            }
        }
    });
}