BabylonJS - BoundingBox

Display the bounding box of the mesh by drawing it on a 2D canvas. That fixes http://jsfiddle.net/nicolas_obre/R9j2z/

by gwenaelhagenmuller

HTML

<script src="https://rawgithub.com/BabylonJS/Babylon.js/v1.7.3/babylon.1.7.3.js"></script>
<div id="rootDiv">
  <canvas id="renderCanvas"></canvas>
  <canvas id="canvas_2D"></canvas>
</div>

CSS

html, body, div, canvas {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#canvas_2D {
    position: absolute;   
    top: 0;
    pointer-events: none;
}

JavaScript

var meshWithBoundingBox = new Array();

// Get the Canvas element from our HTML below
var canvas = document.getElementById("renderCanvas");
// Load BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);

var scene = new BABYLON.Scene(engine);

// Creating a camera looking to the zero point (0,0,0), a light, and a cylinder
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 1, 10, 10, 100, scene);

// Attach the camera to the scene
scene.activeCamera.attachControl(canvas);

meshWithBoundingBox.push(cylinder);
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function () {
    scene.render();
    clearCanvas2D();
    for(var i in meshWithBoundingBox){
        drawBoundingBox(meshWithBoundingBox[i], camera);
    }
});

var canvas2D = document.getElementById("canvas_2D");
var context2D = canvas2D.getContext("2d");

var clearCanvas2D = function(){
    canvas2D.width = window.innerWidth;
    canvas2D.height = window.innerHeight;
};

var drawBoundingBox = function(mesh, camera){			
    context2D.strokeStyle='#ffffff';
    context2D.lineWidth = 1;
    context2D.shadowColor = '#000000';
    context2D.lineCap = "square";
    context2D.shadowBlur = 10;
    context2D.shadowOffsetX = 0;
    context2D.shadowOffsetY = 0;
    
    var visibleVectors = [];

    var vectorsWorld = mesh.getBoundingInfo().boundingBox.vectorsWorld;
    var viewMatrix = camera.getViewMatrix();
    var pointOfPlane = new BABYLON.Vector3(0,0,camera.minZ);
    var normalOfPlane = new BABYLON.Vector3(0,0,1);
    
    visibleVectors.push(_visibleVectorsForDrawingBoxLine(vectorsWorld[0], vectorsWorld[3], viewMatrix, pointOfPlane, normalOfPlane));
    visibleVectors.push(_visibleVectorsForDrawingBoxLine(vectorsWorld[0], vectorsWorld[2], viewMatrix, pointOfPlane,...