Add web backend

Author: grovesNL

Cargo.toml

@@ -23,26 +23,26 @@ default = []
 # Make Vulkan backend available on platforms where it is by default not, e.g. macOS
 vulkan = ["wgn/vulkan-portability"]
 
-[dependencies.wgn]
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies.wgn]
 package = "wgpu-native"
 version = "0.4"
-git = "https://github.com/gfx-rs/wgpu"
-rev = "39f17e50754aba6beeeabdd868ddfd700f9710c5"
-#path = "../wgpu/wgpu-native"
+#git = "https://github.com/gfx-rs/wgpu"
+#rev = "39f17e50754aba6beeeabdd868ddfd700f9710c5"
+path = "../wgpu/wgpu-native"
 
-[dependencies.wgc]
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies.wgc]
 package = "wgpu-core"
 version = "0.1"
-git = "https://github.com/gfx-rs/wgpu"
-rev = "39f17e50754aba6beeeabdd868ddfd700f9710c5"
-#path = "../wgpu/wgpu-core"
+#git = "https://github.com/gfx-rs/wgpu"
+#rev = "39f17e50754aba6beeeabdd868ddfd700f9710c5"
+path = "../wgpu/wgpu-core"
 
 [dependencies.wgt]
 package = "wgpu-types"
 version = "0.1"
-git = "https://github.com/gfx-rs/wgpu"
-rev = "39f17e50754aba6beeeabdd868ddfd700f9710c5"
-#path = "../wgpu/wgpu-types"
+#git = "https://github.com/gfx-rs/wgpu"
+#rev = "39f17e50754aba6beeeabdd868ddfd700f9710c5"
+path = "../wgpu/wgpu-types"
 
 [dependencies]
 arrayvec = "0.5"
@@ -51,11 +51,97 @@ raw-window-handle = "0.3"
 
 [dev-dependencies]
 cgmath = "0.17"
-env_logger = "0.7"
-glsl-to-spirv = "0.1"
+#glsl-to-spirv = "0.1"
 log = "0.4"
 png = "0.15"
-winit = "0.20"
+winit = { version = "0.22", features = ["web-sys"] }
 rand = "0.7.2"
 zerocopy = "0.2"
 futures = "0.3"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+env_logger = "0.7"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen = "0.2.59"
+web-sys = { version = "0.3.36", features = [
+    "Document",
+    "Navigator",
+    "Node",
+    "NodeList",
+    "Gpu",
+    "GpuAdapter",
+    "GpuBindGroup",
+    "GpuBindGroupBinding",
+    "GpuBindGroupDescriptor",
+    "GpuBindGroupLayout",
+    "GpuBindGroupLayoutBinding",
+    "GpuBindGroupLayoutDescriptor",
+    "GpuBlendDescriptor",
+    "GpuBlendFactor",
+    "GpuBlendOperation",
+    "GpuBindingType",
+    "GpuBuffer",
+    "GpuBufferBinding",
+    "GpuBufferDescriptor",
+    "GpuCanvasContext",
+    "GpuColorDict",
+    "GpuColorStateDescriptor",
+    "GpuCommandBuffer",
+    "GpuCommandBufferDescriptor",
+    "GpuCommandEncoder",
+    "GpuCommandEncoderDescriptor",
+    "GpuCompareFunction",
+    "GpuComputePassDescriptor",
+    "GpuComputePassEncoder",
+    "GpuComputePipeline",
+    "GpuComputePipelineDescriptor",
+    "GpuCullMode",
+    "GpuDepthStencilStateDescriptor",
+    "GpuDevice",
+    "GpuDeviceDescriptor",
+    "GpuFrontFace",
+    "GpuIndexFormat",
+    "GpuInputStepMode",
+    "GpuLimits",
+    "GpuLoadOp",
+    "GpuPipelineLayout",
+    "GpuPipelineLayoutDescriptor",
+    "GpuPowerPreference",
+    "GpuPrimitiveTopology",
+    "GpuProgrammableStageDescriptor",
+    "GpuQueue",
+    "GpuRasterizationStateDescriptor",
+    "GpuRenderPassColorAttachmentDescriptor",
+    "GpuRenderPassDepthStencilAttachmentDescriptor",
+    "GpuRenderPassDescriptor",
+    "GpuRenderPassEncoder",
+    "GpuRenderPipeline",
+    "GpuRenderPipelineDescriptor",
+    "GpuRequestAdapterOptions",
+    "GpuSampler",
+    "GpuShaderModule",
+    "GpuShaderModuleDescriptor",
+    "GpuStencilOperation",
+    "GpuStencilStateFaceDescriptor",
+    "GpuStoreOp",
+    "GpuSwapChain",
+    "GpuSwapChainDescriptor",
+    "GpuTexture",
+    "GpuTextureFormat",
+    "GpuTextureViewDimension",
+    "GpuTextureView",
+    "GpuVertexAttributeDescriptor",
+    "GpuVertexBufferLayoutDescriptor",
+    "GpuVertexFormat",
+    "GpuVertexStateDescriptor",
+    "GpuVertexAttributeDescriptor",
+    "HtmlCanvasElement",
+    "Window",
+]}
+js-sys = "0.3.36"
+wasm-bindgen-futures = "0.4.9"
+
+[target.'cfg(target_arch = "wasm32")'.dev-dependencies]
+console_error_panic_hook = "0.1.6"
+console_log = "0.1.2"

