test2.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. html, body {
  5. border: 0;
  6. padding: 0;
  7. margin: 0;
  8. top: 0;
  9. left: 0;
  10. }
  11. </style>
  12. <script type="text/javascript">
  13. var game;
  14. var Systems = {};
  15. var assetManifest = [
  16. {type: 'fragmentShader', name: 'frag', src: 'assets/shaders/fragment.glsl' },
  17. {type: 'vertexShader', name: 'vert', src: 'assets/shaders/vertex.glsl' },
  18. {type: 'fragmentShader', name: 'terrain', src: 'assets/shaders/terrain-frag.glsl' },
  19. {type: 'fragmentShader', name: 'sprite', src: 'assets/shaders/sprite-frag.glsl' },
  20. {type: 'vertexShader', name: 'terrain', src: 'assets/shaders/terrain-vert.glsl' },
  21. {type: 'vertexShader', name: 'sprite', src: 'assets/shaders/sprite-vert.glsl' },
  22. {type: 'json', name: 'sdf_data', src: 'assets/sdf-output.json' },
  23. {type: 'image', name: 'sdf_data', src: 'assets/sdf-output-1.png' },
  24. {type: 'imageArray', name: 'sprites', stripPath: true, src: [
  25. 'assets/textures/sprites/marker-blue.png',
  26. 'assets/textures/sprites/marker-brown.png',
  27. 'assets/textures/sprites/marker-cyan.png',
  28. 'assets/textures/sprites/marker-gray.png',
  29. 'assets/textures/sprites/marker-green.png',
  30. 'assets/textures/sprites/marker-orange.png',
  31. 'assets/textures/sprites/marker-pink.png',
  32. 'assets/textures/sprites/marker-purple.png',
  33. 'assets/textures/sprites/marker-red.png',
  34. 'assets/textures/sprites/marker-teal.png',
  35. 'assets/textures/sprites/marker-yellow.png',
  36. ]},
  37. {type: 'imageArray', name: 'terraintex', stripPath: true, src: [
  38. 'assets/textures/terrain/grass-base.png',
  39. 'assets/textures/terrain/grass-yellow-flowers.png',
  40. 'assets/textures/terrain/pavement.png',
  41. 'assets/textures/terrain/dirt.png',
  42. 'assets/textures/terrain/concrete.png',
  43. 'assets/textures/terrain/sidewalk-v.png',
  44. 'assets/textures/terrain/sidewalk-h.png',
  45. // 'assets/textures/terrain/gravel.png',
  46. ]},
  47. ]
  48. var gl;
  49. // document.addEventListener("DOMContentLoaded", function() {
  50. window.addEventListener("load", function() {
  51. var glcanvas = document.getElementById('canvas');
  52. gl = glcanvas.getContext("webgl2");
  53. var w = window.innerWidth;
  54. var h = window.innerHeight;
  55. console.log(w,h);
  56. glcanvas.width = window.innerWidth;
  57. glcanvas.height = window.outerHeight;
  58. glcanvas.style.width = window.innerWidth + 'px';
  59. glcanvas.style.height = window.innerHeight + 'px';
  60. gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  61. loadAssets(assetManifest, function(err, a) {
  62. main(a);
  63. });
  64. });
  65. </script>
  66. <script type="text/javascript" src="3rd_party/gl-matrix-min.js"></script>
  67. <script type="text/javascript">
  68. (function(m) { // globalize glMatrix
  69. for(var p in m) {
  70. this[p] = m[p];
  71. }
  72. })(glMatrix);
  73. </script>
  74. <script type="text/javascript" src="3rd_party/json5.min.js"></script>
  75. <script type="text/javascript" src="glcore.js"></script>
  76. <script type="text/javascript" src="sprite.js"></script>
  77. <script type="text/javascript" src="terrain.js"></script>
  78. <script type="text/javascript" src="maputil.js"></script>
  79. <script type="text/javascript" src="main.js"></script>
  80. <script type="text/javascript" src="systems/movement.js"></script>
  81. <script type="text/javascript">
  82. </script>
  83. </head>
  84. <body>
  85. <canvas id="canvas">Loading...</canvas>
  86. <div id="hidden" style="display:none;"></div>
  87. </body>
  88. </html>