zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!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>
    <script src="../dist/preview%20release/shaderc/shaderc.js"></script>

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

        #renderCanvas {
            width: 1024px;
            height: 768px;
            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;
        }

        @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 = '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
            .loadCoreOnly()
            .require(indexjs)
            .load(function() {
                if (BABYLON.Engine.isSupported()) {
                    var onLoad = () => {
                        // call the scene creation from the js.
                        if (typeof delayCreateScene !== "undefined") {
                            var scene = delayCreateScene();

                            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();

                            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 shadercOptions = { 
                        wasmBinaryFile: "/dist/preview release/Shaderc/shaderc.wasm"
                    };

                    if (typeof createEngine !== "undefined") {
                        engine = createEngine();
                        engine.initEngineAsync(shadercOptions).then(() => onLoad());
                    } else {
                        engine = new BABYLON.WebGPUEngine(canvas);
                        engine.initEngineAsync(shadercOptions).then(() => onLoad());
                    }

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

</html>