tree: c3ba7a659c3a57820047905edd3562e239c97a31 [path history] [tgz]
  1. gltf/
  2. texture/
  3. transcoder/
  4. index.html
  5. README.md
webgl/README.md

WebGL Demo

Texture Demo

texture/index.html renders a single texture, using the transcoder (compiled to WASM with emscripten) to generate one of the following compressed texture formats:

  • BC1
  • BC3

On browsers that don‘t support BC1 (Firefox is one), there’s a low-quality fallback code path for opaque textures (but no fallback for BC3 yet). Note that the fallback path only converts to 16-bit RGB images at the moment, so the quality isn't as good as it should be.

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

glTF 3D Model Demo

gltf/index.html renders a glTF 3D model with .basis texture files, transcoded into one of the following compressed texture formats:

  • DTX (BC1)
    • Tested in Chrome (Linux and macOS) and Firefox (macOS).
  • ETC1
    • Tested in Chrome on Android, Pixel 3 XL.
  • PVRTC (COMPRESSED_RGB_PVRTC_4BPPV1_IMG)
    • 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.

Screenshot showing a basis texture rendered as the base color texture for a 3D model in a webpage.

Both demos require WebAssembly and WebGL support.

Testing locally

See how to run things locally, or (with Node.js installed), run:

npx serve

The console will display a localhost URL for local testing, and (on supported WiFi networks and devices) may also display an IP address accessible by other devices on the same network. Note that mobile devices must support WebAssembly to run this demo. Learn more about remote debugging your android devices.

Building transcoder locally

Prebuilt versions of basis_transcoder.js and basis_transcoder.wasm are included in the transcoder/build/ folder, and are sufficient for local demos. To build the transcoder yourself, first install emscripten (tutorial) and cmake (download). Then run:

cd webgl/transcoder/build/
emcmake cmake ../
make

Credits