Post

Virtual Texturing in HTML5 using WebGL

A virtual texturing demo ported to WebGL and listed on Chrome Experiments — real-time streaming of a 32k×16k island texture running in the browser.

Virtual Texturing in HTML5 using WebGL

Some time ago I ported one of our virtual texturing demos to HTML5/WebGL and it has been listed on Chrome Experiments. The demo shows real-time virtual texturing of a large island landscape with a 32768×16384 pixel texture (8 GB uncompressed) running entirely in the browser.

What It Does

The demo streams texture tiles on demand from a server as the camera moves around the island. At any given moment only the visible and relevant mip levels are resident in GPU memory. From the user's perspective it just looks like a high-resolution textured terrain, but the underlying system is managing a virtual texture atlas many times larger than what could ever fit in GPU memory.

Performance Notes

Performance was quite different between Chrome and Firefox at the time:

  • Chrome performed well and felt close to the native OpenGL version. The V8 JavaScript engine and Chrome's WebGL implementation kept frame rates acceptable for a real-time demo.
  • Firefox was noticeably slower. The culprit appeared to be JavaScript performance rather than GPU throughput — the CPU-side tile management and feedback processing took longer in Firefox's JS engine.

This was a fun exercise in proving that virtual texturing could work on the web platform. WebGL's lack of certain low-level features (like PBO uploads at the time) required some workarounds but nothing that prevented a functional demo.

The listing on Chrome Experiments was a nice validation that browser-based GPU demos had reached a point where non-trivial real-time graphics techniques were feasible.