Hiding on popup when not visible

by BluePampa

HTML

<script src="http://vousk-prod.net/webgl/babyl/includes/hand.minified-1.3.8.js"></script>
<script src="http://vousk-prod.net/webgl/babyl/includes/babylon.1.13-beta.js"></script>
<div id="some_space">&nbsp;</div>
<div id="pop_elem">&nbsp;</div>
<canvas id="canvas_3d"></canvas>
<div id="some_space2">&nbsp;</div>

<button>RAYON MAGIQUE</button>

CSS

body {
    background: gray;
    margin:0;
    padding:0;
}
#canvas_3d {
    position: relative;
    width : 80%;
    height: 200px;
    top: -10px;
    left: 50px;
    border: 1px dashed white;
}
#some_space {
    background: #236478;
    width : 100%;
    height: 20px;
    border: 1px dotted yellow;
    /*display:none;*/
}
#some_space2 {
    background: #236478;
    width : 100%;
    height: 400px;
    border: 1px dotted yellow;
    /*display:none;*/
}
#pop_elem {
    position: absolute;
    z-index: 90;
    width: 6px;
    height:6px;
    border: 2px solid red;
    pointer-events: none;
}
button{
    z-index:200;
    position: absolute;
    top:0px;
}

JavaScript

var transformMatrix, viewport;
var POP_elem, HND_obj;
var canvas = document.getElementById("canvas_3d");
console.debug("canvas.style.left:", canvas.style.left, "canvas.style.top:", canvas.style.top, "canvas.clientWidth:", canvas.clientWidth, "canvas.height:", canvas.height, " canvas.offsetLeft:", canvas.offsetLeft, "canvas.offsetTop:", canvas.offsetTop, "$(window).scrollLeft:", $(window).scrollLeft(), "$(window).scrollTop: ", $(window).scrollTop());
console.debug("canvas.getBoundingClientRect:", canvas.getBoundingClientRect());

window.addEventListener("pointerdown", onPointerDown, false);
window.addEventListener("resize", resized, false);

var engine = new BABYLON.Engine(canvas, true);
scene = createScene(engine);
engine.runRenderLoop(function () {
    movePopup();
    scene.render();
});

function createScene(engine) {
    var scene = new BABYLON.Scene(engine);

    var lightHemi = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 10, 10), scene);
    var sun = new BABYLON.PointLight("Sunshine", new BABYLON.Vector3(20, 100, 2), scene);

    HND_obj = BABYLON.Mesh.CreateBox("Box", 0.5, scene);
    pos = HND_obj.position;
    HND_obj.position = new BABYLON.Vector3(4, 0, 0);
    var sphere = BABYLON.Mesh.CreateSphere("Sphere", 12, 2, scene);

    var targetCam = new BABYLON.Vector3(0, 0, 0);
    var orbitalCamera = new BABYLON.ArcRotateCamera("CameraOrbit", 1.57, 1.57, 10, targetCam, scene);
    orbitalCamera.wheelPrecision = 200;
    scene.activeCamera.attachControl(canvas, false);

    transformMatrix = scene.getTransformMatrix();
    viewport = scene.activeCamera.viewport;

    POP_elem = document.getElementById("pop_elem");

    return scene;
}

function movePopup() {
    //var worldMatrix = HND_obj.getWorldMatrix();
    //var coordinates = BABYLON.Vector3.Project(getMeshFinalPosition(HND_obj), worldMatrix, transformMatrix, viewport);
    var coordinates = BABYLON.Vector3.Project(getMeshFinalPosition(HND_obj), BABYLON.Matrix.Identity(),...