https://binomial.biz/ktx2_studio/

1<!--
2   Simple .KTX2/.DDS encode/transcode testbed.
3   Supports numerous texture formats: ETC1, PVRTC1, BC1-BC7, BC6H, ASTC LDR 4x4-12x12, ASTC HDR 4x4 and 6x6, and various uncompressed fallbacks (16-bit 565, 32bpp, 64bpp).
4   Supports loading .PNG, .JPG, .QOI, .EXR and .HDR files using the basisu library compiled to WASM with emscripten.
5   Also supports .WebP, .AVIF, .GIF, .BMP, .TIFF, .HEIC, .HEIF, and .JXL files via browser-assisted decoding (browser support varies).
6   Thanks to Evan Parker for providing webgl-texture-utils and the original test bed.
7   Script wasm-feature-detect.js was from: https://unpkg.com/wasm-feature-detect/dist/umd/index.js, see https://github.com/GoogleChromeLabs/wasm-feature-detect (Apache 2.0).
8-->
9
10<!doctype html>
11<html>
12<head>
13<meta charset="utf-8">

14<script src="renderer.js"></script>

14

15<script src="wasm-feature-detect.js"></script>

15

16<script src="encode_dto_apply.js"></script>

16

17<script type="text/javascript">
18
19   // The max limit is controlled by the basisu encoder module's linker options in CMakeLists.txt (see "set(LINK_THREADS "-s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=32 -s ENVIRONMENT=web,worker")")
20   const MAX_WORKER_THREADS = 32;
21   
22   const VERY_LARGE_BLOCK_SIZE_IN_PIXELS = 80; // blocks with >= 80 texels (10x8 or larger) will be automatically deblocked
23
24   var loggingDisabled = true;
25   function setLoggingDisabled(v)
26   {
27      loggingDisabled = !!v;
28   }
29   function log(s)
30   {
31      if (loggingDisabled)
32         return;
33      var panel = document.getElementById('log-panel');
34
35      if (panel.childElementCount >= 750)
36         panel.innerHTML = '';
37
38      var div = document.createElement('div');
39      div.innerHTML = s;
40      panel.appendChild(div);
41   }
42
43   function logClear()
44   {
45      elem('log-panel').innerHTML = '';
46   }
47
48   function logTime(desc, t)
49   {
50      log(t + 'ms ' + desc);
51   }
52
53   function isDef(v)
54   {
55      return typeof v != 'undefined';
56   }
57
58   function elem(id)
59   {
60      return document.getElementById(id);
61   }
62
63   formatTable = function (rows)
64   {
65      var colLengths = [];
66
67      for (var i = 0; i < rows.length; i++)
68      {
69         var row = rows[i];
70         for (var j = 0; j < row.length; j++)
71         {
72            if (colLengths.length <= j) colLengths.push(0);
73            if (colLengths[j] < row[j].length) colLengths[j] = row[j].length;
74         }
75      }
76
77      function formatRow(row)
78      {
79         var parts = [];
80         for (var i = 0; i < colLengths.length; i++)
81         {
82            var s = row.length > i ? row[i] : '';
83            var padding = (new Array(1 + colLengths[i] - s.length)).join(' ');
84            if (s && s[0] >= '0' && s[0] <= '9')
85            {
86               // Right-align numbers.
87               parts.push(padding + s);
88            }
89            else
90            {
91               parts.push(s + padding);
92            }
93         }
94         return parts.join(' | ');
95      }
96
97      var width = 0;
98      for (var i = 0; i < colLengths.length; i++)
99      {
100         width += colLengths[i];
101         // Add another 3 for the separator.
102         if (i != 0) width += 3;
103      }
104
105      var lines = [];
106      lines.push(formatRow(rows[0]));
107      lines.push((new Array(width + 1)).join('-'));
108      for (var i = 1; i < rows.length; i++)
109      {
110         lines.push(formatRow(rows[i]));
111      }
112
113      return lines.join('\n');
114   };
115
116   function loadArrayBufferFromURI(uri, callback, errorCallback)
117   {
118      log('Loading ' + uri + '...');
119
120      var xhr = new XMLHttpRequest();
121      xhr.responseType = "arraybuffer";
122      xhr.open('GET', uri, true);
123
124      xhr.onreadystatechange = function (e)
125      {
126         if (xhr.readyState == 4)  // Request is done
127         {
128            if (xhr.status == 200)
129            {
130               // Success, call the callback with the response
131               callback(xhr.response, uri);
132            }
133            else
134            {
135               // Error, call the errorCallback with the status
136               errorCallback('Failed to load file. Status: ' + xhr.status + ' - ' + xhr.statusText);
137            }
138         }
139      };
140
141      xhr.onerror = function (e)
142      {
143         // Network error or request couldn't be made
144         errorCallback('Network error or request failed.');
145      };
146
147      xhr.send(null);
148   }
149
150   // ASTC format, from:
151   // https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/
152   COMPRESSED_RGBA_ASTC_4x4_KHR = 0x93B0;
153   COMPRESSED_RGBA_ASTC_5x4_KHR = 0x93B1;
154   COMPRESSED_RGBA_ASTC_5x5_KHR = 0x93B2;
155   COMPRESSED_RGBA_ASTC_6x5_KHR = 0x93B3;
156   COMPRESSED_RGBA_ASTC_6x6_KHR = 0x93B4;
157   COMPRESSED_RGBA_ASTC_8x5_KHR = 0x93B5;
158   COMPRESSED_RGBA_ASTC_8x6_KHR = 0x93B6;
159   COMPRESSED_RGBA_ASTC_10x5_KHR = 0x93B8;
160   COMPRESSED_RGBA_ASTC_10x6_KHR = 0x93B9;
161   COMPRESSED_RGBA_ASTC_8x8_KHR = 0x93B7;  // note the WebGL block order is not the standard ASTC block order
162   COMPRESSED_RGBA_ASTC_10x8_KHR = 0x93BA;
163   COMPRESSED_RGBA_ASTC_10x10_KHR = 0x93BB;
164   COMPRESSED_RGBA_ASTC_12x10_KHR = 0x93BC;
165   COMPRESSED_RGBA_ASTC_12x12_KHR = 0x93BD;
166
167   // ASTC sRGB variants - 0x20 higher
168   COMPRESSED_SRGBA_ASTC_4x4_KHR = 0x93D0;
169   COMPRESSED_SRGBA_ASTC_5x4_KHR = 0x93D1;
170   COMPRESSED_SRGBA_ASTC_5x5_KHR = 0x93D2;
171   COMPRESSED_SRGBA_ASTC_6x5_KHR = 0x93D3;
172   COMPRESSED_SRGBA_ASTC_6x6_KHR = 0x93D4;

173   COMPRESSED_SRGBA_ASTC_8x5_KHR = 0x93D5;
174   COMPRESSED_SRGBA_ASTC_8x6_KHR = 0x93D6;
175   COMPRESSED_SRGBA_ASTC_10x5_KHR = 0x93D8;
176   COMPRESSED_SRGBA_ASTC_10x6_KHR = 0x93D9;
177   COMPRESSED_SRGBA_ASTC_8x8_KHR = 0x93D7;  // note the WebGL block order is not the standard ASTC block order
178   COMPRESSED_SRGBA_ASTC_10x8_KHR = 0x93DA;
179   COMPRESSED_SRGBA_ASTC_10x10_KHR = 0x93DB;
180   COMPRESSED_SRGBA_ASTC_12x10_KHR = 0x93DC;
181   COMPRESSED_SRGBA_ASTC_12x12_KHR = 0x93DD;
182
183   // DXT formats, from:
184   // http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/
185   COMPRESSED_RGB_S3TC_DXT1_EXT = 0x83F0;
186   COMPRESSED_RGBA_S3TC_DXT1_EXT = 0x83F1;
187   COMPRESSED_RGBA_S3TC_DXT3_EXT = 0x83F2;
188   COMPRESSED_RGBA_S3TC_DXT5_EXT = 0x83F3;
189
190   // BC6H/BC7 formats, from:
191   // https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/
192   COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;
193   COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT = 0x8E8F;
194
195   // BC4/BC5 (RGTC) formats, from:
196   // https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_rgtc/
197   // The transcoder emits unsigned BC4 (1 channel -> red) and unsigned BC5 (2 channels -> red/green).
198   COMPRESSED_RED_RGTC1_EXT = 0x8DBB;        // BC4 unsigned
199   COMPRESSED_RED_GREEN_RGTC2_EXT = 0x8DBD;  // BC5 unsigned
200
201   // ETC format, from:
202   // https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/
203   COMPRESSED_RGB_ETC1_WEBGL = 0x8D64;
204
205   // ETC2 / EAC formats, from:
206   // https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc/
207   COMPRESSED_RGBA8_ETC2_EAC = 0x9278;        // ETC2 RGBA (LDR color + alpha), 16 bytes/block
208   COMPRESSED_SRGB8_ALPHA8_ETC2_EAC = 0x9279; // sRGB variant of ETC2 RGBA (kept for completeness; not used)
209   COMPRESSED_R11_EAC = 0x9270;               // EAC R11 (unsigned, 1 channel), 8 bytes/block (no sRGB variant)
210   COMPRESSED_RG11_EAC = 0x9272;              // EAC RG11 (unsigned, 2 channels), 16 bytes/block (no sRGB variant)
211
212   // PVRTC format, from:
213   // https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/
214   COMPRESSED_RGB_PVRTC_4BPPV1_IMG = 0x8C00;
215   COMPRESSED_RGBA_PVRTC_4BPPV1_IMG = 0x8C02;
216
217   // Half float RGBA, from:
218   // https://registry.khronos.org/webgl/extensions/OES_texture_half_float/
219   HALF_FLOAT_OES = 0x8D61;
220
221   // Same as the Module.transcoder_texture_format enum
222   BASIS_FORMAT =
223   {
224      cTFETC1: 0,
225      cTFETC2: 1,
226      cTFBC1: 2,
227      cTFBC3: 3,
228      cTFBC4: 4,
229      cTFBC5: 5,
230      cTFBC7: 6,
231      cTFPVRTC1_4_RGB: 8,
232      cTFPVRTC1_4_RGBA: 9,
233      cTFASTC_4x4: 10,
234      cTFATC_RGB: 11,
235      cTFATC_RGBA_INTERPOLATED_ALPHA: 12,
236      cTFRGBA32: 13,
237      cTFRGB565: 14,
238      cTFBGR565: 15,
239      cTFRGBA4444: 16,
240      cTFFXT1_RGB: 17,
241      cTFPVRTC2_4_RGB: 18,
242      cTFPVRTC2_4_RGBA: 19,
243      cTFETC2_EAC_R11: 20,
244      cTFETC2_EAC_RG11: 21,
245      cTFBC6H: 22,
246      cTFASTC_HDR_4x4_RGBA: 23,
247      cTFRGB_HALF: 24,
248      cTFRGBA_HALF: 25,
249      cTFRGB_9E5: 26,
250      cTFASTC_HDR_6x6_RGBA: 27,
251      cTFASTC_LDR_5x4_RGBA: 28,
252      cTFASTC_LDR_5x5_RGBA: 29,
253      cTFASTC_LDR_6x5_RGBA: 30,
254      cTFASTC_LDR_6x6_RGBA: 31,
255      cTFASTC_LDR_8x5_RGBA: 32,
256      cTFASTC_LDR_8x6_RGBA: 33,
257      cTFASTC_LDR_10x5_RGBA: 34,
258      cTFASTC_LDR_10x6_RGBA: 35,
259      cTFASTC_LDR_8x8_RGBA: 36,
260      cTFASTC_LDR_10x8_RGBA: 37,
261      cTFASTC_LDR_10x10_RGBA: 38,
262      cTFASTC_LDR_12x10_RGBA: 39,
263      cTFASTC_LDR_12x12_RGBA: 40
264   };
265
266   BASIS_FORMAT_NAMES = {};
267   for (var name in BASIS_FORMAT)
268   {
269      BASIS_FORMAT_NAMES[BASIS_FORMAT[name]] = name;
270   }
271
272   DXT_FORMAT_MAP = {};
273   DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC1] = COMPRESSED_RGB_S3TC_DXT1_EXT;
274   DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC3] = COMPRESSED_RGBA_S3TC_DXT5_EXT;
275   DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC7] = COMPRESSED_RGBA_BPTC_UNORM;
276   DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC4] = COMPRESSED_RED_RGTC1_EXT;
277   DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC5] = COMPRESSED_RED_GREEN_RGTC2_EXT;
278
279   var astcSupported = false, etcSupported = false, dxtSupported = false, bc7Supported = false, bc6hSupported = false, astcHDRSupported = false,
280      rgbaHalfSupported = false, halfFloatWebGLFormat = 0, pvrtcSupported = false;

