WebGL vs. WebGPU
FBM-SDF Shader in WebGL and WebGPU
September 15, 2023 - Tommy Dräger
https://github.com/MilesTails01/wgpu-vs-webgl
This repository is dedicated to exploring the capabilities of WebGPU, the next-gen graphics API that promises to revolutionize web-based 3D and 2D graphics. WebGPU is heavily inspired by modern graphics APIs like Vulkan, Metal, and Direct3D12, offering reduced overhead and impressive performance. benchmarks have been designed to probe the boundaries of what WebGPU can currently achieve, focusing on two key aspects: Scene rendering via Fragment Shaders (SDF Fragment Shader) and Vertex Shaders. While WebGPU has shown immense promise, it's worth noting that it's still under development. the tests revealed some issues with shadow mapping and overall performance when compared to the established WebGL standard, especially when using high polygon scenes with Three.js. it's an exciting area to watch for anyone interested in web graphics technology.
Overview
This article explores the capabilities of WebGPU, the next-generation graphics API that promises to revolutionize web-based 3D and 2D graphics. Inspired by modern graphics APIs like Vulkan, Metal, and Direct3D12, WebGPU offers reduced overhead and impressive performance.
WebGL vs. WebGPU
WebGL has been the standard for web graphics, built on OpenGL ES, and allows for the rendering of complex 2D and 3D graphics in the browser. It’s known for its ease of use and widespread support, making it ideal for many applications. However, WebGL can have higher overhead and limitations in performance, especially with high-polygon scenes.
WebGPU is a modern alternative, designed to give developers more control over the GPU and better performance. It’s still under development but already shows significant promise. WebGPU enables more advanced rendering techniques and reduces CPU overhead, making it ideal for high-performance graphics applications.
SDF (Signed Distance Functions)
Signed Distance Functions (SDF) are mathematical representations used to describe the distance from a point to the surface of a shape. In graphics, SDFs are often used for rendering complex geometries and effects like anti-aliasing and soft shadows. The use of SDFs in shaders allows for smooth surfaces and complex shapes with minimal geometry.
Please have a look at this tutorial, if you are new to this topic:
Introduction to Signed Distance Fields
FBM (Fractal Brownian Motion)
Fractal Brownian Motion (FBM) is a method for generating procedural textures that mimic the appearance of natural phenomena. It combines multiple layers of noise at different scales and amplitudes to create complex, detailed textures. FBM is commonly used in terrain generation, cloud rendering, and other natural effects.
Please have a look at this article, if you are new to this topic:
https://thebookofshaders.com/13/
Benchmarks and Performance
the application is varying from browser to browser and from device to device: You might experience some visual glitches on the WebGPU side.
https://apps.fenixfox-studios.com/webgpu_vs_webgl/
Benchmarks were conducted to evaluate the performance of WebGPU compared to WebGL, focusing on two key aspects: SDF Fragment Shaders and Vertex Shaders. there are some issues:
- Shadow Mapping: Challenges remain in achieving the same quality as WebGL.
- Performance in High-Polygon Scenes: When using libraries like Three.js, WebGPU sometimes underperforms compared to WebGL.
as you can clearly see webGPU is behaving odd and glitchy especially with the shadow mapping.. Also the Framerate compared to WebGL is doesn't keep up to its promises.
Conclusion
WebGPU represents a significant step forward in web graphics, providing a modern API that leverages the capabilities of today’s GPUs. While WebGL remains a reliable standard, the future of web graphics will likely lean towards WebGPU as it matures and overcomes its current limitations. But at the current state WebGPU seems to be another hypetrain. I prepared a Top #20 List of Buzzwords to release as an article, I will make sure to include WebGPU as an overhyped buzzword in there.