Getting a Black Screenshot with BabylonJS

[jghorton14]

Hello,

I am having some trouble taking a screenshot. If you followed along with the tut, at: Render A Scene you see that they only provided one line which is

BABYLON.Tools.CreateScreenshot(engine, camera, size);

 

With size and your camera being the variables that you can change. When I implemented this, I would get a black screenshot. I first thought that maybe the it was taking a screenshot before the page rendered so I added a simple loop at the bottom of the function and added an alert box to wait until the scene loaded before the screenshot would execute. But for some reason I am still getting a black/clear screenshot. Thank you for your input  

var canvas = document.querySelector("#renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

//Needed for the CreateScene Function
var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    // Setup camera
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 10, 0, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(-10, 10, 25));
    camera.attachControl(canvas, true);

    // Lights
    var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 5), scene);
    var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 5), scene);
    var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 5), scene);
    var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 2), scene);
    var light4 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 5, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 3, scene);
    var light5 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);

    var material = new BABYLON.StandardMaterial("kosh", scene);
    var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);
    var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 7.5, 3, 6, 6, 1, scene);
    var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);

    // Creating light sphere
    var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, .5, scene);
    var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene);
    var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene);

    //Shifting position up of Sphere
    sphere.position.y = 5;
    box.position.y = -2;

    //generating shadows
    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light3);
    shadowGenerator.getShadowMap().renderList.push(box);
    shadowGenerator.getShadowMap().renderList.push(sphere);
    shadowGenerator.getShadowMap().renderList.push(cylinder);

    //Colors
    lightSphere0.material = new BABYLON.StandardMaterial("red", scene);
    lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
    lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0);
    lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0);

    lightSphere1.material = new BABYLON.StandardMaterial("green", scene);
    lightSphere1.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
    lightSphere1.material.specularColor = new BABYLON.Color3(0, 0, 0);
    lightSphere1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);

    lightSphere2.material = new BABYLON.StandardMaterial("blue", scene);
    lightSphere2.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
    lightSphere2.material.specularColor = new BABYLON.Color3(0, 0, 0);
    lightSphere2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);

    // Sphere material
    material.diffuseColor = new BABYLON.Color3(1, 1, 1);
    sphere.material = material;

    // Lights colors
    light0.diffuse = new BABYLON.Color3(1, 0, 0);
    light0.specular = new BABYLON.Color3(1, 0, 0);

    light1.diffuse = new BABYLON.Color3(0, 1, 0);
    light1.specular = new BABYLON.Color3(0, 1, 0);

    light2.diffuse = new BABYLON.Color3(0, 0, 1);
    light2.specular = new BABYLON.Color3(0, 0, 1);

    light3.diffuse = new BABYLON.Color3(1, 1, 1);
    light3.specular = new BABYLON.Color3(1, 1, 1);

    light4.diffuse = new BABYLON.Color3(1, 0, 0);
    light4.specular = new BABYLON.Color3(1, 1, 1);

    light5.diffuse = new BABYLON.Color3(1, 1, 1);
    light5.specular = new BABYLON.Color3(1, 1, 1);
    light5.groundColor = new BABYLON.Color3(0, 0, 0);

    //Adding the SkyBox
    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../textures/TropicalSunnyDay", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.disableLighting = true;
    skybox.material = skyboxMaterial;

    // Animations
    var alpha = 0;
    scene.beforeRender = function () {
        light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha));
        light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha));
        light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha));

        lightSphere0.position = light0.position;
        lightSphere1.position = light1.position;
        lightSphere2.position = light2.position;

        lightSphere0.position.y = 5;
        lightSphere1.position.y = 5;
        lightSphere2.position.y = 5;

        alpha += 0.01;
    };

    //ground
    var ground = BABYLON.Mesh.CreateGround("ground1", 100, 100, 2, scene);
    ground.receiveShadows = true;

    var materialGround = new BABYLON.StandardMaterial("grassTexture", scene);
    materialGround.diffuseColor = new BABYLON.Color3(1,1,1);
    materialGround.diffuseTexture = new BABYLON.Texture("../textures/grass.png",scene);
    ground.material = materialGround;


//wait loop for the screenshot
    size = { width: 600, height: 400};
    var i = 1;
    function myLoop () {
        setTimeout(function () {
            alert('Taking Screenshot!');
            //Creating png screenshot
            done = BABYLON.Tools.CreateScreenshot(engine, camera, size);
            console.log(done);
            i++;
            if (i < 1) {
                myLoop();
                //console.log(done1);
            }
        }, 5000)
    }

    myLoop();


    //Returning the scene
    return scene;
};

var scene = createScene();
engine.runRenderLoop(function () {
    scene.render();
});


console.log(scene);

window.addEventListener("resize", function () {
    engine.resize();
});

 

[GameMonetize]

Hello

Make sure to use these options to create your engine:

engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });