wasm-game-of-life-at v0.1.0

A template for kick starting a Rust and WebAssembly project using wasm-pack.

Built with 🦀🕸 by The Rust and WebAssembly Working Group

About

📚 Read this template tutorial! 📚

This template is designed for compiling Rust libraries into WebAssembly and publishing the resulting package to NPM.

Be sure to check out other wasm-pack tutorials online for other templates and usages of wasm-pack.

🚴 Usage

🐑 Use cargo generate to Clone this Template

Learn more about cargo generate here.

cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
cd my-project

🛠️ Build with wasm-pack build

wasm-pack build

🔬 Test in Headless Browsers with wasm-pack test

wasm-pack test --headless --firefox

🎁 Publish to NPM with wasm-pack publish

wasm-pack publish

🔋 Batteries Included

• wasm-bindgen for communicating between WebAssembly and JavaScript.
• console_error_panic_hook for logging panic messages to the developer console.
• wee_alloc, an allocator optimized for small code size.
• LICENSE-APACHE and LICENSE-MIT: most Rust projects are licensed this way, so these are included for you

License

Licensed under either of

• Apache License, Version 2.0, (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)

at your option.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

use profile tool to analyze bottleneck

CanvasRenderingContext2D.fillStyle
CanvasRenderingContext2D.fillRect

add loop to render loop

and tune tick method

for (let i = 0; i < 9; i++) {
  universe.tick();
}
cargo bench | tee before.txt
perf record -g target/release/deps/bench-8474091a05cfa2d9 --bench
# compare the before and after
cargo benchcmp before.txt after.txt

opt options

1. use double buffering
    don't allocate the arrays each time
2. delta based design
    maintain a list of changed cells
3. use WebGL renderer, instead of 2D canvas

Shrinking .wasm Size

opt-level = "z"
    wasm-opt -Oz
    reduced to about half
compress with gzip
    reduced to about half
add and remove default global allocator
    [features]
        default = ["wee_alloc"]
    with wee_alloc, .wasm reduced from 29k -> 22k
make universe instance, double buffer all static
    no allocator is needed

Publishing to npm

npm account
wasm-pack login
wasm-pack publish