Add ktx
This commit is contained in:
+545
@@ -0,0 +1,545 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="basis.js"></script>
|
||||
<script src="renderer.js"></script>
|
||||
<script src="dxt-to-rgb565.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;
|
||||
COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;
|
||||
|
||||
BASIS_FORMAT = {
|
||||
|
||||
cTFETC1: 0,
|
||||
cTFETC2: 1,
|
||||
cTFBC1: 2,
|
||||
cTFBC3: 3,
|
||||
cTFBC4: 4,
|
||||
cTFBC5: 5,
|
||||
cTFBC7: 6,
|
||||
cTFPVRTC1_4_RGB: 8,
|
||||
cTFPVRTC1_4_RGBA: 9,
|
||||
|
||||
cTFASTC_4x4: 10,
|
||||
|
||||
cTFATC_RGB: 11,
|
||||
cTFATC_RGBA_INTERPOLATED_ALPHA: 12,
|
||||
|
||||
cTFRGBA32: 13,
|
||||
cTFRGB565: 14,
|
||||
cTFBGR565: 15,
|
||||
cTFRGBA4444: 16
|
||||
};
|
||||
|
||||
BASIS_DEBUG_FLAGS = {
|
||||
DEBUG_FLAG_VIS_CR: 1,
|
||||
DEBUG_FLAG_VIS_SELS: 2,
|
||||
DEBUG_FLAG_VIS_ENDPOINTS: 4
|
||||
};
|
||||
|
||||
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;
|
||||
DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC7] = COMPRESSED_RGBA_BPTC_UNORM;
|
||||
|
||||
var dxtSupported = true;
|
||||
var bc7Supported = false;
|
||||
var drawMode = 0;
|
||||
|
||||
var basisHandle = 0, src = 0, srcSize = 0;
|
||||
var tex = 0, width = 0, height = 0, images = 0, levels = 0, have_alpha = false, alignedWidth = 0, alignedHeight = 0, format;
|
||||
var curImageIndex = 0;
|
||||
|
||||
function redraw()
|
||||
{
|
||||
if ((!width) || (!tex))
|
||||
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 transcodeFrame()
|
||||
{
|
||||
if (basisHandle == 0)
|
||||
return;
|
||||
|
||||
var dstSize = Module._basis_get_image_transcoded_size_in_bytes(basisHandle, 0, 0, format);
|
||||
var dst = Module._malloc(dstSize);
|
||||
|
||||
if (!Module._basis_transcode_image(basisHandle, dst, dstSize, curImageIndex, 0, format, 1, 0))
|
||||
{
|
||||
Module._basis_close(basisHandle); basisHandle = 0;
|
||||
Module._free(src); src = 0;
|
||||
Module._free(dst);
|
||||
width = 0;
|
||||
|
||||
log('basis_transcode_image() failed!');
|
||||
return;
|
||||
}
|
||||
|
||||
var dxtData = new Uint8Array(Module.HEAPU8.buffer, dst, dstSize);
|
||||
|
||||
if (tex != 0)
|
||||
{
|
||||
renderer.destroyTexture(tex);
|
||||
tex = 0;
|
||||
}
|
||||
|
||||
if (dxtSupported)
|
||||
{
|
||||
tex = renderer.createDxtTexture(dxtData, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
|
||||
}
|
||||
else if (format == BASIS_FORMAT.cTFBC1)
|
||||
{
|
||||
var rgb565Data = dxtToRgb565(Module.HEAPU16, dst / 2, alignedWidth, alignedHeight);
|
||||
|
||||
tex = renderer.createRgb565Texture(rgb565Data, alignedWidth, alignedHeight);
|
||||
}
|
||||
|
||||
Module._free(dst);
|
||||
}
|
||||
|
||||
var then = 0;
|
||||
var timeSinceLastFrame = 0;
|
||||
var g_framerateLimit = true;
|
||||
var g_paused = false;
|
||||
var g_Framerate = 24.0;
|
||||
var g_targetFrame = 0.0;
|
||||
|
||||
var g_dataLoadedCountDown;
|
||||
var g_receivedData;
|
||||
var forceBC1 = 0;
|
||||
|
||||
function frame(now)
|
||||
{
|
||||
if (g_dataLoadedCountDown > 0)
|
||||
{
|
||||
g_dataLoadedCountDown = g_dataLoadedCountDown - 1;
|
||||
if (g_dataLoadedCountDown == 0)
|
||||
{
|
||||
if (g_receivedData)
|
||||
{
|
||||
transcode(g_receivedData);
|
||||
g_receivedData = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
now *= 0.001; // convert to seconds
|
||||
const deltaTime = now - then;
|
||||
then = now;
|
||||
|
||||
if (basisHandle != 0)
|
||||
{
|
||||
transcodeFrame();
|
||||
|
||||
redraw()
|
||||
|
||||
if (g_targetFrame >= 0)
|
||||
{
|
||||
timeSinceLastFrame = 0;
|
||||
|
||||
if (curImageIndex >= g_targetFrame)
|
||||
g_targetFrame = -1;
|
||||
else
|
||||
curImageIndex++;
|
||||
}
|
||||
else if (g_paused)
|
||||
{
|
||||
timeSinceLastFrame = 0;
|
||||
}
|
||||
else if (!g_framerateLimit)
|
||||
{
|
||||
timeSinceLastFrame = 0;
|
||||
curImageIndex++;
|
||||
}
|
||||
else
|
||||
{
|
||||
timeSinceLastFrame += deltaTime;
|
||||
if (timeSinceLastFrame > 1.0/g_Framerate)
|
||||
{
|
||||
timeSinceLastFrame -= 1.0/g_Framerate;
|
||||
|
||||
curImageIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
if (curImageIndex == images)
|
||||
curImageIndex = 0;
|
||||
}
|
||||
|
||||
requestAnimationFrame(frame);
|
||||
|
||||
// log('Here!');
|
||||
}
|
||||
|
||||
function transcode(data)
|
||||
{
|
||||
Module._basis_init();
|
||||
|
||||
if (basisHandle != 0)
|
||||
{
|
||||
Module._basis_close(basisHandle);
|
||||
basisHandle = 0;
|
||||
}
|
||||
|
||||
if (src != 0)
|
||||
{
|
||||
src = 0;
|
||||
Module._free(src);
|
||||
}
|
||||
|
||||
srcSize = data.byteLength;
|
||||
var bytes = new Uint8Array(data);
|
||||
src = Module._malloc(srcSize);
|
||||
arrayBufferCopy(bytes, Module.HEAPU8, src, srcSize);
|
||||
|
||||
basisHandle = Module._basis_open(src, srcSize);
|
||||
if (!basisHandle)
|
||||
{
|
||||
log('Failed opening basis file!');
|
||||
Module._free(src); src = 0;
|
||||
width = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
width = Module._basis_get_image_width(basisHandle, 0, 0);
|
||||
height = Module._basis_get_image_height(basisHandle, 0, 0);
|
||||
images = Module._basis_get_num_images(basisHandle, 0);
|
||||
levels = Module._basis_get_num_levels(basisHandle, 0);
|
||||
has_alpha = Module._basis_get_has_alpha(basisHandle);
|
||||
|
||||
if (!width || !height || !images || !levels)
|
||||
{
|
||||
Module._basis_close(basisHandle); basisHandle = 0;
|
||||
Module._free(src); src = 0;
|
||||
width = 0;
|
||||
|
||||
log('Failed getting info from basis file!');
|
||||
return;
|
||||
}
|
||||
|
||||
if ((bc7Supported) && (forceBC1 == 0))
|
||||
{
|
||||
format = BASIS_FORMAT.cTFBC7;
|
||||
log('Decoding .basis data to BC7/BPTC');
|
||||
}
|
||||
else
|
||||
{
|
||||
format = BASIS_FORMAT.cTFBC1;
|
||||
if (has_alpha)
|
||||
{
|
||||
format = BASIS_FORMAT.cTFBC3;
|
||||
|
||||
log('Decoding .basis data to BC3');
|
||||
}
|
||||
else
|
||||
{
|
||||
log('Decoding .basis data to BC1');
|
||||
}
|
||||
}
|
||||
|
||||
log('.basis file size: ' + srcSize);
|
||||
if (levels == 1)
|
||||
log('average bits/texel: ' + ((srcSize * 8.0) / (width * height * images)));
|
||||
log('width: ' + width);
|
||||
log('height: ' + height);
|
||||
log('images: ' + images);
|
||||
log('first image mipmap levels: ' + levels);
|
||||
log('has_alpha: ' + has_alpha);
|
||||
|
||||
alignedWidth = (width + 3) & ~3;
|
||||
alignedHeight = (height + 3) & ~3;
|
||||
|
||||
var canvas = elem('canvas');
|
||||
canvas.width = alignedWidth;
|
||||
canvas.height = alignedHeight;
|
||||
|
||||
var status = Module._basis_start_transcoding(basisHandle);
|
||||
if (!status)
|
||||
{
|
||||
Module._basis_close(basisHandle); basisHandle = 0;
|
||||
Module._free(src); src = 0;
|
||||
width = 0;
|
||||
|
||||
log('basis_start_transcoding() failed!');
|
||||
return;
|
||||
}
|
||||
|
||||
curImageIndex = 0;
|
||||
}
|
||||
|
||||
function dataLoaded(data)
|
||||
{
|
||||
log('Done loading .basis file');
|
||||
|
||||
if (bc7Supported)
|
||||
log('EXT_texture_compression_bptc is supported!')
|
||||
else
|
||||
log('EXT_texture_compression_bptc is NOT supported!')
|
||||
|
||||
g_dataLoadedCountDown=50;
|
||||
g_receivedData=data;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Uint8Array} src
|
||||
* @param {Uint8Array} dst
|
||||
*/
|
||||
function arrayBufferCopy(src, dst, dstByteOffset, numBytes) {
|
||||
dst32Offset = dstByteOffset / 4;
|
||||
var tail = (numBytes % 4);
|
||||
var src32 = new Uint32Array(src.buffer, 0, (numBytes - tail) / 4);
|
||||
var dst32 = new Uint32Array(dst.buffer);
|
||||
for (var i = 0; i < src32.length; i++) {
|
||||
dst32[dst32Offset + i] = src32[i];
|
||||
}
|
||||
for (var i = numBytes - tail; i < numBytes; i++) {
|
||||
dst[dstByteOffset + i] = src[i];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function run() {
|
||||
elem('logger').innerHTML = '';
|
||||
loadArrayBuffer(elem('file').value, dataLoaded);
|
||||
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
|
||||
function initialize() {
|
||||
var gl = elem('canvas').getContext('experimental-webgl');
|
||||
|
||||
// Load the DXT extension, and verify it exists.
|
||||
|
||||
if (!gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc') && !gl.getExtension('WEBGL_compressed_texture_s3tc')) {
|
||||
dxtSupported = false;
|
||||
elem('nodxt').style.display = 'block';
|
||||
}
|
||||
|
||||
if (gl.getExtension('EXT_texture_compression_bptc'))
|
||||
bc7Supported = true;
|
||||
else
|
||||
bc7Supported = false;
|
||||
|
||||
window.renderer = new Renderer(gl);
|
||||
|
||||
elem('file').addEventListener('keydown', function(e) {
|
||||
if (e.keyCode == 13) {
|
||||
run();
|
||||
}
|
||||
}, false);
|
||||
|
||||
run();
|
||||
}
|
||||
|
||||
function alphaBlend() { drawMode = 0; redraw(); }
|
||||
function viewRGB() { drawMode = 1; redraw(); }
|
||||
function viewAlpha() { drawMode = 2; redraw(); }
|
||||
function forceBC1Func() { forceBC1 = 1 - forceBC1; run(); }
|
||||
|
||||
function visCR()
|
||||
{
|
||||
var i = Module._basis_get_debug_flags();
|
||||
i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_CR;
|
||||
Module._basis_set_debug_flags(i);
|
||||
}
|
||||
|
||||
function visSels()
|
||||
{
|
||||
var i = Module._basis_get_debug_flags();
|
||||
i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_SELS;
|
||||
Module._basis_set_debug_flags(i);
|
||||
}
|
||||
|
||||
function visEndpoints()
|
||||
{
|
||||
var i = Module._basis_get_debug_flags();
|
||||
i ^= BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_ENDPOINTS;
|
||||
Module._basis_set_debug_flags(i);
|
||||
}
|
||||
|
||||
function togglePause()
|
||||
{
|
||||
g_paused = !g_paused;
|
||||
}
|
||||
|
||||
function toggleFramerateLimit()
|
||||
{
|
||||
g_framerateLimit = !g_framerateLimit;
|
||||
}
|
||||
|
||||
function restart()
|
||||
{
|
||||
curImageIndex = 0;
|
||||
}
|
||||
|
||||
function slow()
|
||||
{
|
||||
if (g_Framerate >= 20.0)
|
||||
g_Framerate = 5.0;
|
||||
else
|
||||
g_Framerate = 20.0;
|
||||
}
|
||||
|
||||
function rewind()
|
||||
{
|
||||
if (g_targetFrame < 0)
|
||||
{
|
||||
g_targetFrame = curImageIndex;
|
||||
if (g_targetFrame > 10)
|
||||
g_targetFrame -= 10;
|
||||
else
|
||||
g_targetFrame = 0;
|
||||
curImageIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="initialize()">
|
||||
<br>
|
||||
<div style="font-size: 24pt; font-weight: bold">
|
||||
Basis Universal GPU Texture Video UASTC->BC7 Transcoding Test
|
||||
</div>
|
||||
|
||||
<div style="font-size: 8pt;">
|
||||
<br>This demo uses the <a href="https://github.com/BinomialLLC/basis_universal">Basis C++ transcoder</a> (compiled to Javascript using Emscripten) to transcode a .basis Universal Texture Video file directly to GPU texture data, with no intermediate recompression step.
|
||||
<br>.basis universal GPU texture files can be quickly transcoded directly to any other GPU texture format with little to no quality loss.
|
||||
<br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed.
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
.basis file:
|
||||
<input id="file" type="text" size=30 value="6.1.01.basis"></input>
|
||||
<input type="button" value="Run!" onclick="run()"></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>
|
||||
<br>
|
||||
<br>
|
||||
<input type="button" value="Force BC1" onclick="forceBC1Func()"></input>
|
||||
<br>
|
||||
<br>
|
||||
<input type="button" value="Visualize CR's" onclick="visCR()"></input>
|
||||
<input type="button" value="Visualize Selectors" onclick="visSels()"></input>
|
||||
<input type="button" value="Visualize Endpoints" onclick="visEndpoints()"></input>
|
||||
<br>
|
||||
<br>
|
||||
<input type="button" value="No Framerate Limit" onclick="toggleFramerateLimit()"></input>
|
||||
<input type="button" value="Pause" onclick="togglePause()"></input>
|
||||
<input type="button" value="Restart" onclick="restart()"></input>
|
||||
<input type="button" value="Toggle Slow Speed" onclick="slow()"></input>
|
||||
<input type="button" value="Rewind" onclick="rewind()"></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>
|
||||
</html>
|
||||
Reference in New Issue
Block a user