Edge & 5G
Gain crucial understandings of Edge software and 5G concepts with Intel® industry experts
86 Discussions

The Future of Web Graphics is Coming

0 1 1,707

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)
1 Comment

As of my last knowledge update in January 2022, I can provide insights into trends and developments that were shaping the future of web graphics at that time. Keep in mind that the technology landscape evolves rapidly, and there might be new advancements or changes since then. Here are some trends that were influencing the future of web graphics:

  1. Web Assembly (Wasm):

    • Web Assembly allows developers to run high-performance code written in languages like C and C++ directly in the browser. This opens up possibilities for more complex and resource-intensive graphics applications on the web.
  2. WebGL:

    • WebGL enables hardware-accelerated 3D graphics in web browsers without the need for plugins. As browser support and performance improvements continue, more sophisticated 3D graphics applications and games become feasible.
  3. Responsive and Scalable Vector Graphics (SVG):

    • SVG allows for the creation of vector graphics that can scale seamlessly across different screen sizes and resolutions. It is widely used for icons, logos, and illustrations on the web.
  4. Web GPU API:

    • Web GPU is an emerging standard for a low-level graphics and compute API for the web. It provides more direct access to the GPU, potentially unlocking new possibilities for web graphics performance.
  5. Real-time Ray Tracing:

    • With advancements in GPU capabilities, real-time ray tracing was becoming more feasible for web graphics. This technology allows for more realistic lighting and reflections in real-time rendered scenes.
  6. CSS Custom Properties (Variables) for Graphics:

    • CSS Custom Properties allow for the creation of more dynamic and customizable styles in web development, including graphics. This enables more flexibility and creativity in designing web interfaces.
  7. Progressive Web Apps (PWAs):

    • PWAs enable a more app-like experience on the web, including smoother graphics transitions and interactions. This trend was contributing to a more seamless and engaging user experience.
  8. Machine Learning for Graphics:

    • Integrating machine learning models into web graphics for tasks like image recognition, style transfer, or generative art was gaining traction. TensorFlow.js and similar libraries facilitate the deployment of machine learning models directly in the browser.
  9. WebRTC for Real-Time Communication:

    • Web Real-Time Communication (WebRTC) was being increasingly used for real-time graphics applications, such as collaborative design tools and multiplayer online games.

To stay updated on the latest developments, I recommend checking recent sources, including technology news, official documentation from browser vendors, and community discussions on web development forums. Additionally, attending conferences or webinars focused on web technologies can provide valuable insights into emerging trends in web graphics.