Skip to content

Instantly share code, notes, and snippets.

@flushpot1125
Created May 7, 2023 08:13
Show Gist options
  • Save flushpot1125/7a829e0e3602f94818626db2f5f91b51 to your computer and use it in GitHub Desktop.
Save flushpot1125/7a829e0e3602f94818626db2f5f91b51 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment