Edge & 5G
Engage with our experts on Edge & 5G topics
67 Discussions

The Future of Web Graphics is Coming 

0 0 703

A Brief History

To bring 3D capability to the web, Vladimir Vukićević at Mozilla first demonstrated some prototype in 2006. Then in early 2009, the open and non-profit consortium Khronos Group started the WebGL Working Group, with active participants from Apple, Google, Intel, Mozilla and others. WebGL 1.0 specification was released in March 2011 and WebGL 2.0 was finalized in January 2017. 

The ubiquitous WebGL serves quite well in the past decade. However in recent years, GPU architectures have evolved dramatically, and this makes WebGL, which is based on OpenGL ES, no longer a good fit. Many new graphics APIs surfaced, including Direct3D 12 from Microsoft, Metal from Apple and Vulkan from Khronos Group. To efficiently talk to these modern APIs, a new Graphics API on the web was asked and W3C (World Wide Web Consortium) formed WebGPU Community Group in February 2017 as an answer.  

After more than 4 years of hot discussion and heavy development, W3C WebGPU Working Group published the First Public Working Draft and Chrome M94 was just released with WebGPU Origin Trial, which encourages developers to try new features and give feedbacks. The future of Web Graphics is coming! 
















A Close Look

To give a close look at WebGPU, let’s compare it with WebGL and the major differences come from the following perspectives.  

Support CPU Multithreading

Nowadays, it’s very typical to have multiple CPU cores rather than one on desktops, laptops and mobile phones. However, WebGL couldn’t make good use of multiple CPU threads, which sometimes makes CPU the bottleneck of whole usage. WebGPU gets rid of this restriction from the first day of design, thus many CPU intensive tasks, like commands encoding, work submission and data transferring, can be much more efficient.  

Require Less Runtime Validation

Web applications can be malicious, and underlying graphics drivers can be flawed, so WebGL has to do comprehensive validations in browser engine to guarantee the robustness. As a side effect, such kind of heavy validation leads to performance penalty. WebGPU has many improvements on this front. The validation layer for native Graphics APIs can be enabled, so that most of validation work can be done during development, instead of at runtime. When using modern Graphics APIs, usages are more clear at the beginning, so most of validation work inside rendering loop can be avoided. Thus only lightweight validations are required for WebGPU to do at runtime, most of performance penalty can be saved. 

Match Modern Graphics APIs

OpenGL, OpenGL ES and Direct3D 11 are called legacy Graphics APIs, while Direct3D 12, Metal and Vulkan are called modern Graphics APIs. Legacy Graphics APIs have stopped the major evolution, and most of the new features will just arrive in modern Graphics APIs. WebGL traditionally talks to legacy Graphics APIs. Though it’s possible to talk to modern APIs, OpenGL ES, which WebGL is based on, couldn’t map well to them. On the contrary, WebGPU was born to base on modern Graphics APIs, so it can fully unleash the power of modern GPUs. 

Modern Graphics APIs may sometimes bring the concern of privacy, as they leak too much internal information. To follow the merit of the web, WebGPU minimizes the fingerprint entropy, while keeping the performance at best. 

Expose GPU Compute Capability

For the first time, WebGPU exposes GPU compute capability to the web. With the very high-speed evolution of GPU in recent years, more and more tasks can simply run faster on GPU than CPU. For example, many Machine Learning applications are moving to GPU with the new features like FP16, INT8, Subgroup, Systolic Array and so on. With a good combination of compute pipeline and rendering pipeline, your applications can be more performant and powerful. 

Demo Time

WebGPU already has many early adopters, including famous web rendering engines Babylon.js and Three.js, and well-known web Machine Learning framework TensorFlow.js 

  • The first demo comes from Babylon.js and it showcases the rendering capability of WebGPU:

    • forest.png


  • The second demo comes from TensorFlow.js Pose Detection model, and it showcases the compute capability of WebGPU:

    • dance.png

Try It Now

Chrome M94 was just released with WebGPU Origin Trial. You may simply add the option "--enable-unsafe-webgpu" to Chrome and give it a tryLooking forward to your sharing about WebGPU!  
Tags (2)