zhouenguang
/
PrimordialUniverse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!DOCTYPE html>
<html lang="en">
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>demo</title>
      <style>
        html,
        body {
          overflow: hidden;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }

        #renderCanvas {
          width: 100%;
          height: 100%;
          touch-action: none;
        }

        #videoTextureBox video {
          display: none;
        }
      </style>
    </head>
    <body>
      <video
        id="testVideoFeed"
        crossorigin="anonymous"
        playsinline
        autoplay
        muted
        style="
          position: fixed;
          width: 600px;
          height: 600px;
          z-index: 10000;
          top: 0;
          left: 0;
        "
      ></video>
      <canvas id="renderCanvas"></canvas>

      <div id="videoTextureBox">
        <video
          id="houseTexture0"
          src="./textures/outputmp4/0/0.mp4"
          crossorigin="anonymous"
          playsinline
          autoplay
          muted
          loop
        ></video>
      </div>

      <!-- Babylon.js -->
      <script src="./libs/jquery-1.10.2.min.js"></script>
      <script src="./libs/dat.gui.min.js"></script>
      <script src="./libs/ammo.js"></script>
      <script src="./libs/cannon.js"></script>
      <script src="./libs/Oimo.js"></script>
      <script src="./libs/earcut.min.js"></script>
      <script src="./libs/recast.js"></script>

      <script src="./libs/babylon.js"></script>
      <script src="./libs/babylonjs.materials.min.js"></script>
      <script src="./libs/babylonjs.proceduralTextures.min.js"></script>
      <script src="./libs/babylonjs.postProcess.min.js"></script>
      <script src="./libs/babylonjs.loaders.js"></script>
      <script src="./libs/babylonjs.serializers.min.js"></script>
      <script src="./libs/babylon.gui.min.js"></script>
      <script src="./libs/babylon.inspector.bundle.js"></script>
      <script src="./libs/socket.2.3.js"></script>
      <script src="./webrtc//adapter-7.4.0.min.js"></script>
      <script src="./webrtc/srs.sdk.js"></script>
      <script type="module">
        import App from "./modules/index.js";

        var canvas = document.getElementById("renderCanvas");

        var engine = null;
        var scene = null;
        var sceneToRender = null;

        var startRenderLoop = function (engine, canvas) {
          engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
              sceneToRender.render();
            }
          });
        };

        var createDefaultEngine = function () {
          return new BABYLON.Engine(canvas, true, {
            preserveDrawingBuffer: true,
            stencil: true,
            disableWebGL2Support: false,
          });
        };

        var asyncEngineCreation = async function () {
          try {
            return createDefaultEngine();
          } catch (e) {
            console.log(
              "the available createEngine function failed. Creating the default engine instead"
            );
            return createDefaultEngine();
          }
        };

        window.initFunction = async function () {
          engine = await asyncEngineCreation();

          if (!engine) throw "engine should not be null.";
          startRenderLoop(engine, canvas);

          engine.enableOfflineSupport = false;

          // Scene and Camera
          window.app = new App(engine);
          scene = window.app.scene;
        };

        initFunction().then(() => {
          sceneToRender = scene;
        });

        window.scene = scene;
        window.engine = engine;
        // Resize
        window.addEventListener("resize", function () {
          engine.resize();
        });
      </script>

      <!-- worker -->
      <!-- <script src="./worker/decoderWorker.js"></script> -->
      <script src="./worker/index.js" type="module"></script>
      <script type="module" src="./webrtc/srs.js"></script>
    </body>
    <!-- <script src="https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/dist/trtc.js"></script> -->
  </html>
</html>