Search the Community

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