README.md

@@ -34,6 +34,19 @@ The `hello-triangle` and `hello-compute` examples show bare-bones setup without
 cargo run --example hello-compute 1 2 3 4
 ```
 
+#### Run Examples on the Web (`wasm32-unknown-unknown`)
+
+To run examples on the `wasm32-unknown-unknown` target, first build the example as usual, then run `wasm-bindgen`:
+
+```bash
+# Install or update wasm-bindgen-cli
+cargo install -f wasm-bindgen-cli
+# Build with the wasm target
+RUSTFLAGS=--cfg=web_sys_unstable_apis cargo build --example hello-triangle --target wasm32-unknown-unknown
+# Generate bindings in a `target/generated` directory
+wasm-bindgen target/wasm32-unknown-unknown/debug/examples/hello-triangle.wasm --out-dir target/generated --web
+```
+
 ## Friends
 
 Shout out to the following projects that work best with wgpu-rs:
@@ -45,7 +58,7 @@ Shout out to the following projects that work best with wgpu-rs:
 - [imgui-wgpu](https://github.com/Yatekii/imgui-wgpu-rs) - Dear ImGui interfacing
 - [pixels](https://github.com/parasyte/pixels) - the easiest way to create a hardware-accelerated pixel frame buffer
 - [kas](https://github.com/dhardy/kas) - tooKit Abstraction System
-- [oxiditor](https://github.com/Ruddle/oxidator) - RTS game engine
+- [oxidator](https://github.com/Ruddle/oxidator) - RTS game engine
 - [nannou](https://github.com/nannou-org/nannou) - a creative coding framework
 
 Also, libraries that have support for wgpu-rs:

examples/hello-compute/main.rs

@@ -1,19 +1,9 @@
-use std::{convert::TryInto as _, str::FromStr};
 use zerocopy::AsBytes as _;
+use std::convert::TryInto as _;
 
 async fn run() {
-    env_logger::init();
-
-    // For now this just panics if you didn't pass numbers. Could add proper error handling.
-    if std::env::args().len() == 1 {
-        panic!("You must pass a list of positive integers!")
-    }
-    let numbers: Vec<u32> = std::env::args()
-        .skip(1)
-        .map(|s| u32::from_str(&s).expect("You must pass a list of positive integers!"))
-        .collect();
-
-    println!("Times: {:?}", execute_gpu(numbers).await);
+    let input = vec![1u32, 2, 3, 4];
+    log::info!("Times: {:?}", execute_gpu(input).await);
 }
 
 async fn execute_gpu(numbers: Vec<u32>) -> Vec<u32> {
@@ -26,14 +16,16 @@ async fn execute_gpu(numbers: Vec<u32>) -> Vec<u32> {
         },
         wgpu::BackendBit::PRIMARY,
     )
+    .await
     .unwrap();
 
     let (device, queue) = adapter.request_device(&wgpu::DeviceDescriptor {
         extensions: wgpu::Extensions {
             anisotropic_filtering: false,
         },
         limits: wgpu::Limits::default(),
-    });
+    })
+    .await;
 
     let cs = include_bytes!("shader.comp.spv");
     let cs_module =
@@ -107,27 +99,20 @@ async fn execute_gpu(numbers: Vec<u32>) -> Vec<u32> {
     }
 }
 
-fn main() {
-    futures::executor::block_on(run());
+#[cfg(target_arch = "wasm32")]
+#[cfg_attr(target_arch = "wasm32", wasm_bindgen::prelude::wasm_bindgen(start))]
+pub fn wasm_main() {
+    console_log::init().expect("could not initialize log");
+    std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+    wasm_bindgen_futures::spawn_local(run());
 }
 
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    #[test]
-    fn test_compute_1(){
-        let input = vec!(1, 2, 3, 4);
-        futures::executor::block_on(assert_execute_gpu(input, vec!(0, 1, 7, 2)));
-    }
-
-    #[test]
-    fn test_compute_2(){
-        let input = vec!(5, 23, 10, 9);
-        futures::executor::block_on(assert_execute_gpu(input, vec!(5, 15, 6, 19)));
-    }
+#[cfg(target_arch = "wasm32")]
+fn main() {
+}
 
-    async fn assert_execute_gpu(input: Vec<u32>, expected: Vec<u32>){
-        assert_eq!(execute_gpu(input).await, expected);
-    }
+#[cfg(not(target_arch = "wasm32"))]
+fn main() {
+    env_logger::init();
+    futures::executor::block_on(run());
 }