What is OpenGL?
OpenGL is a graphics API that can be used on different platforms such as Windows, Linux, macOS (Latest version 4.1; 2010) and mobile devices. It is used to create and process graphics, both 2D and 3D.
Raw comparison
Similarities
Both API's are used to create 2D and 3D graphics, as well as process images and perform complex math on the GPU.
Both provide a number of functions and tools for image processing and 3D object animation.
Both API's are compatible with different operating systems and hardware from different GPU manufacturers.
Differences
WebGPU is a low-level graphics API designed specifically for the web, while OpenGL is a low-level graphics API used on a variety of platforms, including the web.
WebGPU uses a command-based programming model and a multi-threaded approach to rendering graphics, while OpenGL uses a state-based programming model and a single-threaded approach to rendering graphics.
WebGPU is designed to work with other web technologies, such as WebGL and Web Assembly, while OpenGL integrates with native programming technologies, such as C++.
WebGPU is newer than OpenGL and is still under active development, which means that it is still evolving and improving, while OpenGL is a stable and mature API that has been used in graphics applications for many years.
Versions
Retrocompatibility
OpenGL
OpenGL is mostly backwards compatible, which means that most applications built with older versions of OpenGL will continue to work with newer versions. However, there are exceptions, such as certain features and extensions that may have been discontinued or changed in newer versions, which could affect compatibility.
WebGPU
Right now it is not possible to decide if it is going to have it or not since this API is still in development and a stable final version has not even come out. Therefore it can only be used in Chrome Canary and theoretically in Firefox Nightly (But I have not been able to get it to work in Firefox)
Platforms
OpenGL
Windows: Since Win95
macOS: Discontinued in 4.1 in 2010
Linux, Play4, Xbox One, Nintendo Switch, Rapberry PI: Full.
Android: OpenGL ES.
iOS: OpenGL ES.
WebGPU
Because it's still a development app, it's only available on Chrome Canary and Firefox Nightly for PC.
Pipeline
They had the same type of pipeline. But you call it in a difference form.
Vertex Input: Vertex data is entered into the pipeline. This is done using vertex buffers, which contain information about vertex positions, normals, textures, and other attributes.
Primitive Assembly: Vertices are assembled into primitives, such as triangles or lines, that will be used to represent objects in the scene.
Shaders: This is the stage where shading effects are applied to objects in the scene. Shading can be divided into two stages: vertex shading and fragment shading. Vertex shading is used to compute vertex properties such as lighting and texture. Fragment shading is used to calculate the color of each pixel on the screen.
Rasterization: Primitives are pixel rasterized, which means that they are converted to chunks that can be displayed on the screen.
Depth and stencil tests: Fragments are tested to determine if they are in front of or behind other fragments in the scene. This is used to determine which fragments should be displayed on the screen.
Color Blend: Fragments are blended with fragments that have already been drawn on the screen including the alpha.
Output to screen: Fragments are written to the screen framebuffer and displayed on the screen.