Update examples readme files (#4774)

* Fix indentation in main examples readme file

* Update examples readme files

* Update hello_compute example readme and fix example not running with new command

* Fix srgb_blend example not working correctly and set readme accordingly

examples/src/boids/README.md

@@ -5,7 +5,7 @@ Flocking boids example with gpu compute update pass
 ## To Run
 
 ```
-cargo run --bin boids
+cargo run --bin wgpu-examples boids
 ```
 
 ## Screenshots

examples/src/bunnymark/README.md

@@ -0,0 +1,12 @@
+# bunnymark
+
+
+## To Run
+
+```
+cargo run --bin wgpu-examples bunnymark
+```
+
+## Example output
+
+![Example output](./screenshot.png)

examples/src/conservative_raster/README.md

@@ -1,4 +1,4 @@
-# conservative-raster
+# conservative_raster
 
 This example shows how to render with conservative rasterization (native extension with limited support).
 
@@ -12,7 +12,7 @@ Pixels only drawn with conservative rasterization enabled are depicted red.
 ## To Run
 
 ```
-cargo run --bin conservative-raster
+cargo run --bin wgpu-examples conservative_raster
 ```
 
 ## Screenshots

examples/src/cube/README.md

@@ -5,7 +5,7 @@ This example renders a textured cube.
 ## To Run
 
 ```
-cargo run --bin cube
+cargo run --bin wgpu-examples cube
 ```
 
 ## Screenshots

examples/src/hello/README.md

@@ -5,7 +5,7 @@ This example prints output describing the adapter in use.
 ## To Run
 
 ```
-cargo run --bin hello
+cargo run --bin wgpu-examples hello
 ```
 
 ## Example output

examples/src/hello_compute/README.md

@@ -12,7 +12,7 @@ that it will take to finish and reach the number `1`.
 
 ```
 # Pass in any 4 numbers as arguments
-RUST_LOG=hello_compute cargo run --bin hello-compute 1 4 3 295
+RUST_LOG=hello_compute cargo run --bin wgpu-examples hello_compute 1 4 3 295
 ```
 
 ## Example Output

examples/src/hello_compute/mod.rs

@@ -12,7 +12,7 @@ async fn run() {
         default
     } else {
         std::env::args()
-            .skip(1)
+            .skip(2)
             .map(|s| u32::from_str(&s).expect("You must pass a list of positive integers!"))
             .collect()
     };

examples/src/hello_synchronization/README.md

@@ -1,9 +1,15 @@
-# hello-synchronization
+# hello_synchronization
 
 This example is 
 1. A small demonstration of the importance of synchronization.
 2. How basic synchronization you can understand from the CPU is preformed on the GPU.
 
+## To Run
+
+```
+cargo run --bin wgpu-examples hello_synchronization
+```
+
 ## A Primer on WGSL Synchronization Functions
 
 The official documentation is a little scattered and sparse. The meat of the subject is found [here](https://www.w3.org/TR/2023/WD-WGSL-20230629/#sync-builtin-functions) but there's also a bit on control barriers [here](https://www.w3.org/TR/2023/WD-WGSL-20230629/#control-barrier). The most important part comes from that first link though, where the spec says "the affected memory and atomic operations program-ordered before the synchronization function must be visible to all other threads in the workgroup before any affected memory or atomic operation program-ordered after the synchronization function is executed by a member of the workgroup." And at the second, we also get "a control barrier is executed by all invocations in the same workgroup as if it were executed concurrently."

examples/src/hello_triangle/README.md

@@ -1,11 +1,11 @@
-# hello-triangle
+# hello_triangle
 
 This example renders a triangle to a window.
 
 ## To Run
 
 ```
-cargo run --bin hello-triangle
+cargo run --bin wgpu-examples hello_triangle
 ```
 
 ## Screenshots

examples/src/hello_windows/README.md

@@ -1,11 +1,11 @@
-# hello-windows
+# hello_windows
 
 This example renders a set of 16 windows, with a differently colored background
 
 ## To Run
 
 ```
-cargo run --bin hello-windows
+cargo run --bin wgpu-examples hello_windows
 ```
 
 ## Screenshots

examples/src/hello_workgroups/README.md

@@ -1,4 +1,4 @@
-# hello-workgroups
+# hello_workgroups
 
 Now you finally know what that silly little `@workgroup_size(1)` means!
 
@@ -6,6 +6,12 @@ This example is an extremely bare-bones and arguably somewhat unreasonable demon
 
 The example starts with two arrays of numbers. One where `a[i] = i` and the other where `b[i] = 2i`. Both are bound to the shader. The program dispatches a workgroup for each index, each workgroup representing both elements at that index in both arrays. Each invocation in each workgroup works on its respective array and adds 1 to the element there.
 
+## To Run
+
+```
+cargo run --bin wgpu-examples hello_workgroups
+```
+
 ## What are Workgroups?
 
 ### TLDR / Key Takeaways

examples/src/mipmap/README.md

@@ -5,7 +5,7 @@ This example shows how to generate and make use of mipmaps.
 ## To Run
 
 ```
-cargo run --bin mipmap
+cargo run --bin wgpu-examples mipmap
 ```
 
 ## Screenshots

examples/src/msaa_line/README.md

@@ -1,11 +1,11 @@
-# msaa-line
+# msaa_line
 
 This example shows how to render lines using MSAA.
 
 ## To Run
 
 ```
-cargo run --bin msaa-line
+cargo run --bin wgpu-examples msaa_line
 ```
 
 ## Screenshots

examples/src/render_to_texture/README.md

@@ -1,5 +1,11 @@
-# render-to-texture
+# render_to_texture
 
 Similar to hello-triangle but instead of rendering to a window or canvas, renders to a texture that is then output as an image like the storage-texture example.
 
 If all goes well, the end result should look familiarly like hello-triangle with its red triangle on a green background.
+
+## To Run
+
+```
+cargo run --bin wgpu-examples render_to_texture
+```

examples/src/repeated_compute/README.md

@@ -1,7 +1,13 @@
-# repeated-compute
+# repeated_compute
 
 Repeatedly performs the Collatz calculation used in `hello-compute` on sets of random numbers.
 
+## To Run
+
+```
+cargo run --bin wgpu-examples repeated_compute
+```
+
 ## Sample
 
 Randomly generated input:

examples/src/shadow/README.md

@@ -5,7 +5,7 @@ This animated example demonstrates shadow mapping.
 ## To Run
 
 ```
-cargo run --bin shadow
+cargo run --bin wgpu-examples shadow
 ```
 
 ## Screenshots

examples/src/skybox/README.md

@@ -6,7 +6,7 @@ It hooks up `winit` mouse controls for camera rotation around the model at the c
 ## To Run
 
 ```
-cargo run --bin skybox
+cargo run --bin wgpu-examples skybox
 ```
 
 ## Screenshots

examples/src/srgb_blend/README.md

@@ -1,23 +1,23 @@
-# cube
+# srgb_blend
 
 This example shows blending in sRGB or linear space.
 
 ## To Run
 
 ```
-cargo run --bin cube -- linear
+cargo run --bin wgpu-examples srgb_blend linear
 ```
 
 ```
-cargo run --bin cube
+cargo run --bin wgpu-examples srgb_blend
 ```
 
 ## Screenshots
 
 Blending in linear space:
 
-![sRGB blend example](./screenshot-srgb.png)
+![sRGB blend example](./screenshot-linear.png)
 
 Blending in sRGB space:
 
-![sRGB blend example](./screenshot-linear.png)
+![sRGB blend example](./screenshot-srgb.png)

examples/src/srgb_blend/mod.rs

@@ -214,7 +214,7 @@ impl<const SRGB: bool> crate::framework::Example for Example<SRGB> {
 pub fn main() {
     let mut args = std::env::args();
     args.next();
-    if Some("linear") == args.next().as_deref() {
+    if Some("linear") == args.nth(1).as_deref() {
         crate::framework::run::<Example<false>>("srgb-blend-linear");
     } else {
         crate::framework::run::<Example<true>>("srgb-blend-srg");

examples/src/stencil_triangles/README.md

@@ -1,4 +1,4 @@
-# hello-triangle
+# stencil_triangles
 
 This example renders two different sized triangles to display three same sized triangles,
 by demonstrating the use of stencil buffers.
@@ -10,7 +10,7 @@ Then, it draws a larger "outer" triangle which only touches pixels where the ste
 ## To Run
 
 ```
-cargo run --bin stencil-triangles
+cargo run --bin wgpu-examples stencil_triangles
 ```
 
 ## Screenshots

examples/src/storage_texture/README.md

@@ -1,7 +1,14 @@
-# storage-texture
+# storage_texture
 
 A simple example that uses a storage texture to compute an image of the Mandelbrot set (https://en.wikipedia.org/wiki/Mandelbrot_set) and either saves it as an image or presents it to the browser screen in such a way that it can be saved as an image.
 
+## To Run
+
+```
+cargo run --bin wgpu-examples storage_texture
+```
+
+
 ## Example Output
 
 ![Example output](./example.png)

examples/src/texture_arrays/README.md

@@ -0,0 +1,11 @@
+# texture_arrays
+
+## To Run
+
+```
+cargo run --bin wgpu-examples texture_arrays
+```
+
+## Example Output
+
+![Example output](./screenshot.png)

examples/src/timestamp_queries/README.md

@@ -1,9 +1,9 @@
-# timestamp-queries
+# timestamp_queries
 
 This example shows various ways of querying time when supported.
 
 ## To Run
 
 ```
-cargo run --bin timestamp-queries
+cargo run --bin wgpu-examples timestamp_queries
 ```

examples/src/uniform_values/README.md

@@ -1,7 +1,13 @@
-# uniform-values
+# uniform_values
 
 Creates a window which displays a grayscale render of the [Mandelbrot set](https://en.wikipedia.org/wiki/Mandelbrot_set). Pressing the arrow keys will translate the set and scrolling the mouse wheel will zoom in and out. If the image appears too 'bright', it may be because you are using too few iterations or 'samples'. Use U and D to increase or decrease respectively the max number of iterations used. Make sure to play around with this too to get an optimally photogenic screen cap. The window can be resized and pressing ESC will close the window. Explore the Mandelbrot set using the power of uniform variables to transfer state from the main program to the shader!
 
+## To Run
+
+```
+cargo run --bin wgpu-examples uniform_values
+```
+
 ## Usage of Uniform Buffers / Variables
 
 Since the codebase of this example is so large (because why not demonstrate with a sort-of game) and the points of interest in terms of the actual point of the example so small, there is a module doc comment at the top of main.rs that points out the important points of the usage of uniform values.

examples/src/water/README.md

@@ -19,7 +19,7 @@ water
 ## To run
 
 ```
-cargo run --bin water
+cargo run --bin wgpu-examples water
 ```
 
 ## Screenshot