Spaces:
Sleeping
Sleeping
| <!-- | |
| Copyright 2024 The Google Research Authors. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset=utf-8> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> | |
| <title>BlockMERF Viewer</title> | |
| <style> | |
| body { | |
| font-family: Helvetica, "Helvetica Neue", sans-serif; | |
| font-size: 18px; | |
| background: #FFF; | |
| padding: 20px; /* Picked to get an even nice resolution on iPhone 15 Pro */ | |
| margin: 0; | |
| text-align: right; | |
| } | |
| #error { | |
| display: none; | |
| position: fixed; | |
| top: 20px; left: 20px; right: 20px; bottom: 20px; | |
| background: #444; | |
| padding: 8px; | |
| white-space: pre; | |
| color: #fff; | |
| font-family: monospace; | |
| font-weight: bold; | |
| } | |
| #image-progress { | |
| background: #000; | |
| color: #FFF; | |
| opacity: 0.75; | |
| padding: 5px; | |
| } | |
| #Loading { | |
| position: absolute; | |
| top: 12px; | |
| left: 90px; | |
| } | |
| #Loading h4 { | |
| margin: 0px; | |
| } | |
| #loading-container { | |
| width: 150px; | |
| height: 150px; | |
| padding: 0px; | |
| margin: -40px 0 0 -40px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| } | |
| .loading-bgbox { | |
| position: absolute; | |
| width: 65px; | |
| height: 65px; | |
| background-color: #DDD; | |
| width: 65px; | |
| height: 65px; | |
| } | |
| #topleft { | |
| top: 5px; | |
| left: 5px; | |
| } | |
| #bottomleft { | |
| bottom: 5px; | |
| left: 5px; | |
| } | |
| #topright { | |
| top: 5px; | |
| right: 5px; | |
| } | |
| #bottomright { | |
| bottom: 5px; | |
| right: 5px; | |
| } | |
| #loading-indicator { | |
| position: absolute; | |
| top: 5px; | |
| left: 5px; | |
| width: 65px; | |
| height: 65px; | |
| background-color: #999; | |
| animation-name: indicator; | |
| animation-duration: 5s; | |
| animation-iteration-count: infinite; | |
| } | |
| @keyframes indicator { | |
| 0% {top: 5px; left: 5px; } | |
| 25% {top: 5px; left: 80px; } | |
| 50% {top: 80px; left: 80px; } | |
| 75% {top: 80px; left: 5px; } | |
| } | |
| #benchmark-stats { | |
| position: absolute; | |
| top: 0px; | |
| right: 0px; | |
| display: none; | |
| } | |
| #shader-editor { | |
| display: none; | |
| margin-top: 10px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| </style> | |
| <!-- Lien vers la feuille de style --> | |
| </head> | |
| <body> | |
| <div id=error></div> | |
| <!-- main content--> | |
| <div id="viewspacecontainer"> | |
| <div id="Loading"> | |
| <h4> | |
| <span id="image-progress">Loading images: 0/?</span> | |
| </h4> | |
| </div> | |
| <textarea readonly id="benchmark-stats" rows="40" cols="40"> | |
| Click me to start benchmarking when the frame-rate is behaving reasonably. | |
| </textarea> | |
| <div id="loading-container"> | |
| <div id="topleft" class="loading-bgbox"></div> | |
| <div id="bottomleft" class="loading-bgbox"></div> | |
| <div id="topright" class="loading-bgbox"></div> | |
| <div id="bottomright" class="loading-bgbox"></div> | |
| <div id="loading-indicator"></div> | |
| </div> | |
| <div class=viewspace id="viewspace"></div> | |
| </div> | |
| <!-- shader editor --> | |
| <textarea id="shader-editor" rows="50" cols="200"></textarea> | |
| <!-- third party --> | |
| <script src="https://unpkg.com/three@0.113.1/build/three.js"></script> | |
| <script src="https://unpkg.com/three@0.113.1/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://unpkg.com/three@0.113.1/examples/js/controls/PointerLockControls.js"></script> | |
| <!-- <script src="https://unpkg.com/png-js@1.0.0/zlib.js"></script> --> | |
| <!-- <script src="https://unpkg.com/png-js@1.0.0/png.js"></script> --> | |
| <script src="https://unpkg.com/stats-js@1.0.1/build/stats.min.js"></script> | |
| <script src="https://unpkg.com/file-saver@2.0.0-rc.2/dist/FileSaver.min.js"></script> | |
| <!-- Use if you've downloaded these scripts locally. --> | |
| <!-- <script src="deps/three.js"></script> --> | |
| <!-- <script src="deps/OrbitControls.js"></script> --> | |
| <!-- <script src="deps/PointerLockControls.js"></script> --> | |
| <script type="module" src="src/deps/zlib.js"></script> | |
| <script type="module" src="src/deps/png.js"></script> | |
| <!-- type="module" <script type="module" src="deps/stats.min.js"></script> type="module" --> | |
| <!-- type="module" own type="module" code--> | |
| <script type="module" src="src/scene_spec.js"></script> | |
| <script type="module" src="src/fetch_asset.js"></script> | |
| <script type="module" src="src/create_texture.js"></script> | |
| <script type="module" src="src/prepare_payload.js"></script> | |
| <script type="module" src="src/populate_texture.js"></script> | |
| <script type="module" src="src/texture_manager.js"></script> | |
| <script type="module" src="src/worker_pool.js"></script> | |
| <script type="module" src="src/globals.js"></script> | |
| <script type="module" src="src/utils.js"></script> | |
| <script type="module" src="src/progressive.js"></script> | |
| <script type="module" src="src/viewdependency.js"></script> | |
| <script type="module" src="src/defaultposes.js"></script> | |
| <script type="module" src="src/input.js"></script> | |
| <script type="module" src="src/benchmark.js"></script> | |
| <script type="module" src="src/index.js"></script> | |
| </body> | |
| </html> | |