abdelrahman/how-to-vulkan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ktx

Browse Source
This commit is contained in:
Abdelrahman Said
2026-06-14 19:09:18 +01:00
parent 14bd1a9271
commit 13fa90a0e9
3958 changed files with 999286 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ktx/build/docs/html/ktxjswrappers/libktx_js.html
+626
View File
@@ -0,0 +1,626 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.16.1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>KTX Javascript Wrappers Reference: libktx Binding</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<script type="text/javascript" src="clipboard.js"></script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr id="projectrow">
<td id="projectlogo"><img alt="Logo" src="ktx_logo_200.png"/></td>
<td id="projectalign">
<div id="projectname">KTX Javascript Wrappers Reference<span id="projectnumber">&#160;0.0.0</span>
</div>
<div id="projectbrief">Libraries and tools to create and read KTX image texture files.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.16.1 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "search/",'.html');
</script>
<script type="text/javascript">
$(function() { codefold.init(); });
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
$(function() {
initMenu('',true,false,'search.php','Search',true);
$(function() { init_search(); });
});
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
<div id="nav-tree">
<div id="nav-tree-contents">
<div id="nav-sync" class="sync"></div>
</div>
</div>
<div id="splitbar" style="-moz-user-select:none;"
class="ui-resizable-handle">
</div>
</div>
<script type="text/javascript">
$(function(){initNavTree('libktx_js.html','',''); });
</script>
<div id="container">
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>
<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>
<div><div class="header">
<div class="headertitle"><div class="title">libktx Binding </div></div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h1 class="doxsection"><a class="anchor" id="autotoc_md1"></a>
WebIDL for the binding</h1>
<p>Items marked with ** are only available in the full <em>libktx.js</em> wrapper. Unmarked items are available in both <em>libktx.js</em> and <em>libktx_read.js</em>.</p>
<div class="fragment"><div class="line"><span class="keyword">interface </span>Orientation {</div>
<div class="line"> readonly attribute OrientationX x;</div>
<div class="line"> readonly attribute OrientationY y;</div>
<div class="line"> readonly attribute OrientationZ z;</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">interface </span>UploadResult {</div>
<div class="line"> readonly attribute WebGLTexture texture;</div>
<div class="line"> readonly attribute GLenum target;</div>
<div class="line"> readonly attribute GLenum error;</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">interface </span>textureCreateInfo { <span class="comment">// **</span></div>
<div class="line"> constructor();</div>
<div class="line"> </div>
<div class="line"> attribute <span class="keywordtype">long</span> vkFormat;</div>
<div class="line"> attribute <span class="keywordtype">long</span> baseWidth;</div>
<div class="line"> attribute <span class="keywordtype">long</span> baseHeight;</div>
<div class="line"> attribute <span class="keywordtype">long</span> baseDepth;</div>
<div class="line"> attribute <span class="keywordtype">long</span> numDimensions;</div>
<div class="line"> attribute <span class="keywordtype">long</span> numLevels;</div>
<div class="line"> attribute <span class="keywordtype">long</span> numLayers;</div>
<div class="line"> attribute <span class="keywordtype">long</span> numFaces;</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> isArray;</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> generateMipmaps;</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">interface </span>astcParams { <span class="comment">// **</span></div>
<div class="line"> constructor();</div>
<div class="line"> </div>
<div class="line"> attribute <span class="keywordtype">boolean</span> verbose;</div>
<div class="line"> attribute <span class="keywordtype">long</span> threadCount;</div>
<div class="line"> attribute astc_block_dimension blockDimension;</div>
<div class="line"> attribute pack_astc_encoder_mode mode;</div>
<div class="line"> attribute <span class="keywordtype">long</span> qualityLevel;</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> normalMap;</div>
<div class="line"> attribute DOMString inputSwizzle;</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">interface </span>basisParams { <span class="comment">// **</span></div>
<div class="line"> constructor();</div>
<div class="line"> </div>
<div class="line"> attribute <span class="keywordtype">boolean</span> uastc,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> verbose,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> noSSE,</div>
<div class="line"> attribute <span class="keywordtype">long</span> threadCount,</div>
<div class="line"> attribute DOMString inputSwizzle,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> preSwizzle,</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ETC1S/Basis-LZ parameters.</span></div>
<div class="line"> </div>
<div class="line"> attribute <span class="keywordtype">long</span> compressionLevel,</div>
<div class="line"> attribute <span class="keywordtype">long</span> qualityLevel,</div>
<div class="line"> attribute <span class="keywordtype">long</span> maxEndpoints,</div>
<div class="line"> attribute <span class="keywordtype">float</span> endpointRDOThreshold,</div>
<div class="line"> attribute <span class="keywordtype">long</span> maxSelectors,</div>
<div class="line"> attribute <span class="keywordtype">float</span> selectorRDOThreshold,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> normalMap,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> noEndpointRDO,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> noSelectorRDO,</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// UASTC parameters.</span></div>
<div class="line"> </div>
<div class="line"> attribute pack_uastc_flag_bits uastcFlags,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> uastcRDO,</div>
<div class="line"> attribute <span class="keywordtype">float</span> uastcRDOQualityScalar,</div>
<div class="line"> attribute <span class="keywordtype">long</span> uastcRDODictSize,</div>
<div class="line"> attribute <span class="keywordtype">float</span> uastcRDOMaxSmoothBlockErrorScale,</div>
<div class="line"> attribute <span class="keywordtype">float</span> uastcRDOMaxSmoothBlockStdDev,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> uastcRDODontFavorSimplerModes,</div>
<div class="line"> attribute <span class="keywordtype">boolean</span> uastcRDONoMultithreading</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">interface </span>texture {</div>
<div class="line"> constructor(ArrayBufferView fileData);</div>
<div class="line"> constructor(textureCreateInfo createInfo, <span class="comment">// **</span></div>
<div class="line"> CreateStorageEnum? storage);</div>
<div class="line"> </div>
<div class="line"> error_code compressAstc(ktxAstcParams params); <span class="comment">// **</span></div>
<div class="line"> error_code decodeAstc(ktxAstcParams params);</div>
<div class="line"> error_code compressBasis(ktxBasisParams params); <span class="comment">// **</span></div>
<div class="line"> texture createCopy(); <span class="comment">// **</span></div>
<div class="line"> error_code defateZLIB(); <span class="comment">// **</span></div>
<div class="line"> error_code deflateZstd(); <span class="comment">// **</span></div>
<div class="line"> ArrayBufferView getImage(<span class="keywordtype">long</span> level, <span class="keywordtype">long</span> layer, <span class="keywordtype">long</span> faceSlice);</div>
<div class="line"> UploadResult glUpload();</div>
<div class="line"> error_code setImageFromMemory(<span class="keywordtype">long</span> level, <span class="keywordtype">long</span> layer, <span class="keywordtype">long</span> faceSlice,</div>
<div class="line"> ArrayBufferView imageData); <span class="comment">// **</span></div>
<div class="line"> error_code transcodeBasis(transcode_fmt? target, transcode_flag_bits</div>
<div class="line"> decodeFlags);</div>
<div class="line"> ArrayBufferView writeToMemory(); <span class="comment">// **</span></div>
<div class="line"> error_code addKVPairString(DOMString key, DOMString value); <span class="comment">// **</span></div>
<div class="line"> error_code addKVPairByte(DOMString key, ArrayBuffewView value); <span class="comment">// **</span></div>
<div class="line"> deleteKVPair(DOMString key); <span class="comment">// **</span></div>
<div class="line"> DOMString? findKeyValue(DOMString key);</div>
<div class="line"> </div>
<div class="line"> readonly attribute <span class="keywordtype">long</span> baseWidth;</div>
<div class="line"> readonly attribute <span class="keywordtype">long</span> baseHeight;</div>
<div class="line"> readonly attribute <span class="keywordtype">boolean</span> isSRGB;</div>
<div class="line"> readonly attribute <span class="keywordtype">boolean</span> isPremultiplied;</div>
<div class="line"> readonly attribute <span class="keywordtype">boolean</span> needsTranscoding;</div>
<div class="line"> readonly attribute <span class="keywordtype">long</span> numComponents;</div>
<div class="line"> readonly attribute <span class="keywordtype">long</span> vkFormat;</div>
<div class="line"> readonly attribute SupercmpScheme supercompressionScheme;</div>
<div class="line"> readonly attribute ktxOrientation orientation;</div>
<div class="line"> </div>
<div class="line"> attribute khr_df_transfer OETF; <span class="comment">// Setting available only in libktx.js.</span></div>
<div class="line"> attribute khr_df_primaries primaries; <span class="comment">// Setting available only in libktx.js.</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> error_code = {</div>
<div class="line"> <span class="stringliteral">&quot;SUCCESS&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_DATA_ERROR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_ISPIPE&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_OPEN_FAILED&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_OVERFLOW&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_READ_ERROR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_SEEK_ERROR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_UNEXPECTED_ERROR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FILE_WRITE_ERROR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;GL_ERROR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;INVALID_OPERATION&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;INVALID_VALUE&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;NOT_FOUND&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;OUT_OF_MEMORY&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;TRANSCODE_FAILED&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;UNKNOWN_FILE_FORMAT&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;UNSUPPORTED_TEXTURE_TYPE&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;UNSUPPORTED_FEATURE&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;LIBRARY_NOT_LINKED&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> CreateStorageEnum = {</div>
<div class="line"> <span class="stringliteral">&quot;NO_STORAGE&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ALLOC_STORAGE&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Some targets may not be available depending on options used when compiling</span></div>
<div class="line"><span class="comment">// the web assembly. ktxTexture.transcodeBasis will report this.</span></div>
<div class="line"><span class="keyword">enum</span> transcode_fmt = {</div>
<div class="line"> <span class="stringliteral">&quot;ETC1_RGB&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BC1_RGB&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BC4_R&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BC5_RG&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BC3_RGBA&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BC1_OR_3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PVRTC1_4_RGB&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PVRTC1_4_RGBA&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BC7_RGBA&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ETC2_RGBA&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ASTC_4x4_RGBA&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;RGBA32&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;RGB565&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BGR565&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;RGBA4444&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PVRTC2_4_RGB&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PVRTC2_4_RGBA&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ETC&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;EAC_R11&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;EAC_RG11&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> transcode_flag_bits {</div>
<div class="line"> <span class="stringliteral">&quot;TRANSCODE_ALPHA_DATA_TO_OPAQUE_FORMATS&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> OrientationX {</div>
<div class="line"> <span class="stringliteral">&quot;LEFT&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;RIGHT&quot;</span></div>
<div class="line">};</div>
<div class="line"><span class="keyword">enum</span> OrientationY {</div>
<div class="line"> <span class="stringliteral">&quot;UP&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;DOWN&quot;</span></div>
<div class="line">};</div>
<div class="line"><span class="keyword">enum</span> OrientationZ {</div>
<div class="line"> <span class="stringliteral">&quot;IN&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;OUT&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> SupercmpScheme {</div>
<div class="line"> <span class="stringliteral">&quot;NONE&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BASIS_LZ&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ZSTD&quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;ZLIB&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> khr_df_primaries = {</div>
<div class="line"> <span class="comment">// These are the values needed for KTX with HTML5/WebGL.</span></div>
<div class="line"> <span class="stringliteral">&quot;UNSPECIFIED&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BT709&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;SRGB&quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;DISPLAYP3&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> khr_df_transfer = {</div>
<div class="line"> <span class="comment">// These are the values needed for KTX with HTML5/WebGL.</span></div>
<div class="line"> <span class="stringliteral">&quot;UNSPECIFIED&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;LINEAR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;SRGB&quot;</span>,</div>
<div class="line"> <span class="comment">// DisplayP3 uses the SRGB transfer function.</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> VkFormat = {</div>
<div class="line"> <span class="stringliteral">&quot;R8G8B8A8_SRGB&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;R8G8B8A8_UNORM&quot;</span></div>
<div class="line"> <span class="comment">// Full list omitted as its length will distract from the documentation</span></div>
<div class="line"> <span class="comment">// purpose of this IDL. Any VkFormat valid for KTX can be used. As shown</span></div>
<div class="line"> <span class="comment">// here, omit the VK_FORMAT_ prefix and enclose in quotes.</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> pack_astc_quality_levels = { <span class="comment">// **</span></div>
<div class="line"> <span class="stringliteral">&quot;FASTEST&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FAST&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;MEDIUM&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;THOROUGH&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;EXHAUSTIVE&quot;</span>,</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> pack_astc_block_dimension = { <span class="comment">// **</span></div>
<div class="line"> <span class="comment">// 2D formats</span></div>
<div class="line"> <span class="stringliteral">&quot;D4x4&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D5x4&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D5x5&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D6x5&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D6x6&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D8x5&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D8x6&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D10x5&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D10x6&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D8x8&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D10x8&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D10x10&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D12x10&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D12x12&quot;</span>,</div>
<div class="line"> <span class="comment">// 3D formats</span></div>
<div class="line"> <span class="stringliteral">&quot;D3x3x3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D4x3x3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D4x4x3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D4x4x4&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D5x4x4&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D5x5x4&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D5x5x5&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D6x5x5&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D6x6x5&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D6x6x6&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> pack_astc_encoder_mode = { <span class="comment">// **</span></div>
<div class="line"> <span class="stringliteral">&quot;DEFAULT&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;LDR&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;HDR&quot;</span></div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">enum</span> pack_uastc_flag_bits = { <span class="comment">// **</span></div>
<div class="line"> <span class="stringliteral">&quot;LEVEL_FASTEST&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;LEVEL_FASTER&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;LEVEL_DEFAULT&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;LEVEL_SLOWER&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;LEVEL_VERYSLOW&quot;</span>,</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keyword">const</span> DOMString ANIMDATA_KEY = <span class="stringliteral">&quot;KTXanimData&quot;</span>;</div>
<div class="line"><span class="keyword">const</span> DOMStringORIENTATION_KEY = <span class="stringliteral">&quot;KTXorientation&quot;</span>;</div>
<div class="line"><span class="keyword">const</span> DOMString SWIZZLE_KEY = <span class="stringliteral">&quot;KTXswizzle&quot;</span>;</div>
<div class="line"><span class="keyword">const</span> DOMString WRITER_KEY = <span class="stringliteral">&quot;KTXwriter&quot;</span>;</div>
<div class="line"><span class="keyword">const</span> DOMString WRITER_SCPARAMS_KEY = <span class="stringliteral">&quot;KTXwriterScParams&quot;</span>;</div>
<div class="line"><span class="keyword">const</span> <span class="keywordtype">unsigned</span> <span class="keywordtype">long</span> FACESLICE_WHOLE_lEVEL = UINT_MAX;</div>
<div class="line"><span class="keyword">const</span> <span class="keywordtype">unsigned</span> <span class="keywordtype">long</span> ETC1S_DEFAULT_COMPRESSION_LEVEL = 2;</div>
</div><!-- fragment --><h1 class="doxsection"><a class="anchor" id="autotoc_md2"></a>
How to use</h1>
<p>Put libktx.js and libktx.wasm in a directory on your server. Create a script tag with libktx.js as the <code>src</code> in your .html as shown below, changing the path as necessary for the relative locations of your .html file and the script source. libktx.js will automatically load libktx.wasm. </p><div class="fragment"><div class="line">&lt;script src=&quot;libktx.js&quot;&gt;&lt;/script&gt;</div>
</div><!-- fragment --><dl class="section note"><dt>Note</dt><dd>For the read-only version of the library, use libktx_read.js and libktx_read.wasm instead.</dd></dl>
<h2 class="doxsection"><a class="anchor" id="autotoc_md3"></a>
Create an instance of the ktx module</h2>
<p>To avoid polluting the global <code>window</code> name space all methods, variables and tokens related to libktx are wrapped in a function that returns a promise. The promise is fulfilled with a module instance when it is safe to run the compiled code. To use any of the features your code must call the function, wait for the promise to be fulfulled and use the returned instance. Before calling the function your code must create your WebGL context. The context is needed during module initialization so that the <code>glUpload</code> function can provide WebGLTexture object handles on the same context.</p>
<p>The function is called <em>createKtxModule</em>. In previous releases it was called <em>LIBKTX</em>. It has been renamed to clarify what it is actually doing. Old scripts should be updated to the new name as the old name will be removed soon.</p>
<dl class="section note"><dt>Note</dt><dd>In libktx_read.js the function is called <em>createKtxReadModule</em>.</dd></dl>
<p>Add the following to the top of your script to call the function, wait for the instance of the ktx module, make it available in the window name space, make your WebGL context the current context in Emscripten's OpenGL emulation and call your <code>main()</code>.</p>
<p>This snippet shows WebGL context creation as well.</p>
<div class="fragment"><div class="line">const canvas = document.querySelector(&#39;#glcanvas&#39;);</div>
<div class="line">gl = canvas.getContext(&#39;webgl2&#39;);</div>
<div class="line"> </div>
<div class="line">// If we don&#39;t have a GL context, give up now</div>
<div class="line">if (!gl) {</div>
<div class="line"> alert(&#39;Unable to initialize WebGL. Your browser or machine may not support it.&#39;);</div>
<div class="line">} else {</div>
<div class="line"> createKtxModule({preinitializedWebGLContext: gl}).then(instance =&gt; {</div>
<div class="line"> window.ktx = instance;</div>
<div class="line"> // Make existing WebGL context current for Emscripten OpenGL.</div>
<div class="line"> ktx.GL.makeContextCurrent(</div>
<div class="line"> ktx.GL.createContext(document.getElementById(&quot;glcanvas&quot;),</div>
<div class="line"> { majorVersion: 2.0 })</div>
<div class="line"> );</div>
<div class="line"> main()</div>
<div class="line"> });</div>
<div class="line">}</div>
</div><!-- fragment --><p>This calls <code>main()</code> after the module instance has been created. Start the rest of your code there.</p>
<h1 class="doxsection"><a class="anchor" id="autotoc_md4"></a>
Downloading and using an existing KTX texture.</h1>
<p>To download an existing texture and create a WebGL texture from it, execute a function like <code>loadTexture</code> in the following:</p>
<div class="fragment"><div class="line">var myTexture;</div>
<div class="line"> </div>
<div class="line">main() {</div>
<div class="line"> loadTexture(gl, &quot;myTextureUrl&quot;);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line">function loadTexture(gl, url)</div>
<div class="line">{</div>
<div class="line"> // Create placeholder which will be replaced once the data arrives.</div>
<div class="line"> myTexture = createPlaceholderTexture(gl, [0, 0, 255, 255]);</div>
<div class="line"> gl.bindTexture(myTexture.target, myTexture.object);</div>
<div class="line"> </div>
<div class="line"> var xhr = new XMLHttpRequest();</div>
<div class="line"> xhr.open(&#39;GET&#39;, url);</div>
<div class="line"> xhr.responseType = &quot;arraybuffer&quot;;</div>
<div class="line"> xhr.onload = function(){</div>
<div class="line"> var ktxdata = new Uint8Array(this.response);</div>
<div class="line"> ktexture = new ktx.texture(ktxdata);</div>
<div class="line"> const tex = uploadTextureToGl(gl, ktexture);</div>
<div class="line"> setTexParameters(tex, ktexture);</div>
<div class="line"> gl.bindTexture(tex.target, tex.object);</div>
<div class="line"> gl.deleteTexture(texture.object);</div>
<div class="line"> texture = tex;</div>
<div class="line"> // Use code like this to display the transcode target format.</div>
<div class="line"> // elem(&#39;format&#39;).innerText = tex.format;</div>
<div class="line"> ktexture.delete();</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> //xhr.onprogress = runProgress;</div>
<div class="line"> //xhr.onloadstart = openProgress;</div>
<div class="line"> xhr.send();</div>
<div class="line">}</div>
</div><!-- fragment --><p>This is the function for creating the place holder texture.</p>
<div class="fragment"><div class="line">function createPlaceholderTexture(gl, color)</div>
<div class="line">{</div>
<div class="line"> const placeholder = gl.createTexture();</div>
<div class="line"> gl.bindTexture(gl.TEXTURE_2D, placeholder);</div>
<div class="line"> </div>
<div class="line"> const level = 0;</div>
<div class="line"> const internalFormat = gl.RGBA;</div>
<div class="line"> const width = 1;</div>
<div class="line"> const height = 1;</div>
<div class="line"> const border = 0;</div>
<div class="line"> const srcFormat = gl.RGBA;</div>
<div class="line"> const srcType = gl.UNSIGNED_BYTE;</div>
<div class="line"> const pixel = new Uint8Array(color);</div>
<div class="line"> </div>
<div class="line"> gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,</div>
<div class="line"> width, height, border, srcFormat, srcType,</div>
<div class="line"> pixel);</div>
<div class="line"> return {</div>
<div class="line"> target: gl.TEXTURE_2D,</div>
<div class="line"> object: placeholder,</div>
<div class="line"> format: formatString,</div>
<div class="line"> };</div>
<div class="line">}</div>
</div><!-- fragment --><p>Uploading the KTX texture to the WebGL context is done like this. This function returns the created WebGL texture object and matching texture target.</p>
<div class="fragment"><div class="line">function uploadTextureToGl(gl, ktexture) {</div>
<div class="line"> const { transcode_fmt } = ktx;</div>
<div class="line"> var formatString;</div>
<div class="line"> </div>
<div class="line"> if (ktexture.needsTranscoding) {</div>
<div class="line"> var format;</div>
<div class="line"> if (astcSupported) {</div>
<div class="line"> formatString = &#39;ASTC&#39;;</div>
<div class="line"> format = transcode_fmt.ASTC_4x4_RGBA;</div>
<div class="line"> } else if (dxtSupported) {</div>
<div class="line"> formatString = ktexture.numComponents == 4 ? &#39;BC3&#39; : &#39;BC1&#39;;</div>
<div class="line"> format = transcode_fmt.BC1_OR_3;</div>
<div class="line"> } else if (pvrtcSupported) {</div>
<div class="line"> formatString = &#39;PVRTC1&#39;;</div>
<div class="line"> format = transcode_fmt.PVRTC1_4_RGBA;</div>
<div class="line"> } else if (etcSupported) {</div>
<div class="line"> formatString = &#39;ETC&#39;;</div>
<div class="line"> format = transcode_fmt.ETC;</div>
<div class="line"> } else {</div>
<div class="line"> formatString = &#39;RGBA4444&#39;;</div>
<div class="line"> format = transcode_fmt.RGBA4444;</div>
<div class="line"> }</div>
<div class="line"> if (ktexture.transcodeBasis(format, 0) != ktx.error_code.SUCCESS) {</div>
<div class="line"> alert(&#39;Texture transcode failed. See console for details.&#39;);</div>
<div class="line"> return undefined;</div>
<div class="line"> }</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> const result = ktexture.glUpload();</div>
<div class="line"> if (result.error != gl.NO_ERROR) {</div>
<div class="line"> alert(&#39;WebGL error when uploading texture, code = &#39;</div>
<div class="line"> + result.error.toString(16));</div>
<div class="line"> return undefined;</div>
<div class="line"> }</div>
<div class="line"> if (result.object === undefined) {</div>
<div class="line"> alert(&#39;Texture upload failed. See console for details.&#39;);</div>
<div class="line"> return undefined;</div>
<div class="line"> }</div>
<div class="line"> if (result.target != gl.TEXTURE_2D) {</div>
<div class="line"> alert(&#39;Loaded texture is not a TEXTURE2D.&#39;);</div>
<div class="line"> return undefined;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> return {</div>
<div class="line"> target: result.target,</div>
<div class="line"> object: result.object,</div>
<div class="line"> format: formatString,</div>
<div class="line"> }</div>
<div class="line">}</div>
</div><!-- fragment --><p>This is the function to correctly set the TexParameters for the loaded texture. It expects that the WebGLTexture object in the <code>texture</code> parameter was created from the content of the ktexture parameter.</p>
<div class="fragment"><div class="line">function setTexParameters(texture, ktexture) {</div>
<div class="line"> gl.bindTexture(texture.target, texture.object);</div>
<div class="line"> </div>
<div class="line"> if (ktexture.numLevels &gt; 1 || ktexture.generateMipmaps) {</div>
<div class="line"> // Enable bilinear mipmapping.</div>
<div class="line"> gl.texParameteri(texture.target,</div>
<div class="line"> gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);</div>
<div class="line"> } else {</div>
<div class="line"> gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, gl.LINEAR);</div>
<div class="line"> }</div>
<div class="line"> gl.texParameteri(texture.target, gl.TEXTURE_MAG_FILTER, gl.LINEAR);</div>
<div class="line"> </div>
<div class="line"> gl.bindTexture(texture.target, null);</div>
<div class="line">}</div>
</div><!-- fragment --><dl class="section note"><dt>Note</dt><dd>It is not clear if glUpload can be used with, e.g. THREE.js. It may be necessary to expose the ktxTexture_IterateLevelFaces or ktxTexture_IterateLoadLevelFaces API to JS with those calling a callback in JS to upload each image to WebGL.</dd></dl>
<h1 class="doxsection"><a class="anchor" id="autotoc_md5"></a>
Creating a new KTX texture</h1>
<p>This function shows the main steps:</p>
<div class="fragment"><div class="line">async function runTests(filename) {</div>
<div class="line"> const img = await loadImage(filename);</div>
<div class="line"> const imageData = await loadImageData(img);</div>
<div class="line"> const ktexture = await createTexture(imageData);</div>
<div class="line">}</div>
</div><!-- fragment --><p>Step 1 is to fetch the image via code such as this:</p>
<div class="fragment"><div class="line"> async function loadImage(src){</div>
<div class="line"> return new Promise((resolve, reject) =&gt; {</div>
<div class="line"> let img = new Image();</div>
<div class="line"> div = items[origImageItem].element;</div>
<div class="line"> img.onload = () =&gt; { div.appendChild(img); resolve(img); }</div>
<div class="line"> img.onerror = reject;</div>
<div class="line"> img.src = src;</div>
<div class="line"> })</div>
<div class="line"> }</div>
<div class="line">}</div>
</div><!-- fragment --><p>Step 2 is to get the image data via code such as the following. Note that to get data at the original image size you must use <code>img.naturalWidth</code> and <code>img.naturalHeight</code> as shown here. If you use <code>img.width</code> and <code>img.height</code> the image data will be rendered at whatever size your CSS is displaying the canvas.</p>
<div class="fragment"><div class="line">async function loadImageData (img, flip = false) {</div>
<div class="line"> const canvas = document.createElement(&quot;canvas&quot;);</div>
<div class="line"> const context = canvas.getContext(&quot;2d&quot;);</div>
<div class="line"> const width = img.naturalWidth;</div>
<div class="line"> const height = img.naturalHeight;</div>
<div class="line"> canvas.width = width;</div>
<div class="line"> canvas.height = height;</div>
<div class="line"> </div>
<div class="line"> if (flip) {</div>
<div class="line"> context.translate(0, height);</div>
<div class="line"> context.scale(1, -1);</div>
<div class="line"> }</div>
<div class="line"> context.drawImage(img, 0, 0, width, height);</div>
<div class="line"> </div>
<div class="line"> const imageData = context.getImageData(0, 0, width, height);</div>
<div class="line"> return imageData;</div>
<div class="line">};</div>
</div><!-- fragment --><p>Step 3 is to create the KTX texture object as shonw here:</p>
<div class="fragment"><div class="line">async function createTexture(imageData) {</div>
<div class="line"> const createInfo = new ktx.textureCreateInfo();</div>
<div class="line"> const colorSpace = imageData.colorSpace;</div>
<div class="line"> </div>
<div class="line"> createInfo.baseWidth = imageData.width;</div>
<div class="line"> createInfo.baseHeight = imageData.height;</div>
<div class="line"> createInfo.baseDepth = 1;</div>
<div class="line"> createInfo.numDimensions = 2;</div>
<div class="line"> createInfo.numLevels = 1;</div>
<div class="line"> createInfo.numLayers = 1;</div>
<div class="line"> createInfo.numFaces = 1;</div>
<div class="line"> createInfo.isArray = false;</div>
<div class="line"> createInfo.generateMipmaps = false;</div>
<div class="line"> </div>
<div class="line"> var displayP3;</div>
<div class="line"> // Image data from 2d canvases is always 8-bit RGBA.</div>
<div class="line"> // The only possible ImageData colorSpace choices are undefined, &quot;srgb&quot;</div>
<div class="line"> // and &quot;displayp3.&quot; All use the sRGB transfer function.</div>
<div class="line"> createInfo.vkFormat = ktx.VkFormat.R8G8B8A8_SRGB;</div>
<div class="line"> if ( imageData.colorSpace == &quot;display-p3&quot;) {</div>
<div class="line"> displayP3 = true;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> const ktexture = new ktx.texture(createInfo, ktx.CreateStorageEnum.ALLOC_STORAGE);</div>
<div class="line"> if (ktexture != null) {</div>
<div class="line"> if (displayP3) {</div>
<div class="line"> ktexture.primaries = ktx.khr_df_primaries.DISPLAYP3;</div>
<div class="line"> }</div>
<div class="line"> result = ktexture.setImageFromMemory(0, 0, 0, imageData.data);</div>
<div class="line"> }</div>
<div class="line"> return ktexture;</div>
<div class="line">}</div>
</div><!-- fragment --><p>The texture can now be uploaded to WebGL with <span class="tt">uploadTextureToGl</span>, that was listed earlier, and then displayed.</p>
<p>The texture can be compressed to one of the Basis universal formats with code like the following.</p>
<div class="fragment"><div class="line">async function testEncodeBasis(ktexture) {</div>
<div class="line"> const basisu_options = new ktx.basisParams();</div>
<div class="line"> </div>
<div class="line"> basisu_options.uastc = false;</div>
<div class="line"> basisu_options.noSSE = true;</div>
<div class="line"> basisu_options.verbose = false;</div>
<div class="line"> basisu_options.qualityLevel = 200;</div>
<div class="line"> basisu_options.compressionLevel = ktx.ETC1S_DEFAULT_COMPRESSION_LEVEL;</div>
<div class="line"> </div>
<div class="line"> var result = ktexture.compressBasis(basisu_options);</div>
<div class="line"> // Check result for ktx.error_code.SUCCESS.</div>
<div class="line">}</div>
</div><!-- fragment --><p>Finally the texture can be written back to Javascript with this single line of code:</p>
<div class="fragment"><div class="line">const serializedTexture = ktexture.writeToMemory();</div>
</div><!-- fragment --><p><code>serializedTexture</code> is a TypedArray. The web client can write the data to a local file or upload it to a server. </p>
</div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<div id="page-nav" class="page-nav-panel">
<div id="page-nav-resize-handle"></div>
<div id="page-nav-tree">
<div id="page-nav-contents">
</div><!-- page-nav-contents -->
</div><!-- page-nav-tree -->
</div><!-- page-nav -->
</div><!-- container -->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
<ul>
<li class="navelem"><a href="index.html">KTX Javascript Wrappers Reference</a></li>
<li class="footer">Generated on <span class="timestamp"></span> for KTX Javascript Wrappers Reference by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.16.1 </li>
</ul>
</div>
</body>
</html>