WebGPU and WebGL are standard technologies for using the GPU from a web browser. WebGPU is newer and is positioned as the successor to WebGL. These technologies can be used not only for 3D rendering, but also for demanding 2D effects, image processing, simulations, and other compute-heavy tasks.
GPU-powered web graphics are useful for developing content such as the following.
- Displaying 3D models
- Game content
- Data visualization
- Creative coding
- Simulation effects such as fluids and particles
- Visually rich screen effects, such as those used on advertising websites
Until around the 2010s, advanced 3D graphics in the browser generally required browser plug-ins such as Flash Player or Unity Web Player. Today, WebGPU and WebGL make it possible to create graphics close to native apps using only the browser.
This article is for beginners who want to get started with WebGPU and WebGL. It includes many original WebGPU and WebGL HTML demos that can be tried in a few seconds. All of them also work in mobile browsers. After experiencing what WebGPU and WebGL can do, the article introduces ways to continue learning.
Blazing fire effect
This is a WebGL example that renders blazing fire. You can change the angle by touching or dragging. The demo shows the impact of GPU-powered particle effects.
This example was originally created in Flash and later ported to WebGL. Flash was ahead of the web platform in this area, but this demo shows that WebGL can provide a comparable level of visual expression.
Time-remapping effect
This demo shows countless icons gathering together to form a word. It is a real-time motion graphics demo that switches into slow motion during the animation.
The implementation is explained in the article “高機能なモーション制作用JSライブラリGSAPを使ったタイムリマップ表現”.
3D game effect
In web content for games and visualization, JavaScript and GPU rendering are sometimes used to create rich 3D effects. This demo tests whether WebGPU can reproduce an effect similar to a special attack or aura.
The core implementation ideas are explained in the article “Three.js magma effect techniques for game visuals”.
Cover Flow UI
This example recreates the Cover Flow interface once used in macOS and iTunes using the Three.js WebGPU renderer. By moving the slider at the bottom of the screen, you can slide the photos left and right while tilting them in 3D space.
This example uses Three.js, a JavaScript library for 3D graphics. For details, see the article “Three.jsで作る3DのカバーフローUI”.
2D fluid simulation
The GPU is useful not only for 3D, but also for 2D effects and computation. The following demo is a fluid simulation built with the Three.js WebGPU renderer and TSL, or Three.js Shading Language. You can interactively change the fluid motion by dragging with the mouse or using touch input.
In fluid rendering, values such as velocity and pressure are assigned to each pixel on the screen and calculated in parallel on the GPU. This technique is well suited to website background effects, visualization, and interactive art. For details, see the article “Three.js(WebGPU)で実現するStable Fluids - 2Dの流体シミュレーション”.
Lens flare effect
Lens flare is a visual phenomenon that appears when a light source enters the camera lens directly. It is a familiar effect in film and games, and it can also be recreated with the Three.js WebGPU renderer.
When you drag the mouse to move the viewpoint, the appearance of the lens flare changes based on the positional relationship between the light source and the camera. For details, see the article “Lens flare effects in Three.js”.
Satellite orbit visualization
This example comes from the article “WebGPU・WebGL開発に役立つ三角関数の数式・概念まとめ （Three.js編）”, which explains how to implement satellite orbits. You can rotate the angle by touching or dragging.
This technique could be useful when visualizing global-scale data in 3D, such as flight routes or import and export data.
WebGPU and WebGL are also useful for 2D graphics
WebGPU and WebGL are not only for 3D graphics. The next demo is a 2D physics simulation built with fast GPU-based rendering.
This example uses PixiJS, a JavaScript library that can use the GPU for 2D rendering. GPU-based rendering is effective for visually demanding content, such as large numbers of objects or fluid-like effects.
Use in 3D game graphics
In a game project that our company helped develop, the fighter aircraft battle screen was implemented with WebGL.
GPU rendering is used in a wide range of content, including games, advertising experiences, and data visualization.
Supported browsers
As of 2026, WebGPU is available in Chrome and Edge 113 or later, Firefox 141 or later, Safari 26.0 or later, and other modern browsers.
Reference: Can I use… WebGPU
WebGL is widely supported on both desktop and mobile browsers. WebGL 2.0 is also available in many current browsers.
Video test showing smooth WebGL playback on mobile
The video above shows how well WebGL can run in a mobile browser. It was recorded in 2014, so the devices used for testing are now quite old. Even so, WebGL runs smoothly on the iPhone 6 Plus and iPhone 5s. Performance still depends on how the content is optimized, but the video shows that GPU rendering can be effective even on mobile devices.
How to learn WebGPU and WebGL
Learn Three.js
Using WebGPU or WebGL directly requires knowledge of rendering pipelines, shaders, buffers, textures, and related concepts. If the goal is to create rich 3D graphics, the standard path is to start with the JavaScript library Three.js.
Three.js can create 3D graphics with a small amount of code, making it suitable for beginners. At the same time, it is not only for learning. Three.js is also used in professional production environments.
Understand how WebGPU and WebGL work
The following articles explain WebGPU’s characteristics, performance differences from WebGL, and the possibilities of compute shaders.
WebGPU can be used not only for graphics, but also for general-purpose computation on the GPU. Effects such as fluid simulation are a good match for the GPU’s parallel processing model.
The idea of using the GPU for general-purpose computation, rather than only for rendering, is explained in the article “GPGPUを体験しよう！ WebGPUのコンピュートシェーダー入門”. It is an introductory article that shows how to try GPU-based parallel computation from JavaScript using compute shaders.
If you want to learn the fundamentals of WebGL, the following site is useful. Understanding the lower-level mechanics of WebGL helps when developing shaders. Three.js alone can produce a wide range of visuals, but using shaders opens the door to more advanced expression.
WebGL has versions 1.0 and 2.0. Today, WebGL 2.0 is supported by many current browsers and includes several specifications that are more advantageous for performance than WebGL 1.0.
The author’s demo site, ClockMaker Labs, also includes many WebGPU and WebGL examples.
Conclusion
WebGPU will likely be used more often in web graphics going forward. It is suitable for high-performance rendering and computation, and libraries such as Three.js are making it easier to use.
Both WebGPU and WebGL are important technologies for creating advanced 3D graphics and 2D effects in the browser. Start by trying the demos and experiencing what GPU-powered web graphics can do.
