flushpot1125/performance_bjs.html

## performance_bjs.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Performance Test on Babylon.js</title>

        <!-- Babylon.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://assets.babylonjs.com/generated/Assets.js"></script>
        <script src="https://cdn.babylonjs.com/ammo.js"></script>
        <script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
        <script src="https://cdn.babylonjs.com/cannon.js"></script>
        <script src="https://cdn.babylonjs.com/Oimo.js"></script>
        <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

            #canvasZone {
                width: 100%;
                height: 100%;
            }
            #fps {
                position: absolute;
                background-color: black;
                border: 2px solid red;
                text-align: center;
                font-size: 42px;
                color: white;
                top: 15px;
                right: 120px;
                width: 150px;
                height: 60px;
            }
        </style>
    </head>
<body>
    <div id="fps">0</div>
    <div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
    <script>
    //ベースのコードはBabylon.js Playgroundからダウンロードした

    var canvas = document.getElementById("renderCanvas");

    var startRenderLoop = function (engine, canvas) {
        engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
                sceneToRender.render();
            }
        });
    }

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };

    var createScene = function () {
    //ここから変更
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);


    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(160, 30, 10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    //これがないと真っ暗になるので入れておく
    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    //1.assetManagerを宣言する
    var assetsManager = new BABYLON.AssetsManager(scene);
    let importedMesh

    //3.メッシュの読み込みが終わったら実行される
    assetsManager.onFinish = function (tasks) {
        console.log("Imported");
        //追加処理をしたいときはここに書く。
    };
    //2. メッシュの読み込み処理
    var meshTask = assetsManager.addMeshTask("city", "", "./3dmodels/", "CityPark_v12.glb");
    assetsManager.load();

    //scene.debugLayer.show({
    //    embedMode: true,
    //});

    let divFps = document.getElementById("fps");
    var test = setInterval( function(){
        divFps.innerHTML = engine.getFps().toFixed() + "fps";
    }, 500)
    //scene.freezeActiveMeshes();//これを有効にすると、いくつかの3Dモデルが非表示になってしまう。

    scene.getAnimationRatio();

    //変更ここまで
    //これ以降はPlaygroundから出力された時に書かれた内容なのでタッチしない

    return scene;
};
                window.initFunction = async function() {
                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                        }
                    }
                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        startRenderLoop(engine, canvas);
        window.scene = createScene();};

        initFunction().then(() => {sceneToRender = scene
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Performance Test on Babylon.js</title>

	<!-- Babylon.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
	<script src="https://assets.babylonjs.com/generated/Assets.js"></script>
	<script src="https://cdn.babylonjs.com/ammo.js"></script>
	<script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
	<script src="https://cdn.babylonjs.com/cannon.js"></script>
	<script src="https://cdn.babylonjs.com/Oimo.js"></script>
	<script src="https://cdn.babylonjs.com/earcut.min.js"></script>
	<script src="https://cdn.babylonjs.com/babylon.js"></script>
	<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
	<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
	<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
	<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
	<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
	<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
	<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

	<style>
	html, body {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#renderCanvas {
	width: 100%;
	height: 100%;
	touch-action: none;
	}

	#canvasZone {
	width: 100%;
	height: 100%;
	}
	#fps {
	position: absolute;
	background-color: black;
	border: 2px solid red;
	text-align: center;
	font-size: 42px;
	color: white;
	top: 15px;
	right: 120px;
	width: 150px;
	height: 60px;
	}
	</style>
	</head>
	<body>
	<div id="fps">0</div>
	<div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
	<script>
	//ベースのコードはBabylon.js Playgroundからダウンロードした

	var canvas = document.getElementById("renderCanvas");

	var startRenderLoop = function (engine, canvas) {
	engine.runRenderLoop(function () {
	if (sceneToRender && sceneToRender.activeCamera) {
	sceneToRender.render();
	}
	});
	}

	var engine = null;
	var scene = null;
	var sceneToRender = null;
	var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };

	var createScene = function () {
	//ここから変更
	// This creates a basic Babylon Scene object (non-mesh)
	var scene = new BABYLON.Scene(engine);


	// This creates and positions a free camera (non-mesh)
	var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(160, 30, 10), scene);

	// This targets the camera to scene origin
	camera.setTarget(BABYLON.Vector3.Zero());

	// This attaches the camera to the canvas
	camera.attachControl(canvas, true);

	//これがないと真っ暗になるので入れておく
	// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
	var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

	//1.assetManagerを宣言する
	var assetsManager = new BABYLON.AssetsManager(scene);
	let importedMesh

	//3.メッシュの読み込みが終わったら実行される
	assetsManager.onFinish = function (tasks) {
	console.log("Imported");
	//追加処理をしたいときはここに書く。
	};
	//2. メッシュの読み込み処理
	var meshTask = assetsManager.addMeshTask("city", "", "./3dmodels/", "CityPark_v12.glb");
	assetsManager.load();

	//scene.debugLayer.show({
	// embedMode: true,
	//});

	let divFps = document.getElementById("fps");
	var test = setInterval( function(){
	divFps.innerHTML = engine.getFps().toFixed() + "fps";
	}, 500)
	//scene.freezeActiveMeshes();//これを有効にすると、いくつかの3Dモデルが非表示になってしまう。

	scene.getAnimationRatio();

	//変更ここまで
	//これ以降はPlaygroundから出力された時に書かれた内容なのでタッチしない

	return scene;
	};
	window.initFunction = async function() {
	var asyncEngineCreation = async function() {
	try {
	return createDefaultEngine();
	} catch(e) {
	console.log("the available createEngine function failed. Creating the default engine instead");
	return createDefaultEngine();
	}
	}
	window.engine = await asyncEngineCreation();
	if (!engine) throw 'engine should not be null.';
	startRenderLoop(engine, canvas);
	window.scene = createScene();};

	initFunction().then(() => {sceneToRender = scene
	});

	// Resize
	window.addEventListener("resize", function () {
	engine.resize();
	});

	</script>
	</body>
	</html>