281
282   // BC4/BC5 (RGTC) support. Currently consumed only by the DDS viewer, but kept as
283   // general shared infrastructure (DXT_FORMAT_MAP entries, capability detection, the
284   // disable toggle) so a future KTX2 BC4/BC5 transcode path can reuse it directly.
285   // A single combined flag/toggle keeps the new UI minimal.
286   var rgtcSupported = false, rgtcDisabled = false;
287
288   // ETC2 (RGBA) + EAC (R11/RG11) support, from the WEBGL_compressed_texture_etc extension (distinct
289   // from the ETC1-only WEBGL_compressed_texture_etc1 flag above). The *Disabled flags drive the
290   // per-format enable/disable testing toggles (same pattern as the other formats).
291   var etc2Supported = false, eacSupported = false, etc2Disabled = false, eacDisabled = false;
292
293   var astcDisabled = false, etcDisabled = false, dxtDisabled = false, bc7Disabled = false, bc6hDisabled = false, astcHDRDisabled = false, rgbaHalfDisabled = false, pvrtcDisabled = false;
294
295   var drawMode = 0;
296   var drawScale = 1.0;
297   var ldrHDRUpconversionScale = 1.0;
298   var linearToSRGBFlag = false;
299   var drawUseBilinearFiltering = false;
300   var displayZoom = 1.0;
301
302   var tex, width, height, is_hdr, layers, levels, faces, tex_has_alpha, tex_is_srgb;
303   var alignedWidth, alignedHeight, format, displayWidth, displayHeight;
304   var tex_block_width = 0, tex_block_height = 0, tex_deblocking_filter_id = 0;
305   var used_gpu_deblocking_flag = false, used_cpu_deblocking_flag = false;
306
307   var curLoadedImageData = null, curLoadedImageURI = null;
308   var curLoadedBrowserRGBA = null;  // non-null when curLoadedImageData came from a browser-decoded format
309   var curLoadedKTX2Data = null, curLoadedKTX2URI = null;
310
311   // DDS source support (new, additive). A .DDS is a pre-compressed source we only
312   // transcode+view (no encode, no export yet). The viewer is tri-state: nothing
313   // loaded / a KTX2 loaded / a DDS loaded. We keep a SEPARATE pair of globals for
314   // the DDS bytes, and on a DDS load we null curLoadedKTX2Data so every existing
315   // KTX2-guarded code path (re-transcodes, exports) naturally short-circuits and
316   // the KTX2 logic is never handed DDS data. The KTX2 code paths are left as-is.
317   var curLoadedDDSData = null, curLoadedDDSURI = null;
318
319   // Returns which kind of compressed source is currently loaded for viewing:
320   // 'ktx2', 'dds', or 'none'. Use this (rather than poking curLoadedKTX2Data
321   // directly) anywhere the UI needs to branch on, or fetch metadata about, the
322   // currently loaded file.
323   function getLoadedSourceKind()
324   {
325      if (curLoadedDDSData != null) return 'dds';
326      if (curLoadedKTX2Data != null) return 'ktx2';
327      return 'none';
328   }
329
330   // Update the small "Loaded: ..." labels under the source-image / .ktx2
331   // inputs. Called from every load site after the corresponding URI global
332   // is assigned. Safe to call before the DOM elements exist (no-op in that
333   // case) — the labels also start out reading "(none)" from the markup.
334   function updateLoadedSourceDisplay()
335   {
336      const span = document.getElementById('loaded-source-uri-display');
337      const btn  = document.getElementById('copy-loaded-source-uri-btn');
338      if (!span) return;
339      const uri = curLoadedImageURI;
340      if (uri)
341      {
342         span.textContent = uri;
343         span.title = uri;
344         if (btn) btn.disabled = false;
345      }
346      else
347      {
348         span.textContent = '(none)';
349         span.title = '';
350         if (btn) btn.disabled = true;
351      }
352   }
353   function updateLoadedFormatDisplay()
354   {
355      const span = document.getElementById('loaded-ktx2-uri-display');
356      const btn  = document.getElementById('copy-loaded-ktx2-uri-btn');
357      if (!span) return;
358      // This label shows the currently-loaded compressed texture. It's source-aware:
359      // a loaded .DDS is surfaced here too (with a suffix), since DDS has no separate label.
360      var uri = curLoadedKTX2URI;
361      if (getLoadedSourceKind() === 'dds' && curLoadedDDSURI)
362         uri = curLoadedDDSURI + ' (.DDS)';
363      if (uri)
364      {
365         span.textContent = uri;
366         span.title = uri;
367         if (btn) btn.disabled = false;

368      }
369      else
370      {
371         span.textContent = '(none)';
372         span.title = '';
373         if (btn) btn.disabled = true;
374      }
375   }
376
377   var g_transcodingTime = 0;
378   // DEV: when true, the main-thread "Encode (on Main Thread)" path ALSO runs the DTO
379   // encode and byte-compares it (so it encodes twice). Off by default. Long-term that
380   // path will switch to the DTO technique outright; this is just the verification.
381   var g_enableDTOValidation = false;
382   var g_lastEncodeTime = 0;
383   var g_lastEncodeMip0RGBAPSNR = 0;
384
385   function redraw()
386   {
387      if (!width)
388         return;
389
390      // Keep the WebGL buffer at native resolution; use CSS to zoom the display.
391      var canvas = elem('canvas');
392      if (canvas.width !== displayWidth || canvas.height !== displayHeight)
393      {
394         canvas.width = displayWidth;
395         canvas.height = displayHeight;
396      }
397
398      var cssW = Math.round(displayWidth * displayZoom);
399      var cssH = Math.round(displayHeight * displayZoom);
400      canvas.style.width  = cssW + 'px';
401      canvas.style.height = cssH + 'px';
402
403      // Match CSS upscaling to the bilinear filtering setting.
404      canvas.style.imageRendering = drawUseBilinearFiltering ? 'auto' : 'pixelated';
405      
406      // GPU shader deblocking control
407      const deblocking_filter_select = document.getElementById("deblocking-filter-select");
408      const deblocking_mode = Number(deblocking_filter_select.value);
409
410      var should_gpu_deblock_flag = false;
411      
412      if (deblocking_mode == 1) // auto (GPU)
413      {
414         // By default only apply the filter if the KTX2 file enabled it
415         if (tex_deblocking_filter_id != 0)
416            should_gpu_deblock_flag = true;
417      }
418      else if (deblocking_mode == 2) // Forced - Use GPU
419      {
420         // Decide if we should apply the filter or not
421         if (elem('xuastc_ldr_force_deblocking_on_all_block_sizes').checked)
422            should_gpu_deblock_flag = true;
423         else if ((tex_block_width * tex_block_height) >= VERY_LARGE_BLOCK_SIZE_IN_PIXELS) // check for very large block sizes
424            should_gpu_deblock_flag = true;
425      }
426      
427      if ((should_gpu_deblock_flag) &&
428          (tex_block_width >= 4) && (tex_block_height >= 4))
429      {
430          var show_edge_weights = elem('xuastc_ldr_gpu_deblocking_show_edge_weights').checked;
431          
432          // Draw with deblocking filter
433          renderer.drawTextureDeblocked(tex, displayWidth, displayHeight, drawMode, drawScale * ldrHDRUpconversionScale, linearToSRGBFlag, false, tex_block_width, tex_block_height, show_edge_weights);      
434          
435          used_gpu_deblocking_flag = true;
436      }
437      else
438      {
439          // Draw normally, no filtering
440          renderer.drawTexture(tex, displayWidth, displayHeight, drawMode, drawScale * ldrHDRUpconversionScale, linearToSRGBFlag, false);
441          
442          used_gpu_deblocking_flag = false;
443      }
444      
445      const deblockingIndicator = document.getElementById("deblocking-indicator");
446
447      // Build the string first, then only touch the DOM if it actually changed.
448      // Writing innerText forces layout work even when the value is identical,
449      // and this runs on every draw, so guarding the write matters here.
450      let deblockingText = "Deblocking Filter:";
451
452      if (used_gpu_deblocking_flag)
453        deblockingText += " GPU Shader ";
454
455      if (used_cpu_deblocking_flag)
456        deblockingText += " CPU (during transcode if available)";
457
458      if (!used_gpu_deblocking_flag && !used_cpu_deblocking_flag)
459        deblockingText += " Disabled";
460
461      if (deblockingIndicator.innerText !== deblockingText)
462        deblockingIndicator.innerText = deblockingText;
463      
464   }
465
466   function dumpKTX2FileDesc(ktx2File)
467   {
468      log('------');
469
470      log('Width: ' + ktx2File.getWidth());
471      log('Height: ' + ktx2File.getHeight());
472
473      log('BlockWidth: ' + ktx2File.getBlockWidth());
474      log('BlockHeight: ' + ktx2File.getBlockHeight());
475      log('BasisTexFormat: ' + ktx2File.getBasisTexFormat());
476
477      log('isSRGB: ' + ktx2File.isSRGB());
478      log('Has alpha: ' + ktx2File.getHasAlpha());
479
480      log('Faces: ' + ktx2File.getFaces());
481      log('Layers: ' + ktx2File.getLayers());
482      log('Levels: ' + ktx2File.getLevels());
483
484      log('IsLDR: ' + ktx2File.isLDR());
485      log('IsHDR: ' + ktx2File.isHDR());
486      log('isETC1S: ' + ktx2File.isETC1S());
487      log('isUASTC: ' + ktx2File.isUASTC());
488      log('IsHDR4x4: ' + ktx2File.isHDR4x4());
489      log('IsHDR6x6: ' + ktx2File.isHDR6x6());
490      log('isASTC_LDR: ' + ktx2File.isASTC_LDR());
491      log('isXUASTC_LDR: ' + ktx2File.isXUASTC_LDR());
492
493      log('Total Keys: ' + ktx2File.getTotalKeys());
494
495      log('DFD Size: ' + ktx2File.getDFDSize());
496      log('DFD Color Model: ' + ktx2File.getDFDColorModel());
497      log('DFD Color Primaries: ' + ktx2File.getDFDColorPrimaries());
498      log('DFD Transfer Function: ' + ktx2File.getDFDTransferFunc());
499      log('DFD Flags: ' + ktx2File.getDFDFlags());
500      log('DFD Total Samples: ' + ktx2File.getDFDTotalSamples());
501      log('DFD Channel0: ' + ktx2File.getDFDChannelID0());
502      log('DFD Channel1: ' + ktx2File.getDFDChannelID1());
503
504      log('Is Video: ' + ktx2File.isVideo());
505
506      var dfdSize = ktx2File.getDFDSize();
507
508      var dfdData = new Uint8Array(dfdSize);
509      ktx2File.getDFD(dfdData);
510
511      log('DFD bytes:' + dfdData.toString());
512      log('--');
513
514      log('--');
515      log('Key values:');
516      var key_index;
517
518      for (key_index = 0; key_index < ktx2File.getTotalKeys(); key_index++)
519      {
520         var key_name = ktx2File.getKey(key_index);
521         log('Key ' + key_index + ': "' + key_name + '"');
522
523         var valSize = ktx2File.getKeyValueSize(key_name);
524
525         if (valSize != 0)
526         {
527            var val_data = new Uint8Array(valSize);
528            var status = ktx2File.getKeyValue(key_name, val_data);
529
530            if (!status)
531               log('getKeyValue() failed');
532            else
533            {
534               log('value size: ' + val_data.length);
535               var i, str = "";
536
537               for (i = 0; i < val_data.length; i++)
538               {
539                  var c = val_data[i];
540                  str = str + String.fromCharCode(c);
541               }
542
543               log(str);
544            }
545
546         }
547         else
548            log('<empty value>');
549      }
550
551      log('--');
552      log('Image level information:');
553      var level_index;
554
555      var total_texels = 0;
556
557      for (level_index = 0; level_index < ktx2File.getLevels(); level_index++)
558      {
559         var layer_index;
560         for (layer_index = 0; layer_index < Math.max(1, ktx2File.getLayers()); layer_index++)
561         {
562            var face_index;
563            for (face_index = 0; face_index < ktx2File.getFaces(); face_index++)
564            {
565               var imageLevelInfo = ktx2File.getImageLevelInfo(level_index, layer_index, face_index);
566
567               log('level: ' + level_index + ' layer: ' + layer_index + ' face: ' + face_index);
568
569               log('orig_width: ' + imageLevelInfo.origWidth);
570               log('orig_height: ' + imageLevelInfo.origHeight);
571               log('width: ' + imageLevelInfo.width);
572               log('height: ' + imageLevelInfo.height);
573               log('numBlocksX: ' + imageLevelInfo.numBlocksX);
574               log('numBlocksY: ' + imageLevelInfo.numBlocksY);
575               log('blockWidth: ' + imageLevelInfo.blockWidth);
576               log('blockHeight: ' + imageLevelInfo.blockHeight);
577               log('totalBlocks: ' + imageLevelInfo.totalBlocks);
578               log('alphaFlag: ' + imageLevelInfo.alphaFlag);
579               log('iframeFlag: ' + imageLevelInfo.iframeFlag);
580
581               if (ktx2File.isETC1S())
582                  log('ETC1S image desc image flags: ' + ktx2File.getETC1SImageDescImageFlags(level_index, layer_index, face_index));
583
584               log('--');
585
586               total_texels += imageLevelInfo.origWidth * imageLevelInfo.origHeight;
587            }
588         }
589      }
590      log('--');
591      log('KTX2 header:');
592
593      var hdr = ktx2File.getHeader();
594
595      log('vkFormat: ' + hdr.vkFormat);
596      log('typeSize: ' + hdr.typeSize);
597      log('pixelWidth: ' + hdr.pixelWidth);
598      log('pixelHeight: ' + hdr.pixelHeight);
599      log('pixelDepth: ' + hdr.pixelDepth);
600      log('layerCount: ' + hdr.layerCount);
601      log('faceCount: ' + hdr.faceCount);
602      log('levelCount: ' + hdr.levelCount);
603      log('superCompressionScheme: ' + hdr.supercompressionScheme);
604      log('dfdByteOffset: ' + hdr.dfdByteOffset);
605      log('dfdByteLength: ' + hdr.dfdByteLength);
606      log('kvdByteOffset: ' + hdr.kvdByteOffset);
607      log('kvdByteLength: ' + hdr.kvdByteLength);
608      log('sgdByteOffset: ' + hdr.sgdByteOffset);
609      log('sgdByteLength: ' + hdr.sgdByteLength);
610
611      log('------');
612
613      return total_texels;
614   }
615
616   function setCanvasSize(width, height)
617   {
618      var canvas = elem('canvas');
619
620      canvas.width = width;
621      canvas.height = height;
622
623      canvas.style.width  = width + 'px';
624      canvas.style.height = height + 'px';
625   }
626
627   function transcodeTexture(data, uri)
628   {

629      updateErrorLine("");
630
631      log('------');
632      log('transcodeTexture(): Done loading .KTX2 file, decoded header:');
633
634      const { KTX2File, initializeBasis, encodeBasisTexture } = Module;
635
636      resetDrawSettings();
637
638      initializeBasis();
639      
640      used_cpu_deblocking_flag = false;
641
642      const ktx2File = new KTX2File(new Uint8Array(data));
643
644      if (!ktx2File.isValid())
645      {
646         updateErrorLine('Invalid or unsupported .ktx2 file');
647         console.warn('Invalid or unsupported .ktx2 file');
648         ktx2File.close();
649         ktx2File.delete();
650         return;
651      }
652
653      var baseWidth = ktx2File.getWidth();
654      var baseHeight = ktx2File.getHeight();
655      var srcBlockWidth = ktx2File.getBlockWidth();
656      var srcBlockHeight = ktx2File.getBlockHeight();
657
658      var basisTexFormat = ktx2File.getBasisTexFormat();
659      var is_uastc = ktx2File.isUASTC();
660      var is_astc_ldr = ktx2File.isASTC_LDR();
661      var is_xuastc_ldr = ktx2File.isXUASTC_LDR();
662      var is_xubc7 = ktx2File.isXUBC7();
663
664      is_hdr = ktx2File.isHDR();
665
666      layers = ktx2File.getLayers();
667      levels = ktx2File.getLevels();
668      faces = ktx2File.getFaces();
669      tex_has_alpha = ktx2File.getHasAlpha();
670      tex_is_srgb = ktx2File.isSRGB();
671
672      updateMipmapSliderRange(levels);
673
674      // Read the desired mipmap level from the slider, validate, and clamp if needed.
675      var selectedLevel = parseInt(document.getElementById('mipmap-level-slider').value, 10);
676      if (isNaN(selectedLevel) || selectedLevel < 0 || selectedLevel >= levels)
677      {
678         selectedLevel = 0;
679         document.getElementById('mipmap-level-slider').value = 0;
680         document.getElementById('mipmap-level-value').textContent = '0';
681      }
682
683      updateCubemapFaceRange(faces);
684
685      // Read the desired cubemap face from the slider, validate, and clamp if needed.
686      var selectedFace = parseInt(document.getElementById('cubemap-face-slider').value, 10);
687      if (isNaN(selectedFace) || selectedFace < 0 || selectedFace >= faces)
688      {
689         selectedFace = 0;
690         document.getElementById('cubemap-face-slider').value = 0;
691         document.getElementById('cubemap-face-value').textContent = '0';
692      }
693
694      // For array textures, layers==0 means non-arrayed (treat as 1 layer at index 0).
695      var effectiveLayers = Math.max(1, layers);
696      updateArrayLayerRange(effectiveLayers);
697
698      // Read the desired array layer from the slider, validate, and clamp if needed.
699      var selectedLayer = parseInt(document.getElementById('array-layer-slider').value, 10);
700      if (isNaN(selectedLayer) || selectedLayer < 0 || selectedLayer >= effectiveLayers)
701      {
702         selectedLayer = 0;
703         document.getElementById('array-layer-slider').value = 0;
704         document.getElementById('array-layer-value').textContent = '0';
705         document.getElementById('array-layer-input').value = 0;
706      }
707
708      // Set width/height to the selected mip level's original (unpadded) dimensions.
709      // This way all downstream code (alignment, transcoding, texture creation) works unchanged.
710      var imageLevelInfo = ktx2File.getImageLevelInfo(selectedLevel, selectedLayer, selectedFace);
711      width = imageLevelInfo.origWidth;
712      height = imageLevelInfo.origHeight;
713    
714      // Retrieve the file's block dimensions (used for deblocking)  
715      tex_block_width = imageLevelInfo.blockWidth;
716      tex_block_height = imageLevelInfo.blockHeight;
717            
718      tex_deblocking_filter_id = ktx2File.getDeblockingFilterIndex();
719      
720      // If a HDR KTX2 file was upconverted from LDR/SDR content by us, it'll have a key indicating the Nit scale that was appplied.
721      // We can use that to make viewing the file work out of the box.
722      var ldrHDRUpconversionNitMultiplier = ktx2File.getLDRHDRUpconversionNitMultiplier();
723
724      if (ldrHDRUpconversionNitMultiplier > 0.0)
725         ldrHDRUpconversionScale = 1.0 / ldrHDRUpconversionNitMultiplier;
726      else
727         ldrHDRUpconversionScale = 1.0;
728
729      var dstBlockWidth = 4, dstBlockHeight = 4;
730      
731      // PVRTC1 requires both width/height be a power of 2 (but not square is okay)      
732      var is_pow2 = ((width & (width - 1)) == 0) && ((height & (height - 1)) == 0);
733
734      if ((!is_hdr) && (!is_pow2))
735      {
736         if ((pvrtcSupported) && (!pvrtcDisabled))
737         {
738            updateErrorLine("Note: PVRTC is available but the texture's dimensions are not both a power of 2.");
739            log("Note: PVRTC is available but the texture's dimensions are not both a power of 2.");
740         }
741      }
742
743      if (!width || !height || !levels)
744      {
745         updateErrorLine('Invalid .ktx2 file');
746         console.warn('Invalid .ktx2 file');
747         ktx2File.close();
748         ktx2File.delete();
749         return;
750      }
751          
752      // Decide which texture format to transcode to.
753      // Note: If the file is UASTC LDR, the preferred formats are ASTC/BC7. For UASTC HDR, ASTC HDR/BC6H.
754      // 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.
755
756      var formatString = 'UNKNOWN';
757      if (is_hdr)
758      {
759         if ((bc6hSupported) && (!bc6hDisabled))
760         {
761            formatString = 'BC6H';
762            format = BASIS_FORMAT.cTFBC6H;
763         }
764         else if ((astcHDRSupported) && (!astcHDRDisabled))
765         {
766            if (basisTexFormat == Module.basis_tex_format.cUASTC_HDR_4x4.value)
767            {
768               formatString = 'ASTC HDR 4x4';
769
770               format = BASIS_FORMAT.cTFASTC_HDR_4x4_RGBA;
771            }
772            else
773            {
774               formatString = 'ASTC HDR 6x6';
775
776               format = BASIS_FORMAT.cTFASTC_HDR_6x6_RGBA;
777
778               dstBlockWidth = 6;
779               dstBlockHeight = 6;
780            }
781         }
782         else if ((rgbaHalfSupported) && (!rgbaHalfDisabled))
783         {
784            formatString = 'RGBA_HALF';
785            format = BASIS_FORMAT.cTFRGBA_HALF;
786         }
787         else
788         {
789            formatString = '32-bit RGBA';
790            format = BASIS_FORMAT.cTFRGBA_HALF;
791
792           log('Warning: Falling back to decoding texture to uncompressed 32-bit RGBA');
793         }
794      }
795      else if ((astcSupported) && (!astcDisabled))
796      {
797         switch (basisTexFormat)
798         {
799            case Module.basis_tex_format.cASTC_LDR_4x4.value:    format = BASIS_FORMAT.cTFASTC_4x4; formatString = 'ASTC LDR 4x4'; dstBlockWidth = 4; dstBlockHeight = 4; break;
800            case Module.basis_tex_format.cASTC_LDR_5x4.value:    format = BASIS_FORMAT.cTFASTC_LDR_5x4_RGBA; formatString = 'ASTC LDR 5x4'; dstBlockWidth = 5; dstBlockHeight = 4; break;
801            case Module.basis_tex_format.cASTC_LDR_5x5.value:    format = BASIS_FORMAT.cTFASTC_LDR_5x5_RGBA; formatString = 'ASTC LDR 5x5'; dstBlockWidth = 5; dstBlockHeight = 5; break;
802            case Module.basis_tex_format.cASTC_LDR_6x5.value:    format = BASIS_FORMAT.cTFASTC_LDR_6x5_RGBA; formatString = 'ASTC LDR 6x5'; dstBlockWidth = 6; dstBlockHeight = 5; break;
803            case Module.basis_tex_format.cASTC_LDR_6x6.value:    format = BASIS_FORMAT.cTFASTC_LDR_6x6_RGBA; formatString = 'ASTC LDR 6x6'; dstBlockWidth = 6; dstBlockHeight = 6; break;
804            case Module.basis_tex_format.cASTC_LDR_8x5.value:    format = BASIS_FORMAT.cTFASTC_LDR_8x5_RGBA; formatString = 'ASTC LDR 8x5'; dstBlockWidth = 8; dstBlockHeight = 5; break;
805            case Module.basis_tex_format.cASTC_LDR_8x6.value:    format = BASIS_FORMAT.cTFASTC_LDR_8x6_RGBA; formatString = 'ASTC LDR 8x6'; dstBlockWidth = 8; dstBlockHeight = 6; break;
806            case Module.basis_tex_format.cASTC_LDR_10x5.value:   format = BASIS_FORMAT.cTFASTC_LDR_10x5_RGBA; formatString = 'ASTC LDR 10x5'; dstBlockWidth = 10; dstBlockHeight = 5; break;
807            case Module.basis_tex_format.cASTC_LDR_10x6.value:   format = BASIS_FORMAT.cTFASTC_LDR_10x6_RGBA; formatString = 'ASTC LDR 10x6'; dstBlockWidth = 10; dstBlockHeight = 6; break;
808            case Module.basis_tex_format.cASTC_LDR_10x8.value:   format = BASIS_FORMAT.cTFASTC_LDR_10x8_RGBA; formatString = 'ASTC LDR 10x8'; dstBlockWidth = 10; dstBlockHeight = 8; break;
809            case Module.basis_tex_format.cASTC_LDR_8x8.value:    format = BASIS_FORMAT.cTFASTC_LDR_8x8_RGBA; formatString = 'ASTC LDR 8x8'; dstBlockWidth = 8; dstBlockHeight = 8; break;
810            case Module.basis_tex_format.cASTC_LDR_10x10.value:  format = BASIS_FORMAT.cTFASTC_LDR_10x10_RGBA; formatString = 'ASTC LDR 10x10'; dstBlockWidth = 10; dstBlockHeight = 10; break;
811            case Module.basis_tex_format.cASTC_LDR_12x10.value:  format = BASIS_FORMAT.cTFASTC_LDR_12x10_RGBA; formatString = 'ASTC LDR 12x10'; dstBlockWidth = 12; dstBlockHeight = 10; break;
812            case Module.basis_tex_format.cASTC_LDR_12x12.value:  format = BASIS_FORMAT.cTFASTC_LDR_12x12_RGBA; formatString = 'ASTC LDR 12x12'; dstBlockWidth = 12; dstBlockHeight = 12; break;
813
814            case Module.basis_tex_format.cXUASTC_LDR_4x4.value:  format = BASIS_FORMAT.cTFASTC_4x4; formatString = 'ASTC LDR 4x4'; dstBlockWidth = 4; dstBlockHeight = 4; break;
815            case Module.basis_tex_format.cXUASTC_LDR_5x4.value:  format = BASIS_FORMAT.cTFASTC_LDR_5x4_RGBA; formatString = 'ASTC LDR 5x4'; dstBlockWidth = 5; dstBlockHeight = 4; break;
816            case Module.basis_tex_format.cXUASTC_LDR_5x5.value:  format = BASIS_FORMAT.cTFASTC_LDR_5x5_RGBA; formatString = 'ASTC LDR 5x5'; dstBlockWidth = 5; dstBlockHeight = 5; break;
817            case Module.basis_tex_format.cXUASTC_LDR_6x5.value:  format = BASIS_FORMAT.cTFASTC_LDR_6x5_RGBA; formatString = 'ASTC LDR 6x5'; dstBlockWidth = 6; dstBlockHeight = 5; break;
818            case Module.basis_tex_format.cXUASTC_LDR_6x6.value:  format = BASIS_FORMAT.cTFASTC_LDR_6x6_RGBA; formatString = 'ASTC LDR 6x6'; dstBlockWidth = 6; dstBlockHeight = 6; break;
819            case Module.basis_tex_format.cXUASTC_LDR_8x5.value:  format = BASIS_FORMAT.cTFASTC_LDR_8x5_RGBA; formatString = 'ASTC LDR 8x5'; dstBlockWidth = 8; dstBlockHeight = 5; break;
820            case Module.basis_tex_format.cXUASTC_LDR_8x6.value:  format = BASIS_FORMAT.cTFASTC_LDR_8x6_RGBA; formatString = 'ASTC LDR 8x6'; dstBlockWidth = 8; dstBlockHeight = 6; break;
821            case Module.basis_tex_format.cXUASTC_LDR_10x5.value: format = BASIS_FORMAT.cTFASTC_LDR_10x5_RGBA; formatString = 'ASTC LDR 10x5'; dstBlockWidth = 10; dstBlockHeight = 5; break;
822            case Module.basis_tex_format.cXUASTC_LDR_10x6.value: format = BASIS_FORMAT.cTFASTC_LDR_10x6_RGBA; formatString = 'ASTC LDR 10x6'; dstBlockWidth = 10; dstBlockHeight = 6; break;
823            case Module.basis_tex_format.cXUASTC_LDR_10x8.value: format = BASIS_FORMAT.cTFASTC_LDR_10x8_RGBA; formatString = 'ASTC LDR 10x8'; dstBlockWidth = 10; dstBlockHeight = 8; break;
824            case Module.basis_tex_format.cXUASTC_LDR_8x8.value:  format = BASIS_FORMAT.cTFASTC_LDR_8x8_RGBA; formatString = 'ASTC LDR 8x8'; dstBlockWidth = 8; dstBlockHeight = 8; break;
825            case Module.basis_tex_format.cXUASTC_LDR_10x10.value: format = BASIS_FORMAT.cTFASTC_LDR_10x10_RGBA; formatString = 'ASTC LDR 10x10'; dstBlockWidth = 10; dstBlockHeight = 10; break;
826            case Module.basis_tex_format.cXUASTC_LDR_12x10.value: format = BASIS_FORMAT.cTFASTC_LDR_12x10_RGBA; formatString = 'ASTC LDR 12x10'; dstBlockWidth = 12; dstBlockHeight = 10; break;
827            case Module.basis_tex_format.cXUASTC_LDR_12x12.value: format = BASIS_FORMAT.cTFASTC_LDR_12x12_RGBA; formatString = 'ASTC LDR 12x12'; dstBlockWidth = 12; dstBlockHeight = 12; break;
828
829            default:
830               format = BASIS_FORMAT.cTFASTC_4x4;
831               formatString = 'ASTC LDR 4x4';
832               break;
833         }
834      }
835      else if ((bc7Supported) && (!bc7Disabled))
836      {
837         formatString = 'BC7';
838         format = BASIS_FORMAT.cTFBC7;
839      }
840      else if ((dxtSupported) && (!dxtDisabled))
841      {
842         if (tex_has_alpha)
843         {
844            formatString = 'BC3';
845            format = BASIS_FORMAT.cTFBC3;
846         }
847         else
848         {
849            formatString = 'BC1';
850            format = BASIS_FORMAT.cTFBC1;
851         }
852      }
853      // ETC2 RGBA: alpha-capable color codec, higher quality than PVRTC1 (and ETC1), so it ranks above
854      // both. Targets ETC-tier GPUs lacking ASTC/BC; ETC1 below is RGB-only and would drop alpha.
855      else if ((etc2Supported) && (!etc2Disabled))
856      {
857         formatString = 'ETC2 RGBA';
858         format = BASIS_FORMAT.cTFETC2;
859      }
860      else if ((pvrtcSupported) && (!pvrtcDisabled) && (is_pow2))
861      {
862         if (tex_has_alpha)
863         {
864            formatString = 'PVRTC1_RGBA';
865            format = BASIS_FORMAT.cTFPVRTC1_4_RGBA;
866         }
867         else
868         {
869            formatString = 'PVRTC1_RGB';
870            format = BASIS_FORMAT.cTFPVRTC1_4_RGB;
871         }
872      }
873      else if ((etcSupported) && (!etcDisabled))
874      {
875         formatString = 'ETC1';
876         format = BASIS_FORMAT.cTFETC1;
877      }
878      else
879      {
880         formatString = 'RGBA32';
881         format = BASIS_FORMAT.cTFRGBA32;
882         log('Warning: Falling back to decoding texture data to uncompressed 32-bit RGBA');
883      }
884
885      var descString = formatString;
886
887      if (is_hdr)
888      {
889         if (basisTexFormat == Module.basis_tex_format.cUASTC_HDR_4x4.value)
890            descString += ' from UASTC HDR 4x4';
891         else if (basisTexFormat == Module.basis_tex_format.cASTC_HDR_6x6.value)
892            descString += ' from ASTC HDR 6x6';
893         else
894            descString += ' from UASTC HDR 6x6 Intermediate';
895      }
896      else if (is_astc_ldr)
897      {
898         descString += ' from ASTC LDR ';
899
900         switch (basisTexFormat)
901         {
902            case Module.basis_tex_format.cASTC_LDR_4x4.value:  descString += '4x4'; break;
903            case Module.basis_tex_format.cASTC_LDR_5x4.value:  descString += '5x4'; break;
904            case Module.basis_tex_format.cASTC_LDR_5x5.value:  descString += '5x5'; break;
905            case Module.basis_tex_format.cASTC_LDR_6x5.value:  descString += '6x5'; break;
906            case Module.basis_tex_format.cASTC_LDR_6x6.value:  descString += '6x6'; break;
907            case Module.basis_tex_format.cASTC_LDR_8x5.value:  descString += '8x5'; break;
908            case Module.basis_tex_format.cASTC_LDR_8x6.value:  descString += '8x6'; break;
909            case Module.basis_tex_format.cASTC_LDR_10x5.value: descString += '10x5'; break;
910            case Module.basis_tex_format.cASTC_LDR_10x6.value: descString += '10x6'; break;
911            case Module.basis_tex_format.cASTC_LDR_10x8.value: descString += '10x8'; break;
912            case Module.basis_tex_format.cASTC_LDR_8x8.value:  descString += '8x8'; break;
913            case Module.basis_tex_format.cASTC_LDR_10x10.value: descString += '10x10'; break;
914            case Module.basis_tex_format.cASTC_LDR_12x10.value: descString += '12x10'; break;
915            case Module.basis_tex_format.cASTC_LDR_12x12.value: descString += '12x12'; break;
916            default:
917             break;
918        }
919      }
920      else if (is_xubc7)
921      {
922         descString += ' from XUBC7';
923      }
924      else if (is_xuastc_ldr)
925      {
926         descString += ' from XUASTC LDR ';
927
928         switch (basisTexFormat)
929         {
930            case Module.basis_tex_format.cXUASTC_LDR_4x4.value:  descString += '4x4'; break;
931            case Module.basis_tex_format.cXUASTC_LDR_5x4.value:  descString += '5x4'; break;
932            case Module.basis_tex_format.cXUASTC_LDR_5x5.value:  descString += '5x5'; break;
933            case Module.basis_tex_format.cXUASTC_LDR_6x5.value:  descString += '6x5'; break;
934            case Module.basis_tex_format.cXUASTC_LDR_6x6.value:  descString += '6x6'; break;
935            case Module.basis_tex_format.cXUASTC_LDR_8x5.value:  descString += '8x5'; break;
936            case Module.basis_tex_format.cXUASTC_LDR_8x6.value:  descString += '8x6'; break;
937            case Module.basis_tex_format.cXUASTC_LDR_10x5.value: descString += '10x5'; break;
938            case Module.basis_tex_format.cXUASTC_LDR_10x6.value: descString += '10x6'; break;
939            case Module.basis_tex_format.cXUASTC_LDR_10x8.value: descString += '10x8'; break;
940            case Module.basis_tex_format.cXUASTC_LDR_8x8.value:  descString += '8x8'; break;
941            case Module.ba

941sis_tex_format.cXUASTC_LDR_10x10.value: descString += '10x10'; break;
942            case Module.basis_tex_format.cXUASTC_LDR_12x10.value: descString += '12x10'; break;
943            case Module.basis_tex_format.cXUASTC_LDR_12x12.value: descString += '12x12'; break;
944            default:
945             break;
946        }
947      }
948      else if (is_uastc)
949         descString += ' from UASTC LDR 4x4';
950      else
951         descString += ' from ETC1S';
952         
953      // Start transcoding first before calling dumpKTX2FileDesc() so isVideo()) is always set correctly. 
954      // (That flag depends on KTX2 global supercompression fields that are only unpacked when startTranscoding() is called.)
955      if (!ktx2File.startTranscoding())
956      {
957         updateErrorLine('startTranscoding failed');
958
959         log('startTranscoding failed');
960         console.warn('startTranscoding failed');
961
962         ktx2File.close();
963         ktx2File.delete();
964         return;
965      }
966
967      var total_texels = dumpKTX2FileDesc(ktx2File);
968      var bpp = (data.byteLength * 8.0) / total_texels;
969      var fileSizeKB = data.byteLength / 1024.0;
970      descString += ` (${bpp.toFixed(3)} bits/pixel, ${fileSizeKB.toFixed(2)} KB).`;
971
972      elem('format').innerText = descString;
973            
974      const dstSize = ktx2File.getImageTranscodedSizeInBytes(selectedLevel, selectedLayer, selectedFace, format);
975      const dst = new Uint8Array(dstSize);
976
977      const levelIndex = selectedLevel;
978      const layerIndex = selectedLayer;
979      const faceIndex = selectedFace;
980
981      var flags = elem('highquality_transcoding').checked ? Module.basisu_decode_flags.cDecodeFlagsHighQuality.value : 0;
982
983      if (elem('etc1s_bc7_transcoder_no_chroma_filtering').checked)
984         flags = flags | Module.basisu_decode_flags.cDecodeFlagsNoETC1SChromaFiltering.value;
985
986      if (elem('xuastc_ldr_disable_fast_bc7_transcoding').checked)
987         flags = flags | Module.basisu_decode_flags.cDecodeFlagXUASTCLDRDisableFastBC7Transcoding.value;
988
989      if (elem('transcode_alpha_to_opaque_formats').checked)
990         flags = flags | Module.basisu_decode_flags.cDecodeFlagsTranscodeAlphaDataToOpaqueFormats.value;
991
992      // Set deblocking related transcode options
993      const deblocking_filter_select = document.getElementById("deblocking-filter-select");
994      const deblocking_mode = Number(deblocking_filter_select.value);
995              
996      // if CPU deblocking is forced on
997      if (deblocking_mode == 3)
998      {
999         // They're forcing CPU deblocking, which is also the transcoder default. By default the transcoder only deblocks block sizes >= VERY_LARGE_BLOCK_SIZE_IN_PIXELS (80) texels, but we can force it on for all block sizes here.
1000         // We either enable it or disable it here.
1001         if (elem('xuastc_ldr_force_deblocking_on_all_block_sizes').checked)
1002         {
1003            flags = flags | Module.basisu_decode_flags.cDecodeFlagsForceDeblockFiltering.value;
1004            used_cpu_deblocking_flag = true;
1005         }
1006         else
1007         {
1008            // By default CPU deblocking during transcoding will only happen on block sizes >= 50 texels
1009            if (tex_block_width * tex_block_height >= VERY_LARGE_BLOCK_SIZE_IN_PIXELS)
1010            {
1011               flags = flags | Module.basisu_decode_flags.cDecodeFlagsForceDeblockFiltering.value;
1012               used_cpu_deblocking_flag = true;
1013            }
1014         }
1015         
1016         if (!used_cpu_deblocking_flag)
1017         {
1018            flags = flags | Module.basisu_decode_flags.cDecodeFlagsNoDeblockFiltering.value;
1019         }
1020      }
1021      else
1022      {
1023        // By default, disable all CPU deblocking during transcoding (we'll use GPU or none during display).
1024        // This overrides the transcoder's default behavior, which is to deblock while transcoding to non-ASTC formats, block sizes >=10x8 or larger. 
1025        flags = flags | Module.basisu_decode_flags.cDecodeFlagsNoDeblockFiltering.value;
1026      }
1027            
1028      // For simplicity here this only includes the transcode time, not initial file opening/global codebook decomp time.
1029      // For all formats except ETC1S the file opening time will be tiny. ETC1S codebook decomp is also quite fast, but not free with large codebooks.
1030      const startTime = performance.now();
1031
1032      if (!ktx2File.transcodeImageWithFlags(dst, levelIndex, layerIndex, faceIndex, format, flags, -1, -1))
1033      {
1034         updateErrorLine('ktx2File.transcodeImage failed');
1035
1036         log('ktx2File.transcodeImage failed');
1037         console.warn('transcodeImage failed');
1038
1039         ktx2File.close();
1040         ktx2File.delete();
1041
1042         return;
1043      }
1044

1045      const elapsed = performance.now() - startTime;
1046
1047      g_transcodingTime = elapsed;
1048      
1049      descString += '\nTexture Size: ' + baseWidth + 'x' + baseHeight + ', Levels: ' + levels + ', Layers: ' + layers + ', Faces: ' + faces + ', sRGB: ' + tex_is_srgb + ', alpha: ' + tex_has_alpha;
1050
1051      descString += '\nViewing: Mip ' + selectedLevel + ' (' + width + 'x' + height + ') Face ' + selectedFace + ' Layer ' + selectedLayer;
1052
1053      descString += '\nTranscode time: ' + g_transcodingTime.toFixed(3) + 'ms';
1054
1055      if (g_lastEncodeTime > 0)
1056      {
1057         descString += '\nEncode time: ' + g_lastEncodeTime.toFixed(3) + 'ms';
1058         if (g_lastEncodeMip0RGBAPSNR > 0)
1059            descString += '. Mip0: ' + g_lastEncodeMip0RGBAPSNR.toFixed(3) + ' dB Avg. PSNR';
1060      }
1061
1062      elem('format').innerText = descString;
1063
1064      ktx2File.close();
1065      ktx2File.delete();
1066
1067      log('width: ' + width);
1068      log('height: ' + height);
1069      log('basisTexFormat: ' + basisTexFormat);
1070      log('has_alpha: ' + tex_has_alpha);
1071      log('is_srgb: ' + tex_is_srgb);
1072      log('isUASTC: ' + is_uastc);
1073      log('isHDR: ' + is_hdr);
1074      log('isASTC_LDR: ' + is_astc_ldr);
1075      log('isXUASTC_LDR: ' + is_xuastc_ldr);
1076      log('srcBlockWidth: ' + srcBlockWidth);
1077      log('srcBlockHeight: ' + srcBlockHeight);
1078      log('dstBlockWidth: ' + dstBlockWidth);
1079      log('dstBlockHeight: ' + dstBlockHeight);
1080      log('levels: ' + levels);
1081      log('layers: ' + layers);
1082      log('faces: ' + faces);
1083
1084      log('ldrHDRUpconversionNitMultiplier: ' + ldrHDRUpconversionNitMultiplier);
1085      log('tex_deblocking_filter_id: ' + tex_deblocking_filter_id);
1086
1087      log('selectedLevel: ' + selectedLevel + ' (' + width + 'x' + height + '), face: ' + selectedFace + ', layer: ' + selectedLayer);
1088
1089      logTime('transcoding time', elapsed.toFixed(3));
1090
1091      alignedWidth = Math.floor((width + dstBlockWidth - 1) / dstBlockWidth) * dstBlockWidth;
1092      alignedHeight = Math.floor((height + dstBlockHeight - 1) / dstBlockHeight) * dstBlockHeight;
1093
1094      displayWidth = alignedWidth;
1095      displayHeight = alignedHeight;
1096
1097      setCanvasSize(alignedWidth, alignedHeight);
1098
1099      // Now create the WebGL texture object.
1100      
1101      var force_srgb_sampling = false;
1102
1103      // For ASTC LDR and XUASTC LDR, select the right format depending on the transfer function in the DFD (as reported by the transcoder API).
1104      // It's important for the GPU to decompress the texture using the same decode profile as what the encoder used.
1105      if ((format === BASIS_FORMAT.cTFASTC_4x4) || (format === BASIS_FORMAT.cTFASTC_HDR_4x4_RGBA))
1106      {
1107         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_4x4_KHR + (tex_is_srgb ? 0x20 : 0));
1108         force_srgb_sampling = tex_is_srgb;
1109      }
1110      else if ((format === BASIS_FORMAT.cTFASTC_LDR_6x6_RGBA) || (format === BASIS_FORMAT.cTFASTC_HDR_6x6_RGBA))
1111      {
1112         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_6x6_KHR + (tex_is_srgb ? 0x20 : 0));
1113         force_srgb_sampling = tex_is_srgb;
1114      }
1115      else if (format === BASIS_FORMAT.cTFASTC_LDR_5x4_RGBA)
1116      {
1117         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_5x4_KHR + (tex_is_srgb ? 0x20 : 0));
1118         force_srgb_sampling = tex_is_srgb; 
1119      }
1120      else if (format === BASIS_FORMAT.cTFASTC_LDR_5x5_RGBA)
1121      {
1122         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_5x5_KHR + (tex_is_srgb ? 0x20 : 0));
1123         force_srgb_sampling = tex_is_srgb;
1124      }
1125      else if (format === BASIS_FORMAT.cTFASTC_LDR_6x5_RGBA)
1126      {
1127         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_6x5_KHR + (tex_is_srgb ? 0x20 : 0));
1128         force_srgb_sampling = tex_is_srgb;
1129      }
1130      else if (format === BASIS_FORMAT.cTFASTC_LDR_8x5_RGBA)
1131      {
1132         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_8x5_KHR + (tex_is_srgb ? 0x20 : 0));
1133         force_srgb_sampling = tex_is_srgb;
1134      }
1135      else if (format === BASIS_FORMAT.cTFASTC_LDR_8x6_RGBA)
1136      {
1137         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_8x6_KHR + (tex_is_srgb ? 0x20 : 0));
1138         force_srgb_sampling = tex_is_srgb;
1139      }
1140      else if (format === BASIS_FORMAT.cTFASTC_LDR_10x5_RGBA)
1141      {
1142         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_10x5_KHR + (tex_is_srgb ? 0x20 : 0));
1143         force_srgb_sampling = tex_is_srgb;
1144      }
1145      else if (format === BASIS_FORMAT.cTFASTC_LDR_10x6_RGBA)
1146      {
1147         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_10x6_KHR + (tex_is_srgb ? 0x20 : 0));
1148         force_srgb_sampling = tex_is_srgb;
1149      }
1150      else if (format === BASIS_FORMAT.cTFASTC_LDR_8x8_RGBA)
1151      {
1152         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_8x8_KHR + (tex_is_srgb ? 0x20 : 0));
1153         force_srgb_sampling = tex_is_srgb;
1154      }
1155      else if (format === BASIS_FORMAT.cTFASTC_LDR_10x8_RGBA)
1156      {
1157         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_10x8_KHR + (tex_is_srgb ? 0x20 : 0));
1158         force_srgb_sampling = tex_is_srgb;
1159      }
1160      else if (format === BASIS_FORMAT.cTFASTC_LDR_10x10_RGBA)
1161      {
1162         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_10x10_KHR + (tex_is_srgb ? 0x20 : 0));
1163         force_srgb_sampling = tex_is_srgb;
1164      }
1165      else if (format === BASIS_FORMAT.cTFASTC_LDR_12x10_RGBA)
1166      {
1167         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_12x10_KHR + (tex_is_srgb ? 0x20 : 0));
1168         force_srgb_sampling = tex_is_srgb;
1169      }
1170      else if (format === BASIS_FORMAT.cTFASTC_LDR_12x12_RGBA)
1171      {
1172         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_12x12_KHR + (tex_is_srgb ? 0x20 : 0));
1173         force_srgb_sampling = tex_is_srgb;
1174      }
1175      else if ((format === BASIS_FORMAT.cTFBC3) || (format === BASIS_FORMAT.cTFBC1) || (format == BASIS_FORMAT.cTFBC7))
1176      {
1177         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
1178      }
1179      else if (format === BASIS_FORMAT.cTFETC1)
1180      {
1181         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_ETC1_WEBGL);
1182      }
1183      else if (format === BASIS_FORMAT.cTFETC2)
1184      {
1185         // ETC2 RGBA (non-sRGB, matching the BC/UNORM path); 16 bytes/block.
1186         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA8_ETC2_EAC);
1187      }
1188      else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGB)
1189      {
1190         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_PVRTC_4BPPV1_IMG);
1191      }
1192      else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGBA)
1193      {
1194         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_PVRTC_4BPPV1_IMG);
1195      }
1196      else if (format === BASIS_FORMAT.cTFBC6H)
1197      {
1198         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT);
1199      }
1200      else if (format == BASIS_FORMAT.cTFRGBA_HALF)
1201      {
1202         // Uncompressed RGBA HALF or 32bpp (with no block alignment)
1203         displayWidth = width;
1204         displayHeight = height;
1205         setCanvasSize(width, height);
1206
1207         if ((rgbaHalfSupported) && (!rgbaHalfDisabled))
1208         {
1209            var numHalfs = dstSize / 2;
1210
1211            // Create uint16 data from the uint8 data.
1212            var dstHalfs = new Uint16Array(numHalfs);
1213
1214            // Convert the array of bytes to an array of uint16's.
1215            for (var i = 0; i < numHalfs; i++)
1216               dstHalfs[i] = dst[2 * i + 0] | (dst[2 * i + 1] << 8);
1217
1218            tex = renderer.createHalfRGBATexture(dstHalfs, width, height, halfFloatWebGLFormat);
1219         }
1220         else
1221         {
1222            // No HDR texture formats are supported (TODO: 9e5?) Fall back to plain 32bpp RGBA, just to do *something*. (Could also convert to RGBM.)
1223            const dstRGBA = new Uint8Array(width * height * 4);
1224
1225            // Convert the array of half floats to uint8_t's, clamping as needed.
1226            var srcOfs = 0, dstOfs = 0;
1227            for (var y = 0; y < height; y++)
1228            {
1229               for (var x = 0; x < width; x++)
1230               {
1231                  for (var c = 0; c < 4; c++)
1232                  {
1233                     var h = dst[srcOfs] | (dst[srcOfs + 1] << 8);
1234                     var f = Module.convertHalfToFloat(h) * ((c == 3) ? 1 : ldrHDRUpconversionScale);
1235
1236                     dstRGBA[dstOfs] = Math.min(255, Math.max(0, Math.round(f * 255.0)));
1237
1238                     srcOfs += 2;
1239                     dstOfs++;
1240                  }
1241               }
1242            }
1243
1244            tex = renderer.createRgbaTexture(dstRGBA, width, height);
1245
1246            // We've applied the LDR->

1246HDR upconversion scale when converting to 32bpp, so don't have the shader do it.
1247            ldrHDRUpconversionScale = 1.0;
1248         }
1249      }
1250      else
1251      {
1252         // Uncompressed 32-bit RGBA (with no block alignment)
1253
1254         displayWidth = width;
1255         displayHeight = height;
1256         setCanvasSize(width, height);
1257
1258         tex = renderer.createRgbaTexture(dst, width, height);
1259      }
1260
1261      linearToSRGBFlag = (is_hdr != 0) || (force_srgb_sampling != 0);
1262
1263      elem('linear_to_srgb').innerText = linearToSRGBFlag ? 'Enabled' : 'Disabled';
1264
1265      redraw();
1266
1267      // Tri-state: mark KTX2 as the active source and clear any DDS source. Done on the
1268      // success path only, so a failed load leaves the previously-loaded source intact.
1269      curLoadedKTX2Data = data;
1270      curLoadedKTX2URI = uri;
1271      curLoadedDDSData = null;
1272      curLoadedDDSURI = null;
1273      updateLoadedFormatDisplay();
1274   }
1275
1276   // Logs a .DDS source's metadata (using ONLY the DDSFile API) and returns the total
1277   // texel count across all images (for the bits/pixel readout). The DDS analog of
1278   // dumpKTX2FileDesc(); DDS has no DFD/key-value/header machinery so this is simpler.
1279   function dumpDDSFileDesc(ddsFile)
1280   {
1281      log('------');
1282      log('DDS Width: ' + ddsFile.getWidth());
1283      log('DDS Height: ' + ddsFile.getHeight());
1284      log('Levels: ' + ddsFile.getLevels());
1285      log('Layers: ' + ddsFile.getLayers());
1286      log('Faces: ' + ddsFile.getFaces());
1287      log('IsCubemap: ' + ddsFile.getIsCubemap());
1288      log('Has alpha: ' + ddsFile.getHasAlpha());
1289      log('isSRGB: ' + ddsFile.isSRGB());
1290      log('Contained transcoder_texture_format: ' + ddsFile.getFormat());
1291      log('DDS format (dds_format enum): ' + ddsFile.getDDSFormat() + ' (' + ddsFormatName(ddsFile) + ')');
1292      log('Source kind (dds_source_kind enum): ' + ddsFile.getSourceKind());
1293
1294      log('--');
1295      log('Image level information:');
1296
1297      var total_texels = 0;
1298      var level_index;
1299      for (level_index = 0; level_index < ddsFile.getLevels(); level_index++)
1300      {
1301         var layer_index;
1302         // layers==0 means non-arrayed (treat as a single layer at index 0).
1303         for (layer_index = 0; layer_index < Math.max(1, ddsFile.getLayers()); layer_index++)
1304         {
1305            var face_index;
1306            for (face_index = 0; face_index < ddsFile.getFaces(); face_index++)
1307            {
1308               var info = ddsFile.getImageLevelInfo(level_index, layer_index, face_index);
1309
1310               log('level: ' + level_index + ' layer: ' + layer_index + ' face: ' + face_index);
1311               log('orig_width: ' + info.origWidth);
1312               log('orig_height: ' + info.origHeight);
1313               log('width: ' + info.width);
1314               log('height: ' + info.height);
1315               log('numBlocksX: ' + info.numBlocksX);
1316               log('numBlocksY: ' + info.numBlocksY);
1317               log('blockWidth: ' + info.blockWidth);
1318               log('blockHeight: ' + info.blockHeight);
1319               log('totalBlocks: ' + info.totalBlocks);
1320               log('--');
1321
1322               total_texels += info.origWidth * info.origHeight;
1323            }
1324         }
1325      }
1326      log('------');
1327
1328      return total_texels;
1329   }
1330
1331   // Human-readable name for a .DDS's exact physical format. Prefers the encoder
1332   // build's authoritative DDSFile.getDDSFormatString() (present in basis_encoder*.js);
1333   // falls back to a reverse lookup of the Module.dds_format enum if that's absent
1334   // (e.g. a transcoder-only build).
1335   function ddsFormatName(ddsFile)
1336   {
1337      var ddsFmt = ddsFile.getDDSFormat();
1338      if (typeof ddsFile.getDDSFormatString === 'function')
1339         return ddsFile.getDDSFormatString(ddsFmt);
1340      if (Module.dds_format)
1341      {
1342         for (var name in Module.dds_format)
1343         {
1344            if (Module.dds_format[name] && Module.dds_format[name].value === ddsFmt)
1345               return name;
1346         }
1347      }
1348      return String(ddsFmt);
1349   }
1350
1351   // Transcode + display a loaded .DDS source. NEW functionality, deliberately kept
1352   // separate from transcodeTexture() (the KTX2 path) so that path is untouched.
1353   // DDS is LDR/BCn-or-uncompressed only here (no HDR), view-only (no encode/export).
1354   // It picks a GPU display format using the SAME capability + disable-toggle priority
1355   // as the KTX2 viewer (ASTC 4x4 -> BC7 -> BC1/BC3 -> PVRTC1 -> ETC1 -> RGBA32), plus
1356   // a BC4/BC5 passthrough when the RGTC extension is available & enabled. Every
1357   // candidate is additionally gated by DDSFile.isTranscodeFormatSupported(); anything
1358   // unsupported falls through to the next, ending at always-supported RGBA32.
1359   function transcodeDDSTexture(data, uri)
1360   {

1361      updateErrorLine("");
1362
1363      log('------');
1364      log('transcodeDDSTexture(): Loading .DDS file:');
1365
1366      const { DDSFile, initializeBasis } = Module;
1367
1368      resetDrawSettings();
1369
1370      initializeBasis();
1371
1372      used_cpu_deblocking_flag = false;
1373
1374      const ddsFile = new DDSFile(new Uint8Array(data));
1375
1376      if (!ddsFile.isValid())
1377      {
1378         updateErrorLine('Invalid or unsupported .dds file');
1379         console.warn('Invalid or unsupported .dds file');
1380         ddsFile.close();
1381         ddsFile.delete();
1382         return;
1383      }
1384
1385      var baseWidth = ddsFile.getWidth();
1386      var baseHeight = ddsFile.getHeight();
1387
1388      // DDS here is always LDR (the dds_format enum has no HDR entries).
1389      is_hdr = false;
1390
1391      layers = ddsFile.getLayers();
1392      levels = ddsFile.getLevels();
1393      faces = ddsFile.getFaces();
1394      tex_has_alpha = ddsFile.getHasAlpha();
1395      tex_is_srgb = ddsFile.isSRGB();
1396
1397      // DDS has no deblocking concept; clear so redraw()'s GPU-deblock branch never
1398      // engages on a stale KTX2 value.
1399      tex_deblocking_filter_id = 0;
1400      ldrHDRUpconversionScale = 1.0;
1401
1402      updateMipmapSliderRange(levels);
1403
1404      var selectedLevel = parseInt(document.getElementById('mipmap-level-slider').value, 10);
1405      if (isNaN(selectedLevel) || selectedLevel < 0 || selectedLevel >= levels)
1406      {
1407         selectedLevel = 0;
1408         document.getElementById('mipmap-level-slider').value = 0;
1409         document.getElementById('mipmap-level-value').textContent = '0';
1410      }
1411
1412      updateCubemapFaceRange(faces);
1413
1414      var selectedFace = parseInt(document.getElementById('cubemap-face-slider').value, 10);
1415      if (isNaN(selectedFace) || selectedFace < 0 || selectedFace >= faces)
1416      {
1417         selectedFace = 0;
1418         document.getElementById('cubemap-face-slider').value = 0;
1419         document.getElementById('cubemap-face-value').textContent = '0';
1420      }
1421
1422      // layers==0 means non-arrayed (treat as 1 layer at index 0).
1423      var effectiveLayers = Math.max(1, layers);
1424      updateArrayLayerRange(effectiveLayers);
1425
1426      var selectedLayer = parseInt(document.getElementById('array-layer-slider').value, 10);
1427      if (isNaN(selectedLayer) || selectedLayer < 0 || selectedLayer >= effectiveLayers)
1428      {
1429         selectedLayer = 0;
1430         document.getElementById('array-layer-slider').value = 0;
1431         document.getElementById('array-layer-value').textContent = '0';
1432         document.getElementById('array-layer-input').value = 0;
1433      }
1434
1435      var imageLevelInfo = ddsFile.getImageLevelInfo(selectedLevel, selectedLayer, selectedFace);
1436      width = imageLevelInfo.origWidth;
1437      height = imageLevelInfo.origHeight;
1438      tex_block_width = imageLevelInfo.blockWidth;
1439      tex_block_height = imageLevelInfo.blockHeight;
1440
1441      if (!width || !height || !levels)
1442      {
1443         updateErrorLine('Invalid .dds file');
1444         console.warn('Invalid .dds file');
1445         ddsFile.close();
1446         ddsFile.delete();
1447         return;
1448      }
1449
1450      var dstBlockWidth = 4, dstBlockHeight = 4;
1451      var is_pow2 = ((width & (width - 1)) == 0) && ((height & (height - 1)) == 0);
1452
1453      var srcKind = ddsFile.getSourceKind();
1454      var DSK = Module.dds_source_kind;
1455
1456      // Returns true only if the transcoder can actually produce 'fmt' for this DDS.
1457      function ddsCanProduce(fmt) { return ddsFile.isTranscodeFormatSupported(fmt); }
1458
1459      // Decide the GPU display format.
1460      //  1) NATIVE PASSTHROUGH (preferred): if the DDS is a block format the GPU supports natively,
1461      //     transcode to that EXACT format -- a lossless passthrough (no re-encode, exact channels,
1462      //     fastest). BC1->BC1, BC3->BC3, BC4->BC4, BC5->BC5, BC7->BC7.
1463      //  2) FALLBACK (native unavailable, or an uncompressed source): pick the highest-quality
1464      //     supported format that PRESERVES the source's channels -- an alpha source only ever falls
1465      //     back to an alpha-capable target (never an RGB-only format), so no channels/data are lost.
1466      //     RGBA32 is the universal last resort (always available).
1467      // Every step is gated by both the GPU capability/disable toggles AND the transcoder's own
1468      // format support (ddsCanProduce).
1469      var formatString = 'UNKNOWN';
1470
1471      // When "Transcode alpha to opaque (ETC1/PVRTC1_RGB)" is checked, the transcoder carries alpha
1472      // separately, so those RGB-only targets become usable for alpha sources too (a testing feature).
1473      var allowAlphaToOpaque = elem('transcode_alpha_to_opaque_formats').checked;
1474

1475      // Detect single-channel (R) and dual-channel (RG) sources -- compressed (BC4/BC5) OR uncompressed
1476      // (R8/R8G8) -- via the source's actual DDS format. These route to the channel-matched
1477      // BC4/BC5/EAC R11/EAC RG11 targets below instead of expanding to a color codec. (Color sources
1478      // leave both flags false.)
1479      var ddsFmt = ddsFile.getDDSFormat();
1480      var DF = Module.dds_format;
1481      var isSingleChannelSrc = !!DF && ((ddsFmt === DF.cBC4.value) || (ddsFmt === DF.cR8.value));
1482      var isDualChannelSrc   = !!DF && ((ddsFmt === DF.cBC5.value) || (ddsFmt === DF.cR8G8.value));
1483
1484      // 1) native passthrough -- exact format match. (A BC2 source has no JS source_kind enum member and
1485      //    is never byte-passthrough-able, so it intentionally falls through to the fallback below.)
1486      if ((srcKind === DSK.cBC1.value) && dxtSupported && !dxtDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC1))
1487      {
1488         formatString = 'BC1'; format = BASIS_FORMAT.cTFBC1;
1489      }
1490      else if ((srcKind === DSK.cBC3.value) && dxtSupported && !dxtDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC3))
1491      {
1492         formatString = 'BC3'; format = BASIS_FORMAT.cTFBC3;
1493      }
1494      else if ((srcKind === DSK.cBC4.value) && rgtcSupported && !rgtcDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC4))
1495      {
1496         formatString = 'BC4'; format = BASIS_FORMAT.cTFBC4;
1497      }
1498      else if ((srcKind === DSK.cBC5.value) && rgtcSupported && !rgtcDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC5))
1499      {
1500         formatString = 'BC5'; format = BASIS_FORMAT.cTFBC5;
1501      }
1502      else if ((srcKind === DSK.cBC7.value) && bc7Supported && !bc7Disabled && ddsCanProduce(BASIS_FORMAT.cTFBC7))
1503      {
1504         formatString = 'BC7'; format = BASIS_FORMAT.cTFBC7;
1505      }
1506      // Single/dual-channel sources (BC4/BC5 OR uncompressed R8/R8G8): channel-matched targets so we don't
1507      // expand them to a color codec -- BC4/BC5 (RGTC) preferred, else EAC R11/RG11. BC4/BC5 SOURCES are
1508      // byte-passthrough'd above; this handles R8/R8G8 re-encode and the no-RGTC case.
1509      else if (isSingleChannelSrc && rgtcSupported && !rgtcDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC4))
1510      {
1511         formatString = 'BC4'; format = BASIS_FORMAT.cTFBC4;
1512      }
1513      else if (isSingleChannelSrc && eacSupported && !eacDisabled && ddsCanProduce(BASIS_FORMAT.cTFETC2_EAC_R11))
1514      {
1515         formatString = 'EAC R11'; format = BASIS_FORMAT.cTFETC2_EAC_R11;
1516      }
1517      else if (isDualChannelSrc && rgtcSupported && !rgtcDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC5))
1518      {
1519         formatString = 'BC5'; format = BASIS_FORMAT.cTFBC5;
1520      }
1521      else if (isDualChannelSrc && eacSupported && !eacDisabled && ddsCanProduce(BASIS_FORMAT.cTFETC2_EAC_RG11))
1522      {
1523         formatString = 'EAC RG11'; format = BASIS_FORMAT.cTFETC2_EAC_RG11;
1524      }

