haehn/babylonjs.html

## babylonjs.html
<html>
<head>
    <title>Babylon.js</title>
    <style>
        html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
        #c { width: 100%; height: 100%; }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>

    <script>

        window.onload = async function() {

            var canvas = document.getElementById('c');

            var engine = new BABYLON.WebGPUEngine(canvas);
            await engine.initAsync();


            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0., 0., 0.);


            var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, 10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, false);

            var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0));


            var customMesh = new BABYLON.Mesh("custom");
            customMesh.color = new BABYLON.Color3(1., 0., 0.);

            // Set the vertices for the triangle
            var positions = [
                0, 1, 0,  // vertex 0: position (x, y, z)
                1, 0, 0,  // vertex 1
                -1, 0, 0  // vertex 2
            ];

            // Set the indices for the triangle
            var indices = [0, 1, 2];

            var colors = [1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1];

            // Create a vertexData object
            var vertexData = new BABYLON.VertexData();
            vertexData.positions = positions;
            vertexData.indices = indices;
            vertexData.colors = colors;
            vertexData.applyToMesh(customMesh);


            engine.runRenderLoop(function () {
                scene.render();
            });


            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });


        };
    </script>

</head>

<body>
    <canvas id="c"></canvas>
</body>
</html>
	<html>
	<head>
	<title>Babylon.js</title>
	<style>
	html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
	#c { width: 100%; height: 100%; }
	</style>

	<script src="https://cdn.babylonjs.com/babylon.js"></script>

	<script>

	window.onload = async function() {

	var canvas = document.getElementById('c');

	var engine = new BABYLON.WebGPUEngine(canvas);
	await engine.initAsync();


	var scene = new BABYLON.Scene(engine);
	scene.clearColor = new BABYLON.Color3(0., 0., 0.);



	var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, 10), scene);
	camera.setTarget(BABYLON.Vector3.Zero());
	camera.attachControl(canvas, false);

	var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0));



	var customMesh = new BABYLON.Mesh("custom");
	customMesh.color = new BABYLON.Color3(1., 0., 0.);

	// Set the vertices for the triangle
	var positions = [
	0, 1, 0, // vertex 0: position (x, y, z)
	1, 0, 0, // vertex 1
	-1, 0, 0 // vertex 2
	];

	// Set the indices for the triangle
	var indices = [0, 1, 2];

	var colors = [1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1];

	// Create a vertexData object
	var vertexData = new BABYLON.VertexData();
	vertexData.positions = positions;
	vertexData.indices = indices;
	vertexData.colors = colors;
	vertexData.applyToMesh(customMesh);



	engine.runRenderLoop(function () {
	scene.render();
	});



	// Watch for browser/canvas resize events
	window.addEventListener("resize", function () {
	engine.resize();
	});


	};
	</script>

	</head>

	<body>
	<canvas id="c"></canvas>
	</body>
	</html>