Scarfski/basis_universal
1
0
Fork 0
mirror of https://github.com/BinomialLLC/basis_universal.git synced 2026-08-14 07:12:14 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
ef0157e6bc1dfd6f4b52d5604bc8a78c46cd8ef0
basis_universal/webgl/video_test/index.html

831 lines
31 KiB
HTML
Raw Blame History

<!--
Very simple .basis LDR texture video tester. (HDR texture video is supported by the library, but not this sample yet.)
Example command lines to encode a texture video file from another video file:
ffmpeg -i "castle.mp4" pic%04d.png
ETC1S: basisu -basis -comp_level 2 -tex_type video -multifile_printf "pic%04u.png" -multifile_num 600 -multifile_first 1 -max_selectors 16128 -max_endpoints 16128 -endpoint_rdo_thresh 1.05 -selector_rdo_thresh 1.05 -resample_factor .5 -debug
XUASTC LDR: basisu -basis -tex_type video -multifile_printf "pic%04u.png" -multifile_num 600 -multifile_first 1 -xuastc_ldr_10x10 -quality 60 -effort 9 -debug -resample_factor .5
-->
<!doctype html>
<html>
<head>
<script src="renderer.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);
}
function setButtonState(buttonId, state)
{
document.getElementById(buttonId).disabled = !state; // If state is true, enable button; otherwise, disable it
}
function dataLoadError(msg)
{
log(msg);
}
function setCanvasSize(width, height)
{
var canvas = elem('canvas');
canvas.width = width;
canvas.height = height;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
}
function loadArrayBuffer(uri, callback, errorCallback)
{
log('Loading ' + uri + '...');
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open('GET', uri, true);
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4) { // Request is done
if (xhr.status == 200) {
// Success, call the callback with the response
callback(xhr.response);
} else {
// Error, call the errorCallback with the status
errorCallback('Failed to load file. Status: ' + xhr.status + ' - ' + xhr.statusText);
}
}
};
xhr.onerror = function (e) {
// Network error or request couldn't be made
errorCallback('Network error or request failed.');
};
xhr.send(null);
}
// ASTC format, from:
// https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/
COMPRESSED_RGBA_ASTC_4x4_KHR = 0x93B0;
COMPRESSED_RGBA_ASTC_5x4_KHR = 0x93B1;
COMPRESSED_RGBA_ASTC_5x5_KHR = 0x93B2;
COMPRESSED_RGBA_ASTC_6x5_KHR = 0x93B3;
COMPRESSED_RGBA_ASTC_6x6_KHR = 0x93B4;
COMPRESSED_RGBA_ASTC_8x5_KHR = 0x93B5;
COMPRESSED_RGBA_ASTC_8x6_KHR = 0x93B6;
COMPRESSED_RGBA_ASTC_10x5_KHR = 0x93B8;
COMPRESSED_RGBA_ASTC_10x6_KHR = 0x93B9;
COMPRESSED_RGBA_ASTC_10x8_KHR = 0x93BA;
COMPRESSED_RGBA_ASTC_8x8_KHR = 0x93B7; // note the WebGL block order is not the standard ASTC block order
COMPRESSED_RGBA_ASTC_10x10_KHR = 0x93BB;
COMPRESSED_RGBA_ASTC_12x10_KHR = 0x93BC;
COMPRESSED_RGBA_ASTC_12x12_KHR = 0x93BD;
// ASTC sRGB variants
COMPRESSED_SRGBA_ASTC_4x4_KHR = 0x93D0;
COMPRESSED_SRGBA_ASTC_5x4_KHR = 0x93D1;
COMPRESSED_SRGBA_ASTC_5x5_KHR = 0x93D2;
COMPRESSED_SRGBA_ASTC_6x5_KHR = 0x93D3;
COMPRESSED_SRGBA_ASTC_6x6_KHR = 0x93D4;
COMPRESSED_SRGBA_ASTC_8x5_KHR = 0x93D5;
COMPRESSED_SRGBA_ASTC_8x6_KHR = 0x93D6;
COMPRESSED_SRGBA_ASTC_10x5_KHR = 0x93D8;
COMPRESSED_SRGBA_ASTC_10x6_KHR = 0x93D9;
COMPRESSED_SRGBA_ASTC_8x8_KHR = 0x93D7; // note the WebGL block order is not the standard ASTC block order
COMPRESSED_SRGBA_ASTC_10x8_KHR = 0x93DA;
COMPRESSED_SRGBA_ASTC_10x10_KHR = 0x93DB;
COMPRESSED_SRGBA_ASTC_12x10_KHR = 0x93DC;
COMPRESSED_SRGBA_ASTC_12x12_KHR = 0x93DD;
// 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;
// BC6H/BC7 formats, from:
// https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/
COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;
COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT = 0x8E8F;
// ETC format, from:
// https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/
COMPRESSED_RGB_ETC1_WEBGL = 0x8D64;
// PVRTC format, from:
// https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/
COMPRESSED_RGB_PVRTC_4BPPV1_IMG = 0x8C00;
COMPRESSED_RGBA_PVRTC_4BPPV1_IMG = 0x8C02;
// Half float RGBA, from:
// https://registry.khronos.org/webgl/extensions/OES_texture_half_float/
HALF_FLOAT_OES = 0x8D61;
// Same as the Module.transcoder_texture_format enum
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,
cTFFXT1_RGB: 17,
cTFPVRTC2_4_RGB: 18,
cTFPVRTC2_4_RGBA: 19,
cTFETC2_EAC_R11: 20,
cTFETC2_EAC_RG11: 21,
cTFBC6H: 22,
cTFASTC_HDR_4x4_RGBA: 23,
cTFRGB_HALF: 24,
cTFRGBA_HALF: 25,
cTFRGB_9E5: 26,
cTFASTC_HDR_6x6_RGBA: 27,
cTFASTC_LDR_5x4_RGBA: 28,
cTFASTC_LDR_5x5_RGBA: 29,
cTFASTC_LDR_6x5_RGBA: 30,
cTFASTC_LDR_6x6_RGBA: 31,
cTFASTC_LDR_8x5_RGBA: 32,
cTFASTC_LDR_8x6_RGBA: 33,
cTFASTC_LDR_10x5_RGBA: 34,
cTFASTC_LDR_10x6_RGBA: 35,
cTFASTC_LDR_8x8_RGBA: 36,
cTFASTC_LDR_10x8_RGBA: 37,
cTFASTC_LDR_10x10_RGBA: 38,
cTFASTC_LDR_12x10_RGBA: 39,
cTFASTC_LDR_12x12_RGBA: 40
};
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;
}
const ASTC_FORMAT_MAP = {};
// LDR ASTC
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_4x4] = COMPRESSED_RGBA_ASTC_4x4_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_5x4_RGBA] = COMPRESSED_RGBA_ASTC_5x4_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_5x5_RGBA] = COMPRESSED_RGBA_ASTC_5x5_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_6x5_RGBA] = COMPRESSED_RGBA_ASTC_6x5_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_6x6_RGBA] = COMPRESSED_RGBA_ASTC_6x6_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_8x5_RGBA] = COMPRESSED_RGBA_ASTC_8x5_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_8x6_RGBA] = COMPRESSED_RGBA_ASTC_8x6_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_10x5_RGBA] = COMPRESSED_RGBA_ASTC_10x5_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_10x6_RGBA] = COMPRESSED_RGBA_ASTC_10x6_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_8x8_RGBA] = COMPRESSED_RGBA_ASTC_8x8_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_10x8_RGBA] = COMPRESSED_RGBA_ASTC_10x8_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_10x10_RGBA]= COMPRESSED_RGBA_ASTC_10x10_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_12x10_RGBA]= COMPRESSED_RGBA_ASTC_12x10_KHR;
ASTC_FORMAT_MAP[BASIS_FORMAT.cTFASTC_LDR_12x12_RGBA]= COMPRESSED_RGBA_ASTC_12x12_KHR;
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 g_astcSupported = false;
var g_etcSupported = false;
var g_dxtSupported = false;
var g_bc7Supported = false;
var g_bc6hSupported = false;
var g_astcHDRSupported = false;
var g_rgbaHalfSupported = false;
var g_halfFloatWebGLFormat = 0;
var g_pvrtcSupported = false;
var g_basisFile = 0;
var g_tex = null, g_width = 0, g_height = 0, g_numImages = 0, g_numLevels = 0, g_hasAlpha = false, g_transcodeFormat = BASIS_FORMAT.cTFETC1;
var g_blockWidth = 4, g_blockHeight = 4;
var g_displayWidth = 0, g_displayHeight = 0;
var g_alignedWidth = 0, g_alignedHeight = 0;
var g_curImageIndex = 0;
var g_drawMode = 0;
var g_thenTime = 0;
var g_timeSinceLastFrame = 0;
var g_framerateLimit = true;
var g_pausedFlag = false;
var g_frameRate = 24.0;
var g_rewindFlag = 0;
var g_dataLoadedCountDown;
var g_receivedFileData;
var g_forceBC1Flag = 0;
function redraw()
{
if ((!g_tex) || (!g_width) || (!g_displayWidth))
return;
renderer.drawTexture(g_tex, g_displayWidth, g_displayHeight, g_drawMode);
}
function closeBasisFile()
{
if (g_basisFile)
{
g_basisFile.close();
g_basisFile.delete();
g_basisFile = 0;
}
renderer.deleteTexture(g_tex);
g_tex = null;
g_width = 0;
g_height = 0;
g_numImages = 0;
g_numLevels = 0;
g_hasAlpha = 0;
g_displayWidth = 0;
g_displayHeight = 0;
g_alignedWidth = 0;
g_alignedHeight = 0;
g_curImageIndex = 0;
g_thenTime = 0;
g_timeSinceLastFrame = 0;
g_framerateLimit = true;
g_pausedFlag = false;
g_frameRate = 24.0;
g_rewindFlag = 0;
}
function transcodeFrame()
{
if (!g_basisFile)
return;
const { BasisFile, initializeBasis } = Module;
//const isUncompressedFormat = Module.formatIsUncompressed(g_transcodeFormat);
//const bytesPerBlockOrPixel = Module.getBytesPerBlockOrPixel(g_transcodeFormat);
const dstSize = g_basisFile.getImageTranscodedSizeInBytes(g_curImageIndex, 0, g_transcodeFormat);
const dst = new Uint8Array(dstSize);
if (!g_basisFile.transcodeImage(dst, g_curImageIndex, 0, g_transcodeFormat, 0, 0))
{
log('g_basisFile.transcodeImage failed');
console.warn('transcodeImage failed');
closeBasisFile();
return;
}
const astcInternalFormat = ASTC_FORMAT_MAP[g_transcodeFormat];
// Create or update the WebGL texture object.
if (astcInternalFormat !== undefined)
{
if (g_tex)
renderer.updateCompressedTexture(g_tex, dst, g_alignedWidth, g_alignedHeight, astcInternalFormat);
else
g_tex = renderer.createCompressedTexture(dst, g_alignedWidth, g_alignedHeight, astcInternalFormat);
}
else if ((g_transcodeFormat === BASIS_FORMAT.cTFBC3) || (g_transcodeFormat === BASIS_FORMAT.cTFBC1) || (g_transcodeFormat == BASIS_FORMAT.cTFBC7))
{
if (g_tex)
renderer.updateCompressedTexture(g_tex, dst, g_alignedWidth, g_alignedHeight, DXT_FORMAT_MAP[g_transcodeFormat]);
else
g_tex = renderer.createCompressedTexture(dst, g_alignedWidth, g_alignedHeight, DXT_FORMAT_MAP[g_transcodeFormat]);
}
else if (g_transcodeFormat === BASIS_FORMAT.cTFETC1)
{
if (g_tex)
renderer.updateCompressedTexture(g_tex, dst, g_alignedWidth, g_alignedHeight, COMPRESSED_RGB_ETC1_WEBGL);
else
g_tex = renderer.createCompressedTexture(dst, g_alignedWidth, g_alignedHeight, COMPRESSED_RGB_ETC1_WEBGL);
}
else
{
// Fallback for PVRTC1 or if no GPU g_tex formats are supported.
// Create or update 565 texture.
var dstTex = new Uint16Array(g_width * g_height);
// Convert the array of bytes to an array of uint16's.
var pix = 0;
for (var y = 0; y < g_height; y++)
for (var x = 0; x < g_width; x++, pix++)
dstTex[pix] = dst[2 * pix + 0] | (dst[2 * pix + 1] << 8);
if (g_tex)
renderer.updateRgb565Texture(g_tex, dstTex, g_width, g_height);
else
g_tex = renderer.createRgb565Texture(dstTex, g_width, g_height);
}
}
function frame(nowTime)
{
if (g_dataLoadedCountDown > 0)
{
g_dataLoadedCountDown = g_dataLoadedCountDown - 1;
if (g_dataLoadedCountDown == 0)
{
if (g_receivedFileData)
{
prepareBasisFile(g_receivedFileData);
g_receivedFileData = null;
}
}
}
nowTime *= 0.001; // convert to seconds
const deltaTime = nowTime - g_thenTime;
g_thenTime = nowTime;
if (g_basisFile != 0)
{
if (g_curImageIndex >= g_numImages)
g_curImageIndex = 0;
transcodeFrame();
redraw()
if (g_rewindFlag != 0)
{
g_curImageIndex = 0;
g_timeSinceLastFrame = 0;
g_rewindFlag = 0;
}
else if (g_pausedFlag)
{
g_timeSinceLastFrame = 0;
}
else if (!g_framerateLimit)
{
g_timeSinceLastFrame = 0;
g_curImageIndex++;
}
else
{
g_timeSinceLastFrame += deltaTime;
if (g_timeSinceLastFrame > 1.0 / g_frameRate)
{
g_timeSinceLastFrame = g_timeSinceLastFrame % (1.0 / g_frameRate);
g_curImageIndex++;
}
}
if (g_curImageIndex >= g_numImages)
g_curImageIndex = 0;
}
requestAnimationFrame(frame);
}
function prepareBasisFile(fileData)
{
const { BasisFile, initializeBasis } = Module;
closeBasisFile();
var srcFileData = new Uint8Array(fileData);
var srcFileSize = srcFileData.length;
g_basisFile = new BasisFile(srcFileData);
if (!g_basisFile)
{
log('Failed opening .basis file!');
return;
}
var is_hdr = g_basisFile.isHDR();
if (is_hdr)
{
log('HDR files not supported in this demo yet!');
closeBasisFile();
return;
}
g_width = g_basisFile.getImageWidth(0, 0);
g_height = g_basisFile.getImageHeight(0, 0);
g_numImages = g_basisFile.getNumImages();
g_numLevels = g_basisFile.getNumLevels(0);
g_hasAlpha = g_basisFile.getHasAlpha();
var basisTexFormat = g_basisFile.getBasisTexFormat();
var is_astc_ldr = g_basisFile.isASTC_LDR();
var is_xuastc_ldr = g_basisFile.isXUASTC_LDR();
if (!g_width || !g_height || !g_numImages || !g_numLevels)
{
log('Failed getting info from basis file!');
closeBasisFile();
return;
}
log('forceBC1: ' + g_forceBC1Flag);
var formatString = 'UNKNOWN';
g_blockWidth = 4;
g_blockHeight = 4;
if ((g_forceBC1Flag) && (g_dxtSupported))
{
g_transcodeFormat = BASIS_FORMAT.cTFBC1;
formatString = 'BC1';
}
else if (g_astcSupported)
{
switch (basisTexFormat)
{
case Module.basis_tex_format.cASTC_LDR_4x4.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_4x4; formatString = 'ASTC LDR 4x4'; g_blockWidth = 4; g_blockHeight = 4; break;
case Module.basis_tex_format.cASTC_LDR_5x4.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_5x4_RGBA; formatString = 'ASTC LDR 5x4'; g_blockWidth = 5; g_blockHeight = 4; break;
case Module.basis_tex_format.cASTC_LDR_5x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_5x5_RGBA; formatString = 'ASTC LDR 5x5'; g_blockWidth = 5; g_blockHeight = 5; break;
case Module.basis_tex_format.cASTC_LDR_6x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_6x5_RGBA; formatString = 'ASTC LDR 6x5'; g_blockWidth = 6; g_blockHeight = 5; break;
case Module.basis_tex_format.cASTC_LDR_6x6.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_6x6_RGBA; formatString = 'ASTC LDR 6x6'; g_blockWidth = 6; g_blockHeight = 6; break;
case Module.basis_tex_format.cASTC_LDR_8x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_8x5_RGBA; formatString = 'ASTC LDR 8x5'; g_blockWidth = 8; g_blockHeight = 5; break;
case Module.basis_tex_format.cASTC_LDR_8x6.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_8x6_RGBA; formatString = 'ASTC LDR 8x6'; g_blockWidth = 8; g_blockHeight = 6; break;
case Module.basis_tex_format.cASTC_LDR_10x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x5_RGBA; formatString = 'ASTC LDR 10x5'; g_blockWidth = 10; g_blockHeight = 5; break;
case Module.basis_tex_format.cASTC_LDR_10x6.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x6_RGBA; formatString = 'ASTC LDR 10x6'; g_blockWidth = 10; g_blockHeight = 6; break;
case Module.basis_tex_format.cASTC_LDR_10x8.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x8_RGBA; formatString = 'ASTC LDR 10x8'; g_blockWidth = 10; g_blockHeight = 8; break;
case Module.basis_tex_format.cASTC_LDR_8x8.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_8x8_RGBA; formatString = 'ASTC LDR 8x8'; g_blockWidth = 8; g_blockHeight = 8; break;
case Module.basis_tex_format.cASTC_LDR_10x10.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x10_RGBA; formatString = 'ASTC LDR 10x10'; g_blockWidth = 10; g_blockHeight = 10; break;
case Module.basis_tex_format.cASTC_LDR_12x10.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_12x10_RGBA; formatString = 'ASTC LDR 12x10'; g_blockWidth = 12; g_blockHeight = 10; break;
case Module.basis_tex_format.cASTC_LDR_12x12.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_12x12_RGBA; formatString = 'ASTC LDR 12x12'; g_blockWidth = 12; g_blockHeight = 12; break;
case Module.basis_tex_format.cXUASTC_LDR_4x4.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_4x4; formatString = 'ASTC LDR 4x4'; g_blockWidth = 4; g_blockHeight = 4; break;
case Module.basis_tex_format.cXUASTC_LDR_5x4.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_5x4_RGBA; formatString = 'ASTC LDR 5x4'; g_blockWidth = 5; g_blockHeight = 4; break;
case Module.basis_tex_format.cXUASTC_LDR_5x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_5x5_RGBA; formatString = 'ASTC LDR 5x5'; g_blockWidth = 5; g_blockHeight = 5; break;
case Module.basis_tex_format.cXUASTC_LDR_6x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_6x5_RGBA; formatString = 'ASTC LDR 6x5'; g_blockWidth = 6; g_blockHeight = 5; break;
case Module.basis_tex_format.cXUASTC_LDR_6x6.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_6x6_RGBA; formatString = 'ASTC LDR 6x6'; g_blockWidth = 6; g_blockHeight = 6; break;
case Module.basis_tex_format.cXUASTC_LDR_8x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_8x5_RGBA; formatString = 'ASTC LDR 8x5'; g_blockWidth = 8; g_blockHeight = 5; break;
case Module.basis_tex_format.cXUASTC_LDR_8x6.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_8x6_RGBA; formatString = 'ASTC LDR 8x6'; g_blockWidth = 8; g_blockHeight = 6; break;
case Module.basis_tex_format.cXUASTC_LDR_10x5.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x5_RGBA; formatString = 'ASTC LDR 10x5'; g_blockWidth = 10; g_blockHeight = 5; break;
case Module.basis_tex_format.cXUASTC_LDR_10x6.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x6_RGBA; formatString = 'ASTC LDR 10x6'; g_blockWidth = 10; g_blockHeight = 6; break;
case Module.basis_tex_format.cXUASTC_LDR_10x8.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x8_RGBA; formatString = 'ASTC LDR 10x8'; g_blockWidth = 10; g_blockHeight = 8; break;
case Module.basis_tex_format.cXUASTC_LDR_8x8.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_8x8_RGBA; formatString = 'ASTC LDR 8x8'; g_blockWidth = 8; g_blockHeight = 8; break;
case Module.basis_tex_format.cXUASTC_LDR_10x10.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_10x10_RGBA; formatString = 'ASTC LDR 10x10'; g_blockWidth = 10; g_blockHeight = 10; break;
case Module.basis_tex_format.cXUASTC_LDR_12x10.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_12x10_RGBA; formatString = 'ASTC LDR 12x10'; g_blockWidth = 12; g_blockHeight = 10; break;
case Module.basis_tex_format.cXUASTC_LDR_12x12.value: g_transcodeFormat = BASIS_FORMAT.cTFASTC_LDR_12x12_RGBA; formatString = 'ASTC LDR 12x12'; g_blockWidth = 12; g_blockHeight = 12; break;
default:
g_transcodeFormat = BASIS_FORMAT.cTFASTC_4x4;
formatString = 'ASTC LDR 4x4';
break;
}
}
else if (g_etcSupported)
{
g_transcodeFormat = BASIS_FORMAT.cTFETC1;
formatString = 'ETC1';
}
else if (g_bc7Supported)
{
g_transcodeFormat = BASIS_FORMAT.cTFBC7;
formatString = 'BC7';
}
else if (g_dxtSupported)
{
if (g_hasAlpha)
{
g_transcodeFormat = BASIS_FORMAT.cTFBC3;
formatString = 'BC3';
}
else
{
g_transcodeFormat = BASIS_FORMAT.cTFBC1;
formatString = 'BC1';
}
}
else
{
g_transcodeFormat = BASIS_FORMAT.cTFRGB565;
formatString = 'RGB565';
g_blockWidth = 1;
g_blockHeight = 1;
}
elem('format').innerText = formatString;
setButtonState('buttonVisCRs', (g_transcodeFormat == BASIS_FORMAT.cTFBC1));
setButtonState('buttonVisSels', (g_transcodeFormat == BASIS_FORMAT.cTFBC1));
setButtonState('buttonVisEnds', (g_transcodeFormat == BASIS_FORMAT.cTFBC1));
log('.basis file size: ' + srcFileSize);
if (g_numLevels == 1)
log('average bits/texel: ' + ((srcFileSize * 8.0) / (g_width * g_height * g_numImages)));
log('width: ' + g_width);
log('height: ' + g_height);
log('num basis file images: ' + g_numImages);
log('first image mipmap num levels: ' + g_numLevels);
log('has alpha: ' + g_hasAlpha);
log('block width: ' + g_blockWidth);
log('block height: ' + g_blockHeight);
g_alignedWidth = Math.floor((g_width + g_blockWidth - 1) / g_blockWidth) * g_blockWidth;
g_alignedHeight = Math.floor((g_height + g_blockHeight - 1) / g_blockHeight) * g_blockHeight;
setCanvasSize(g_alignedWidth, g_alignedHeight);
g_displayWidth = g_alignedWidth;
g_displayHeight = g_alignedHeight;
if (!g_basisFile.startTranscoding())
{
log('basis_start_transcoding() failed!');
closeBasisFile();
return;
}
}
function dataLoaded(fileData)
{
log('Done loading .basis file');
const { BasisFile, initializeBasis } = Module;
initializeBasis();
g_dataLoadedCountDown = 50;
g_receivedFileData = fileData;
}
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, dataLoadError);
requestAnimationFrame(frame);
}
function checkForGPUFormatSupport(gl)
{
g_astcSupported = !!gl.getExtension('WEBGL_compressed_texture_astc');
g_etcSupported = !!gl.getExtension('WEBGL_compressed_texture_etc1');
g_dxtSupported = !!gl.getExtension('WEBGL_compressed_texture_s3tc');
g_pvrtcSupported = !!(gl.getExtension('WEBGL_compressed_texture_pvrtc')) || !!(gl.getExtension('WEBKIT_WEBGL_compressed_texture_pvrtc'));
g_bc7Supported = !!gl.getExtension('EXT_texture_compression_bptc');
// Check for BC6H support
{
var ext = gl.getExtension('EXT_texture_compression_bptc');
if (ext)
{
g_bc6hSupported = !!ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT;
}
}
// Check for ASTC HDR support
{
var ext = gl.getExtension('WEBGL_compressed_texture_astc');
if (ext)
{
var supportedProfiles = ext.getSupportedProfiles();
var hdrProfiles = supportedProfiles.filter(profile => profile.includes('hdr'));
if (hdrProfiles.length > 0) {
g_astcHDRSupported = true;
}
}
}
// Check for half-float texture support.
{
var ext = gl.getExtension('OES_texture_half_float');
if (ext)
{
g_rgbaHalfSupported = true;
g_halfFloatWebGLFormat = ext.HALF_FLOAT_OES;
}
}
// HACK HACK - for testing uncompressed
//g_astcSupported = false;
//g_etcSupported = false;
//g_dxtSupported = false;
//g_bc7Supported = false;
//g_pvrtcSupported = false;
//g_bc6hSupported = false;
//g_astcHDRSupported = false;
//g_rgbaHalfSupported = false;
console.log('astcSupported: ' + g_astcSupported);
console.log('etcSupported: ' + g_etcSupported);
console.log('dxtSupported: ' + g_dxtSupported);
console.log('bc7Supported: ' + g_bc7Supported);
console.log('pvrtcSupported: ' + g_pvrtcSupported);
console.log('bc6hSupported: ' + g_bc6hSupported);
console.log('astcHDRSupported: ' + g_astcHDRSupported);
console.log('rgbaHalfSupported: ' + g_rgbaHalfSupported);
}
function initialize(gl)
{
checkForGPUFormatSupport(gl);
window.renderer = new Renderer(gl);
elem('file').addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
run();
}
}, false);
run();
}
function alphaBlend() { g_drawMode = 0; redraw(); }
function viewRGB() { g_drawMode = 1; redraw(); }
function viewAlpha() { g_drawMode = 2; redraw(); }
function forceBC1Func() { g_forceBC1Flag = 1 - g_forceBC1Flag; run(); }
function visCR()
{
var i = Module.getDebugFlags();
i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_CR;
Module.setDebugFlags(i);
}
function visSels()
{
var i = Module.getDebugFlags();
i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_SELS;
Module.setDebugFlags(i);
}
function visEndpoints()
{
var i = Module.getDebugFlags();
i ^= BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_ENDPOINTS;
Module.setDebugFlags(i);
}
function togglePause()
{
g_pausedFlag = !g_pausedFlag;
}
function toggleFramerateLimit()
{
g_framerateLimit = !g_framerateLimit;
}
function restart()
{
g_rewindFlag = 1;
}
function slow()
{
if (g_frameRate > 5.0)
g_frameRate = 5.0;
else
g_frameRate = 24.0;
}
</script>
</head>
<body>
<br>
<div style="font-size: 24pt; font-weight: bold">
Basis Universal - GPU Texture Video Transcoding Test
</div>
<div style="font-size: 12pt;">
<br>This demo uses the <a href="https://github.com/BinomialLLC/basis_universal">Basis C++ transcoder</a> (compiled to WebAssembly using Emscripten) to transcode a .basis Universal Texture file directly to GPU texture data.
<br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and the original test bed. <a href="../index.html">Go back.</a>
<br>
Transcode Format: <b id='format'>FORMAT</b>
</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>
<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>
<br>
<br>
Development (only on GPU's supporting BC1):
<br>
<input type="button" value="Force BC1" onclick="forceBC1Func()"></input>
<br>
<br>
<input type="button" id="buttonVisCRs" value="Visualize CR's" onclick="visCR()" disabled></input>
<input type="button" id="buttonVisSels" value="Visualize Selectors" onclick="visSels()" disabled></input>
<input type="button" id="buttonVisEnds" value="Visualize Endpoints" onclick="visEndpoints()" disabled></input>
<br>
<div style="position:absolute; left: 525px; top:170px; font-size: 20pt; font-weight: bold; color: red">
<canvas id='canvas'></canvas>
</div>
<br><br>
<div id='logger'></div>
</body>
<script>
BASIS({
onRuntimeInitialized: () =>
{
var gl = elem('canvas').getContext('webgl');
initialize(gl);
}
}).then(module => window.Module = module);
</script>
</html>
Reference in New Issue View Git Blame Copy Permalink