<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<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.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {
width: 20,
height: 10,
subdivisions: 25
}, scene);
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);
var textureContext = textureGround.getContext();
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;
var rectWidth = 200;
var rectHeight = 110;
var retextureContext = 50;
var rectY = 130
var cornerRadius = 50;
textureContext.fillStyle = "#0a0"
textureContext.strokeStyle = "#888"
textureContext.fillRect(0, 0, 512, 512)
textureContext.save()
textureContext.beginPath();
textureContext.moveTo(retextureContext - cornerRadius * .15, rectY);
textureContext.lineTo(retextureContext + rectWidth - cornerRadius, rectY);
textureContext.arcTo(retextureContext + rectWidth, rectY, retextureContext + rectWidth, rectY + cornerRadius, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth, rectY + rectHeight);
textureContext.arcTo(retextureContext + rectWidth, rectY + cornerRadius + rectHeight, retextureContext, rectY + rectHeight + cornerRadius, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius, retextureContext, rectY + cornerRadius + rectHeight, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius * 2 + rectHeight * 2, retextureContext + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth + cornerRadius, rectY + cornerRadius * 1.85 + rectHeight * 2);
textureContext.arcTo(retextureContext + rectWidth * 2, rectY + cornerRadius * 1.85 + rectHeight * 2, retextureContext + rectWidth * 2, rectY, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 2, rectY + rectHeight, retextureContext-rectWidth, rectY, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 1.5, rectY + rectHeight, retextureContext+ rectWidth, rectY - rectHeight, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth, rectY - rectHeight, retextureContext, rectY, cornerRadius);
textureContext.lineTo(retextureContext + cornerRadius * .25, rectY - cornerRadius * .85);
textureContext.arcTo(retextureContext - cornerRadius * .25, rectY - cornerRadius * .25, retextureContext, rectY, cornerRadius / 2);
textureContext.strokeStyle = "#f00"
textureContext.lineWidth = 40;
textureContext.stroke();
textureContext.restore()
textureContext.save()
textureContext.beginPath();
textureContext.moveTo(retextureContext - cornerRadius * .15, rectY);
textureContext.lineTo(retextureContext + rectWidth - cornerRadius, rectY);
textureContext.arcTo(retextureContext + rectWidth, rectY, retextureContext + rectWidth, rectY + cornerRadius, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth, rectY + rectHeight);
textureContext.arcTo(retextureContext + rectWidth, rectY + cornerRadius + rectHeight, retextureContext, rectY + rectHeight + cornerRadius, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius, retextureContext, rectY + cornerRadius + rectHeight, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius * 2 + rectHeight * 2, retextureContext + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth + cornerRadius, rectY + cornerRadius * 1.85 + rectHeight * 2);
textureContext.arcTo(retextureContext + rectWidth * 2, rectY + cornerRadius * 1.85 + rectHeight * 2, retextureContext + rectWidth * 2, rectY, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 2, rectY + rectHeight, retextureContext - rectWidth,rectY, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 1.5, rectY + rectHeight, retextureContext + rectWidth, rectY - rectHeight, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth, rectY - rectHeight, retextureContext, rectY, cornerRadius);
textureContext.lineTo(retextureContext + cornerRadius * .25, rectY - cornerRadius * .85);
textureContext.arcTo(retextureContext - cornerRadius * .25, rectY - cornerRadius * .25, retextureContext, rectY, cornerRadius / 2);
textureContext.lineWidth = 39;
textureContext.stroke();
textureContext.restore()
textureContext.save()
textureContext.beginPath();
textureContext.moveTo(retextureContext - cornerRadius * .15, rectY);
textureContext.lineTo(retextureContext + rectWidth - cornerRadius, rectY);
textureContext.arcTo(retextureContext + rectWidth, rectY,retextureContext + rectWidth, rectY + cornerRadius, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth, rectY + rectHeight);
textureContext.arcTo(retextureContext + rectWidth, rectY + cornerRadius + rectHeight, retextureContext, rectY + rectHeight + cornerRadius, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius, retextureContext ,rectY + cornerRadius + rectHeight, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius * 2 + rectHeight * 2,retextureContext + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth + cornerRadius, rectY + cornerRadius * 1.85 + rectHeight * 2);
textureContext.arcTo(retextureContext + rectWidth * 2,rectY + cornerRadius * 1.85 + rectHeight * 2, retextureContext + rectWidth * 2, rectY, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 2, rectY +rectHeight, retextureContext - rectWidth, rectY, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 1.5, rectY+rectHeight, retextureContext + rectWidth, rectY - rectHeight, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth,rectY - rectHeight, retextureContext, rectY, cornerRadius);
textureContext.lineTo(retextureContext + cornerRadius * .25, rectY - cornerRadius * .85);
textureContext.arcTo(retextureContext - cornerRadius * .25, rectY - cornerRadius * .25, retextureContext, rectY, cornerRadius / 2);
textureContext.strokeStyle = "yellow"
textureContext.lineWidth = 3;
textureContext.stroke();
textureContext.restore()
textureContext.save()
textureContext.beginPath();
textureContext.moveTo(retextureContext - cornerRadius * .15, rectY);
textureContext.lineTo(retextureContext + rectWidth - cornerRadius, rectY);
textureContext.arcTo(retextureContext + rectWidth, rectY, retextureContext + rectWidth, rectY + cornerRadius, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth, rectY + rectHeight);
textureContext.arcTo(retextureContext + rectWidth, rectY + cornerRadius + rectHeight, retextureContext , rectY + rectHeight + cornerRadius, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius, retextureContext ,rectY + cornerRadius + rectHeight, cornerRadius);
textureContext.arcTo(retextureContext, rectY + cornerRadius * 2 + rectHeight * 2, retextureContext + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
textureContext.lineTo(retextureContext + rectWidth + cornerRadius, rectY+cornerRadius * 1.85 + rectHeight * 2);
textureContext.arcTo(retextureContext + rectWidth * 2, rectY+cornerRadius * 1.85 + rectHeight * 2, retextureContext + rectWidth * 2, rectY ,cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 2, rectY + rectHeight, retextureContext - rectWidth, rectY, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth * 1.5, rectY + rectHeight, retextureContext + rectWidth, rectY - rectHeight, cornerRadius);
textureContext.arcTo(retextureContext + rectWidth, rectY - rectHeight, retextureContext, rectY, cornerRadius);
textureContext.lineTo(retextureContext + cornerRadius * .25, rectY - cornerRadius * .85);
textureContext.arcTo(retextureContext - cornerRadius * .25, rectY - cornerRadius * .25, retextureContext, rectY, cornerRadius / 2);
textureContext.strokeStyle = "#888"
textureContext.lineWidth = 2;
textureContext.stroke();
var sx = 150;
var sy = 20;
textureContext.save()
textureContext.beginPath();
textureContext.moveTo(retextureContext + sx, 314 + rectY - sy);
textureContext.lineTo(retextureContext + sx, 314 + rectY + sy);
textureContext.strokeStyle = "#f00"
textureContext.lineWidth = 2;
textureContext.stroke();
textureContext.restore()
textureContext.save()
textureContext.beginPath();
textureContext.fillStyle = "#fff"
textureContext.fillRect(retextureContext + sx - 1, 314 + rectY - sy, 1, 5)
textureContext.fillRect(retextureContext + sx, 314 + rectY - sy + 5, 1, 5)
textureContext.fillRect(retextureContext + sx - 1, 314 + rectY - sy + 10, 1, 5)
textureContext.fillRect(retextureContext + sx, 314 + rectY - sy + 15, 1, 5)
textureContext.fillRect(retextureContext + sx - 1, 314 + rectY, 1, 5)
textureContext.fillRect(retextureContext + sx, 314 + rectY + sy - 15 , 1, 5)
textureContext.fillRect(retextureContext + sx - 1, 314 + rectY + sy - 10, 1, 5)
textureContext.fillRect(retextureContext + sx, 314 + rectY + sy - 5, 1, 5)
textureContext.stroke();
textureContext.restore()
textureContext.beginPath();
textureContext.moveTo(75, 40);
textureContext.bezierCurveTo(75, 37, 70, 25, 50, 25);
textureContext.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
textureContext.bezierCurveTo(20, 80, 40, 102, 75, 120);
textureContext.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
textureContext.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
textureContext.bezierCurveTo(85, 25, 75, 37, 75, 40);
textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
/* Styles go here */