WebGL has long been the prevalent API for GPU-accelerated graphics in web browsers, boosting 2D/3D graphical web applications. Despite widespread adoption, WebGL's programming model hinders its rendering performance on modern GPU hardware. To this end, WebGPU has been proposed as the next-generation API of GPU-accelerated processing in web browsers, exhibiting higher performance than WebGL. However, considering the complex logic of WebGL applications and the still-evolving WebGPU specification, statically migrating existing WebGL applications to WebGPU from source code is labor-intensive. To address this issue, we propose GL2GPU, an intermediate layer that dynamically translates WebGL to WebGPU at JavaScript runtime to improve rendering performance. GL2GPU addresses the inconsistencies between the WebGL and WebGPU programming models by emulating WebGL rendering states and leverages performance optimization mechanisms introduced by WebGPU to reduce the overhead of dynamic translation. Evaluation of three representative WebGL benchmarks shows that GL2GPU significantly enhances end-to-end rendering performance while maintaining visual consistency, achieving an average frame time reduction of 45.05% across different devices and operating systems.

Graphics rendering on web browsers serves as the foundation for numerous web applications. Compared with the widely employed WebGL, the next-generation web graphics API, WebGPU, demonstrates an enhanced capacity to adapt to modern GPU features, boasting more significant potential. However, our experiment shows that the performance of current graphics rendering frameworks based on WebGPU lags behind those built on WebGL. Such discrepancy primarily arises from an incomplete alignment with WebGPU's distinctive features. The individual rendering of each graphic leads to redundant communication between the CPU and GPU. To enhance the graphics performance on the web, we introduce the FusionRender to harness the power of WebGPU. To mitigate redundant communication, FusionRender assigns a unique signature to each object and employs these signatures for grouping, enabling the consolidation of graphics rendering whenever possible. In simulated experiments involving the rendering of multiple objects, FusionRender improves the rendering performance by 29.3%-122.1% compared with the existing optimal baseline. In real cases with more complex features, performance improvement ranges from 9.4% to 39.7%. Additionally, FusionRender exhibits robust performance enhancement across various devices and browsers.

Mobile extended reality (XR) has developed rapidly in recent years. Compared with the app-based XR, XR in web browsers has the advantages of being lightweight and cross-platform, providing users with a pervasive experience. Therefore, many frameworks are emerging to support the development of XR in web browsers. However, little has been known about how well these frameworks perform and how complex XR apps modern web browsers can support on mobile devices. To fill the knowledge gap, in this paper, we conduct an empirical study of mobile XR in web browsers. We select seven most popular web-based XR frameworks and investigate their runtime performance, including 3D rendering, camera capturing, and real-world understanding. We find that current frameworks have the potential to further enhance their performance by increasing GPU utilization or improving computing parallelism. Besides, for 3D scenes with good rendering performance, developers can feel free to add camera capturing with little influence on performance to support augmented reality (AR) and mixed reality (MR) applications. Based on our findings, we draw several practical implications to provide better XR support in web browsers.