Babylon Screenshot

[somnath281]

Hey,

I am getting wierd result after taking screenshot using below code:

BABYLON.Tools.CreateScreenshot(engine, camera, (canvas.width,canvas.height));

I am able to take screenshots..that portion works properly.

 

After taking screenshot the render camera getting stratched.

Below image is before taking screenshot:

 

 

below image is after taking screenshot:

 

 

But after camera stratch even the screenshots are not getting stratched...those are coming proper. Only the render camera is getting stratched.

 

Any idea, how to fix this issue?

 

Thanks,

Somnath

[RaananW]

I wonder - are you really using this line?

BABYLON.Tools.CreateScreenshot(engine, camera, (canvas.width,canvas.height));

Because it should be this:

BABYLON.Tools.CreateScreenshot(engine, camera, {width: canvas.width,height: canvas.height});

There are a few reasons this could happen (one of them is having two cameras with different perspectives and getting an error while getting the screenshot. which should be fixed :-) ).

I wonder if you can reproduce it in the palyground?

Edited September 24, 2015 by RaananW

[somnath281]

Hey RaananW,

http://www.babylonjs-playground.com/#1BGQCX#5

I tried it in playground, do have a look.

In line:84 I have pasted screenshot code. while u click on any mesh it will take screenshot.

Even though in playground also I am getting same result.

 

Thanks,

Somnath

[Dad72]

You error: 

BABYLON.Tools.CreateScreenshot(engine, camera, (canvas.width,canvas.height));

 

Fix: 

BABYLON.Tools.CreateScreenshot(engine, camera,{ width: 600, height: 400});

 

http://www.babylonjs-playground.com/#1BGQCX#6

 

Documentation: http://doc.babylonjs.com/generals/Render_Scene_on_a_PNG

[somnath281]

dad72,

In this playground (which you have mentioned above), after click on mesh the camera is getting shrink.

 

Thanks,

Somnath

[Dad72]

RaananW has created a fixe awaiting validation for this error.

[RaananW]

not entirely, I am still debugging for further errors.

Will update here.

[RaananW]

Is it still doing that? http://www.babylonjs-playground.com/#1BGQCX#8

[somnath281]

RaananW, Now its working properly.

 

Thanks.

[JimmyBuchman]

Hi, When I take the picture is getting a photo all white, i don't know why. I'm downloading it but i'm getting all white

I'm using this code out of the playground and I don't get anything.

http://www.babylonjs-playground.com/#1BGQCX#11

[Dad72]

I just try your PG on google chrome and it works fine for me.

[JimmyBuchman]

9 minutes ago, Dad72 said:

I just try your PG on google chrome and it works fine for me.

Yeah in the PG works, but when i try in my html and js code, i only gey a white photo 

[Dad72]

There is probably something that is not good in your code, if in the PG it works.

[JimmyBuchman]

This is my code.

var canvas = document.getElementById('canvas'); // pegar a referencia do canvas
var engine = new BABYLON.Engine(canvas, true); // começar o engine do babylon

