Taking a screenshot with a transparent background

[freetoplay]

Is there a way to take a screenshot of a mesh only and leave the background of the image transparent?

[Dad72]

Yes with PHP

[kcoley]

@freetoplay using a regular browser pre-multiplies the canvas alpha value, so alpha of 0 wouldn't work.  You can kind of get something to work by setting the background scene alpha color to 0.1: http://playground.babylonjs.com/#96MDYB though this could be problematic if your mesh has alpha values.  

To get true transparency you would probably want to try using PHP as @Dad72 mentioned.

[MarianG]

Hey, why not completly alpha 0?
http://playground.babylonjs.com/#PN1NNI#56

[Dad72]

Here's how I do in PHP to create thumbnails with a transparent background by replacing the color of the canvas with transparency.

<?php 
header('Content-Type: image/png');
function saveImg($img, $finalDir, $nameImage) {	
	$_img = str_replace('data:image/png;base64,', '', $img);
	$_img = str_replace(' ', '+', $_img);
	$data = base64_decode($_img);
	$file = "../../".$finalDir.$nameImage.'.png'; // Root image
	file_put_contents($file, $data);	
	$image = imagecreatefrompng($file);		
	imagealphablending($image, false);	
	for($x = imagesx($image); $x--;) {
		for($y = imagesy($image); $y--;) {
			$rgb = imagecolorat($image, $x, $y);
			$c = imagecolorsforindex($image, $rgb);
			if($c['red'] == 99 && $c['green'] == 148 && $c['blue'] == 237) { // Cornfloweblue colors (background of canvas)			
				$colorB = imagecolorallocatealpha($image, 0, 0, 0, 127);				
				imagesetpixel($image, $x, $y, $colorB);			
			}
		}
	}
	imagealphablending($image, false);	
	imagesavealpha($image, true);
	imagepng($image, $file, 1);	
}
	
saveImg($_POST['imgbase64'], $_POST['root'], $_POST['nameImage']);
?>

 

[kcoley]

@freetoplay I stand corrected!  @MarianG 's playground shows how you can take a snapshot with alpha set to 0 and download the image from the browser.  Note you will have to use "BABYLON.Tools.CreateScreenshotUsingRenderTarget" instead of "BABYLON.Tools.CreateScreenshot".