Scarfski/basis_universal
1
0
Fork 0
mirror of https://github.com/BinomialLLC/basis_universal.git synced 2026-06-08 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename demo folders.

Browse Source
This commit is contained in:
Don McCurdy
2019-05-15 09:26:40 -07:00
parent 86b9fa53ed
commit e654e346bc
21 changed files with 309 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webgl/.gitignore vendored
View File

@@ -1,3 +1,3 @@
build/
!build/basis_transcoder.js
!build/basis_transcoder.wasm
transcoder/build/
!transcoder/build/basis_transcoder.js
!transcoder/build/basis_transcoder.wasm

17
webgl/README.md
View File

@@ -2,16 +2,19 @@
### Texture Demo
`index.html` uses the transcoder compiled to wasm with emscripten and renders the texture. Currently supporting following texture formats:
`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.
![](texture-demo.png)
![Screenshot showing a basis texture rendered as a 2D image in a webpage.](texture/preview.png)
### glTF 3D Model Demo
`gltf-demo/index.html` renders a glTF 3D model with `.basis` texture files, transcoded into one of the following compressed texture formats:
`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
@@ -22,9 +25,9 @@ On browsers that don't support BC1 (Firefox is one), there's a low-quality fallb
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.
![](model-demo.png)
![Screenshot showing a basis texture rendered as the base color texture for a 3D model in a webpage.](gltf/preview.png)
Both demos requires WebAssembly and WebGL support.
Both demos require WebAssembly and WebGL support.
## Testing locally
@@ -38,10 +41,10 @@ The console will display a `localhost` URL for local testing, and (on supported
## Building transcoder locally
Prebuilt versions of `basis_transcoder.js` and `basis_transcoder.wasm` are included in the `wasm/build/` folder, and are sufficient for local demos. To build the transcoder yourself, first install emscripten ([tutorial](https://webassembly.org/getting-started/developers-guide/)) and cmake ([download](https://cmake.org/download/)). Then run:
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](https://webassembly.org/getting-started/developers-guide/)) and cmake ([download](https://cmake.org/download/)). Then run:
```shell
cd webgl/wasm/build/
cd webgl/transcoder/build/
emcmake cmake ../
make
```

0
webgl/gltf-demo/BasisTextureLoader.js → webgl/gltf/BasisTextureLoader.js
View File

0
webgl/gltf-demo/GLTFLoader.js → webgl/gltf/GLTFLoader.js
View File

0
webgl/gltf-demo/AGI_HQ/AgiHQ.gltf → webgl/gltf/assets/AgiHQ.gltf
View File

0
webgl/gltf-demo/AGI_HQ/Model.bin → webgl/gltf/assets/Model.bin
View File

0
webgl/gltf-demo/AGI_HQ/Model_0_4096.basis → webgl/gltf/assets/Model_0_4096.basis
View File

0
webgl/gltf-demo/AGI_HQ/Model_1_4096.basis → webgl/gltf/assets/Model_1_4096.basis
View File

4
webgl/gltf-demo/index.html → webgl/gltf/index.html
View File

@@ -5,7 +5,7 @@
<script src="GLTFLoader.js"></script>
<script src="BasisTextureLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@v0.104.0/examples/js/controls/OrbitControls.js"></script>
<script src="../wasm/build/basis_transcoder.js"></script>
<script src="../transcoder/build/basis_transcoder.js"></script>
<style>
html, body { width:100%; height:100%; margin:0; padding:0; }
canvas { display:block; }
@@ -64,7 +64,7 @@
const loader = new THREE.GLTFLoader();
loader.load( 'AGI_HQ/AgiHQ.gltf', ( gltf ) => {
loader.load( 'assets/AgiHQ.gltf', ( gltf ) => {
const model = gltf.scene;
model.scale.set( 0.01, 0.01, 0.01 );

BIN
webgl/gltf/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 KiB

293
webgl/index.html
View File

@@ -1,280 +1,15 @@
<html>
<head>
<script src="renderer.js"></script>
<script src="dxt-to-rgb565.js"></script>
<script src="./wasm/build/basis_transcoder.js"></script>
<script type="text/javascript">
function log(s) {
var div = document.createElement('div');
div.innerHTML = s;
document.getElementById('logger').appendChild(div);
}
function logTime(desc, t) {
log(t + 'ms ' + desc);
}
function isDef(v) {
return typeof v != 'undefined';
}
function elem(id) {
return document.getElementById(id);
}
formatTable = function(rows) {
var colLengths = [];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
for (var j = 0; j < row.length; j++) {
if (colLengths.length <= j) colLengths.push(0);
if (colLengths[j] < row[j].length) colLengths[j] = row[j].length;
}
<!DOCTYPE html>
<style>
body {
max-width: 500px;
}
function formatRow(row) {
var parts = [];
for (var i = 0; i < colLengths.length; i++) {
var s = row.length > i ? row[i] : '';
var padding = (new Array(1 + colLengths[i] - s.length)).join(' ');
if (s && s[0] >= '0' && s[0] <= '9') {
// Right-align numbers.
parts.push(padding + s);
} else {
parts.push(s + padding);
}
}
return parts.join(' | ');
}
var width = 0;
for (var i = 0; i < colLengths.length; i++) {
width += colLengths[i];
// Add another 3 for the separator.
if (i != 0) width += 3;
}
var lines = [];
lines.push(formatRow(rows[0]));
lines.push((new Array(width + 1)).join('-'));
for (var i = 1; i < rows.length; i++) {
lines.push(formatRow(rows[i]));
}
return lines.join('\n');
};
function loadArrayBuffer(uri, callback) {
log('Loading ' + uri + '...');
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open('GET', uri, true);
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.response);
}
}
xhr.send(null);
}
// DXT formats, from:
// http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/
COMPRESSED_RGB_S3TC_DXT1_EXT = 0x83F0;
COMPRESSED_RGBA_S3TC_DXT1_EXT = 0x83F1;
COMPRESSED_RGBA_S3TC_DXT3_EXT = 0x83F2;
COMPRESSED_RGBA_S3TC_DXT5_EXT = 0x83F3;
BASIS_FORMAT = {
cTFETC1: 0,
cTFBC1: 1,
cTFBC4: 2,
cTFPVRTC1_4_OPAQUE_ONLY: 3,
cTFBC7_M6_OPAQUE_ONLY: 4,
cTFETC2: 5,
cTFBC3: 6,
cTFBC5: 7,
};
BASIS_FORMAT_NAMES = {};
for (var name in BASIS_FORMAT) {
BASIS_FORMAT_NAMES[BASIS_FORMAT[name]] = name;
}
DXT_FORMAT_MAP = {};
DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC1] = COMPRESSED_RGB_S3TC_DXT1_EXT;
DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC3] = COMPRESSED_RGBA_S3TC_DXT5_EXT;
var dxtSupported = true;
var drawMode = 0;
var tex, width, height, images, levels, have_alpha, alignedWidth, alignedHeight, format;
function redraw()
{
if (!width)
return;
if (dxtSupported)
{
renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
}
else if (format == BASIS_FORMAT.cTFBC1)
{
renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
}
else
{
log('TODO: Implement BC3->RGBA conversion for browsers that don\'t support BC3');
}
}
function dataLoaded(data)
{
log('Done loading .basis file, decoded header:');
const { BasisFile, initializeBasis } = Module;
initializeBasis();
const startTime = performance.now();
const basisFile = new BasisFile(new Uint8Array(data));
width = basisFile.getImageWidth(0, 0);
height = basisFile.getImageHeight(0, 0);
images = basisFile.getNumImages();
levels = basisFile.getNumLevels(0);
has_alpha = basisFile.getHasAlpha();
if (!width || !height || !images || !levels) {
console.warn('Invalid .basis file');
basisFile.close();
basisFile.delete();
return;
}
format = BASIS_FORMAT.cTFBC1;
if (has_alpha)
{
format = BASIS_FORMAT.cTFBC3;
log('Decoding .basis data to BC3');
}
else
{
log('Decoding .basis data to BC1');
}
if (!basisFile.startTranscoding()) {
console.warn('startTranscoding failed');
basisFile.close();
basisFile.delete();
return;
}
const dstSize = basisFile.getImageTranscodedSizeInBytes(0, 0, format);
const dst = new Uint8Array(dstSize);
if (!basisFile.transcodeImage(dst, 0, 0, format, 1, 0)) {
console.warn('transcodeImage failed');
basisFile.close();
basisFile.delete();
return;
}
const elapsed = performance.now() - startTime;
basisFile.close();
basisFile.delete();
log('width: ' + width);
log('height: ' + height);
log('images: ' + images);
log('first image mipmap levels: ' + levels);
log('has_alpha: ' + has_alpha);
logTime('transcoding time', elapsed.toFixed(2));
alignedWidth = (width + 3) & ~3;
alignedHeight = (height + 3) & ~3;
var canvas = elem('canvas');
canvas.width = alignedWidth;
canvas.height = alignedHeight;
if (dxtSupported)
{
tex = renderer.createDxtTexture(dst, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
}
else
{
var rgb565Data = dxtToRgb565(new Uint16Array(dst.buffer), 0, alignedWidth, alignedHeight);
tex = renderer.createRgb565Texture(rgb565Data, alignedWidth, alignedHeight);
}
redraw();
}
function runLoadFile() {
elem('logger').innerHTML = '';
loadArrayBuffer(elem('file').value, dataLoaded);
}
function alphaBlend() { drawMode = 0; redraw(); }
function viewRGB() { drawMode = 1; redraw(); }
function viewAlpha() { drawMode = 2; redraw(); }
</script>
</head>
<body>
<br>
<div style="font-size: 24pt; font-weight: bold">
.basis->BC1/BC3 transcoder test
</div>
<br>This demo uses the Basis C++ transcoder (compiled to Javascript using Emscripten) to transcode a .basis file to BC1/BC3.
<br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed.
<br>
<br>
.basis file:
<input id="file" type="text" size=30 value="kodim20.basis"></input>
<input type="button" value="Run!" onclick="runLoadFile()"></input>
<br>
<br>
<input type="button" value="Alpha blend" onclick="alphaBlend()"></input>
<input type="button" value="View RGB" onclick="viewRGB()"></input>
<input type="button" value="View Alpha" onclick="viewAlpha()"></input>
<div style="position:absolute; left: 525px; top:130px; font-size: 20pt; font-weight: bold; color: red">
<div id="nodxt" style="display: none; width: 768px; font-size: 20pt; font-weight: bold; color: red">
NOTE: Your browser does not support DXT, so using RGB565
for the texture below. To get DXT, try Chrome 19+
(beta channel as of 2012-04-20; graphics card DXT support also required).
</div>
<canvas id='canvas'></canvas>
</div>
<br><br>
<div id='logger'></div>
</body>
<script>
Module.onRuntimeInitialized = () => {
var gl = elem('canvas').getContext('webgl');
// Load the DXT extension, and verify it exists.
if (!gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc')) {
dxtSupported = false;
elem('nodxt').style.display = 'block';
}
window.renderer = new Renderer(gl);
elem('file').addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
runLoadFile();
}
}, false);
runLoadFile();
}
</script>
</html>
</style>
<h1>Basis WebGL demos</h1>
<p>
Example webpages using the transcoder (compiled to WASM) to render
Basis textures in WebGL. Both demos require WebAssembly and WebGL support.
</p>
<ul>
<li><a href="texture/">Simple texture</a></li>
<li><a href="gltf/">3D model (glTF 2.0)</a></li>
</ul>

