BabylonJS - Transparent canvas
Canvas transparency lost when AA filter added on camera
babylon.1.12
HTML
<script src="http://vousk-prod.net/webgl/babyl/includes/babylon.1.12.js"></script>
<canvas id="canvas_3d"></canvas>
CSS
#canvas_3d {
width : 600px;
height: 400px;
border: 1px dashed white;
}
body {
background: green;
}
JavaScript
(function(){
var canvas = document.getElementById("canvas_3d");
var engine = new BABYLON.Engine(canvas, true);
scene = createScene(engine, canvas);
engine.runRenderLoop(function () {
scene.render();
});
})()
function createScene(engine, canvas) {
var scene = new BABYLON.Scene(engine);
//Here we tell our canvas to be transparent, so we can see the HTML background
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
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);
var box = BABYLON.Mesh.CreateBox("Box", 3, scene);
box.position = new BABYLON.Vector3(4, 0, 0);
var sphere = BABYLON.Mesh.CreateSphere("Sphere", 12, 3, scene);
var targetCam = new BABYLON.Vector3(0, 0, 0);
var orbitalCamera = new BABYLON.ArcRotateCamera("CameraOrbit", 1.57, 1.57, 10, targetCam, scene);
scene.activeCamera.attachControl(canvas);
//Here is the faulty line, comment this one to see lovely transparency on canvas
//var fxaa = new BABYLON.FxaaPostProcess("fxaa", 1.0, orbitalCamera, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, engine, true);
//the following line appears to be not needed to activate the AAf, you can de-comment or not, no effect on AAf nor transparency)
//orbitalCamera.attachPostProcess(fxaa);
return scene;
}