Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
richgel999 authored Sep 10, 2024
1 parent 7a5d228 commit 88e4a80
Showing 1 changed file with 20 additions and 18 deletions.
38 changes: 20 additions & 18 deletions webgl/README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
# WebGL Examples

Requires WebAssembly and WebGL support.
Requires WebAssembly and WebGL support. The WebGL demos are hosted live [here](https://subquantumtech.com/uastchdr2/).

## Texture
To build the encoder and transcoder WASM libraries using Emscripten, see the various README.md files in the 'webgl/transcoder' and 'webgl/encoder' folders.

Live demo: https://subquantumtech.com/uastchdr2/
## texture_test

Live demo: [webgl/texture_test/index.html](https://subquantumtech.com/uastchdr2/texture_test/)

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

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

On browsers that don't support any compressed texture format, there's a low-quality fallback code path for opaque textures. 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.
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.](texture/preview.png)
![Screenshot showing a basis texture rendered as a 2D image in a webpage.](texture_test/preview.png)

## glTF 3D Model

[Live demo: `gltf/index.html`](https://basis-universal-webgl.now.sh/gltf/)
Live demo: [`gltf/index.html`](https://subquantumtech.com/uastchdr2/gltf/)

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

Expand All @@ -38,22 +41,21 @@ extension that is [currently in development](https://github.com/KhronosGroup/glT

![Screenshot showing a basis texture rendered as the base color texture for a 3D model in a webpage.](gltf/preview.png)

## Compressor (encode_test)
## Compressor (ktx2_encode_test)

This demo shows how to use the compressor from JavaScript. To use it, select a .PNG file then hit the "Encode!" button. The compressor will dynamically generate a .basis file in memory which will then be immediately transcoded and displayed. Hit the "Download!" button to locally download the generated .basis file.
Live demo: [`ktx2_encode_test/index.html'](https://subquantumtech.com/uastchdr2/ktx2_encode_test/)

This demo shows how to use the compressor from JavaScript. To use it, select a .PNG file then hit the "Encode!" button. The compressor will dynamically generate a .ktx2 file in memory which will then be immediately transcoded and displayed. Hit the "Download!" button to locally download the generated .ktx2 file.

To view the compressor's textual debug output, open your browser's developer debug console (under Developer Tools in Chrome) and enable the Debug checkbox before hitting the "Encode!" button. Multithreading is not currently supported when the compressor is compiled to WebAssembly, so compression will be slower than using the stand-alone command line tool.

![Screenshot showing the encode_test demo](encode_test/preview.png)
![Screenshot showing the encode_test demo](ktx2_encode_test/preview.png)

## Testing locally

See [how to run things locally](https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally), or (with [Node.js](https://nodejs.org/en/) installed), run:
You can locally host the files under the "webgl" folder. One way is to use [Python to setup a local webserver](https://pythonbasics.org/webserver/) to setup a webserver in the 'webgl' directory.

```
npx serve
cd webgl
python3 -m http.server 8000
```

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](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/).

Alternately, use [Web Server for Chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb), browse to your local "webgl" directory, and then select 127.0.0.1:8887 under "Web Server URL(s).

0 comments on commit 88e4a80

Please sign in to comment.