1525      // 2) channel-preserving fallback. Highest quality first; alpha sources stay alpha-capable.
1526      else if (astcSupported && !astcDisabled && ddsCanProduce(BASIS_FORMAT.cTFASTC_4x4))
1527      {
1528         formatString = 'ASTC LDR 4x4'; format = BASIS_FORMAT.cTFASTC_4x4;
1529      }
1530      else if (bc7Supported && !bc7Disabled && ddsCanProduce(BASIS_FORMAT.cTFBC7))
1531      {
1532         formatString = 'BC7'; format = BASIS_FORMAT.cTFBC7;
1533      }
1534      else if (dxtSupported && !dxtDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC3))
1535      {
1536         formatString = 'BC3'; format = BASIS_FORMAT.cTFBC3;
1537      }
1538      else if (etc2Supported && !etc2Disabled && ddsCanProduce(BASIS_FORMAT.cTFETC2))
1539      {
1540         formatString = 'ETC2 RGBA'; format = BASIS_FORMAT.cTFETC2;
1541      }
1542      else if (pvrtcSupported && !pvrtcDisabled && is_pow2 && tex_has_alpha && ddsCanProduce(BASIS_FORMAT.cTFPVRTC1_4_RGBA))
1543      {
1544         formatString = 'PVRTC1_RGBA'; format = BASIS_FORMAT.cTFPVRTC1_4_RGBA;
1545      }
1546      else if (dxtSupported && !dxtDisabled && ddsCanProduce(BASIS_FORMAT.cTFBC1))
1547      {
1548         formatString = 'BC1'; format = BASIS_FORMAT.cTFBC1;
1549      }
1550      else if (etcSupported && !etcDisabled && ddsCanProduce(BASIS_FORMAT.cTFETC1))
1551      {
1552         // ETC1 is RGB-only and preferred over PVRTC1 (higher quality). Usable for an alpha source only
1553         // when "Transcode alpha to opaque" is checked (else alpha would be silently dropped).
1554         formatString = 'ETC1'; format = BASIS_FORMAT.cTFETC1;
1555      }
1556      else if (pvrtcSupported && !pvrtcDisabled && is_pow2 && (!tex_has_alpha || allowAlphaToOpaque) && ddsCanProduce(BASIS_FORMAT.cTFPVRTC1_4_RGB))
1557      {
1558         // PVRTC1 RGB is RGB-only; usable for an alpha source only when "Transcode alpha to opaque" is checked.
1559         formatString = 'PVRTC1_RGB'; format = BASIS_FORMAT.cTFPVRTC1_4_RGB;
1560      }
1561      else
1562      {
1563         formatString = 'RGBA32'; format = BASIS_FORMAT.cTFRGBA32;
1564         log('Note: decoding .DDS to uncompressed 32-bit RGBA (no enabled/supported GPU format matched).');
1565      }
1566
1567      var descString = formatString + ' from DDS ' + ddsFormatName(ddsFile);
1568
1569      if (!ddsFile.startTranscoding())
1570      {
1571         updateErrorLine('startTranscoding failed');
1572         log('startTranscoding failed');
1573         console.warn('startTranscoding failed');
1574         ddsFile.close();
1575         ddsFile.delete();
1576         return;
1577      }
1578
1579      var total_texels = dumpDDSFileDesc(ddsFile);
1580      var bpp = total_texels ? (data.byteLength * 8.0) / total_texels : 0;
1581      var fileSizeKB = data.byteLength / 1024.0;
1582      descString += ` (${bpp.toFixed(3)} bits/pixel, ${fileSizeKB.toFixed(2)} KB).`;
1583
1584      elem('format').innerText = descString;
1585
1586      const dstSize = ddsFile.getImageTranscodedSizeInBytes(selectedLevel, selectedLayer, selectedFace, format);
1587      const dst = new Uint8Array(dstSize);
1588
1589      // Reuse the shared decode-flag composer (DDS ignores the ETC1S/XUASTC-specific
1590      // bits; deblocking defaults to off for these formats, which is correct).
1591      var flags = composeTranscodeDecodeFlags(tex_block_width, tex_block_height);
1592
1593      const startTime = performance.now();
1594
1595      if (!ddsFile.transcodeImageWithFlags(dst, selectedLevel, selectedLayer, selectedFace, format, flags, -1, -1))
1596      {
1597         updateErrorLine('ddsFile.transcodeImageWithFlags failed');
1598         log('ddsFile.transcodeImageWithFlags failed');
1599         console.warn('transcodeImageWithFlags failed');
1600         ddsFile.close();
1601         ddsFile.delete();
1602         return;
1603      }
1604
1605      const elapsed = performance.now() - startTime;
1606      g_transcodingTime = elapsed;
1607
1608      descString += '\nTexture Size: ' + baseWidth + 'x' + baseHeight + ', Levels: ' + levels + ', Layers: ' + layers + ', Faces: ' + faces + ', sRGB: ' + tex_is_srgb + ', alpha: ' + tex_has_alpha;
1609      descString += '\nViewing: Mip ' + selectedLevel + ' (' + width + 'x' + height + ') Face ' + selectedFace + ' Layer ' + selectedLayer;
1610      descString += '\nTranscode time: ' + g_transcodingTime.toFixed(3) + 'ms';
1611      elem('format').innerText = descString;
1612
1613      ddsFile.close();
1614      ddsFile.delete();
1615
1616      log('width: ' + width);
1617      log('height: ' + height);
1618      log('has_alpha: ' + tex_has_alpha);
1619      log('is_srgb: ' + tex_is_srgb);
1620      log('dstBlockWidth: ' + dstBlockWidth);
1621      log('dstBlockHeight: ' + dstBlockHeight);
1622      log('levels: ' + levels);

