mirror of
https://github.com/a-b-street/abstreet.git
synced 2024-12-25 15:33:44 +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,19 +2,40 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<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">
|
<script type="module">
|
||||||
import { default as init } from './experiment.js';
|
import { default as init } from './experiment.js';
|
||||||
|
|
||||||
|
function prettyPrintBytes(bytes) {
|
||||||
|
if (bytes < 1024 ** 2) {
|
||||||
|
return Math.round(bytes / 1024) + " KB";
|
||||||
|
}
|
||||||
|
return Math.round(bytes / 1024 ** 2) + " MB";
|
||||||
|
}
|
||||||
|
|
||||||
async function run() {
|
async function run() {
|
||||||
await init('./experiment_bg.wasm');
|
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();
|
run();
|
||||||
@ -23,14 +44,12 @@
|
|||||||
<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>
|
||||||
<h2>this may take up to 30 seconds</h2>
|
<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>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>
|
||||||
|
@ -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)),
|
||||||
|
@ -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)),
|
||||||
|
@ -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 };
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user