<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src = "https://preview.babylonjs.com/babylon.max.js"></script>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -15), scene);
camera.setTarget(BABYLON.Vector3.Zero());
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var groundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);
var dynamicMaterial = new BABYLON.StandardMaterial('mat', scene);
dynamicMaterial.diffuseTexture = groundTexture;
dynamicMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
dynamicMaterial.backFaceCulling = false;
//var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 5, scene);
//sphere.material = dynamicMaterial;
//sphere.rotation.x = -Math.PI / 2;
//sphere.position.y = 1;
var ground = BABYLON.Mesh.CreateGround("ground1", 12, 12, 2, scene);
ground.material = dynamicMaterial;
var clearColor = "#775555";
var font = "bold 70px Segoe UI";
var invertY = true;
var text = "test";
var color = "white"
var x = 10;
var y = 80;
var context = groundTexture.getContext();
var size = groundTexture.getSize();
if (clearColor)
{
context.fillStyle = clearColor;
context.fillRect(0, 0, size.width, size.height);
}
context.font = font;
context.fillStyle = color;
context.fillText(text, x, y);
context.font = "300px arial";
context.fillStyle = color;
context.fillText(text, 0, 500);
groundTexture.update(invertY);
var onPointerDown = function(evt) {
var imageurl = groundTexture.getContext().canvas.toDataURL("image/png");
if ("download" in document.createElement("a"))
{
var a = window.document.createElement("a");
a.href = imageurl;
a.setAttribute("download", "dynamictexture.png");
window.document.body.appendChild(a);
a.addEventListener("click", function() {
a.parentElement.removeChild(a);
});
a.click();
}
else
{
var newWindow = window.open("");
var img = newWindow.document.createElement("img");
img.src = imageurl;
newWindow.document.body.appendChild(img);
}
};
canvas.addEventListener("pointerdown", onPointerDown, false);
scene.onDispose = function() {
canvas.removeEventListener("pointerdown", onPointerDown);
};
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
/* Styles go here */