function criarCenarioCircular(array,i){
// funcao para criar esferas na topologia circular, de acordo com a paginacao
    var qtdNeuronsCanvas = array.qtdNeuro;
    var vetorCanvas = array.vetor;
    var matrixCanvas = array.matrix;
    var mapaCanvas = array.mapa;
    var topologiaCanvas = array.topologia;

    scene = new BABYLON.Scene(engine);
    var spheresCount = parseInt(qtdNeuronsCanvas);
    var dist = -1*(spheresCount *5.2);
    var diagonal = spheresCount+1;
    var camx =  2;
    var camy = 1.5;
    var camz = dist-7;

    var camera= new BABYLON.ArcRotateCamera("Camera", Math.PI / camx, camy, camz, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    camera.lowerAlphaLimit = null;
    camera.upperAlphaLimit = null;
    
    camera.lowerBetaLimit = null;
    camera.upperBetaLimit = null;

    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    var alpha = 0;
    var x=[];
    var y=[];
    // logica para criar esferas e suas posicoes
    for (var index = 0; index < spheresCount; index++) {
        var sphere = BABYLON.Mesh.CreateSphere("Sphere" + index, 32, 4, scene);
        sphere.position.x = (spheresCount*2) * Math.sin(alpha);
        sphere.position.y = (spheresCount*2) * Math.cos(alpha);

         var materialSphere = new BABYLON.StandardMaterial("texture", scene);
        if(vetorCanvas[index]  == 0){
             materialSphere.diffuseColor = new BABYLON.Color3(1, 1,1); //white
              materialSphere.alpha = 1.0;
        }else{
             materialSphere.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red
              materialSphere.alpha = 1.0;
        }

        sphere.material = materialSphere;

        
        x[index] = sphere.position.x;
        y[index] = sphere.position.y;

        alpha += (2 * Math.PI) / spheresCount;
    }

    x.push(x[0]);
    y.push(y[0]);

    var radioTubo =[];
    var pesoTubo=[];
    var z=0;
   //console.log(matrixCanvas);
   // logica para remover valores da diagonal e trocar o raio de 0 para 0.07
    matrixCanvas.forEach((e,ind)=>{
        if(ind%diagonal == 0){
            
        }else if(e == 0){
            radioTubo[z]=0.07;
            
            z++;
        }else{
            radioTubo[z]= e;
            z++;
        }
    });
    z=0;
    // logica para pegar os valores da matriz sem a diagonal
    matrixCanvas.forEach((e,ind)=>{
        if(ind%diagonal == 0){
            
        }else{
            pesoTubo[z]= e;    
            z++;
        }
    });
    z=0;
    //console.log(pesoTubo);
    //console.log(radioTubo);
    // logica para fazer a conexao de todos para todos
    for (var index = 0; index < x.length-1; index++) {
        
        var atualx=[];
        var atualy=[];
        var metadex= [];
        var metadey=[];
       
        for (var k = 0; k < x.length -1 ; k++) {
        
            atualx.push(x[index]);
            atualy.push(y[index]);
            metadex.push(((x[index]+x[k])/2));
            metadey.push(((y[index]+y[k])/2));
        }
        for (var j = 0; j < x.length-1  ; j++) {
        
            atualx.push(x[index]);
            atualy.push(y[index]);
            metadex.push(((x[index]+x[j])/2));
            metadey.push(((y[index]+y[j])/2));
           
            if(index!=j){
            

           
            rad = radioTubo[z];
            
            
               var mat = new BABYLON.StandardMaterial("mat", scene);
                  mat.alpha = 1;
                  
                  if(mapaCanvas == 1){
                      mat.diffuseColor = coresDoJetWebGL(pesoTubo[z]);
                  }else if(mapaCanvas == 2){
                      mat.diffuseColor = coresDoHotWebGL(pesoTubo[z]);
                  }else{
                      mat.diffuseColor = coresDoAutumnWebGL(pesoTubo[z]);
                  }
                  
                  mat.backFaceCulling = false;
                  mat.wireframe = false;
       
        var tube = BABYLON.Mesh.CreateTube("tube", [
        
        new BABYLON.Vector3(atualx[index],atualy[index], 0),
        new BABYLON.Vector3(metadex[j], metadey[j], 0)
        
    ], rad, 60, null, 0, scene, false, BABYLON.Mesh.FRONTSIDE);
  tube.material = mat;  
        
            z++;    
            }
           
        }
        
    }
   
    return scene;

}

var botaoFoto = document.getElementById('botaoCamera');
botaoFoto.addEventListener('click',function(e){
    e.preventDefault();    

    
    BABYLON.Tools.CreateScreenshot(engine, camera2, {width: canvas.width, height: canvas.height});

});

[JimmyBuchman]

The code will not run, because you don't have the object, but this is the algorithm that i'm using

[Dad72]

I see 2 errors.

The first : your "var camera" is not local, So can not be reached in createScreenShot

The second :  you use camera2 in createScreenShot, or I see no camera2, but camera

 

[JimmyBuchman]

I already fix that, i put the camera global, and still doing the same thing

[Dad72]

Try this :

var canvas = document.getElementById('canvas'); // pegar a referencia do canvas
var engine = new BABYLON.Engine(canvas, true); // começar o engine do babylon
var camera = null;

function criarCenarioCircular(array,i){
// funcao para criar esferas na topologia circular, de acordo com a paginacao
    var qtdNeuronsCanvas = array.qtdNeuro;
    var vetorCanvas = array.vetor;
    var matrixCanvas = array.matrix;
    var mapaCanvas = array.mapa;
    var topologiaCanvas = array.topologia;

    scene = new BABYLON.Scene(engine);
    var spheresCount = parseInt(qtdNeuronsCanvas);
    var dist = -1*(spheresCount *5.2);
    var diagonal = spheresCount+1;
    var camx =  2;
    var camy = 1.5;
    var camz = dist-7;

    camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / camx, camy, camz, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    camera.lowerAlphaLimit = null;
    camera.upperAlphaLimit = null;    
    camera.lowerBetaLimit = null;
    camera.upperBetaLimit = null;

    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
	
    var alpha = 0;
    var x=[];
    var y=[];
    // logica para criar esferas e suas posicoes
    for (var index = 0; index < spheresCount; index++) {
        var sphere = BABYLON.Mesh.CreateSphere("Sphere" + index, 32, 4, scene);
        sphere.position.x = (spheresCount*2) * Math.sin(alpha);
        sphere.position.y = (spheresCount*2) * Math.cos(alpha);

         var materialSphere = new BABYLON.StandardMaterial("texture", scene);
        if(vetorCanvas[index]  == 0){
             materialSphere.diffuseColor = new BABYLON.Color3(1, 1,1); //white
              materialSphere.alpha = 1.0;
        }else{
             materialSphere.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red
              materialSphere.alpha = 1.0;
        }

        sphere.material = materialSphere;


        
        x[index] = sphere.position.x;
        y[index] = sphere.position.y;

        alpha += (2 * Math.PI) / spheresCount;
    }

    x.push(x[0]);
    y.push(y[0]);

    var radioTubo =[];
    var pesoTubo=[];
    var z=0;
   //console.log(matrixCanvas);
   // logica para remover valores da diagonal e trocar o raio de 0 para 0.07
    matrixCanvas.forEach((e,ind)=>{
        if(ind%diagonal == 0){
            
        }else if(e == 0){
            radioTubo[z]=0.07;
            
            z++;
        }else{
            radioTubo[z]= e;
            z++;
        }
    });
    z=0;
    // logica para pegar os valores da matriz sem a diagonal
    matrixCanvas.forEach((e,ind)=>{
        if(ind%diagonal == 0){
            
        }else{
            pesoTubo[z]= e;    
            z++;
        }
    });
    z=0;
    //console.log(pesoTubo);
    //console.log(radioTubo);
    // logica para fazer a conexao de todos para todos
    for (var index = 0; index < x.length-1; index++) {
        
        var atualx=[];
        var atualy=[];
        var metadex= [];
        var metadey=[];
       
        for (var k = 0; k < x.length -1 ; k++) {
        
            atualx.push(x[index]);
            atualy.push(y[index]);
            metadex.push(((x[index]+x[k])/2));
            metadey.push(((y[index]+y[k])/2));
        }
        for (var j = 0; j < x.length-1  ; j++) {
        
            atualx.push(x[index]);
            atualy.push(y[index]);
            metadex.push(((x[index]+x[j])/2));
            metadey.push(((y[index]+y[j])/2));
           
            if(index!=j){
            

           
            rad = radioTubo[z];
            
            
               var mat = new BABYLON.StandardMaterial("mat", scene);
                  mat.alpha = 1;
                  
                  if(mapaCanvas == 1){
                      mat.diffuseColor = coresDoJetWebGL(pesoTubo[z]);
                  }else if(mapaCanvas == 2){
                      mat.diffuseColor = coresDoHotWebGL(pesoTubo[z]);
                  }else{
                      mat.diffuseColor = coresDoAutumnWebGL(pesoTubo[z]);
                  }
                  
                  mat.backFaceCulling = false;
                  mat.wireframe = false;
       
        var tube = BABYLON.Mesh.CreateTube("tube", [
        
        new BABYLON.Vector3(atualx[index],atualy[index], 0),
        new BABYLON.Vector3(metadex[j], metadey[j], 0)
        
    ], rad, 60, null, 0, scene, false, BABYLON.Mesh.FRONTSIDE);
  tube.material = mat;  
        
            z++;    
            }
           
        }
        
    }   
    return scene;
}

var botaoFoto = document.getElementById('botaoCamera');
botaoFoto.addEventListener('click',function(e){    
    BABYLON.Tools.CreateScreenshot(engine, camera, {width: canvas.width, height: canvas.height});
});

 

[Dad72]

Else it exist : CreateScreenshotUsingRenderTarget rather CreateScreenshot

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, { precision: 1});

 

