zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Local Development</title>

    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="../dist/preview%20release/cannon.js"></script>
    <script src="../dist/preview%20release/Oimo.js"></script>
    <script src="../dist/preview%20release/ammo.js"></script>
    <script src="../dist/preview%20release/gltf_validator.js"></script>
    <script src="../Tools/DevLoader/BabylonLoader.js"></script>

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

        #renderCanvas {
            width: 100%;
            height: 100%;
            display: block;
            font-size: 0;
        }

        #fps {
            position: absolute;
            background-color: black;
            border: 2px solid red;
            text-align: center;
            font-size: 16px;
            color: white;
            top: 15px;
            right: 10px;
            width: 60px;
            height: 20px;
            z-index: 10;
        }

        @font-face {
            font-family: BabylonJSglyphs;
           /* src: url("http://www.killer-squid.com/fonts/BabylonJSglyphs.otf"); */
            src: local("BabylonJSglyphs");
        }
        
    </style>
</head>

<body>
    <div id="fps">0</div>
    <canvas id="renderCanvas" touch-action="none" width="1024" height="768"></canvas>

    <script>
        var canvas = document.getElementById("renderCanvas");
        var divFps = document.getElementById("fps");

        // Global to simulate PG.
        var engine = null;

        // Allow querystring to navigate easily in debug in local samples.
        var indexjs = '/localDev/src/index';
        var sampleSearch = /sample=([0-9]+)/i;
        var matches = null;
        if ((matches = sampleSearch.exec(window.location)) !== null) {
            indexjs += '.';
            indexjs += matches[1];
        }
        indexjs += '.js';

        // Load the scripts + map file to allow vscode debug.
        BABYLONDEVTOOLS.Loader
            .require(indexjs)
            .load(function() {
                if (BABYLON.Engine.isSupported()) {
                    var onLoad = (engine) => {
                        // call the scene creation from the js.
                        if (typeof delayCreateScene !== "undefined") {
                            var scene = delayCreateScene(engine);

                            if (scene) {
                                // Register a render loop to repeatedly render the scene

                                engine.runRenderLoop(function() {
                                    if (scene.activeCamera) {
                                        scene.render();
                                    }
                                    divFps.innerHTML = engine.getFps().toFixed() + " fps";
                                });
                            }
                        }
                        else {
                            var scene = createScene(engine);

                            if (scene) {

                                var processCurrentScene = function(scene) {
                                    engine.runRenderLoop(function() {
                                        scene.render();
                                        divFps.innerHTML = engine.getFps().toFixed() + " fps";
                                    });
                                }

                                if (scene.then) {
                                    // Handle if createScene returns a promise
                                    scene.then(function(currentScene) {
                                        processCurrentScene(currentScene);
                                    }).catch(function(e) {
                                        console.error(e);
                                        onError();
                                    });
                                } else {
                                    // Register a render loop to repeatedly render the scene
                                    processCurrentScene(scene);
                                }
                            }
                        }

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

                    var glslangOptions = { 
                        jsPath: "/dist/preview release/glslang/glslang.js",
                        wasmPath: "/dist/preview release/glslang/glslang.wasm"
                    };

                    if (typeof createEngine !== "undefined") {
                        engine = createEngine();
                        engine.initAsync(glslangOptions).then(() => onLoad(engine));
                    } else {
                        engine = new BABYLON.WebGPUEngine(canvas, {
                            deviceDescriptor: {
                                extensions: [
                                    "texture-compression-bc",
                                    "timestamp-query",
                                    "pipeline-statistics-query",
                                    "depth-clamping",
                                    "depth24unorm-stencil8",
                                    "depth32float-stencil8"
                                ]
                            },
                            enableGPUDebugMarkers: true,
                            antialiasing: true,
                        });
                        engine.initAsync(glslangOptions).then(() => onLoad(engine));
                    }

                    BABYLONDEVTOOLS.Loader.debugShortcut(engine);
                }
                else {
                    alert('BabylonJS is not supported.')
                }
            });
    </script>
</body>

</html>