Generate image thumbnail meshes

[Dad72]

Hello,

Would anyone have an idea of how to generate image thumbnail of a mesh list. 

 This is to create a list of media with a small image thumbnail preview of the objects rather than a text link (see screen). 

 I guess I should use something like CreateScreenshot but without downloading. I had idea of generating the image when the user imports the object. 

Here is my Asset library :

(Image 1 What I have to do and image 2, the result of what I want to do where we see the previews of 3d models)

 

[Dad72]

Okay, actually, it's simple:   (I have not tested yet, but it should go with some small retouching.)

JS

var createMiniatureScreenshot = function (engine, camera, mesh) {
	var mimeType = "image/jpeg";
	var width = 128;
	var height = 128;
	var screenshotCanvas = document.createElement('canvas');
	screenshotCanvas.width = width;
	screenshotCanvas.height = height;
	camera.position.z = (camera.position.z - (mesh.getBoundingInfo().boundingBox.maximum.z + 1));
	camera.setTarget(BABYLON.Vector3.Zero());
	var renderContext = screenshotCanvas.getContext("2d");
	renderContext.drawImage(engine.getRenderingCanvas(), 0, 0, width, height);
	var base64Image = screenshotCanvas.toDataURL(mimeType);
	return base64Image;
};

More than creating the image with PHP when importing the 3D model and displaying this image in the list of media.

PHP

<?php
header('Content-Type: text/html; charset=UTF-8');
header('Content-Type: image/jpeg');
function saveImg($img, $finalDir, $nameImage) {
	$_img = str_replace('data:image/jpeg;base64,', '', $img);
	$_img = str_replace(' ', '+', $_img);
	$data = base64_decode($_img);
	$file = $finalDir.$nameImage.'.jpg';	
	file_put_contents($file, $data);	
	$image = imagecreatefromjpeg($file);
	imagejpeg($image, $file, 9);
}
$cheminFichier = "root/images/";
saveImg($_POST['imgbase64'], $cheminFichier, "myNameImage");
?>

 

[joshcamas]

Alas, if I remember correctly, one cannot grab the image data in @Dad72's way... for it is webgl D:
And webgl is VERY annoying with taking screenshots. VERY messy and dependent on how cache and buffer and stuff is saved on the individual engines.

However, all hope is not lost. There is actually a screenshot feature from within Babylon itself. It is however very hard coded into the system. Luckily I've already dealt with it before to work on a little project: 

And here is my code! Very messy because it was stolen directly from Babylon, but it works!

http://textuploader.com/d5pky

This of course just generates the image data. Now you can do fancy cropping and scaling, then send it off to the server to actually save the image to the server, just like @Dad72 <3 

Good Luck!

[dbawel]

Here is code from 3JS. The same can be replicated inBJS Using DOM.

renderer.setSize( widthOfScreenshot, heightOfScreenshot ); renderer.render( scene, camera ); var screenshot = renderer.domElement.toDataURL(); renderer.setSize( originalWidth, originalHeight ); renderer.render( scene, camera );

[joshcamas]

4 hours ago, dbawel said:

Here is code from 3JS. The same can be replicated inBJS Using DOM.

renderer.setSize( widthOfScreenshot, heightOfScreenshot ); renderer.render( scene, camera ); var screenshot = renderer.domElement.toDataURL(); renderer.setSize( originalWidth, originalHeight ); renderer.render( scene, camera );

Alas, if I remember correctly this does not work  This is due to how Babylon does buffering and stuff ;'(

[Dad72]

My solution works very well, I do not understand why you say it does not work with Babylon?

[joshcamas]

Oh, it works?

WELL THEN ITS TIME TO RECONSIDER ALL OF MY LIFE CHOICES AHHHHHH

I spent hours trying to get it all working a few weeks back, and it was this simple??? NOOOOOO

gj tho :^)