WebGL Examples

Requires WebAssembly and WebGL support. The WebGL demos are hosted live here.

To build the encoder and transcoder WASM libraries using Emscripten, see the various README.md files in the ‘webgl/transcoder’ and ‘webgl/encoder’ folders. The Javascript API wrappers to the C/C++ library are located in webgl/transcoder/basis_wrappers.cpp.

Transcoder (texture_test)

Live demo: webgl/texture_test/index.html

Renders a single texture, using the transcoder (compiled to WASM with emscripten) to generate one of the following compressed texture formats:

  • ASTC 4x4 LDR or HDR
  • BC1 (no alpha)
  • BC3, BC4 or BC5
  • ETC1 (no alpha)
  • PVRTC 4bpp
  • BC6H, BC7

On browsers that don‘t support any compressed texture format, there’s a low-quality fallback code path for opaque LDR textures, and a HDR half float or LDR 32bpp fallback code path for HDR textures.

Screenshot showing a basis texture rendered as a 2D image in a webpage.

glTF 3D Model

Live demo: gltf/index.html

Renders a glTF 3D model with .basis texture files, transcoded into one of the following compressed texture formats:

  • ASTC
    • Tested in Chrome on Android, Pixel 3 XL.
  • DTX (BC1/BC3)
    • Tested in Chrome (Linux and macOS) and Firefox (macOS).
  • ETC1
    • Tested in Chrome on Android, Pixel 3 XL.
  • PVRTC
    • Tested in Chrome and Safari on iOS iPhone 6 Plus.

The glTF model in this demo uses a hypothetical GOOGLE_texture_basis extension. That extension is defined for the sake of example only - the glTF format will officially embed Basis files within a KTX2 wrapper, through a new extension that is currently in development.