index.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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. <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
  13. <style>
  14. html,
  15. body {
  16. width: 100%;
  17. height: 100%;
  18. padding: 0;
  19. margin: 0;
  20. overflow: hidden;
  21. }
  22. #renderCanvas {
  23. width: 100%;
  24. height: 100%;
  25. display: block;
  26. font-size: 0;
  27. }
  28. #fps {
  29. position: absolute;
  30. background-color: black;
  31. border: 2px solid red;
  32. text-align: center;
  33. font-size: 16px;
  34. color: white;
  35. top: 15px;
  36. right: 10px;
  37. width: 60px;
  38. height: 20px;
  39. }
  40. @font-face {
  41. font-family: BabylonJSglyphs;
  42. /* src: url("http://www.killer-squid.com/fonts/BabylonJSglyphs.otf"); */
  43. src: local("BabylonJSglyphs");
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div id="fps">0</div>
  49. <canvas id="renderCanvas" touch-action="none"></canvas>
  50. <script>
  51. function GetAbsoluteUrl(url) {
  52. const a = document.createElement("a");
  53. a.href = url;
  54. return a.href;
  55. }
  56. var canvas = document.getElementById("renderCanvas");
  57. // canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
  58. var divFps = document.getElementById("fps");
  59. // Global to simulate PG.
  60. var engine = null;
  61. // Allow querystring to navigate easily in debug in local samples.
  62. var indexjs = 'src/index';
  63. var sampleSearch = /sample=([0-9]+)/i;
  64. var matches = null;
  65. if ((matches = sampleSearch.exec(window.location)) !== null) {
  66. indexjs += '.';
  67. indexjs += matches[1];
  68. }
  69. indexjs += '.js';
  70. // var indexjs = "http://localhost:1234/index.js"
  71. // Load the scripts + map file to allow vscode debug.
  72. BABYLONDEVTOOLS.Loader
  73. .require(indexjs)
  74. .load(function() {
  75. BABYLON.DracoCompression.Configuration.decoder = {
  76. wasmUrl: GetAbsoluteUrl("../dist/preview%20release/draco_wasm_wrapper_gltf.js"),
  77. wasmBinaryUrl: GetAbsoluteUrl("../dist/preview%20release/draco_decoder_gltf.wasm"),
  78. fallbackUrl: GetAbsoluteUrl("../dist/preview%20release/draco_decoder_gltf.js")
  79. };
  80. BABYLON.GLTFValidation.Configuration = {
  81. url: GetAbsoluteUrl("../dist/preview%20release/gltf_validator.js")
  82. };
  83. BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
  84. GetAbsoluteUrl("../dist/preview%20release/meshopt_decoder.js");
  85. BABYLON.KhronosTextureContainer2.URLConfig = {
  86. jsDecoderModule: GetAbsoluteUrl("../dist/preview%20release/babylon.ktx2Decoder.js"),
  87. wasmUASTCToASTC: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_astc.wasm"),
  88. wasmUASTCToBC7: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_bc7.wasm"),
  89. wasmUASTCToRGBA_UNORM: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_rgba32_unorm.wasm"),
  90. wasmUASTCToRGBA_SRGB: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_rgba32_srgb.wasm"),
  91. jsMSCTranscoder: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.js"),
  92. wasmMSCTranscoder: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.wasm")
  93. };
  94. if (BABYLON.Engine.isSupported()) {
  95. if (typeof createEngine !== "undefined") {
  96. engine = createEngine();
  97. } else {
  98. engine = new BABYLON.Engine(canvas, true, { premultipliedAlpha: false, stencil: true, disableWebGL2Support: false, preserveDrawingBuffer: true });
  99. }
  100. //engine.getCaps().textureAnisotropicFilterExtension = false;
  101. BABYLONDEVTOOLS.Loader.debugShortcut(engine);
  102. // call the scene creation from the js.
  103. if (typeof delayCreateScene !== "undefined") {
  104. var scene = delayCreateScene();
  105. if (scene) {
  106. // Register a render loop to repeatedly render the scene
  107. engine.runRenderLoop(function() {
  108. if (scene.activeCamera) {
  109. scene.render();
  110. }
  111. divFps.innerHTML = engine.getFps().toFixed() + " fps";
  112. });
  113. }
  114. }
  115. else {
  116. var scene = createScene();
  117. if (scene) {
  118. var processCurrentScene = function(scene) {
  119. engine.runRenderLoop(function() {
  120. scene.render();
  121. divFps.innerHTML = engine.getFps().toFixed() + " fps";
  122. });
  123. }
  124. if (scene.then) {
  125. // Handle if createScene returns a promise
  126. scene.then(function(currentScene) {
  127. processCurrentScene(currentScene);
  128. }).catch(function(e) {
  129. console.error(e);
  130. onError();
  131. });
  132. } else {
  133. // Register a render loop to repeatedly render the scene
  134. processCurrentScene(scene);
  135. }
  136. }
  137. }
  138. // Resize
  139. window.addEventListener("resize", function() {
  140. engine.resize();
  141. });
  142. }
  143. else {
  144. alert('BabylonJS is not supported.')
  145. }
  146. });
  147. </script>
  148. </body>
  149. </html>