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

new files

Browse Source
This commit is contained in:
Richard Geldreich
2024-09-10 14:30:49 -04:00
parent 9c2e53cebf
commit 25f98d904b
3 changed files with 1018 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

721
webgl/texture_test/index.html Normal file
View File

@@ -0,0 +1,721 @@
<!--
Simple .basis file transcode tester.
Supports numerous texture formats: ETC1, PVRTC1, BC1-BC7, BC6H, ASTC LDR/HDR, and various uncompressed fallbacks.
-->
<!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 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);
}
// ASTC format, from:
// https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/
COMPRESSED_RGBA_ASTC_4x4_KHR = 0x93B0;
// 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
};
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 astcSupported = false;
var etcSupported = false;
var dxtSupported = false;
var bc7Supported = false;
var bc6hSupported = false;
var astcHDRSupported = false;
var rgbaHalfSupported = false;
var halfFloatWebGLFormat = 0;
var pvrtcSupported = false;
var drawMode = 0;
var drawScale = 1.0;
var linearToSRGBFlag = false;
var tex, width, height, images, levels, has_alpha, is_hdr;
var alignedWidth, alignedHeight, format, displayWidth, displayHeight;
function redraw()
{
if (!width)
return;
renderer.drawTexture(tex, displayWidth, displayHeight, drawMode, drawScale, linearToSRGBFlag);
}
function dumpBasisFileDesc(basisFile)
{
var basisFileDesc = basisFile.getFileDesc();
log('------');
log('getFileDesc():');
log('version: ' + basisFileDesc.version);
log('us per frame: ' + basisFileDesc.usPerFrame);
log('total images: ' + basisFileDesc.totalImages);
log('userdata0: ' + basisFileDesc.userdata0 + ' userdata1: ' + basisFileDesc.userdata1);
log('texFormat: ' + basisFileDesc.texFormat);
log('yFlipped: ' + basisFileDesc.yFlipped + ' hasAlphaSlices: ' + basisFileDesc.hasAlphaSlices);
if (basisFileDesc.texFormat == Module.basis_tex_format.cETC1S.value)
{
log('numEndpoints: ' + basisFileDesc.numEndpoints);
log('endpointPaletteOfs: ' + basisFileDesc.endpointPaletteOfs);
log('endpointPaletteLen: ' + basisFileDesc.endpointPaletteLen);
log('numSelectors: ' + basisFileDesc.numSelectors);
log('selectorPaletteOfs: ' + basisFileDesc.selectorPaletteOfs);
log('selectorPaletteLen: ' + basisFileDesc.selectorPaletteLen);
log('tablesOfs: ' + basisFileDesc.tablesOfs);
log('tablesLen: ' + basisFileDesc.tablesLen);
}
log('------');
log('getImageDesc() for all images:');
var image_index;
for (image_index = 0; image_index < basisFileDesc.totalImages; image_index++)
{
log('image: ' + image_index);
var basisImageDesc = basisFile.getImageDesc(image_index);
log('origWidth: ' + basisImageDesc.origWidth + ' origWidth: ' + basisImageDesc.origHeight);
log('numBlocksX: ' + basisImageDesc.numBlocksX + ' origWidth: ' + basisImageDesc.numBlocksY);
log('numLevels: ' + basisImageDesc.numLevels);
log('alphaFlag: ' + basisImageDesc.alphaFlag + ' iframeFlag: ' + basisImageDesc.iframeFlag);
log('getImageLevelDesc() for all mipmap levels:');
var level_index;
for (level_index = 0; level_index < basisImageDesc.numLevels; level_index++)
{
var basisImageLevelDesc = basisFile.getImageLevelDesc(image_index, level_index);
log('level: ' + level_index +
' rgb_file_offset: ' + basisImageLevelDesc.rgbFileOfs + ' rgb_file_len: ' + basisImageLevelDesc.rgbFileLen);
if (basisFileDesc.hasAlphaSlices)
log('alpha_file_offset: ' + basisImageLevelDesc.alphaFileOfs + ' alpha_file_len: ' + basisImageLevelDesc.alphaFileLen);
}
}
log('------');
}
function dataLoaded(data)
{
log('Done loading .basis file, decoded header:');
const { BasisFile, initializeBasis } = Module;
drawMode = 0;
drawScale = 1.0;
linearToSRGBFlag = false;
elem('scale-slider').value = 1.0;
elem('scale-value').textContent = 1;
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();
is_hdr = basisFile.isHDR();
log('isHDR: ' + is_hdr);
dumpBasisFileDesc(basisFile);
if (!width || !height || !images || !levels) {
console.warn('Invalid .basis file');
basisFile.close();
basisFile.delete();
return;
}
// Note: If the file is UASTC LDR, the preferred formats are ASTC/BC7. For UASTC HDR, ASTC/BC6H.
// If the file is ETC1S and doesn't have alpha, the preferred formats are ETC1 and BC1. For alpha, the preferred formats are ETC2, BC3 or BC7.
var formatString = 'UNKNOWN';
if (is_hdr)
{
if (bc6hSupported)
{
formatString = 'BC6H';
format = BASIS_FORMAT.cTFBC6H;
}
else if (astcHDRSupported)
{
formatString = 'ASTC HDR';
format = BASIS_FORMAT.cTFASTC_HDR_4x4_RGBA;
}
else if (rgbaHalfSupported)
{
formatString = 'RGBA_HALF';
format = BASIS_FORMAT.cTFRGBA_HALF;
}
else
{
formatString = '32-bit RGBA';
format = BASIS_FORMAT.cTFRGBA_HALF;
log('Decoding .basis data to 32-bit RGBA');
}
}
else if (astcSupported)
{
formatString = 'ASTC';
format = BASIS_FORMAT.cTFASTC_4x4;
}
else if (bc7Supported)
{
formatString = 'BC7';
format = BASIS_FORMAT.cTFBC7;
}
else if (dxtSupported)
{
if (has_alpha)
{
formatString = 'BC3';
format = BASIS_FORMAT.cTFBC3;
}
else
{
formatString = 'BC1';
format = BASIS_FORMAT.cTFBC1;
}
}
else if (pvrtcSupported)
{
if (has_alpha)
{
formatString = 'PVRTC1_RGBA';
format = BASIS_FORMAT.cTFPVRTC1_4_RGBA;
}
else
{
formatString = 'PVRTC1_RGB';
format = BASIS_FORMAT.cTFPVRTC1_4_RGB;
}
if (
((width & (width - 1)) != 0) || ((height & (height - 1)) != 0)
)
{
log('ERROR: PVRTC1 requires square power of 2 textures');
}
if (width != height)
{
log('ERROR: PVRTC1 requires square power of 2 textures');
}
}
else if (etcSupported)
{
formatString = 'ETC1';
format = BASIS_FORMAT.cTFETC1;
}
else
{
formatString = 'RGB565';
format = BASIS_FORMAT.cTFRGB565;
log('Decoding .basis data to 565');
}
elem('format').innerText = formatString;
log('format: ' + format);
if (!basisFile.startTranscoding()) {
log('startTranscoding failed');
console.warn('startTranscoding failed');
basisFile.close();
basisFile.delete();
return;
}
const isUncompressedFormat = Module.formatIsUncompressed(format);
const blockWidth = isUncompressedFormat ? 1 : 4, blockHeight = isUncompressedFormat ? 1 : 4;
const bytesPerBlockOrPixel = Module.getBytesPerBlockOrPixel(format);
log('isUncompressedFormat: ' + isUncompressedFormat + ' bytesPerBlockOrPixel: ' + bytesPerBlockOrPixel);
const dstSize = basisFile.getImageTranscodedSizeInBytes(0, 0, format);
const dst = new Uint8Array(dstSize);
// log('getImageTranscodedSizeInBytes() returned ' + dstSize);
// Use the low or high level transcoding API's. The high level API's require .basis files, while the low-level API's just work off blobs of memory and parameters.
if (elem('ContainerIndependentTranscoding').checked)
{
// Always transcode the first image and the first mipmap level
const image_index = 0;
const level_index = 0;
// Get the .basis file description
var basisFileDesc = basisFile.getFileDesc();
// Get the description of the file's first image (there could be multiple images, for texture arrays or videos)
var basisImageDesc = basisFile.getImageDesc(image_index);
// Get the description of this image's mipmap level
var basisImageLevelDesc = basisFile.getImageLevelDesc(image_index, level_index);
var status = false;
// If we're transcoding to ETC1S, use the LowLevelETC1SImageTranscoder class. Otherwise use the transcodeUASTCImage() function.
if (basisFileDesc.texFormat == Module.basis_tex_format.cETC1S.value)
{
// Create an instance of the LowLevelETC1SImageTranscoder class.
const etc1s_transcoder = new Module.LowLevelETC1SImageTranscoder();
// Create Uint8Array's pointing into the various bits of the .basis file holding the compressed data for the codebooks and the Huffman tables.
var selectorPalette = new Uint8Array(data, basisFileDesc.selectorPaletteOfs, basisFileDesc.selectorPaletteLen);
var endpointPalette = new Uint8Array(data, basisFileDesc.endpointPaletteOfs, basisFileDesc.endpointPaletteLen);
var tables = new Uint8Array(data, basisFileDesc.tablesOfs, basisFileDesc.tablesLen);
// Create a Uint8Array pointing to the image's compressed data.
// If it's an opaque .basis file, there will only be RGB data. For transparant .basis files, each RGB slice will be immediately followed by an alpha slice.
// Compressed ETC1S alpha data is guaranteed to immediately follow the RGB data (it's always at odd slices in the .basis file).
var compData = new Uint8Array(data, basisImageLevelDesc.rgbFileOfs, basisImageLevelDesc.rgbFileLen + basisImageLevelDesc.alphaFileLen);
// Decompress the palettes. This only has to be done once for each .basis file.
var status = etc1s_transcoder.decodePalettes(basisFileDesc.numEndpoints, endpointPalette, basisFileDesc.numSelectors, selectorPalette);
if (status)
{
// Decompress the Huffman tables. This only has to be done once for each .basis file.
status = etc1s_transcoder.decodeTables(tables);
if (status)
{
// Now transcode the image using the container independent transcode API. This API does not interpret any .basis file structures - only the compressed ETC1S data.
status = etc1s_transcoder.transcodeImage(
format,
dst, dstSize / bytesPerBlockOrPixel,
compData,
basisImageDesc.numBlocksX, basisImageDesc.numBlocksY, basisImageDesc.origWidth, basisImageDesc.origHeight, level_index,
0, basisImageLevelDesc.rgbFileLen, basisFileDesc.hasAlphaSlices ? basisImageLevelDesc.rgbFileLen : 0, basisImageLevelDesc.alphaFileLen,
0,
basisFileDesc.hasAlphaSlices,
basisFileDesc.isVideo,
0,
0);
if (!status)
log('transcodeImage() failed');
}
else
{
log('decodeTables() failed');
}
}
else
{
log('decodePalettes() failed');
}
etc1s_transcoder.delete();
if (!status)
{
log('etc1s_transcoder failed');
console.warn('etc1s_transcoder failed');
basisFile.close();
basisFile.delete();
return;
}
else
{
log('Successfully called etc1s_transcoder.transcodeImage()');
}
}
else
{
// Create a Uint8Array pointing to the image's compressed data.
var compData = new Uint8Array(data, basisImageLevelDesc.rgbFileOfs, basisImageLevelDesc.rgbFileLen);
// Transcode the UASTC texture data to the desired output format.
status = Module.transcodeUASTCImage(
format,
dst, dstSize / bytesPerBlockOrPixel,
compData,
basisImageDesc.numBlocksX, basisImageDesc.numBlocksY, basisImageDesc.origWidth, basisImageDesc.origHeight, level_index,
0, basisImageLevelDesc.rgbFileLen,
0,
basisFileDesc.hasAlphaSlices,
basisFileDesc.isVideo,
0,
0,
-1, -1);
if (!status)
{
log('transcodeUASTCImage() failed');
console.warn('transcodeUASTCImage() failed');
basisFile.close();
basisFile.delete();
return;
}
else
{
log('Successfully called transcodeUASTCImage()');
}
}
}
else
{
// Use the high-level transcode API, which requires a .basis file.
if (!basisFile.transcodeImage(dst, 0, 0, format, 0, 0)) {
log('basisFile.transcodeImage failed');
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;
displayWidth = alignedWidth;
displayHeight = alignedHeight;
var canvas = elem('canvas');
canvas.width = alignedWidth;
canvas.height = alignedHeight;
// Create the WebGL texture object.
if ((format === BASIS_FORMAT.cTFASTC_4x4) || (format === BASIS_FORMAT.cTFASTC_HDR_4x4_RGBA))
{
tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_4x4_KHR);
}
else if ((format === BASIS_FORMAT.cTFBC3) || (format === BASIS_FORMAT.cTFBC1) || (format == BASIS_FORMAT.cTFBC7))
{
tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
}
else if (format === BASIS_FORMAT.cTFETC1)
{
tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_ETC1_WEBGL);
}
else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGB)
{
tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_PVRTC_4BPPV1_IMG);
}
else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGBA)
{
tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_PVRTC_4BPPV1_IMG);
}
else if (format === BASIS_FORMAT.cTFBC6H)
{
tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT);
}
else if (format == BASIS_FORMAT.cTFRGBA_HALF)
{
canvas.width = width;
canvas.height = height;
displayWidth = width;
displayHeight = height;
if (rgbaHalfSupported)
{
var numHalfs = dstSize / 2;
// Create uint16 data from the uint8 data.
var dstHalfs = new Uint16Array(numHalfs);
// Convert the array of bytes to an array of uint16's.
for (var i = 0; i < numHalfs; i++)
dstHalfs[i] = dst[2 * i + 0] | (dst[2 * i + 1] << 8);
tex = renderer.createHalfRGBATexture(dstHalfs, width, height, halfFloatWebGLFormat);
}
else
{
// No HDR texture formats are supported (TODO: 9e5?) Fall back to plain 32bpp RGBA, just to do *something*. (Could also convert to RGBM.)
const dstRGBA = new Uint8Array(width * height * 4);
// Convert the array of half floats to uint8_t's, clamping as needed.
var srcOfs = 0, dstOfs = 0;
for (var y = 0; y < height; y++)
{
for (var x = 0; x < width; x++)
{
for (var c = 0; c < 4; c++)
{
var h = dst[srcOfs] | (dst[srcOfs + 1] << 8);
var f = Module.convertHalfToFloat(h);
dstRGBA[dstOfs] = Math.min(255, Math.max(0, Math.round(f * 255.0)));
srcOfs += 2;
dstOfs++;
}
}
}
tex = renderer.createRgbaTexture(dstRGBA, width, height);
}
}
else
{
canvas.width = width;
canvas.height = height;
displayWidth = width;
displayHeight = height;
// Create 565 texture.
var dstTex = new Uint16Array(width * height);
// Convert the array of bytes to an array of uint16's.
var pix = 0;
for (var y = 0; y < height; y++)
for (var x = 0; x < width; x++, pix++)
dstTex[pix] = dst[2 * pix + 0] | (dst[2 * pix + 1] << 8);
tex = renderer.createRgb565Texture(dstTex, width, height);
}
// Now draw a quad with the texture.
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(); }
function linearToSRGB() { linearToSRGBFlag = !linearToSRGBFlag; redraw(); }
function updateScale(value)
{
document.getElementById('scale-value').textContent = value;
drawScale = value;
redraw();
}
function checkForGPUFormatSupport(gl)
{
astcSupported = !!gl.getExtension('WEBGL_compressed_texture_astc');
etcSupported = !!gl.getExtension('WEBGL_compressed_texture_etc1');
dxtSupported = !!gl.getExtension('WEBGL_compressed_texture_s3tc');
pvrtcSupported = !!(gl.getExtension('WEBGL_compressed_texture_pvrtc')) || !!(gl.getExtension('WEBKIT_WEBGL_compressed_texture_pvrtc'));
bc7Supported = !!gl.getExtension('EXT_texture_compression_bptc');
// Check for BC6H support
{
var ext = gl.getExtension('EXT_texture_compression_bptc');
if (ext) {
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) {
astcHDRSupported = true;
}
}
}
// Check for half-float texture support.
{
var ext = gl.getExtension('OES_texture_half_float');
if (ext)
{
rgbaHalfSupported = true;
halfFloatWebGLFormat = ext.HALF_FLOAT_OES;
}
}
// HACK HACK - for testing uncompressed
//astcSupported = false;
//etcSupported = false;
//dxtSupported = false;
//bc7Supported = false;
//pvrtcSupported = false;
//bc6hSupported = false;
//astcHDRSupported = false;
//rgbaHalfSupported = false;
console.log('astcSupported: ' + astcSupported);
console.log('etcSupported: ' + etcSupported);
console.log('dxtSupported: ' + dxtSupported);
console.log('bc7Supported: ' + bc7Supported);
console.log('pvrtcSupported: ' + pvrtcSupported);
console.log('bc6hSupported: ' + bc6hSupported);
console.log('astcHDRSupported: ' + astcHDRSupported);
console.log('rgbaHalfSupported: ' + rgbaHalfSupported);
}
</script>
</head>
<body>
<br>
<div style="font-size: 24pt; font-weight: bold">
.basis->GPU Compressed Texture Transcoder Test
</div>
<br>This demo uses the Basis Universal C++ transcoder (compiled to WebAssembly using Emscripten) to transcode a .basis file to <b id='format'>FORMAT</b>
<br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed. <a href="../index.html">Go back.</a>
<br>
<br>
.basis file:
<input id="file" type="text" size=30 value="assets/desk.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>
<input type="button" value="LinearToSRGB" onclick="linearToSRGB()"></input>
<br>
<label for="scale-slider">Scale:</label>
<input type="range" id="scale-slider" min="0" max="16" step=".05" value="1" style="width: 300px;" oninput="updateScale(this.value)">
<span id="scale-value">1</span>
<br>
<br>
Use Container Independent Transcoding API's:
<input type="checkbox" id="ContainerIndependentTranscoding">
<div style="position:absolute; left: 525px; top:130px; 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');
checkForGPUFormatSupport(gl);
window.renderer = new Renderer(gl);
elem('file').addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
runLoadFile();
}
}, false);
runLoadFile();
}}).then(module => window.Module = module);
</script>
</html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

