BABYLON LITE · WEBGPU

Texture Array

How it works5 layers · repeat U + V

A texture array stores five equally sized MSDF icon textures as independently addressable layers. The flag selects the highlighted layer every second.

The shader repeats its UV coordinates in both directions, so one sampled icon tiles across the 2 × 2 heraldic grid. MSDF keeps the icon edges crisp while the flag moves.

Unlike a texture atlas, this is still one bound texture unit with repeat wrapping in both U and V for every layer. An atlas would repeat into neighbouring icons instead.

MSDF texture layer 0: home
0 home
MSDF texture layer 1: favorite
1 favorite
MSDF texture layer 2: star
2 star
MSDF texture layer 3: face
3 face
MSDF texture layer 4: pets
4 pets
View source on GitHub ↗

This demo requires a browser with WebGPU support.