Tagged articles
2 articles
Page 1 of 1
Tencent Music Tech Team
Tencent Music Tech Team
Aug 14, 2020 · Frontend Development

Web Implementation of Transparent Video Gift Animations Using Canvas and WebGL

The article describes how a live‑room video‑gift feature originally built for mobile was ported to a web client by extracting separate color and alpha video streams, compositing them on canvas, then migrating the per‑pixel blending to WebGL shaders, which cut CPU usage dramatically, raise frame rates to about 60 FPS, and outline further optimisations such as pre‑loading, mobile support, and possible MSE or WebAssembly approaches.

CanvasPerformance OptimizationWebGL
0 likes · 9 min read
Web Implementation of Transparent Video Gift Animations Using Canvas and WebGL