297
webgl/texture_test/renderer.js Normal file
View File

@@ -0,0 +1,297 @@
/**
* Constructs a renderer object.
* @param {WebGLRenderingContext} gl The GL context.
* @constructor
*/
var Renderer = function(gl) {
/**
* The GL context.
* @type {WebGLRenderingContext}
* @private
*/
this.gl_ = gl;
/**
* The WebGLProgram.
* @type {WebGLProgram}
* @private
*/
this.program_ = gl.createProgram();
/**
* @type {WebGLShader}
* @private
*/
this.vertexShader_ = this.compileShader_(
Renderer.vertexShaderSource_, gl.VERTEX_SHADER);
/**
* @type {WebGLShader}
* @private
*/
this.fragmentShader_ = this.compileShader_(
Renderer.fragmentShaderSource_, gl.FRAGMENT_SHADER);
/**
* Cached uniform locations.
* @type {Object.<string, WebGLUniformLocation>}
* @private
*/
this.uniformLocations_ = {};
/**
* Cached attribute locations.
* @type {Object.<string, WebGLActiveInfo>}
* @private
*/
this.attribLocations_ = {};
/**
* A vertex buffer containing a single quad with xy coordinates from [-1,-1]
* to [1,1] and uv coordinates from [0,0] to [1,1].
* @private
*/
this.quadVertexBuffer_ = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVertexBuffer_);
var vertices = new Float32Array(
[-1.0, -1.0, 0.0, 1.0,
+1.0, -1.0, 1.0, 1.0,
-1.0, +1.0, 0.0, 0.0,
1.0, +1.0, 1.0, 0.0]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// init shaders
gl.attachShader(this.program_, this.vertexShader_);
gl.attachShader(this.program_, this.fragmentShader_);
gl.bindAttribLocation(this.program_, 0, 'vert');
gl.linkProgram(this.program_);
gl.useProgram(this.program_);
gl.enableVertexAttribArray(0);
gl.enable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
var count = gl.getProgramParameter(this.program_, gl.ACTIVE_UNIFORMS);
for (var i = 0; i < /** @type {number} */(count); i++) {
var info = gl.getActiveUniform(this.program_, i);
var result = gl.getUniformLocation(this.program_, info.name);
this.uniformLocations_[info.name] = result;
}
count = gl.getProgramParameter(this.program_, gl.ACTIVE_ATTRIBUTES);
for (var i = 0; i < /** @type {number} */(count); i++) {
var info = gl.getActiveAttrib(this.program_, i);
var result = gl.getAttribLocation(this.program_, info.name);
this.attribLocations_[info.name] = result;
}
};
Renderer.prototype.finishInit = function() {
this.draw();
};
Renderer.prototype.createDxtTexture = function(dxtData, width, height, format) {
var gl = this.gl_;
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.compressedTexImage2D(
gl.TEXTURE_2D,
0,
format,
width,
height,
0,
dxtData);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);
return tex;
};
Renderer.prototype.createCompressedTexture = function(data, width, height, format) {
var gl = this.gl_;
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.compressedTexImage2D(
gl.TEXTURE_2D,
0,
format,
width,
height,
0,
data);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);
return tex;
};
Renderer.prototype.createHalfRGBATexture = function(data, width, height, format) {
var gl = this.gl_;
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA,
width,
height,
0,
gl.RGBA,
format,
data);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);
return tex;
};
Renderer.prototype.createRgb565Texture = function(rgb565Data, width, height) {
var gl = this.gl_;
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGB,
width,
height,
0,
gl.RGB,
gl.UNSIGNED_SHORT_5_6_5,
rgb565Data);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);
return tex;
};
Renderer.prototype.createRgbaTexture = function(rgbaData, width, height) {
var gl = this.gl_;
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA,
width,
height,
0,
gl.RGBA,
gl.UNSIGNED_BYTE,
rgbaData);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);
return tex;
};
Renderer.prototype.drawTexture = function(texture, width, height, mode, scale, linearToSRGBFlag) {
var gl = this.gl_;
// draw scene
gl.clearColor(0, 0, 0, 1);
gl.clearDepth(1.0);
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(this.uniformLocations_.texSampler, 0);
var x = 0.0;
var y = 0.0;
if (mode == 1)
x = 1.0;
else if (mode == 2)
y = 1.0;
gl.uniform4f(this.uniformLocations_.control, x, y, scale, linearToSRGBFlag ? 1.0 : 0.0);
gl.enableVertexAttribArray(this.attribLocations_.vert);
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVertexBuffer_);
gl.vertexAttribPointer(this.attribLocations_.vert, 4, gl.FLOAT,
false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
};
/**
* Compiles a GLSL shader and returns a WebGLShader.
* @param {string} shaderSource The shader source code string.
* @param {number} type Either VERTEX_SHADER or FRAGMENT_SHADER.
* @return {WebGLShader} The new WebGLShader.
* @private
*/
Renderer.prototype.compileShader_ = function(shaderSource, type) {
var gl = this.gl_;
var shader = gl.createShader(type);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
return shader;
};
/**
* @type {string}
* @private
*/
Renderer.vertexShaderSource_ = [
'attribute vec4 vert;',
'varying vec2 v_texCoord;',
'void main() {',
' gl_Position = vec4(vert.xy, 0.0, 1.0);',
' v_texCoord = vert.zw;',
'}'
].join('\n');
/**
* @type {string}
* @private ' gl_FragColor = texture2D(texSampler, v_texCoord);',
*/
Renderer.fragmentShaderSource_ = [
'precision highp float;',
'uniform sampler2D texSampler;',
'uniform vec4 control;',
'varying vec2 v_texCoord;',
// Function to convert linear RGB to sRGB
'vec3 linearToSrgb(vec3 linearRGB) {',
' vec3 srgbLow = linearRGB * 12.92;',
' vec3 srgbHigh = 1.055 * pow(linearRGB, vec3(1.0/2.4)) - 0.055;',
' return clamp(mix(srgbLow, srgbHigh, step(0.0031308, linearRGB)), 0.0, 1.0);',
'}',
'void main() {',
' vec4 c;',
' c = texture2D(texSampler, v_texCoord);',
' c.rgb *= control.z;',
' if (control.x > 0.0)',
' {',
' c.w = 1.0;',
' }',
' else if (control.y > 0.0)',
' {',
' c.rgb = c.aaa; c.w = 1.0;',
' }',
' if (control.w > 0.0)',
' c.rgb = linearToSrgb(c.rgb);',
' gl_FragColor = c;',
'}'
].join('\n');