mirror of
https://github.com/a-b-street/abstreet.git
synced 2024-12-24 15:02:59 +03:00
Add a progress bar for the initial .wasm loading. #377
It's now easier to understand the possibly slow downloading of the 80MB .wasm.
This commit is contained in:
parent
8e0a2ea8d5
commit
b1811c21ab
@ -2,35 +2,54 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
/*!
|
||||
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
|
||||
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
|
||||
* Licensed under MIT
|
||||
*/
|
||||
.la-ball-beat,.la-ball-beat>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-beat{display:block;font-size:0;color:#fff}.la-ball-beat.la-dark{color:#333}.la-ball-beat>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-beat{width:54px;height:18px}.la-ball-beat>div{width:10px;height:10px;margin:4px;border-radius:100%;-webkit-animation:ball-beat 0.7s -0.15s infinite linear;-moz-animation:ball-beat 0.7s -0.15s infinite linear;-o-animation:ball-beat 0.7s -0.15s infinite linear;animation:ball-beat 0.7s -0.15s infinite linear}.la-ball-beat>div:nth-child(2n-1){-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}.la-ball-beat.la-sm{width:26px;height:8px}.la-ball-beat.la-sm>div{width:4px;height:4px;margin:2px}.la-ball-beat.la-2x{width:108px;height:36px}.la-ball-beat.la-2x>div{width:20px;height:20px;margin:8px}.la-ball-beat.la-3x{width:162px;height:54px}.la-ball-beat.la-3x>div{width:30px;height:30px;margin:12px}@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-beat{50%{opacity:.2;-moz-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-beat{50%{opacity:.2;-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}
|
||||
</style>
|
||||
<script type="module">
|
||||
import { default as init } from './experiment.js';
|
||||
<script type="module">
|
||||
import { default as init } from './experiment.js';
|
||||
|
||||
async function run() {
|
||||
await init('./experiment_bg.wasm');
|
||||
}
|
||||
function prettyPrintBytes(bytes) {
|
||||
if (bytes < 1024 ** 2) {
|
||||
return Math.round(bytes / 1024) + " KB";
|
||||
}
|
||||
return Math.round(bytes / 1024 ** 2) + " MB";
|
||||
}
|
||||
|
||||
run();
|
||||
</script>
|
||||
async function run() {
|
||||
const t0 = performance.now();
|
||||
console.log("Started loading WASM");
|
||||
let response = await fetch('./experiment_bg.wasm');
|
||||
const contentLength = response.headers.get('Content-Length');
|
||||
const reader = response.body.getReader();
|
||||
let receivedLength = 0;
|
||||
let chunks = [];
|
||||
while (true) {
|
||||
const {done, value} = await reader.read();
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
chunks.push(value);
|
||||
receivedLength += value.length;
|
||||
document.getElementById("progress_text").innerText = prettyPrintBytes(receivedLength) + " / " + prettyPrintBytes(contentLength);
|
||||
document.getElementById("progress_bar").style.width = (100.0 * receivedLength / contentLength) + "%";
|
||||
}
|
||||
document.getElementById("progress_text").innerText = "Loaded " + prettyPrintBytes(contentLength) + ", now initializing WASM module";
|
||||
let blob = new Blob(chunks);
|
||||
let buffer = await blob.arrayBuffer();
|
||||
const t1 = performance.now();
|
||||
console.log(`It took ${t1 - t0} ms to download WASM, now initializing it`);
|
||||
await init(buffer);
|
||||
}
|
||||
|
||||
run();
|
||||
</script>
|
||||
</head>
|
||||
<body style="background-color:black;">
|
||||
<div id="loading" style="padding-top: 40px; color: white; text-align: center; font-family: arial; font-size: 200%;">
|
||||
<h1>Loading 15 minute Santa...</h1>
|
||||
<div style="margin: auto" class="la-ball-beat la-2x">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h2>this may take up to 30 seconds</h2>
|
||||
<h1>Loading 15 minute Santa...</h1>
|
||||
<div style="width: 100%; background-color: white;">
|
||||
<div style="width: 1%; height: 30px; background-color: red;" id="progress_bar"></div>
|
||||
</div>
|
||||
<div id="progress_text"></div>
|
||||
<p>If you think something has broken, check your browser's developer console (Ctrl+Shift+I or similar)</p>
|
||||
<p>(your browser must support WebGL and WebAssembly)</p>
|
||||
<p>(Your browser must support WebGL and WebAssembly)</p>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
|
@ -1,9 +1,14 @@
|
||||
use glow::HasContext;
|
||||
|
||||
use abstutil::Timer;
|
||||
|
||||
use crate::backend_glow::{GfxCtxInnards, PrerenderInnards};
|
||||
use crate::ScreenDims;
|
||||
|
||||
pub fn setup(window_title: &str) -> (PrerenderInnards, winit::event_loop::EventLoop<()>) {
|
||||
pub fn setup(
|
||||
window_title: &str,
|
||||
timer: &mut Timer,
|
||||
) -> (PrerenderInnards, winit::event_loop::EventLoop<()>) {
|
||||
let event_loop = winit::event_loop::EventLoop::new();
|
||||
let window = winit::window::WindowBuilder::new()
|
||||
.with_title(window_title)
|
||||
@ -83,7 +88,9 @@ pub fn setup(window_title: &str) -> (PrerenderInnards, winit::event_loop::EventL
|
||||
);
|
||||
}
|
||||
|
||||
timer.start("load textures");
|
||||
crate::backend_glow::load_textures(&gl, "system/assets/textures/spritesheet.png", 64).unwrap();
|
||||
timer.stop("load textures");
|
||||
|
||||
(
|
||||
PrerenderInnards::new(gl, program, WindowAdapter(windowed_context)),
|
||||
|
@ -3,10 +3,15 @@ use std::rc::Rc;
|
||||
use wasm_bindgen::JsCast;
|
||||
use winit::platform::web::WindowExtWebSys;
|
||||
|
||||
use abstutil::Timer;
|
||||
|
||||
use crate::backend_glow::{GfxCtxInnards, PrerenderInnards};
|
||||
use crate::ScreenDims;
|
||||
|
||||
pub fn setup(window_title: &str) -> (PrerenderInnards, winit::event_loop::EventLoop<()>) {
|
||||
pub fn setup(
|
||||
window_title: &str,
|
||||
timer: &mut Timer,
|
||||
) -> (PrerenderInnards, winit::event_loop::EventLoop<()>) {
|
||||
info!("Setting up widgetry");
|
||||
|
||||
// This doesn't seem to work for the shader panics here, but later it does work. Huh.
|
||||
@ -113,7 +118,9 @@ pub fn setup(window_title: &str) -> (PrerenderInnards, winit::event_loop::EventL
|
||||
);
|
||||
}
|
||||
|
||||
timer.start("load textures");
|
||||
crate::backend_glow::load_textures(&gl, "system/assets/textures/spritesheet.png", 64).unwrap();
|
||||
timer.stop("load textures");
|
||||
|
||||
(
|
||||
PrerenderInnards::new(gl, program, WindowAdapter(winit_window)),
|
||||
|
@ -5,6 +5,7 @@ use image::{GenericImageView, Pixel};
|
||||
use instant::Instant;
|
||||
use winit::window::Icon;
|
||||
|
||||
use abstutil::Timer;
|
||||
use geom::Duration;
|
||||
|
||||
use crate::app_state::App;
|
||||
@ -189,7 +190,8 @@ pub fn run<
|
||||
settings: Settings,
|
||||
make_app: F,
|
||||
) -> ! {
|
||||
let (prerender_innards, event_loop) = crate::backend::setup(&settings.window_title);
|
||||
let mut timer = Timer::new("setup widgetry");
|
||||
let (prerender_innards, event_loop) = crate::backend::setup(&settings.window_title, &mut timer);
|
||||
|
||||
if let Some(ref path) = settings.window_icon {
|
||||
if !cfg!(target_arch = "wasm32") {
|
||||
@ -218,6 +220,7 @@ pub fn run<
|
||||
let mut canvas = Canvas::new(initial_size);
|
||||
prerender.window_resized(initial_size);
|
||||
|
||||
timer.start("setup app");
|
||||
let (shared_app_state, states) = make_app(&mut EventCtx {
|
||||
fake_mouseover: true,
|
||||
input: UserInput::new(Event::NoOp, &canvas),
|
||||
@ -226,10 +229,12 @@ pub fn run<
|
||||
style: &mut style,
|
||||
updates_requested: vec![],
|
||||
});
|
||||
timer.stop("setup app");
|
||||
let app = App {
|
||||
shared_app_state,
|
||||
states,
|
||||
};
|
||||
timer.done();
|
||||
|
||||
let mut state = State { canvas, app, style };
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user