a-b-street/abstreet
1
1
Fork 0
mirror of https://github.com/a-b-street/abstreet.git synced 2024-12-25 15:33:44 +03:00
Code Issues Projects Releases Wiki Activity

Add a progress bar for the initial .wasm loading. #377

Browse Source 
It's now easier to understand the possibly slow downloading of the 80MB
.wasm.
This commit is contained in:
Dustin Carlino 2020-12-05 20:51:14 -08:00
parent 8e0a2ea8d5
commit b1811c21ab
4 changed files with 64 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
experiment/index.html
View File

@ -2,35 +2,54 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<style> <script type="module">
/*! import { default as init } from './experiment.js';
* 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';
async function run() { function prettyPrintBytes(bytes) {
await init('./experiment_bg.wasm'); if (bytes < 1024 ** 2) {
} return Math.round(bytes / 1024) + " KB";
}
return Math.round(bytes / 1024 ** 2) + " MB";
}
run(); async function run() {
</script> 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> </head>
<body style="background-color:black;"> <body style="background-color:black;">
<div id="loading" style="padding-top: 40px; color: white; text-align: center; font-family: arial; font-size: 200%;"> <div id="loading" style="padding-top: 40px; color: white; text-align: center; font-family: arial; font-size: 200%;">
<h1>Loading 15 minute Santa...</h1> <h1>Loading 15 minute Santa...</h1>
<div style="margin: auto" class="la-ball-beat la-2x"> <div style="width: 100%; background-color: white;">
<div></div> <div style="width: 1%; height: 30px; background-color: red;" id="progress_bar"></div>
<div></div> </div>
<div></div> <div id="progress_text"></div>
</div>
<h2>this may take up to 30 seconds</h2>
<p>If you think something has broken, check your browser's developer console (Ctrl+Shift+I or similar)</p> <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> </div>
</body> </body>
<html> <html>

9
widgetry/src/backend_glow_native.rs
View File

@ -1,9 +1,14 @@
use glow::HasContext; use glow::HasContext;
use abstutil::Timer;
use crate::backend_glow::{GfxCtxInnards, PrerenderInnards}; use crate::backend_glow::{GfxCtxInnards, PrerenderInnards};
use crate::ScreenDims; 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 event_loop = winit::event_loop::EventLoop::new();
let window = winit::window::WindowBuilder::new() let window = winit::window::WindowBuilder::new()
.with_title(window_title) .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(); crate::backend_glow::load_textures(&gl, "system/assets/textures/spritesheet.png", 64).unwrap();
timer.stop("load textures");
( (
PrerenderInnards::new(gl, program, WindowAdapter(windowed_context)), PrerenderInnards::new(gl, program, WindowAdapter(windowed_context)),

9
widgetry/src/backend_glow_wasm.rs
View File

@ -3,10 +3,15 @@ use std::rc::Rc;
use wasm_bindgen::JsCast; use wasm_bindgen::JsCast;
use winit::platform::web::WindowExtWebSys; use winit::platform::web::WindowExtWebSys;
use abstutil::Timer;
use crate::backend_glow::{GfxCtxInnards, PrerenderInnards}; use crate::backend_glow::{GfxCtxInnards, PrerenderInnards};
use crate::ScreenDims; 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"); info!("Setting up widgetry");
// This doesn't seem to work for the shader panics here, but later it does work. Huh. // 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(); crate::backend_glow::load_textures(&gl, "system/assets/textures/spritesheet.png", 64).unwrap();
timer.stop("load textures");
( (
PrerenderInnards::new(gl, program, WindowAdapter(winit_window)), PrerenderInnards::new(gl, program, WindowAdapter(winit_window)),

7
widgetry/src/runner.rs
View File

@ -5,6 +5,7 @@ use image::{GenericImageView, Pixel};
use instant::Instant; use instant::Instant;
use winit::window::Icon; use winit::window::Icon;
use abstutil::Timer;
use geom::Duration; use geom::Duration;
use crate::app_state::App; use crate::app_state::App;
@ -189,7 +190,8 @@ pub fn run<
settings: Settings, settings: Settings,
make_app: F, 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 let Some(ref path) = settings.window_icon {
if !cfg!(target_arch = "wasm32") { if !cfg!(target_arch = "wasm32") {
@ -218,6 +220,7 @@ pub fn run<
let mut canvas = Canvas::new(initial_size); let mut canvas = Canvas::new(initial_size);
prerender.window_resized(initial_size); prerender.window_resized(initial_size);
timer.start("setup app");
let (shared_app_state, states) = make_app(&mut EventCtx { let (shared_app_state, states) = make_app(&mut EventCtx {
fake_mouseover: true, fake_mouseover: true,
input: UserInput::new(Event::NoOp, &canvas), input: UserInput::new(Event::NoOp, &canvas),
@ -226,10 +229,12 @@ pub fn run<
style: &mut style, style: &mut style,
updates_requested: vec![], updates_requested: vec![],
}); });
timer.stop("setup app");
let app = App { let app = App {
shared_app_state, shared_app_state,
states, states,
}; };
timer.done();
let mut state = State { canvas, app, style }; let mut state = State { canvas, app, style };