The same unmodified Aquarium workload, rendered side by side.
Peking University
The same unmodified Aquarium workload, rendered side by side.
WebGL remains the foundation of a large body of interactive graphics content on the Web, while WebGPU provides lower-level control and more efficient access to modern GPUs. Migrating an existing WebGL application to WebGPU, however, generally requires substantial engineering effort. We introduce GL2GPU, a dynamic translator that accelerates existing WebGL applications by converting WebGL API calls into WebGPU operations at JavaScript runtime. GL2GPU captures rendering commands, emulates WebGL state, translates shaders, and dynamically creates equivalent WebGPU resources and command sequences. It combines shader translation with two-level caching, uniform batching, and render-bundle reuse. GL2GPU requires no application source-code changes and no browser modifications. Evaluations on MotionMark, JSGameBench, and WebGL Aquarium show up to 45% average frame-time reduction across platforms while preserving visual consistency, with reductions of up to 87.7% on mobile workloads.
GL2GPU patches the WebGL JavaScript interface to capture rendering commands and maintain an equivalent representation of implicit WebGL state. It translates GLSL shaders to WGSL, constructs WebGPU pipeline and resource descriptors, and records equivalent draw commands. A two-level cache avoids redundant generation of graphics resources and render states; uniform batching reduces GPU memory traffic; and a trie-based render-bundle manager identifies and reuses recurring command sequences. The resulting WebGPU workload preserves the behavior and visual output of the original application while reducing per-frame overhead.
We evaluate GL2GPU on Mac, Windows, and Android devices using AMD, NVIDIA, Intel, and Snapdragon GPUs. The table reports the observed range of frame-time reduction over native WebGL; higher is better.
| Benchmark | Average Frame-Time Reduction |
|---|---|
| MotionMark | 73.9% – 87.7% |
| JSGameBench | 19.3% – 61.4% |
| WebGL Aquarium | 3.3% – 63.8% |
Run the same benchmark with native WebGL and with GL2GPU. Set an identical workload for both versions, open the matching buttons in separate tabs, and compare frame time, smoothness, and visual output.