1623      log('layers: ' + layers);
1624      log('faces: ' + faces);
1625      logTime('transcoding time', elapsed.toFixed(3));
1626
1627      alignedWidth = Math.floor((width + dstBlockWidth - 1) / dstBlockWidth) * dstBlockWidth;
1628      alignedHeight = Math.floor((height + dstBlockHeight - 1) / dstBlockHeight) * dstBlockHeight;
1629
1630      displayWidth = alignedWidth;
1631      displayHeight = alignedHeight;
1632
1633      setCanvasSize(alignedWidth, alignedHeight);
1634
1635      var force_srgb_sampling = false;
1636
1637      if (format === BASIS_FORMAT.cTFASTC_4x4)
1638      {
1639         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_4x4_KHR + (tex_is_srgb ? 0x20 : 0));
1640         force_srgb_sampling = tex_is_srgb;
1641      }
1642      else if ((format === BASIS_FORMAT.cTFBC1) || (format === BASIS_FORMAT.cTFBC3) || (format === BASIS_FORMAT.cTFBC7) ||
1643               (format === BASIS_FORMAT.cTFBC4) || (format === BASIS_FORMAT.cTFBC5))
1644      {
1645         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
1646      }
1647      else if (format === BASIS_FORMAT.cTFETC1)
1648      {
1649         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_ETC1_WEBGL);
1650      }
1651      else if (format === BASIS_FORMAT.cTFETC2)
1652      {
1653         // ETC2 RGBA (non-sRGB, matching the BC/UNORM path); 16 bytes/block.
1654         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA8_ETC2_EAC);
1655      }
1656      else if (format === BASIS_FORMAT.cTFETC2_EAC_R11)
1657      {
1658         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_R11_EAC);
1659      }
1660      else if (format === BASIS_FORMAT.cTFETC2_EAC_RG11)
1661      {
1662         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RG11_EAC);
1663      }
1664      else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGB)
1665      {
1666         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_PVRTC_4BPPV1_IMG);
1667      }
1668      else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGBA)
1669      {
1670         tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_PVRTC_4BPPV1_IMG);
1671      }
1672      else
1673      {
1674         // Uncompressed 32-bit RGBA (no block alignment)
1675         displayWidth = width;
1676         displayHeight = height;
1677         setCanvasSize(width, height);
1678         tex = renderer.createRgbaTexture(dst, width, height);
1679      }
1680
1681      linearToSRGBFlag = (force_srgb_sampling != 0);
1682      elem('linear_to_srgb').innerText = linearToSRGBFlag ? 'Enabled' : 'Disabled';
1683
1684      redraw();
1685
1686      // Tri-state: mark DDS as the active source and clear any KTX2 source. Done on the
1687      // success path only, so a failed load leaves the previously-loaded source intact.
1688      curLoadedDDSData = data;
1689      curLoadedDDSURI = uri;
1690      curLoadedKTX2Data = null;
1691      curLoadedKTX2URI = null;
1692      updateLoadedFormatDisplay();
1693   }
1694
1695   function download_file(filename, body)
1696   {
1697      var element = document.createElement('a');
1698
1699      //element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
1700
1701      const blob = new Blob([body]);
1702      const url = URL.createObjectURL(blob);
1703      element.setAttribute('href', url);
1704
1705      element.setAttribute('download', filename);
1706
1707      element.style.display = 'none';
1708      document.body.appendChild(element);
1709
1710      element.click();
1711
1712      URL.revokeObjectURL(url);
1713
1714      document.body.removeChild(element);
1715   }
1716
1717   var encodedKTX2File;
1718
1719   function resetDrawSettings()
1720   {
1721      drawMode = 0;
1722      updateViewModeButtons();
1723
1724      linearToSRGBFlag = false;
1725      elem('linear_to_srgb').innerText = linearToSRGBFlag ? 'Enabled' : 'Disabled';
1726
1727//         drawScale = 1.0;
1728//         elem('scale-slider').value = .5;
1729//         elem('scale-value').textContent = 1;
1730
1731      ldrHDRUpconversionScale = 1.0;
1732   }
1733
1734   function getFileExtension(url)
1735   {
1736      const lastDotIndex = url.lastIndexOf('.');
1737      if (lastDotIndex === -1)
1738         return null; // No extension found
1739      const extension = url.substring(lastDotIndex + 1);
1740
1741      // Remove any query parameters or fragments from the extension and convert to lowercase
1742      const cleanExtension = extension.split(/[\?#]/)[0].toLowerCase();
1743
1744      return cleanExtension;
1745   }
1746
1747   // -----------------------------------------------------------------------
1748   // Browser-assisted image loading for formats the Basis library can't
1749   // decode natively (WebP, AVIF, GIF, BMP, ...).
1750   // The browser decodes the image and we extract raw 32-bit RGBA pixels,
1751   // which the encoder accepts via its cRGBA32 image type.

1752   // Only used for LDR/SDR content. HDR files (.EXR, .HDR) must be loaded
1753   // by the library directly.
1754   // -----------------------------------------------------------------------
1755
1756   // Extensions the Basis Universal library decodes internally.
1757   const BASISU_NATIVE_EXTENSIONS = new Set([
1758      'png', 'jpg', 'jpeg', 'jfif',   // LDR
1759      'qoi',                           // LDR (decoded by the library)
1760      'exr', 'hdr',                    // HDR
1761      'ktx2'                           // handled separately
1762   ]);
1763
1764   // Map extensions the *browser* can typically decode to their MIME types.
1765   const BROWSER_IMAGE_MIME_TYPES = {
1766      'webp': 'image/webp',
1767      'avif': 'image/avif',
1768      'bmp':  'image/bmp',
1769      'gif':  'image/gif',
1770      'tif':  'image/tiff',
1771      'tiff': 'image/tiff',
1772      'jxl':  'image/jxl',
1773      'heic': 'image/heic',
1774      'heif': 'image/heif',
1775   };
1776
1777   // Returns true when the file extension is NOT handled by the Basis
1778   // library but IS a recognized image format the browser might decode.
1779   function needsBrowserDecode(ext)
1780   {
1781      if (!ext) return false;
1782      var lower = ext.toLowerCase();
1783      return !BASISU_NATIVE_EXTENSIONS.has(lower) && (lower in BROWSER_IMAGE_MIME_TYPES);
1784   }
1785
1786   // Decode an image file's ArrayBuffer through the browser's built-in
1787   // codecs and return raw 32-bit RGBA pixel data suitable for the
1788   // encoder's cRGBA32 mode.
1789   //
1790   // Returns a Promise resolving to { rgbaU8: Uint8Array, width, height }.
1791   //
1792   // We use a throw-away WebGL context for pixel read-back instead of
1793   // Canvas 2D because Canvas 2D always premultiplies alpha internally,
1794   // which destroys RGB values on semi-transparent pixels.  The WebGL
1795   // path keeps straight alpha throughout so the output is bit-exact.
1796   //
1797   // Per the WebGL spec, UNPACK_PREMULTIPLY_ALPHA_WEBGL and
1798   // UNPACK_FLIP_Y_WEBGL are IGNORED for ImageBitmap uploads --
1799   // alpha and orientation must be set via createImageBitmap() options.
1800   function browserDecodeToRGBA(arrayBuffer, fileName)
1801   {
1802      var ext = getFileExtension(fileName);
1803      var mime = BROWSER_IMAGE_MIME_TYPES[ext] || ('image/' + ext);
1804      var blob = new Blob([arrayBuffer], { type: mime });
1805
1806      // premultiplyAlpha:'none' -> straight alpha, lossless.
1807      return createImageBitmap(blob, {
1808         premultiplyAlpha: 'none'
1809      }).then(function (bitmap)
1810      {
1811         var w = bitmap.width;
1812         var h = bitmap.height;
1813
1814         if (!w || !h)
1815         {
1816            bitmap.close();
1817            throw 'Browser decoded a 0\u00d70 image from ' + fileName;
1818         }
1819
1820         var canvas = document.createElement('canvas');
1821         canvas.width = w;
1822         canvas.height = h;
1823         var gl = canvas.getContext('webgl', {
1824            alpha: true,
1825            premultipliedAlpha: false
1826         });
1827         if (!gl)
1828         {
1829            bitmap.close();
1830            throw 'Could not create WebGL context for pixel read-back';
1831         }
1832
1833         var tex = gl.createTexture();
1834         gl.bindTexture(gl.TEXTURE_2D, tex);
1835         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmap);
1836         bitmap.close();
1837
1838         var fb = gl.createFramebuffer();
1839         gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
1840         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
1841
1842         var pixels = new Uint8Array(w * h * 4);
1843         gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
1844
1845         gl.deleteFramebuffer(fb);
1846         gl.deleteTexture(tex);
1847         var lose = gl.getExtension('WEBGL_lose_context');
1848         if (lose) lose.loseContext();
1849
1850         return { rgbaU8: pixels, width: w, height: h };
1851      });
1852   }
1853
1854   function getETC1SCompLevel()
1855   {
1856      var slider = document.getElementById('etc1s-comp-level-slider'); // Get the slider element
1857      var compLevel = parseInt(slider.value, 10);  // Convert the slider value to an integer
1858      return compLevel;
1859   }
1860
1861   // UASTC HDR effort (it's misnamed "quality" in the API for backwards compat)
1862   function getUASTCHDRQuality()
1863   {
1864      var slider = document.getElementById('uastc-hdr-quality-slider'); // Get the slider element
1865      var qualityLevel = parseInt(slider.value, 10);  // Convert the slider value to an integer
1866      return qualityLevel;
1867   }
1868
1869   function getASTCHDR6x6CompLevel()
1870   {

1871      var slider = document.getElementById('astc-hdr6x6-comp-level-slider');
1872      var compLevel = parseInt(slider.value, 10);  // Convert the slider value to an integer
1873      return compLevel;
1874   }
1875
1876   function getUASTCLDRQuality()
1877   {
1878      var slider = document.getElementById('uastc-ldr-quality-slider'); // Get the slider element
1879      var qualityLevel = parseInt(slider.value, 10);  // Convert the slider value to an integer
1880      return qualityLevel;
1881   }
1882
1883   function getUASTCLDRRDOQuality()
1884   {
1885      var rdoSlider = document.getElementById('rdo-quality-slider'); // Get the slider element
1886      var rdoQuality = parseFloat(rdoSlider.value);  // Convert the slider value to a floating-point number
1887      return rdoQuality;  // Return the current value
1888   }
1889
1890   function getXUASTCLDREffortLevel()
1891   {
1892      var slider = document.getElementById('xuastc_ldr_effort_level_slider');
1893      var effortLevel = parseInt(slider.value, 10);  // Convert the slider value to an integer
1894
1895      return effortLevel;
1896   }
1897
1898   function getXUBC7RDOLevel()
1899   {
1900      var slider = document.getElementById('xubc7_rdo_level_slider');
1901      var rdoLevel = parseInt(slider.value, 10);  // [0,100], 0 = no RDO
1902      return rdoLevel;
1903   }
1904
1905   function getXUBC7NumStripes()
1906   {
1907      var slider = document.getElementById('xubc7_num_stripes_slider');
1908      var numStripes = parseInt(slider.value, 10);  // [1,16]
1909      return numStripes;
1910   }
1911
1912   function getXUBC7Encoder()
1913   {
1914      var sel = document.getElementById('xubc7_encoder_select');
1915      return parseInt(sel.value, 10);  // 0 = bc7f, 1 = bc7e_scalar
1916   }
1917
1918   function getXUBC7BC7EScalarLevel()
1919   {
1920      var slider = document.getElementById('xubc7_bc7e_scalar_level_slider');
1921      return parseInt(slider.value, 10);  // [0,6]
1922   }
1923
1924   // Snapshot ALL encode inputs into a plain, structured-clone-able DTO for the
1925   // background encode worker (see the encode-worker migration). Every enum is
1926   // resolved to an int here on the main thread -- the worker's separate module
1927   // instance uses the SAME build, so the int values are identical and the worker
1928   // never needs an enum object. The caller passes the already-resolved formatMode
1929   // (the HDR-source override + dropdown mutation stays on the main thread) plus
1930   // the source context. The source bytes are referenced as-is: posting the DTO
1931   // WITHOUT a transfer list structure-clones (copies) them, so the retained
1932   // curLoadedImageData / curLoadedBrowserRGBA stay valid for re-encodes.
1933   //
1934   // This mirrors the inline encode path's reads exactly (same elem()/getX()
1935   // helpers), so the two stay value-for-value identical. Currently UNWIRED --
1936   // it's the payload builder for the worker path; the legacy path is untouched.
1937   // Reads the 4 channel-swizzle inputs (the source channel index for each output channel R,G,B,A),
1938   // each clamped to an integer in [0,3]. Default is identity [0,1,2,3] (no swizzle).
1939   function getSwizzle()
1940   {
1941      function s(id) { return Math.max(0, Math.min(3, parseInt(elem(id).value, 10) || 0)); }
1942      return [s('swizzle_r'), s('swizzle_g'), s('swizzle_b'), s('swizzle_a')];
1943   }
1944
1945   function buildEncodeDTO(formatMode, extension, fileData, browserDecodedRGBA, isHDRSourceFile)
1946   {
1947      const isHDRTarget = Module.isBasisTexFormatHDR(formatMode);
1948
1949      // ---- source image: pre-decoded RGBA, or raw file bytes the encoder
1950      //      decodes itself (img_type tells it the format; dims 0,0) ----
1951      let source;
1952      if (browserDecodedRGBA)
1953      {
1954         // browser-decoded (WebP/AVIF/etc.): always LDR 8-bit RGBA
1955         source = {
1956            isPreDecodedRGBA: true,
1957            isHDRTarget: isHDRTarget,
1958            bytes: browserDecodedRGBA.rgbaU8,
1959            width: browserDecodedRGBA.width,
1960            height: browserDecodedRGBA.height,
1961            imgType: isHDRTarget ? Module.hdr_image_type.cHITRGBA8Image.value
1962                                 : Module.ldr_image_type.cRGBA32.value,
1963            convertLDRToLinear: elem('ConvertLDRToLinear').checked,
1964            nitMultiplier: getNitMultiplier()
1965         };
1966      }
1967      else if (isHDRTarget)
1968      {
1969         let imgType = Module.hdr_image_type.cHITPNGImage.value;
1970         if (extension === "exr") imgType = Module.hdr_image_type.cHITEXRImage.value;
1971         else if (extension === "hdr") imgType = Module.hdr_image_type.cHITHDRImage.value;
1972         else if (extension === "jpg" || extension === "jpeg" || extension === "jfif") imgType = Module.hdr_image_type.cHITJPGImage.value;
1973         else if (extension === "qoi") imgType = Module.hdr_image_type.cHITQOIImage.value;
1974         source = {
1975            isPreDecodedRGBA: false, isHDRTarget: true,
1976            bytes: new Uint8Array(fileData), width: 0, height: 0, imgType: imgType, // matches legacy's new Uint8Array(data)
1977            convertLDRToLinear: elem('ConvertLDRToLinear').checked,
1978            nitMultiplier: getNitMultiplier()
1979         };
1980      }
1981      else
1982      {
1983         let imgType = Module.ldr_image_type.cPNGImage.value;
1984         if (extension === "jpg" || extension === "jpeg" || extension === "jfif") imgType = Module.ldr_image_type.cJPGImage.value;
1985         else if (extension === "qoi") imgType = Module.ldr_image_type.cQOIImage.value;
1986         source = {
1987            isPreDecodedRGBA: false, isHDRTarget: false,
1988            bytes: new Uint8Array(fileData), width: 0, height: 0, imgType: imgType, // matches legacy's new Uint8Array(data)
1989            convertLDRToLinear: false, nitMultiplier: 1.0
1990         };
1991      }
1992
1993      const sRGB_flag = elem('SRGB').checked;
1994
1995      return {
1996         source: source,
1997
1998         // container / threading
1999         multithreaded: elem('multithreaded_encoding').checked,
2000         numWorkerThreads: getNumWorkerThreads(),
2001         createKTX2: true,
2002         ktx2UASTCSupercompression: true,
2003
2004         // color / transfer
2005         sRGB: sRGB_flag,
2006         isHDRSourceFile: isHDRSourceFile, // gates setKTX2AndBasisSRGBTransferFunc
2007         rec2020: elem('Rec2020').checked,
2008
2009         // format + quality/effort
2010         formatMode: formatMode,
2011         isXUASTCLDRTarget: Module.isBasisTexFormatXUASTCLDR(formatMode), // resolved here so applyEncodeDTO stays Module-free
2012         isXUBC7Target: (formatMode === Module.basis_tex_format.cXUBC7.value),
2013         // Two INDEPENDENT signals, mirroring the legacy path exactly:
2014         //  lowLevelOptsEnabled = run the low-level codec block (legacy: unified checkbox OFF)
2015         //  applyUnified        = run setFormatModeAndQualityEffort (legacy: checkbox ON *or* XUBC7 forces it)
2016         // Both can be true at once (XUBC7 + checkbox-off: low-level block runs, then unified overrides).
2017         lowLevelOptsEnabled: !elem('use_new_style_quality_effort').checked,
2018         applyUnified: elem('use_new_style_quality_effort').checked || (formatMode === Module.basis_tex_format.cXUBC7.value),
2019         unifiedQuality: parseInt(document.getElementById('unified-quality-slider').value, 10),
2020         unifiedEffort: parseInt(document.getElementById('unified-effort-slider').value, 10),
2021
2022         // low-level codec opts (applied only when lowLevelOptsEnabled, i.e. unified checkbox off)
2023         uastcHDRQuality: getUASTCHDRQuality(),
2024         astcHDR6x6Level: getASTCHDR6x6CompLevel(),
2025         astc6x6Lambda: getASTC6x6RDOLambda(),
2026         xuastcDCTQuality: getXUASTCLDRDCTQuality(), // worker: setQualityLevel+UseDCT when <100
2027         etc1sQuality: parseInt(elem('EncodeQuality').value, 10),
2028         xuastcLossySupercompression: elem('XUASTCLossySupercompression').checked,
2029         astcXuastcEffortLevel: getXUASTCLDREffortLevel(),
2030         rdoUASTC: elem('UASTC_LDR_RDO').checked,
2031         rdoUASTCQualityScalar: getUASTCLDRRDOQuality(),
2032         packUASTCFlags: getUASTCLDRQuality(),
2033         etc1sCompLevel: getETC1SCompLevel(),
2034
2035         // always-applied opts (regardless of the unified/low-level toggle)
2036         xuastcBoundedRDO: [
2037            getSafeFloat("xuastc_ldr_min_psnr"), getSafeFloat("xuastc_ldr_min_alpha_psnr"),
2038            getSafeFloat("xuastc_ldr_thresh_psnr"), getSafeFloat("xuastc_ldr_thresh_alpha_psnr"),
2039            getSafeFloat("xuastc_ldr_thresh_edge_psnr"), getSafeFloat("xuastc_ldr_thresh_edge_alpha_psnr")
2040         ],
2041         xuastcDisableRGBDualPlane: elem('XUASTCDisableRGBDualPlane').checked,
2042         xuastcDisableSubsets: elem('XUASTCDisableSubsets').checked,
2043         xuastcUseBlur: elem('XUASTCUseBlur').checked,
2044         xuastcSelectCompressor: Module.xuastc_ldr_astc_comp_selection[elem('XUASTCLDRCompressor').value].value,
2045         xuastcHeavySubsetUsage: elem('XUASTCHeavySubsetUsage').checked,

2046         xuastcSharpenMode: Number(document.getElementById("XUASTCSharpenMode").value),
2047         xuastcSharpenAmount: parseFloat(elem('XUASTCSharpenAmount').value) || 0.0,
2048         xuastcDeblockingMode: Number(document.getElementById("encoding_deblocking_filter_select").value),
2049         xuastcNumDeblockingPasses: getDeblockingNumPasses(),
2050         weights: [
2051            Math.max(1, Math.min(32, parseInt(elem('xuastc_ldr_weight_r').value, 10) || 1)),
2052            Math.max(1, Math.min(32, parseInt(elem('xuastc_ldr_weight_g').value, 10) || 1)),
2053            Math.max(1, Math.min(32, parseInt(elem('xuastc_ldr_weight_b').value, 10) || 1)),
2054            Math.max(1, Math.min(32, parseInt(elem('xuastc_ldr_weight_a').value, 10) || 1))
2055         ],
2056         swizzle: getSwizzle(),
2057         xuastcSyntax: getXUASTCLDRSyntax(),
2058         xubc7RDOLevel: getXUBC7RDOLevel(),
2059         xubc7NumStripes: getXUBC7NumStripes(),
2060         xubc7Encoder: getXUBC7Encoder(),
2061         xubc7BC7EScalarLevel: getXUBC7BC7EScalarLevel(),
2062
2063         // mipmaps + debug
2064         mipGen: elem('Mipmaps').checked,
2065         mipFilter: parseInt(elem('mip-filter-select').value, 10),
2066         mipScale: parseFloat(elem('mip-scale-input').value) || 1.0,
2067         mipSmallestDim: parseInt(elem('mip-smallest-dim-input').value, 10) || 1,
2068         mipRenormalize: elem('MipRenormalize').checked,
2069         mipWrapping: elem('MipWrapping').checked,
2070         yFlip: elem('YFlip').checked,
2071         debug: elem('Debug').checked,
2072         computeStats: elem('ComputeStats').checked,
2073         printStats: elem('PrintStats').checked
2074      };
2075   }
2076
2077   // applyEncodeDTO(encoder, dto) now lives in the shared file encode_dto_apply.js
2078   // (loaded via 

2078<script src> on the page and importScripts() in the encode worker,
2079   // so there is a single definition for both the non-worker and worker paths).
2080
2081   // ENCODE WORKER (persistent singleton). The threaded encoder module is created
2082   // and initialized ONCE (lazily, on first use) and reused for every encode -- the
2083   // module load is costly, so we never recreate it (and a future cancel will be a
2084   // synchronous in-encoder callback, not a respawn). encodeViaWorker() builds a DTO
2085   // from the currently loaded source + settings, sends it to the worker, and when
2086   // the worker returns the encoded KTX2 bytes the page processes them through the
2087   // SAME path as a normal encode (store + transcodeTexture + UI update).
2088   let g_encodeWorker = null;         // persistent worker (null until first use)
2089   let g_encodeWorkerLoaded = false;  // module loaded + initialized in the worker
2090   let g_encodeWorkerOnReady = null;  // fired once when the worker becomes ready
2091   let g_encodeWorkerWatchdog = null; // load-time hang detector only
2092
2093   // The worker can flood us with print lines (esp. with debug on). Buffer them and
2094   // flush to the DOM at most every ~100ms instead of writing on every message.
2095   let g_encodeBusyLogBuffer = '';
2096   let g_encodeBusyFlushTimer = null;
2097
2098   // ---- worker-encode busy modal (truly modal via <dialog>.showModal()) ----
2099   function showEncodeBusy()
2100   {
2101      const dlg = document.getElementById('encode-busy-dialog');
2102      const prog = document.getElementById('encode-busy-progress');
2103      const logEl = document.getElementById('encode-busy-log');
2104      const closeBtn = document.getElementById('encode-busy-close');
2105      const autoCloseChk = document.getElementById('encode-busy-autoclose');
2106      const autoCloseDefault = document.getElementById('encode-modal-autoclose');
2107      if (prog) prog.removeAttribute('value'); // indeterminate "busy" bar (set .value later for real %)
2108      if (logEl) logEl.textContent = '';        // clear the previous run's output
2109      g_encodeBusyLogBuffer = '';               // drop any leftover buffered text
2110      if (g_encodeBusyFlushTimer !== null) { clearTimeout(g_encodeBusyFlushTimer); g_encodeBusyFlushTimer = null; }
2111      if (closeBtn) closeBtn.disabled = true;   // grayed out (and ESC blocked) until the encode finishes
2112      if (autoCloseChk && autoCloseDefault) autoCloseChk.checked = autoCloseDefault.checked; // seed from the page default
2113      if (dlg && !dlg.open) dlg.showModal();
2114   }
2115   // Write the buffered text to the log in one go (called on a ~100ms timer and on finish).
2116   function flushEncodeBusyLog()
2117   {
2118      if (g_encodeBusyFlushTimer !== null) { clearTimeout(g_encodeBusyFlushTimer); g_encodeBusyFlushTimer = null; }
2119      if (!g_encodeBusyLogBuffer) return;
2120      const logEl = document.getElementById('encode-busy-log');
2121      if (logEl)
2122      {
2123         // Only auto-scroll if the user is already at (or near) the bottom; if they've scrolled
2124         // up to read earlier text, leave their position alone so new output doesn't yank it.
2125         const atBottom = (logEl.scrollHeight - logEl.scrollTop - logEl.clientHeight) <= 4;
2126         logEl.textContent += g_encodeBusyLogBuffer;
2127         if (atBottom)
2128            logEl.scrollTop = logEl.scrollHeight; // follow the latest line
2129      }
2130      g_encodeBusyLogBuffer = '';
2131   }
2132   function appendEncodeBusyLog(text)
2133   {
2134      // Buffer the line; schedule a single flush ~100ms out (coalesces a flood into
2135      // ~10 DOM updates per second).
2136      g_encodeBusyLogBuffer += text + '\n';
2137      if (g_encodeBusyFlushTimer === null)
2138         g_encodeBusyFlushTimer = setTimeout(flushEncodeBusyLog, 100);
2139   }
2140   // Called when a worker encode finishes (success or error). Default: auto-close.
2141   // If the user UNchecked "Automatically close when done", leave the dialog up with
2142   // an OK button so they can study the log (useful for long/debug encodes).
2143   function finishEncodeBusy()
2144   {
2145      document.body.style.cursor = ''; // clear the DDS busy cursor (no-op if it wasn't set)
2146
2147      flushEncodeBusyLog(); // drain any buffered tail so the full log is visible
2148
2149      // Encode finished: enable the Close button (+ allow ESC) and stop the busy bar.
2150      const closeBtn = document.getElementById('encode-busy-close');
2151      const prog = document.getElementById('encode-busy-progress');
2152      if (closeBtn) closeBtn.disabled = false;

2153      if (prog) { prog.max = 1; prog.value = 1; } // show "done" (full, stops the busy animation)
2154
2155      const autoCloseChk = document.getElementById('encode-busy-autoclose');
2156      if (!autoCloseChk || autoCloseChk.checked)
2157         hideEncodeBusy(); // default behaviour: close automatically
2158      // else: leave the dialog up; the now-enabled Close button (or ESC) dismisses it
2159   }
2160   function hideEncodeBusy()
2161   {
2162      document.body.style.cursor = ''; // ensure the busy cursor is cleared on every close path (watchdog/onerror/manual)
2163      const dlg = document.getElementById('encode-busy-dialog');
2164      if (dlg && dlg.open) dlg.close();
2165   }
2166
2167   // Process KTX2 bytes from an encode exactly like the normal encode button:
2168   // store them (download button reads encodedKTX2File) + transcode + update the UI.
2169   function handleEncodedKTX2(ktx2Bytes)
2170   {
2171      const n = ktx2Bytes ? ktx2Bytes.length : 0;
2172      if (n === 0)
2173      {
2174         updateErrorLine('Image is invalid or unsupported, or it may be too large to compress in WASM without risking running out of memory.');
2175         log('encodeBasisTexture() failed!');
2176         return;
2177      }
2178      log('encodeBasisTexture() succeeded, output size ' + n);
2179      encodedKTX2File = ktx2Bytes;   // same global the legacy path sets
2180      transcodeTexture(ktx2Bytes);   // same transcode + display + UI as a normal encode
2181   }
2182
2183   // Process .DDS bytes from a worker DDS-encode: display them through the SAME path a
2184   // loaded-from-disk .dds takes (transcodeDDSTexture), so the result appears exactly as if
2185   // the user had just opened this .dds file. Optionally also downloads it.
2186   function handleEncodedDDS(ddsBytes)
2187   {
2188      const n = ddsBytes ? ddsBytes.length : 0;
2189      if (n === 0)
2190      {
2191         updateErrorLine('DDS encode produced no data — the source or chosen format may be unsupported.');
2192         log('encodeToDDS() failed!');
2193         return;
2194      }
2195      log('encodeToDDS() succeeded, output size ' + n);
2196
2197      const fmtName = ddsEncodeFormatName();
2198      const filename = 'encoded_' + fmtName + '.dds';
2199
2200      // Display it through the SAME well-tested path a loaded-from-disk .dds takes. The result also
2201      // becomes the current .dds source, so the "Download Encoded .KTX2/.DDS File" button saves it.
2202      transcodeDDSTexture(ddsBytes, filename);
2203
2204      // Optionally auto-download the encoded .dds (the "Download encoded .DDS file when done" checkbox).
2205      var dl = document.getElementById('dds-encode-download');
2206      if (dl && dl.checked)
2207         download_file(filename, ddsBytes);
2208   }
2209
2210   // Create the worker + load the module ONCE; call onReady() when ready (immediately
2211   // if already loaded). The worker is never terminated.
2212   function ensureEncodeWorker(onReady)
2213   {
2214      if (g_encodeWorker && g_encodeWorkerLoaded) { onReady(); return; }
2215
2216      g_encodeWorkerOnReady = onReady; // latest caller wins if clicked again mid-load
2217
2218      if (g_encodeWorker) return; // already created and still loading; onReady fires on 'loaded'
2219
2220      const scriptSrc = (window.wasm64 && window.isThreaded) ? "../encoder/build/basis_encoder_threads_wasm64.js" :
2221                        (window.isThreaded ? "../encoder/build/basis_encoder_threads.js" : "../encoder/build/basis_encoder.js");
2222
2223      console.log("encodeWorker: creating worker (one-time), scriptSrc=" + scriptSrc);
2224
2225      const t0 = performance.now();
2226      g_encodeWorker = new Worker('encode-worker.js');
2227
2228      g_encodeWorkerWatchdog = setTimeout(function ()
2229      {
2230         hideEncodeBusy();
2231         console.warn('encodeWorker: no loaded/error after 20s -- likely a pthread-spawn hang (check mainScriptUrlOrBlob / COOP+COEP)');
2232      }, 20000);
2233
2234      const clearWatchdog = function () { if (g_encodeWorkerWatchdog) { clearTimeout(g_encodeWorkerWatchdog); g_encodeWorkerWatchdog = null; } };
2235
2236      g_encodeWorker.onmessage = function (e)
2237      {
2238         const msg = e.data || {};
2239         if (msg.type === 'loaded')
2240         {
2241            clearWatchdog();
2242            g_encodeWorkerLoaded = true;
2243            console.log('%cencodeWorker: ' + msg.text + '  (' + (performance.now() - t0).toFixed(0) + ' ms)', 'color:#0a0;font-weight:bold');
2244            if (g_encodeWorkerOnReady) { const cb = g_encodeWorkerOnReady; g_encodeWorkerOnReady = null; cb(); }
2245         }
2246         else if (msg.type === 'print')
2247         {
2248            // worker stdout/stderr -> live modal log + console (streams during encode)
2249            appendEncodeBusyLog(msg.text);
2250            console.log(msg.text);
2251         }
2252         else if (msg.type === 'encoded')
2253         {
2254            console.log('%cencodeWorker: ' + msg.text, 'color:#0a0;font-weight:bold');
2255
2256            // mirror the main-thread path's UI updates so the display is identical:
2257            // encode time + mip0 PSNR feed the description string built in transcodeTexture.
2258            if (typeof msg.encodeMs === 'number') { g_lastEncodeTime = msg.encodeMs; logTime('encoding time', msg.encodeMs.toFixed(2)); }
2259            if (typeof msg.psnr === 'number') g_lastEncodeMip0RGBAPSNR = msg.psnr;
2260
2261            const bytes = new Uint8Array(msg.bytes); // KTX2 file, transferred back from the worker
2262            handleEncodedKTX2(bytes);                // process like a normal encode (sets encodedKTX2File + transcodeTexture)
2263
2264            finishEncodeBusy();                      // auto-close, or keep open if the user asked to
2265         }
2266         else if (msg.type === 'encodedDDS')
2267         {
2268            console.log('%cencodeWorker: ' + msg.text, 'color:#0a0;font-weight:bold');
2269
2270            if (typeof msg.encodeMs === 'number') { g_lastEncodeTime = msg.encodeMs; logTime('DDS encoding time', msg.encodeMs.toFixed(2)); }
2271
2272            const bytes = new Uint8Array(msg.bytes); // .DDS file, transferred back from the worker
2273            // finishEncodeBusy() MUST run even if the display (transcodeDDSTexture) throws, so the busy
2274            // cursor + modal are always cleared no matter how the encode/display turns out.
2275            try { handleEncodedDDS(bytes); }         // display it like a loaded .dds (+ optional download)
2276            finally { finishEncodeBusy(); }          // auto-close, or keep open if the user asked to
2277         }
2278         else if (msg.type === 'error')
2279         {
2280            clearWatchdog();
2281            appendEncodeBusyLog('ERROR: ' + msg.text);
2282            console.error('encodeWorker: ' + msg.text);
2283            // Surface the same on-page failure message the main-thread path shows, so a worker-side
2284            // encode failure (e.g. a bogus/unsupported image) isn't silent in the UI.

2285            updateErrorLine('Image is invalid or unsupported, or it may be too large to compress in WASM without risking running out of memory.');
2286            log('encodeBasisTexture() failed!');
2287            finishEncodeBusy();
2288         }
2289         else
2290            console.log('encodeWorker: ' + msg.text);
2291      };
2292
2293      g_encodeWorker.onerror = function (err)
2294      {
2295         clearWatchdog();
2296         hideEncodeBusy();
2297         console.error('encodeWorker: worker.onerror: ' + err.message + ' @ ' + err.filename + ':' + err.lineno);
2298      };
2299
2300      g_encodeWorker.postMessage({ type: 'init', scriptSrc: scriptSrc });
2301   }
2302
2303   // Worker-encode the CURRENTLY loaded source (curLoaded* must be set): build the
2304   // DTO, show the modal, and post to the persistent worker. Shared by the "Encode!"
2305   // button (already-loaded case) and the auto-load path (compressImage routes here
2306   // for worker mode).
2307   function encodeViaWorkerCore()
2308   {
2309      if (!curLoadedImageData && !curLoadedBrowserRGBA)
2310      {
2311         console.warn('encodeViaWorkerCore: no source loaded');
2312         return;
2313      }
2314
2315      // Match the main encode path: optionally clear the devtools console first.
2316      const clearConsoleEl = document.getElementById('clear-console-on-encode');
2317      if (clearConsoleEl && clearConsoleEl.checked && typeof console.clear === 'function')
2318         console.clear();
2319
2320      const ext = curLoadedImageURI ? getFileExtension(curLoadedImageURI) : null;
2321      const isHDRSrc = (ext != null) && (ext === "exr" || ext === "hdr");
2322
2323      // Same HDR-source override as the main path: an HDR source file forces a HDR
2324      // format (and updates the dropdown).
2325      let fmt = getSelectedBasisTexFormat();
2326      if (Module.isBasisTexFormatLDR(fmt) && isHDRSrc)
2327      {
2328         fmt = Module.basis_tex_format.cUASTC_HDR_4x4.value;
2329         setDropdownValue('basis-tex-format', fmt);
2330      }
2331
2332      const dto = buildEncodeDTO(fmt, ext, curLoadedImageData, curLoadedBrowserRGBA, isHDRSrc);
2333
2334      showEncodeBusy(); // modal up for the whole load(if first)+encode; hidden on encoded/error
2335
2336      ensureEncodeWorker(function ()
2337      {
2338         console.log('encodeViaWorker: sending DTO to worker (formatMode=' + fmt + ')...');
2339         g_encodeWorker.postMessage({ type: 'encode', dto: dto });
2340      });
2341   }
2342
2343   // "Encode!" button. Mirrors runEncodeImageFile: if a source is already loaded,
2344   // worker-encode it; otherwise load the file named in the imagefile box (e.g. the
2345   // default assets/kodim06.png on first run) and then worker-encode it.
2346   function encodeViaWorker()
2347   {
2348      if ((elem('imagefile').value === '<externally loaded>') && (curLoadedImageData != null))
2349      {
2350         encodeViaWorkerCore();
2351      }
2352      else
2353      {
2354         loadArrayBufferFromURI(elem('imagefile').value, function (d, u) { loadAndCompressImage(d, u, 'worker'); }, dataLoadError);
2355      }
2356   }
2357
2358   // --- DDS export (direct source -> .DDS, on the worker; mirrors the KTX2 worker path) ---
2359
2360   // Resolve the selected DDS output format dropdown (member name -> numeric dds_output_format).
2361   function getDDSEncodeFormatValue()
2362   {
2363      const name = document.getElementById('dds-encode-format').value; // e.g. "cDDSFmtBC7"
2364      if (Module.dds_output_format && Module.dds_output_format[name])
2365         return Module.dds_output_format[name].value;
2366      return -1; // cDDSFmtInvalid
2367   }
2368
2369   // Canonical token string for the selected format (for the output filename / log).
2370   function ddsEncodeFormatName()
2371   {
2372      const v = getDDSEncodeFormatValue();
2373      if ((v >= 0) && Module.getDDSOutputFormatString)
2374         return Module.getDDSOutputFormatString(v);
2375      return 'dds';
2376   }
2377
2378   // Worst-case .DDS output buffer size: the page only ever encodes a single 2D slice, and the
2379   // encoder caps total source texels (BASISU_ENCODER_MAX_SOURCE_IMAGE_PIXELS_HIGHER_LIMIT). The
2380   // largest possible output is 32bpp uncompressed + a full mip chain (~4/3x); 1.5x + 64KB gives
2381   // comfortable margin. This is a plain JS ArrayBuffer (not WASM memory), so it's cheap to allocate.
2382   function computeDDSBufferSize()
2383   {

2384      const maxTexels = window.wasm64 ? (16 * 1024 * 1024) : (12 * 1024 * 1024);
2385      return Math.ceil(maxTexels * 4 * 1.5) + 65536;
2386   }
2387
2388   // Worker-encode the CURRENTLY loaded source to .DDS (curLoaded* must be set). Builds the DTO
2389   // (reusing buildEncodeDTO), augments it with the DDS options, shows the modal, posts to the worker.
2390   function encodeDDSViaWorkerCore()
2391   {
2392      if (!curLoadedImageData && !curLoadedBrowserRGBA)
2393      {
2394         console.warn('encodeDDSViaWorkerCore: no source loaded');
2395         return;
2396      }
2397
2398      const clearConsoleEl = document.getElementById('clear-console-on-encode');
2399      if (clearConsoleEl && clearConsoleEl.checked && typeof console.clear === 'function')
2400         console.clear();
2401
2402      const ext = curLoadedImageURI ? getFileExtension(curLoadedImageURI) : null;
2403      const isHDRSrc = (ext != null) && (ext === "exr" || ext === "hdr");
2404
2405      // DDS export is LDR-only for now (HDR DDS formats / build_dds HDR path are a future addition).
2406      if (isHDRSrc)
2407      {
2408         updateErrorLine('DDS export is LDR-only for now; load an LDR image (PNG/JPG/WebP/etc).');
2409         return;
2410      }
2411
2412      const ddsFormat = getDDSEncodeFormatValue();
2413      if (ddsFormat < 0)
2414      {
2415         updateErrorLine('Please choose a valid DDS output format.');
2416         return;
2417      }
2418
2419      // Pass a plain LDR format mode to buildEncodeDTO so the source is treated as LDR. encodeToDDS()
2420      // chooses the real prep format internally (and restores it after), so this only affects how the
2421      // DTO selects the source image type (LDR vs HDR) -- not the actual DDS output.
2422      const ldrFmt = Module.basis_tex_format.cUASTC_LDR_4x4.value;
2423
2424      const dto = buildEncodeDTO(ldrFmt, ext, curLoadedImageData, curLoadedBrowserRGBA, false);
2425
2426      // DDS-specific fields consumed by applyDDSEncodeDTO() / the worker.
2427      dto.ddsFormat          = ddsFormat;
2428      dto.ddsBC7Encoder      = parseInt(document.getElementById('dds-encode-bc7-encoder').value, 10);
2429      dto.ddsBC7FLevel       = parseInt(document.getElementById('dds-encode-bc7f-level').value, 10);
2430      dto.ddsBC7EScalarLevel = parseInt(document.getElementById('dds-encode-bc7e-level').value, 10);
2431      dto.ddsBufferSize      = computeDDSBufferSize();
2432
2433      // Busy cursor for the whole DDS create (worker encode + the brief main-thread display that
2434      // follows). Cleared in finishEncodeBusy()/hideEncodeBusy() so it can never get stuck.
2435      document.body.style.cursor = 'wait';
2436
2437      showEncodeBusy(); // same modal/log window as the KTX2 encode
2438
2439      ensureEncodeWorker(function ()
2440      {
2441         console.log('encodeDDSViaWorker: sending DDS DTO to worker (ddsFormat=' + dto.ddsFormat + ')...');
2442         g_encodeWorker.postMessage({ type: 'encodeDDS', dto: dto });
2443      });
2444   }
2445
2446   // "Encode DDS!" button. Mirrors encodeViaWorker(): if a source image is already loaded, DDS-encode
2447   // it; otherwise load the file named in the imagefile box and then DDS-encode it.
2448   function encodeDDSViaWorker()
2449   {
2450      if ((elem('imagefile').value === '<externally loaded>') && (curLoadedImageData != null))
2451      {
2452         encodeDDSViaWorkerCore();
2453      }
2454      else
2455      {
2456         loadArrayBufferFromURI(elem('imagefile').value, function (d, u) { loadAndCompressImage(d, u, 'ddsworker'); }, dataLoadError);
2457      }
2458   }
2459
2460   function getXUASTCLDRDCTQuality()
2461   {
2462      var slider = document.getElementById('xuastc_ldr_dct_quality_slider');
2463      var effortLevel = parseInt(slider.value, 10);  // Convert the slider value to an integer
2464      return effortLevel;
2465   }
2466
2467   function getDeblockingNumPasses()
2468   {
2469      var slider = document.getElementById('deblocking-num-passes-slider');
2470      var n = parseInt(slider.value, 10);
2471      if (!isFinite(n)) n = 16;
2472      // Clamp to declared range [2, 256].
2473      if (n < 2) n = 2;
2474      if (n > 256) n = 256;
2475      return n;
2476   }
2477   // True for Apple Safari (any version, desktop or iOS). Excludes other engines
2478   // whose UA string also contains "Safari" (Chrome, Edge, Firefox-on-iOS, etc.).
2479   function isSafari()
2480   {
2481      var ua = navigator.userAgent || "";
2482      if (/chrome|chromium|crios|android|fxios|edg\/|opr\//i.test(ua)) return false;

2483      return /safari/i.test(ua);
2484   }
2485
2486   // Detects Safari 26.0-26.2, which have a WebKit bug where growing a shared
2487   // (multithreaded) WASM heap corrupts memory -> "Out of bounds memory access"
2488   // crashes during encoding. Fixed in Safari 26.3 (see emscripten issue #25905).
2489   // There's no clean feature-test (the bug is silent until a heap grow), so we
2490   // sniff the Safari version from the user-agent string.
2491   function isBuggySafari()
2492   {
2493      if (!isSafari()) return false;
2494      var m = (navigator.userAgent || "").match(/version\/(\d+)\.(\d+)/i);
2495      if (!m) return false;
2496      var major = parseInt(m[1], 10), minor = parseInt(m[2], 10);
2497      return (major === 26) && (minor < 3);   // 26.0, 26.1, 26.2
2498   }
2499
2500   // Returns the number of extra worker threads the encoder should ACTUALLY use
2501   // (0 = single-threaded). BOTH encode paths -- the main-thread path and the
2502   // background worker (via the DTO) -- call this, so any override here applies to
2503   // both. On the buggy Safari versions we force single-threaded regardless of the
2504   // UI controls, to avoid the multithreaded heap-grow crash.
2505   function getNumWorkerThreads()
2506   {
2507      if (isBuggySafari())
2508         return 0;
2509
2510      var slider = document.getElementById('num_worker_threads');
2511      var num = parseInt(slider.value, 10);  // Convert the slider value to an integer
2512
2513      num = Math.floor(num);
2514
2515      if (num < 0)
2516         num = 0;
2517      else if (num > MAX_WORKER_THREADS)
2518         num = MAX_WORKER_THREADS;
2519
2520      return num;
2521   }
2522
2523   function getSafeFloat(id, defaultValue = 0)
2524   {
2525      const v = parseFloat(document.getElementById(id).value);
2526      return Number.isFinite(v) ? v : defaultValue;
2527   }
2528
2529   // Wrapper suitable as a loadArrayBufferFromURI callback.
2530   // Checks whether the loaded file needs browser-assisted decoding
2531   // and, if so, decodes first before calling compressImage.
2532   // mode (optional): 'main' / 'worker' / undefined(=auto) -- forwarded to
2533   // compressImage to pick the encode path. Omitted on normal loads (auto: respects
2534   // the "Encode on worker thread by default" checkbox).
2535   function loadAndCompressImage(data, uri, mode)
2536   {
2537      var ext = getFileExtension(uri);
2538      if (needsBrowserDecode(ext))
2539      {
2540         log('Format ".' + ext + '" is not natively supported by Basis Universal; decoding via browser...');
2541
2542         browserDecodeToRGBA(data, uri).then(function (decoded)
2543         {
2544            log('Browser decode OK: ' + decoded.width + 'x' + decoded.height);
2545            compressImage(data, uri, decoded, mode);
2546         }).catch(function (err)
2547         {
2548            var msg = 'Failed to decode .' + ext + ' file. Your browser may not support this image format.';
2549            updateErrorLine(msg);
2550            log(msg);
2551            log('(' + err + ')');
2552         });
2553      }
2554      else
2555      {
2556         compressImage(data, uri, undefined, mode);
2557      }
2558   }
2559
2560   // mode: 'main' = force main-thread; 'worker' = force worker; undefined = auto
2561   // (respect the "Encode on worker thread by default" checkbox).
2562   function compressImage(data, uri, browserDecodedRGBA, mode)
2563   {
2564      // Dev option: clear the browser's devtools console on each new encode.
2565      // The null guard on the element and the function-type check on console.clear
2566      // are defensive — both should always be true in practice.
2567      const clearConsoleEl = document.getElementById('clear-console-on-encode');
2568      if (clearConsoleEl && clearConsoleEl.checked && typeof console.clear === 'function') {
2569         console.clear();
2570      }
2571      updateErrorLine("");
2572    
2573      logClear();
2574
2575      log('------');
2576      log('compressImage(): URI: ' + uri);
2577
2578      const { BasisFile, BasisEncoder, initializeBasis, encodeBasisTexture } = Module;
2579
2580      var extension = getFileExtension(uri);
2581
2582      resetDrawSettings();
2583
2584      initializeBasis();
2585
2586      curLoadedImageData = data;
2587      curLoadedImageURI = uri;
2588      curLoadedBrowserRGBA = browserDecodedRGBA || null;
2589      // An image is now the active source for encoding: drop any prior DDS source so a
2590      // failed encode (which never reaches transcodeTexture) can't leave the viewer stuck
2591      // in the DDS state and block re-encoding.
2592      curLoadedDDSData = null;
2593      curLoadedDDSURI = null;
2594      updateLoadedSourceDisplay();
2595
2596      // Route to the background worker for mode 'worker', or for auto (undefined)
2597      // when "Encode on worker thread by default" is checked. mode 'main' stays on
2598      // this (main-thread) path. curLoaded* are set above, so encodeViaWorkerCore()
2599      // has what it needs (it does its own HDR-source override + console clear).
2600      // DDS export goes through its own worker path (same machinery, encodeToDDS instead of encode).
2601      if (mode === 'ddsworker')
2602      {
2603         encodeDDSViaWorkerCore();
2604         return;
2605      }
2606
2607      const workerDefault = elem('encode-on-worker-default') && elem('encode-on-worker-default').checked;
2608      if ((mode === 'worker') || (mode !== 'main' && workerDefault))
2609      {
2610         encodeViaWorkerCore();
2611         return;
2612      }
2613
2614      // Create a destination buffer to hold the compressed .basis file data. If this buffer isn't large enough compression will fail.
2615      var ktx2FileData = new Uint8Array(1024 * 1024 * 24);
2616
2617      // Compress using the BasisEncoder class.
2618      log('BasisEncoder::encode() started:');
2619
2620      const basisEncoder = new BasisEncoder();
2621
2622      basisEncoder.controlThreading(elem('multithreaded_encoding').checked, getNumWorkerThreads());
2623
2624      var desiredBasisTexFormat = getSelectedBasisTexFormat();
2625
2626      const isHDRSourceFile = (extension != null) && (extension === "exr" || extension === "hdr");
2627
2628      if (Module.isBasisTexFormatLDR(desiredBasisTexFormat))
2629      {
2630         if (isHDRSourceFile)
2631         {
2632            log('Image is HDR - must encode to a HDR format. Defaulting to UASTC HDR 4x4.');
2633            desiredBasisTexFormat = Module.basis_tex_format.cUASTC_HDR_4x4.value;
2634
2635            setDropdownValue('basis-tex-format', Module.basis_tex_format.cUASTC_HDR_4x4.value);
2636         }
2637      }
2638
2639      basisEncoder.setCreateKTX2File(true);
2640      basisEncoder.setKTX2UASTCSupercompression(true);
2641
2642      // Consistently set sRGB related options
2643      var sRGB_flag = elem('SRGB').checked;
2644
2645      // We could also set setSRGBOptions() here. (The KTX2 sRGB transfer func setting will be ignored when writing HDR files, as it's always linear.)
2646      // sRGB colorspace metrics (used by some codecs, like ETC1S/UASTC)
2647      basisEncoder.setPerceptual(sRGB_flag);
2648
2649      if (!isHDRSourceFile)
2650      {
2651         // KTX2 DFD transfer function.