Fix web example build (#5832)

* Ensure webgl example build only contains webgl and webgpu example build only contains webgpu
* fix ip printed on run-wasm
* Update examples on running examples on the web

Cargo.toml

@@ -123,7 +123,7 @@ smallvec = "1"
 static_assertions = "1.1.0"
 tracy-client = "0.17"
 thiserror = "1"
-wgpu = { version = "0.20.0", path = "./wgpu" }
+wgpu = { version = "0.20.0", path = "./wgpu", default-features = false }
 wgpu-core = { version = "0.20.0", path = "./wgpu-core" }
 wgpu-example = { version = "0.20.0", path = "./examples/common" }
 wgpu-macros = { version = "0.20.0", path = "./wgpu-macros" }

README.md

@@ -39,9 +39,9 @@ For an overview of all the components in the gfx-rs ecosystem, see [the big pict
 
 Rust examples can be found at [wgpu/examples](examples). You can run the examples on native with `cargo run --bin wgpu-examples <example>`. See the [list of examples](examples).
 
-To run the examples on WebGPU on wasm, run `cargo xtask run-wasm --bin wgpu-examples`. Then connect to `http://localhost:8000` in your WebGPU-enabled browser, and you can choose an example to run.
+To run the examples in a browser, run `cargo xtask run-wasm`.
-
+Then open `http://localhost:8000` in your browser, and you can choose an example to run.
-To run the examples on WebGL on wasm, run `cargo xtask run-wasm --bin wgpu-examples --features webgl`. Then connect to `http://localhost:8000` in your WebGL-enabled browser, and you can choose an example to run.
+Naturally, in order to display any of the WebGPU based examples, you need to make sure your browser supports it.
 
 If you are looking for a wgpu tutorial, look at the following:
 

examples/Cargo.toml

@@ -23,6 +23,11 @@ name = "wgpu-examples"
 path = "src/main.rs"
 test = false
 
+[features]
+default = []
+webgl = ["wgpu/webgl"]
+webgpu = ["wgpu/webgpu"]
+
 [dependencies]
 bytemuck.workspace = true
 cfg-if.workspace = true
@@ -38,7 +43,11 @@ obj.workspace = true
 png.workspace = true
 pollster.workspace = true
 web-time.workspace = true
-wgpu.workspace = true
+wgpu = { workspace = true, default-features = false, features = [
+    "wgsl",
+    "dx12",
+    "metal",
+] }
 winit.workspace = true
 
 [dev-dependencies]

examples/README.md

@@ -80,10 +80,17 @@ The rest of the examples are for demonstrating specific features that you can co
 | - typed arena                |        |           |                     |        |                       |                  |        |           |                   |                  |        |        |                   |                 |                |                |        |
 | - obj loading                |        |           |                     |        |                       |                  |        |           |                   |                  |        | :star: |                   |                 |                |                |        |
 
+## Running on the Web
+
+To run the examples in a browser, run `cargo xtask run-wasm`.
+Then open `http://localhost:8000` in your browser, and you can choose an example to run.
+Naturally, in order to display any of the WebGPU based examples, you need to make sure your browser supports it.
+
+Note that many cannot be downleveled to WebGL as WebGL does (among other things) not support storage texture, storage buffers and compute shaders. Running any example using these feature in a browser will require that browser to support WebGPU.
 
 ## Additional notes
 
-Note that the examples regarding computing build off of each other; repeated_compute extends hello_compute, hello_workgroups assumes you know the basic workflow of GPU computation, and hello_synchronization assumes you know what a workgroup is. Also, note that the computing examples cannot be downleveled to WebGL as WebGL does not allow storage textures. Running these in a browser will require that browser to support WebGPU.
+Note that the examples regarding computing build off of each other; repeated_compute extends hello_compute, hello_workgroups assumes you know the basic workflow of GPU computation, and hello_synchronization assumes you know what a workgroup is.
 
 All the examples use [WGSL](https://gpuweb.github.io/gpuweb/wgsl.html) shaders unless specified otherwise.
 

examples/src/framework.rs

@@ -367,6 +367,12 @@ impl FrameCounter {
 
 async fn start<E: Example>(title: &str) {
     init_logger();
+
+    log::debug!(
+        "Enabled backends: {:?}",
+        wgpu::Instance::enabled_backend_features()
+    );
+
     let window_loop = EventLoopWrapper::new(title);
     let mut surface = SurfaceWrapper::new();
     let context = ExampleContext::init_async::<E>(&mut surface, window_loop.window.clone()).await;

xtask/src/run_wasm.rs

@@ -38,7 +38,7 @@ pub(crate) fn run_wasm(shell: Shell, mut args: Arguments) -> anyhow::Result<()>
 
     xshell::cmd!(
         shell,
-        "cargo build --target wasm32-unknown-unknown --bin wgpu-examples {release_flag...}"
+        "cargo build --target wasm32-unknown-unknown --bin wgpu-examples --no-default-features --features webgpu {release_flag...}"
     )
     .args(&cargo_args)
     .quiet()
@@ -59,7 +59,7 @@ pub(crate) fn run_wasm(shell: Shell, mut args: Arguments) -> anyhow::Result<()>
 
     xshell::cmd!(
         shell,
-        "cargo build --target wasm32-unknown-unknown --bin wgpu-examples --no-default-features --features wgsl,webgl {release_flag...}"
+        "cargo build --target wasm32-unknown-unknown --bin wgpu-examples --no-default-features --features webgl {release_flag...}"
     )
     .args(&cargo_args)
     .quiet()
@@ -69,12 +69,12 @@ pub(crate) fn run_wasm(shell: Shell, mut args: Arguments) -> anyhow::Result<()>
     log::info!("running wasm-bindgen on webgl examples");
 
     xshell::cmd!(
-            shell,
+        shell,
-            "wasm-bindgen target/wasm32-unknown-unknown/{output_dir}/wgpu-examples.wasm --target web --no-typescript --out-dir target/generated --out-name webgl2"
+        "wasm-bindgen target/wasm32-unknown-unknown/{output_dir}/wgpu-examples.wasm --target web --no-typescript --out-dir target/generated --out-name webgl2"
-        )
+    )
-        .quiet()
+    .quiet()
-        .run()
+    .run()
-        .context("Failed to run wasm-bindgen")?;
+    .context("Failed to run wasm-bindgen")?;
 
     let static_files = shell
         .read_dir("examples/static")
@@ -94,9 +94,12 @@ pub(crate) fn run_wasm(shell: Shell, mut args: Arguments) -> anyhow::Result<()>
     if !no_serve {
         log::info!("serving on port 8000");
 
+        // Explicitly specify the IP address to 127.0.0.1 since otherwise simple-http-server will
+        // print http://0.0.0.0:8000 as url which is not a secure context and thus doesn't allow
+        // running WebGPU!
         xshell::cmd!(
             shell,
-            "simple-http-server target/generated -c wasm,html,js -i --coep --coop"
+            "simple-http-server target/generated -c wasm,html,js -i --coep --coop --ip 127.0.0.1"
         )
         .quiet()
         .run()