[JimmyBuchman]

Same thing. I really don't know whats the problem

[JimmyBuchman]

6 minutes ago, Dad72 said:

Else it exist : CreateScreenshotUsingRenderTarget rather CreateScreenshot

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, { precision: 1});

 

with this, everything goes fine, what's the difference ? can you explain? 
and how can I improve the  resolution  ?

there is a way that i can change the name of the file ? instead be 'screenshot_-2-5_14-18' change to '1' ?

[Dad72]

4 minutes ago, JimmyBuchman said:

and how can I improve the  resolution  ?

Like this:

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, {width: canvas.width, height: canvas.height});

Or { precision: 2}

CreateScreenshotUsingRenderTarget was added in 2. 5 and was done because it was more stable than the version CreateScreenshot  

 

[JimmyBuchman]

2 minutes ago, Dad72 said:

Like this:

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, {width: canvas.width, height: canvas.height});

Or { precision: 2}

CreateScreenshotUsingRenderTarget was added in 2. 5 and was done because it was more stable than the version CreateScreenshot  

 

Allright, and about the change of the name do you know something? 

and thank you very much for the help and even more for the patience  with me

[Dad72]

Because CreateScreenshot uses renderTarget simply

CreateScreenshotUsingRenderTarget

[JimmyBuchman]

1 minute ago, Dad72 said:

Because CreateScreenshot uses renderTarget simply

CreateScreenshotUsingRenderTarget

no i mean the name of the picture.png change this "screenshot_-2-5_14-13" to this "photo 1", do you understand ?