Showcasing how to run the Bevy
App within a Web Worker
and the interaction between HTML elements and Bevy.
Implemented CanvasViewPlugin
to replace bevy_winit
, allowing the Bevy engine to run efficiently in a Web Worker
, thereby significantly improving the application's performance and responsiveness. Additionally, it demonstrates the bidirectional communication between HTML elements and the Bevy engine, facilitating complex interaction patterns to validate the communication latency and performance when the Engine is moved into a Web Worker and interacts with the UI thread
.
Validation Points:
- Whether the event communication cost between the main thread and the Worker is high.
- Whether the asynchronous pick interface leads to poor user interaction experience.
- The impact of main thread blocking on events/workers.
- The impact on experience caused by mouse events, onmessage, and render blocking.
Design for the above validation points:
- No Throttle on the mouse event trigger frequency; every mousemove event is sent to the worker, executed by the worker for ray picking, and the result is sent back to the main thread.
- Designed a high-complexity interaction logic for selection/highlighting:
- Main thread postMsg to the worker ->
- Worker delegates the task to the engine to execute ray pick ->
- Send the result from the engine to the worker ->
- Worker postMsg to the main thread ->
- Main thread postMsg to the worker to perform the necessary selection/highlighting
- Simulated scenarios of main thread blocking with controllable frame block duration, with a main thread stutter indicator at the upper left corner for easy observation of blocking results.
- The interface also provides two running instances of the main thread and the Worker thread for intuitive comparison.
- Simulated scenarios of mousemove, onmessage, and render blocking.
- Provided the functionality to drag scene objects by holding the left mouse button.
- Simulated frame rendering logic of a utility App: with scene animation turned off, frame rendering is entirely driven by mouse events.
# Compile WASM:
# Add Rust WebAssembly target
rustup target add wasm32-unknown-unknown
# Install wasm-bindgen command line tool
cargo install -f wasm-bindgen-cli --version 0.2.92
# Run:
# First install the http server
cargo install basic-http-server
# Then run using the following script
sh ./run-wasm.sh
# Build the release package
sh ./build-wasm.sh
Bevy version | bevy-in-web-worker version |
---|---|
0.14 |
0.1 |