Skip to content

Instantly share code, notes, and snippets.

@flushpot1125

flushpot1125/Simple_snapshot_rendering_exmaple_BJS_WebGPU.js

Last active May 14, 2023 08:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flushpot1125/204fcf557560b7540d7d7cefe1837582 to your computer and use it in GitHub Desktop.
Save flushpot1125/204fcf557560b7540d7d7cefe1837582 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Simple_snapshot_rendering_exmaple_BJS_WebGPU.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js sample code</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%;
}
</style>
</head>
<body>
<div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
<script>
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 = async function() {
var engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
return engine;
};
/*もしSnapShotRenderingを有効にしたい場合、この２行を記述する。今回のように選択式にする場合はdat GUIで選択できるようにする*/
//engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_FAST;
//engine.snapshotRendering = true;
console.log("BABYLON.Constants.SNAPSHOTRENDERING_STANDARD:"+BABYLON.Constants.SNAPSHOTRENDERING_STANDARD);//0
console.log("BABYLON.Constants.SNAPSHOTRENDERING_FAST:"+BABYLON.Constants.SNAPSHOTRENDERING_FAST);//1
const setSnapshotMode = (mode) => {
switch(mode) {
case "disabled":
engine.snapshotRendering = false;
break;
case "standard":
engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_STANDARD;
engine.snapshotRendering = true;
break;
case "fast":
engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_FAST;
engine.snapshotRendering = true;
break;
}
};
var delayCreateScene = function () {
var scene = new BABYLON.Scene(engine);
const sceneInstrumentation = new BABYLON.SceneInstrumentation(scene);
sceneInstrumentation.captureFrameTime = true;
BABYLON.SceneLoader.Append("./3dmodels/", "vaccume_tube_factory.glb", scene, function (newMeshes) {
scene.createDefaultCamera(false);
scene.activeCamera.attachControl(canvas, false);
scene.clearColor = new BABYLON.Color3(1, 1, 1);
const light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(-1, -1, -1), scene);
light.intensity = 1;
light.shadowMinZ = -90 * 2;
light.shadowMaxZ = 130 * 2;
scene.activeCamera.minZ = 0.25;
scene.activeCamera.maxZ = 250;
scene.activeCamera.position.set(102, 50, 5);
scene.activeCamera.target = new BABYLON.Vector3(0, 0, 5);
scene.activeCamera.fov = Math.PI / 4 * 0.75;
scene.activeCamera.angularSensibility = 2000;
scene.activeCamera.speed = 3;
//"gui"はWebGPUで使用可能なパフォーマンスチェック、およびSnapshotRenderingのモード切り替えに使用している
const gui = makeGUI(scene, sceneInstrumentation);
scene.onBeforeRenderObservable.add(() => {
//必要があれば記載
if (engine.snapshotRendering && engine.snapshotRenderingMode === BABYLON.Constants.SNAPSHOTRENDERING_FAST) {
}
});
});
return new Promise((resolve) => {
scene.executeWhenReady(() => {
setSnapshotMode("fast");
resolve(scene);
});
});
}
function makeGUI(scene, sceneInstrumentation) {
const oldgui = document.getElementById("datGUI");
if (oldgui){
oldgui.remove();
}
const gui = new dat.GUI();
gui.domElement.id = "datGUI";
this._options = {
"global_snapshotmode": "fast",
"statistics_frametotal": "0 ms",
"statistics_virtualfps": "0 fps",
};
gui.domElement.style.marginTop = "100px";
// Global
const global = gui.addFolder("Global");
global.add(this._options, "global_snapshotmode", ["disabled", "standard", "fast"])
.name("Snapshot mode")
.onChange((value) => {
setSnapshotMode(value);
});
let saveCurrentSnapshotMode;
global.open();
// Statistics
const statistics = gui.addFolder("Statistics");
const frameTotalCtrl = statistics.add(this._options, "statistics_frametotal")
.name("Frame total");
frameTotalCtrl.domElement.children[0].readOnly = true;
const virtualFpsCtrl = statistics.add(this._options, "statistics_virtualfps")
.name("Virtual fps");
virtualFpsCtrl.domElement.children[0].readOnly = true;
scene.onAfterRenderObservable.add(() => {
frameTotalCtrl.__input.value = sceneInstrumentation.frameTimeCounter.lastSecAverage.toFixed(2) + " ms";
virtualFpsCtrl.__input.value = (1000 / sceneInstrumentation.frameTimeCounter.lastSecAverage).toFixed(0) + " fps";
});
statistics.open();
return this._options;
}
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 = delayCreateScene();};
initFunction().then(() => {scene.then(returnedScene => { sceneToRender = returnedScene; }); });
// 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