wgpu-rs on the web

Wgpu-rs on the web

2020

gfx-rs is a Rust project aiming to make low-level GPU programming portable with low overhead. It’s a single Vulkan-like Rust API with multiple backends that implement it: Direct3D 12/11, Metal, Vulkan, and even OpenGL.

wgpu-rs is a Rust project on top of gfx-rs that provides safety, accessibility, and even stronger portability.

Running wgpu-rs natively

As we previously discussed in The rise of wgpu, the gfx team has been busy with development of wgpu-native (a C API which implements the WebGPU specification) and wgpu-rs (an idiomatic Rust wrapper around wgpu-native).

Even though these crates are still relatively new, it’s been very exciting to watch people build all kinds of neat projects which use them, including:

  • a creative-coding toolkit
  • a sailing navigation application
  • a hardware-accelerated pixel buffer
  • and many more interesting projects!

There is even an awesome-wgpu list that the community has started in order to aggregate wgpu-related learning resources and examples in one place.

Because wgpu-rs is cross-platform, all of these projects can run natively on top of Vulkan, Metal, DX12, and DX11. Internally wgpu-rs automatically selects a graphics API for the user based on which graphics APIs are available at runtime, although users may specify which graphics API to use if they prefer. For older devices which don’t support these modern APIs, limited GL support is also actively being worked on.

Running wgpu-rs on the web

When we started the wgpu-rs crate, we wanted to eventually support two backends:

  • a “native” backend implemented with wgpu-native/gfx
  • a “web” backend which uses the WebGPU API provided by the browser

Until recently, wgpu-rs was only able to run on the native backend, simply because the WebGPU API wasn’t available in any browsers. But now that’s changing, because browser vendors have been making rapid progress on implementations of WebGPU.

With the WebGPU API beginning to become available in Firefox Nightly and Chrome Canary behind experimental flags, we decided it was time to add a web backend. We mapped the existing wgpu-rs API to the browser API, compiled our examples using the wasm32-unknown-unknown target, and were quickly able to run our examples on the web:

In the above screenshot, the same example is running inside of Firefox Nightly (top left), Chrome Canary (bottom left), and natively (right). This example uses a compute shader to simulate flocking and renders the result. macOS is used in the screenshot, but this example also runs on Windows and Linux without any code changes.

All wgpu-rs examples are currently available at https://wgpu.rs/examples/. The WebGPU API has to be enabled in the browser in order to run these examples. Note that browser WebGPU support is still experimental and a work in progress, so attempting to run them may cause the browser to crash or they may fail to run/render.

Getting started with wgpu-rs on the web

To take advantage of the new web backend in wgpu-rs and run on the web, crates can be compiled using the wasm32-unknown-unknown target. Because the WebGPU API is experimental, for now an unstable APIs flag (--cfg=web_sys_unstable_apis) must be provided in the RUSTFLAGS environment variable in order to use WebGPU from web-sys (the crate which exposes web APIs to Rust).

After the crate has been compiled with wasm32-unknown-unknown, the WebAssembly can be executed within a browser. wasm-bindgen can be used to generate JavaScript bindings, or the WebAssembly can be called manually.

For example, to compile the hello-triangle example and generate bindings with wasm-bindgen:

# Build with the wasm target
RUSTFLAGS=--cfg=web_sys_unstable_apis cargo build --target wasm32-unknown-unknown --example hello-triangle
# Generate bindings with wasm-bindgen-cli into a `generated` directory
cargo install -f wasm-bindgen-cli && wasm-bindgen --out-dir generated --web target/wasm32-unknown-unknown/debug/examples/hello-triangle.wasm

Then add a simple index.html inside the generated directory to run the WebAssembly:

<html>
  <body>
    <script type="module">
      import init from "./hello-triangle.js";
      init();
</script>
  </body>
</html>

Now run a web server from the generated directory to see hello-triangle in the browser:

We are really excited to see wgpu-rs projects running on the web. Even though it’s still early days for WebGPU, we look forward to the new possibilities in high-performance, portable graphics and compute that this will enable. Please let us know on the wgpu-rs Matrix channel (#wgpu:matrix.org) or through the wgpu-rs issue tracker if your project takes advantage of this new web backend.

本文分享自微信公众号 - 佳爷的后花媛(zoe1368329355),作者:gfx-rs

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Write your own Excel in 100 lines of F#

    I've been teaching F# for over seven years now, both in the public F# FastTrack ...

    仇诺伊
  • Testing Your Product and Getting Feedback

    平时有很多碎片化时间,比如下班的地铁上,或者等待的时间,我们总喜欢拿出手机玩,这个时间也可以用来学习呢,当然佳爷自己也想学习英语,所以上下班的时间看看。

    仇诺伊
  • How to find “hidden” remote jobs using Google Search.

    By using a special search operator with Google search, you can find remote jobs ...

    仇诺伊
  • Django-REST-Framewo

    We're going to create a simple API to allow admin users to view and edit the use...

    py3study
  • Optimizing the ridge regression parameter最优化岭回归参数

    Once you start using ridge regression to make predictions or learn about relatio...

    到不了的都叫做远方
  • 如何使用Key User Tool扩展SAP S/4HANA Fiori UI

    (1) Go to the Fiori UI where you would like to enhance, and enter adaptation mod...

    Jerry Wang
  • QueueUserAPC function

    Adds a user-mode asynchronous procedure call (APC) object to the APC queue of th...

    战神伽罗
  • 原 微服务Spring Cloud Eur

    斯武丶风晴
  • NGINX Server Push服务器推送

    Support for HTTP/2 server push is also included in NGINX Plus R15.

    javascript.shop
  • Webpack3来了!

    After we released webpack v2, we made some promises to the community. We promise...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券