Sign in to follow this  
somnath281

Babylon Screenshot

Recommended Posts

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:

 

post-15655-0-75822600-1443080276_thumb.p

 

below image is after taking screenshot:

 

post-15655-0-06656100-1443080278_thumb.p

 

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

Share this post


Link to post
Share on other sites

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 by RaananW

Share this post


Link to post
Share on other sites

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});


});

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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});
});

 

Share this post


Link to post
Share on other sites
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' ?

foi.PNG

Share this post


Link to post
Share on other sites
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  

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.