BIN
webgl/model-demo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 MiB

BIN
webgl/texture-demo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 MiB

0
webgl/alpha3.basis → webgl/texture/assets/alpha3.basis
View File

0
webgl/kodim20.basis → webgl/texture/assets/kodim20.basis
View File

0
webgl/dxt-to-rgb565.js → webgl/texture/dxt-to-rgb565.js
View File

280
webgl/texture/index.html Normal file
View File

@@ -0,0 +1,280 @@
<html>
<head>
<script src="renderer.js"></script>
<script src="dxt-to-rgb565.js"></script>
<script src="../transcoder/build/basis_transcoder.js"></script>
<script type="text/javascript">
function log(s) {
var div = document.createElement('div');
div.innerHTML = s;
document.getElementById('logger').appendChild(div);
}
function logTime(desc, t) {
log(t + 'ms ' + desc);
}
function isDef(v) {
return typeof v != 'undefined';
}
function elem(id) {
return document.getElementById(id);
}
formatTable = function(rows) {
var colLengths = [];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
for (var j = 0; j < row.length; j++) {
if (colLengths.length <= j) colLengths.push(0);
if (colLengths[j] < row[j].length) colLengths[j] = row[j].length;
}
}
function formatRow(row) {
var parts = [];
for (var i = 0; i < colLengths.length; i++) {
var s = row.length > i ? row[i] : '';
var padding = (new Array(1 + colLengths[i] - s.length)).join(' ');
if (s && s[0] >= '0' && s[0] <= '9') {
// Right-align numbers.
parts.push(padding + s);
} else {
parts.push(s + padding);
}
}
return parts.join(' | ');
}
var width = 0;
for (var i = 0; i < colLengths.length; i++) {
width += colLengths[i];
// Add another 3 for the separator.
if (i != 0) width += 3;
}
var lines = [];
lines.push(formatRow(rows[0]));
lines.push((new Array(width + 1)).join('-'));
for (var i = 1; i < rows.length; i++) {
lines.push(formatRow(rows[i]));
}
return lines.join('\n');
};
function loadArrayBuffer(uri, callback) {
log('Loading ' + uri + '...');
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open('GET', uri, true);
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.response);
}
}
xhr.send(null);
}
// DXT formats, from:
// http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/
COMPRESSED_RGB_S3TC_DXT1_EXT = 0x83F0;
COMPRESSED_RGBA_S3TC_DXT1_EXT = 0x83F1;
COMPRESSED_RGBA_S3TC_DXT3_EXT = 0x83F2;
COMPRESSED_RGBA_S3TC_DXT5_EXT = 0x83F3;
BASIS_FORMAT = {
cTFETC1: 0,
cTFBC1: 1,
cTFBC4: 2,
cTFPVRTC1_4_OPAQUE_ONLY: 3,
cTFBC7_M6_OPAQUE_ONLY: 4,
cTFETC2: 5,
cTFBC3: 6,
cTFBC5: 7,
};
BASIS_FORMAT_NAMES = {};
for (var name in BASIS_FORMAT) {
BASIS_FORMAT_NAMES[BASIS_FORMAT[name]] = name;
}
DXT_FORMAT_MAP = {};
DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC1] = COMPRESSED_RGB_S3TC_DXT1_EXT;
DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC3] = COMPRESSED_RGBA_S3TC_DXT5_EXT;
var dxtSupported = true;
var drawMode = 0;
var tex, width, height, images, levels, have_alpha, alignedWidth, alignedHeight, format;
function redraw()
{
if (!width)
return;
if (dxtSupported)
{
renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
}
else if (format == BASIS_FORMAT.cTFBC1)
{
renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
}
else
{
log('TODO: Implement BC3->RGBA conversion for browsers that don\'t support BC3');
}
}
function dataLoaded(data)
{
log('Done loading .basis file, decoded header:');
const { BasisFile, initializeBasis } = Module;
initializeBasis();
const startTime = performance.now();
const basisFile = new BasisFile(new Uint8Array(data));
width = basisFile.getImageWidth(0, 0);
height = basisFile.getImageHeight(0, 0);
images = basisFile.getNumImages();
levels = basisFile.getNumLevels(0);
has_alpha = basisFile.getHasAlpha();
if (!width || !height || !images || !levels) {
console.warn('Invalid .basis file');
basisFile.close();
basisFile.delete();
return;
}
format = BASIS_FORMAT.cTFBC1;
if (has_alpha)
{
format = BASIS_FORMAT.cTFBC3;
log('Decoding .basis data to BC3');
}
else
{
log('Decoding .basis data to BC1');
}
if (!basisFile.startTranscoding()) {
console.warn('startTranscoding failed');
basisFile.close();
basisFile.delete();
return;
}
const dstSize = basisFile.getImageTranscodedSizeInBytes(0, 0, format);
const dst = new Uint8Array(dstSize);
if (!basisFile.transcodeImage(dst, 0, 0, format, 1, 0)) {
console.warn('transcodeImage failed');
basisFile.close();
basisFile.delete();
return;
}
const elapsed = performance.now() - startTime;
basisFile.close();
basisFile.delete();
log('width: ' + width);
log('height: ' + height);
log('images: ' + images);
log('first image mipmap levels: ' + levels);
log('has_alpha: ' + has_alpha);
logTime('transcoding time', elapsed.toFixed(2));
alignedWidth = (width + 3) & ~3;
alignedHeight = (height + 3) & ~3;
var canvas = elem('canvas');
canvas.width = alignedWidth;
canvas.height = alignedHeight;
if (dxtSupported)
{
tex = renderer.createDxtTexture(dst, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
}
else
{
var rgb565Data = dxtToRgb565(new Uint16Array(dst.buffer), 0, alignedWidth, alignedHeight);
tex = renderer.createRgb565Texture(rgb565Data, alignedWidth, alignedHeight);
}
redraw();
}
function runLoadFile() {
elem('logger').innerHTML = '';
loadArrayBuffer(elem('file').value, dataLoaded);
}
function alphaBlend() { drawMode = 0; redraw(); }
function viewRGB() { drawMode = 1; redraw(); }
function viewAlpha() { drawMode = 2; redraw(); }
</script>
</head>
<body>
<br>
<div style="font-size: 24pt; font-weight: bold">
.basis->BC1/BC3 transcoder test
</div>
<br>This demo uses the Basis C++ transcoder (compiled to Javascript using Emscripten) to transcode a .basis file to BC1/BC3.
<br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed.
<br>
<br>
.basis file:
<input id="file" type="text" size=30 value="assets/kodim20.basis"></input>
<input type="button" value="Run!" onclick="runLoadFile()"></input>
<br>
<br>
<input type="button" value="Alpha blend" onclick="alphaBlend()"></input>
<input type="button" value="View RGB" onclick="viewRGB()"></input>
<input type="button" value="View Alpha" onclick="viewAlpha()"></input>
<div style="position:absolute; left: 525px; top:130px; font-size: 20pt; font-weight: bold; color: red">
<div id="nodxt" style="display: none; width: 768px; font-size: 20pt; font-weight: bold; color: red">
NOTE: Your browser does not support DXT, so using RGB565
for the texture below. To get DXT, try Chrome 19+
(beta channel as of 2012-04-20; graphics card DXT support also required).
</div>
<canvas id='canvas'></canvas>
</div>
<br><br>
<div id='logger'></div>
</body>
<script>
Module.onRuntimeInitialized = () => {
var gl = elem('canvas').getContext('webgl');
// Load the DXT extension, and verify it exists.
if (!gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc')) {
dxtSupported = false;
elem('nodxt').style.display = 'block';
}
window.renderer = new Renderer(gl);
elem('file').addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
runLoadFile();
}
}, false);
runLoadFile();
}
</script>
</html>

BIN
webgl/texture/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 KiB

0
webgl/renderer.js → webgl/texture/renderer.js
View File

0
webgl/wasm/CMakeLists.txt → webgl/transcoder/CMakeLists.txt
View File

0
webgl/basis_wrappers.cpp → webgl/transcoder/basis_wrappers.cpp
View File