What to Expect When Choosing WebGPU or OpenGL

For cutting-edge applications, WebGPU is your pick. Reflecting advancements in modern GPU hardware, it brings unbeatable efficiency and flexibility, ideal for complex visuals and machine learning computations. However, if you opt for a robust, tried-and-tested approach, OpenGL, with its prowess in hardware-accelerated 3D graphics and vast usage history, might be your fit.

Key Differences Between WebGPU and OpenGL

• Development: WebGPU stemmed from WebGL limitations, OpenGL from the proprietary IRIS GL.
• Usage: WebGPU excels in machine workloads and graphics, OpenGL in hardware-accelerated 3D graphics, AR & VR.
• Design Philosophy: WebGPU follows modern APIs, OpenGL a low-level rendering model.
• Support: WebGPU development ongoing, OpenGL has several stable versions and extensions.
• API Compatibility: WebGPU works well with Vulkan, OpenGL has a successor in Vulkan for unification.

What Is WebGPU and Who’s It For?

WebGPU is an advanced API that supersedes WebGL to deliver intensified graphics and machine workloads for the web. Launched by W3C’s ‘GPU for the Web’ group in 2017, WebGPU collaborates with leading tech giants including Apple, Google, Mozilla, Microsoft, and Intel. It’s a powerful tool tailored for developers, game studios, and power users who seek to run intricate visual effects and complicated algorithms that weren’t plausible with WebGL.

Pros of WebGPU

• A modern API that benchmarks against Direct3D 12, Metal, Vulkan for efficient interfacing with modern GPU hardware
• Opens new dimensions for programming in the web browser
• Enables complex visual effects and machine learning computations
• Auto-handles resource synchronization challenges

Cons of WebGPU

• Currently available only on ChromeOS, macOS, and Windows with Chrome 113
• Still in early development stages and potentially has teething issues
• While promising, success will hinge on delivery of safety, performance, and portability

What Is OpenGL and Who’s It For?

Established in 1992 by Silicon Graphics, OpenGL (Open Graphics Library) is a potent, low-level rendering and modelling software library. It’s broadly acknowledged by the video gaming, CAD, and scientific application sectors for its 3D graphics, Augmented & Virtual Reality capabilities. OpenGL is a commanding tool primarily intended for developers, CAD designers, and AR/VR enthusiasts.

Pros of OpenGL

• Managed by Khronos Group with over 150 leading tech companies.
• Powerful tool for hardware-accelerated 3D graphics and AR/VR.
• Broadly used in different platforms including video games and scientific applications.

Cons of OpenGL

• Detailed knowledge of C++ programming language is a prerequisite.
• For full utilization, a strong grounding in mathematical concepts like linear algebra and trigonometry is required.

Code Examples for WebGPU & OpenGL

WebGPU

This WebGPU code generates a simple, rotating 3D torus shape. This demonstration emphasizes the creation of swap chains, uniform buffers, and principles of projection. Note: This WebGPU code requires a browser that supports WebGPU.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('gpupresent');
const swapChainFormat = 'bgra8unorm';
const swapChain = context.configureSwapChain({
  device,
  format: swapChainFormat,
});
// Create vertex and index buffers
// ... omitted for brevity, see full code.
// Create pipeline
const pipeline = device.createRenderPipeline({
  vertexStage,
  fragmentStage,
  layout,
  primitiveTopology: 'triangle-list',
  vertexState,
});
// Draw
function frame() {
  const commandEncoder = device.createCommandEncoder({});
  const textureView = swapChain.getCurrentTexture().createView();
  const renderPassDescriptor = {
    colorAttachments: [{
      attachment: textureView,
      loadValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
    }],
  };
  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, bindGroup);
  passEncoder.draw(vertexCount, 1, 0, 0);
  passEncoder.endPass();
  device.defaultQueue.submit([commandEncoder.finish()]);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

OpenGL

The below OpenGL code renders a simple rotating 3D cube. Be aware that OpenGL ES 2.0 or higher version is required to run this code successfully.

GLfloat cubeVertices[] = { /*... omitted for brevity ...*/ };
GLfloat cubeColors[] = { /*... omitted for brevity ...*/ };
GLubyte cubeIndices[] = { /*... omitted for brevity ...*/ };
void drawCube() {
  glEnableClientState(GL_VERTEX_ARRAY);
  glEnableClientState(GL_COLOR_ARRAY);
  glVertexPointer(3, GL_FLOAT, 0, cubeVertices);
  glColorPointer(4, GL_FLOAT, 0, cubeColors);
  glPushMatrix();
  glRotatef(45.f, 1.f, 1.f, 0.f);
  glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, cubeIndices); 
  glPopMatrix();
  glDisableClientState(GL_VERTEX_ARRAY);
  glDisableClientState(GL_COLOR_ARRAY);
}
int main(int argc, char **argv) {
  /* ... application initialization and loop ... */
  drawCube();
  /* ... application finalization ... */
}

WebGPU vs OpenGL: Which Reigns Supreme?

For tech enthusiasts, it’s a critical choice – the new powerhouse, WebGPU, versus the time-proven OpenGL. Here’s our take:

AR/VR Creators

For AR/VR creators, we recommend OpenGL. Given its proven performance in 3D graphics, and wide adoption in the gaming industry, its robust and battle-tested capabilities make it a top choice.

Web Developers

WebGPU shines for web developers. Its high-performance capabilities can unlock amazing performance and deliver complex visual effects. Plus, its design is tailored to modern browsers and offers efficient interfacing with GPU hardware.

Machine Learning Specialists

For the Machine Learning specialists, WebGPU is a promising candidate. With its robust ability to handle computational resources optimally, it offers a flexible platform to leverage GPU for machine learning computations.

Game Developers

OpenGL remains ideal for pro game developers. Its low-level capabilities cater to intricate game design. From high-performance graphics engines to compatibility with multiple platforms, it’s a consistent performer in the gaming terrain.

Summing up, WebGPU impresses with its modernized APIs, potent performance, and optimized web compatibility. Conversely, OpenGL’s rich history, established reliability, and powerful low-level capabilities cannot be overlooked. The choice depends on your specific use case and expertise level. Explore both before deciding.