使用 BabylonJS 获取黑色屏幕截图
Getting a Black Screenshot with BabylonJS
我在截屏时遇到了一些问题。如果你跟着 tut，在：http://doc.babylonjs.com/tutorials/render_scene_on_a_png 你会看到他们只提供了一行，即 BABYLON.Tools.CreateScreenshot(engine, camera, size);
尺寸和相机是您可以更改的变量。当我实现这个时，我会得到一个黑色的屏幕截图。我首先想到它可能是在页面呈现之前截取屏幕截图，所以我添加了一个简单的循环并添加了一个警告框以等待场景加载后再执行屏幕截图。但出于某种原因，我仍然得到一个黑色的屏幕截图。
感谢您的意见 :D
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
BABYLON.Tools.CreateScreenshot(engine, camera, size);
i++;
if (i < 1) {
myLoop();
}
}, 2000)
}
myLoop();
//Returning the scene
return scene;
};
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
htmlgameDevs 的帅哥 (DeltaKosh) 帮助了我。他说，当您为屏幕截图创建引擎或渲染 PNG 文件时，您必须这样定义它：
engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
我还添加了一个循环，该循环等待一秒钟，直到场景渲染完成以截取屏幕截图
var scene = createScene();
var booleanR = false;
var size = 512;
engine.runRenderLoop(function () {
scene.render();
});
function myLoop () {
setTimeout(function () {
if(booleanR == false){
BABYLON.Tools.CreateScreenshot(engine, camera, size);
booleanR = true;
}
}, 1000)
}
这是他回复中的 link：http://www.html5gamedevs.com/topic/32765-getting-a-black-screenshot-with-babylonjs/?tab=comments#comment-187819
我在截屏时遇到了一些问题。如果你跟着 tut，在：http://doc.babylonjs.com/tutorials/render_scene_on_a_png 你会看到他们只提供了一行，即 BABYLON.Tools.CreateScreenshot(engine, camera, size);
尺寸和相机是您可以更改的变量。当我实现这个时，我会得到一个黑色的屏幕截图。我首先想到它可能是在页面呈现之前截取屏幕截图，所以我添加了一个简单的循环并添加了一个警告框以等待场景加载后再执行屏幕截图。但出于某种原因，我仍然得到一个黑色的屏幕截图。 感谢您的意见 :D
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
BABYLON.Tools.CreateScreenshot(engine, camera, size);
i++;
if (i < 1) {
myLoop();
}
}, 2000)
}
myLoop();
//Returning the scene
return scene;
};
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
htmlgameDevs 的帅哥 (DeltaKosh) 帮助了我。他说，当您为屏幕截图创建引擎或渲染 PNG 文件时，您必须这样定义它：
engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
我还添加了一个循环，该循环等待一秒钟，直到场景渲染完成以截取屏幕截图
var scene = createScene();
var booleanR = false;
var size = 512;
engine.runRenderLoop(function () {
scene.render();
});
function myLoop () {
setTimeout(function () {
if(booleanR == false){
BABYLON.Tools.CreateScreenshot(engine, camera, size);
booleanR = true;
}
}, 1000)
}
这是他回复中的 link：http://www.html5gamedevs.com/topic/32765-getting-a-black-screenshot-with-babylonjs/?tab=comments#comment-187819