index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Local Development</title>
  5. <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
  7. <script src="../dist/preview%20release/cannon.js"></script>
  8. <script src="../dist/preview%20release/Oimo.js"></script>
  9. <script src="../dist/preview%20release/ammo.js"></script>
  10. <script src="../dist/preview%20release/recast.js"></script>
  11. <script src="../Tools/DevLoader/BabylonLoader.js"></script>
  12. <style>
  13. html,
  14. body {
  15. width: 100%;
  16. height: 100%;
  17. padding: 0;
  18. margin: 0;
  19. overflow: hidden;
  20. }
  21. #renderCanvas {
  22. width: 100%;
  23. height: 100%;
  24. display: block;
  25. font-size: 0;
  26. }
  27. #fps {
  28. position: absolute;
  29. background-color: black;
  30. border: 2px solid red;
  31. text-align: center;
  32. font-size: 16px;
  33. color: white;
  34. top: 15px;
  35. right: 10px;
  36. width: 60px;
  37. height: 20px;
  38. }
  39. @font-face {
  40. font-family: BabylonJSglyphs;
  41. /* src: url("http://www.killer-squid.com/fonts/BabylonJSglyphs.otf"); */
  42. src: local("BabylonJSglyphs");
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div id="fps">0</div>
  48. <canvas id="renderCanvas" touch-action="none"></canvas>
  49. <script>
  50. var canvas = document.getElementById("renderCanvas");
  51. // canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
  52. var divFps = document.getElementById("fps");
  53. // Global to simulate PG.
  54. var engine = null;
  55. // Allow querystring to navigate easily in debug in local samples.
  56. var indexjs = 'src/index';
  57. var sampleSearch = /sample=([0-9]+)/i;
  58. var matches = null;
  59. if ((matches = sampleSearch.exec(window.location)) !== null) {
  60. indexjs += '.';
  61. indexjs += matches[1];
  62. }
  63. indexjs += '.js';
  64. // var indexjs = "http://localhost:1234/index.js"
  65. // Load the scripts + map file to allow vscode debug.
  66. BABYLONDEVTOOLS.Loader
  67. .require(indexjs)
  68. .load(function() {
  69. BABYLON.DracoCompression.Configuration.decoder = {
  70. wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
  71. wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
  72. fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
  73. };
  74. BABYLON.GLTFValidation.Configuration = {
  75. url: "../dist/preview%20release/gltf_validator.js"
  76. };
  77. if (BABYLON.Engine.isSupported()) {
  78. if (typeof createEngine !== "undefined") {
  79. engine = createEngine();
  80. } else {
  81. engine = new BABYLON.Engine(canvas, true, { premultipliedAlpha: false, stencil: true, disableWebGL2Support: false, preserveDrawingBuffer: true });
  82. }
  83. BABYLONDEVTOOLS.Loader.debugShortcut(engine);
  84. // call the scene creation from the js.
  85. if (typeof delayCreateScene !== "undefined") {
  86. var scene = delayCreateScene();
  87. if (scene) {
  88. // Register a render loop to repeatedly render the scene
  89. engine.runRenderLoop(function() {
  90. if (scene.activeCamera) {
  91. scene.render();
  92. }
  93. divFps.innerHTML = engine.getFps().toFixed() + " fps";
  94. });
  95. }
  96. }
  97. else {
  98. var scene = createScene();
  99. if (scene) {
  100. var processCurrentScene = function(scene) {
  101. engine.runRenderLoop(function() {
  102. scene.render();
  103. divFps.innerHTML = engine.getFps().toFixed() + " fps";
  104. });
  105. }
  106. if (scene.then) {
  107. // Handle if createScene returns a promise
  108. scene.then(function(currentScene) {
  109. processCurrentScene(currentScene);
  110. }).catch(function(e) {
  111. console.error(e);
  112. onError();
  113. });
  114. } else {
  115. // Register a render loop to repeatedly render the scene
  116. processCurrentScene(scene);
  117. }
  118. }
  119. }
  120. // Resize
  121. window.addEventListener("resize", function() {
  122. engine.resize();
  123. });
  124. }
  125. else {
  126. alert('BabylonJS is not supported.')
  127. }
  128. });
  129. </script>
  130. </body>
  131. </html>