Add ktx

2026-06-14 19:09:18 +01:00
parent 14bd1a9271
commit 13fa90a0e9
3958 changed files with 999286 additions and 4 deletions
@@ -0,0 +1,186 @@
+<!doctype html>
+<!-- Copyright 2024 Mark Callow.
+     SPDX-License-Identifier: Apache-2.0 -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>libktx.js Demo with WebGL</title>
+    <link rel="stylesheet" href="../webgl.css" type="text/css">
+    <link rel="shortcut icon" href="../ktx_favicon.ico" type="image/x-icon" />
+    <style>
+      body {
+        /* Set margins to center the page. */
+        margin: 2em auto 2em auto;
+        max-width: 65em;
+      }
+      /* Center the canvas container too. */
+      #container {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        position: relative;
+        top: 0;
+        width: 100%;
+        height: 100vh;
+      }
+      #glcanvas {
+        border: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        z-index: -1;
+      }
+      #glcontent {
+        position: relative;
+        margin: 10px;
+      }
+      #panel {
+        color: white;
+        background-color:rgba(0.3, 0.3, 0.3, 0.3);
+        padding: 0.5em;
+        max-width: 65em;
+      }
+      .item {
+        display: inline-block;
+        margin: 1em;
+        padding: 1em;
+        background: transparent;
+        vertical-align: top;
+      }
+      .label {
+        margin-top: 0.5em;
+        width: 256px;
+      }
+      /*
+       * The size of an image is changed when it is added to the div
+       * styled by this. So the size needs to be a multiple of 4 for
+       * compatibility with various compressed texture formats in WebGL.
+       */
+      .view {
+        width: 256px;
+        height: 256px;
+        border: 1px solid black;
+      }
+      /* An img inside a .view should fill the view. */
+      .view img {
+         width: 100%;
+         height: 100%;
+      }
+      .pass {
+        color: green;
+      }
+      .fail {
+        color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="panel">
+      <h2>libktx Read-write Javascript Binding Test</h2>
+      <p>This tests the functionality of the read-write Javascript
+      binding for libktx, which has been compiled to Javascript using
+      Emscripten. Though loosely referred to as "write" the added
+      functionalty tested here is more about creating ktxTexture objects
+      from scratch than writing them out as files.
+      </p>
+      <p>Click the <i>Run Tests</i> button to run the tests.</p>
+      <p>The test reads a .png file then performs various operations
+      using the wrapper API including creating an uncompressed
+      ktxTexture2 object. The operations are shown in the list below.
+      </p>
+    </div>
+    <p id="test_ktx">
+      <input type="button" value="Run Tests" id='runtests' disabled='true'
+             onclick="runTests('ktx_app.png')">
+    </p>
+    <p>Create uncompressed ktxTexture2: <b id='create_result'></b></p>
+    <p>Copy input image to new texture: <b id='copy_image_result'></b></p>
+    <p>Check oetf and primaries are set correctly: <b id='colorspace_set_result'></b></p>
+    <p>Write and read metadata: <b id='metadata_result'></b></p>
+    <p>Get image from new texture: <b id='get_image_result'></b></p>
+    <p>Create copy of original texture: <b id='create_copy_result'></b></p>
+    <p>Compress ktxTexture2 with Basis: <b id='compress_basis_result'></b></p>
+    <p>Write KTX file to memory: <b id='write_to_memory_result'></b></p>
+    <p>Read KTX file from memory: <b id='read_from_memory_result'></b></p>
+    <p>ASTC inputSwizzle set: <b id ='swizzle_set_result'></b></p>
+    <p>Compress ktxTexture2 with ASTC: <b id='compress_astc_result'></b></p>
+    <div id="container">
+      <!-- <canvas id="glcanvas" width="1280" height="480"></canvas> -->
+      <canvas id="glcanvas"></canvas>
+      <div id="glcontent"></div>
+    </div>
+  </body>
+
+  <script src="../gl-matrix.js"></script>
+  <script src="../libktx.js"></script>
+  <script src="libktx-test.js"></script>
+  <script type="text/javascript">
+    function createElem(type, parent, className) {
+      const elem = document.createElement(type);
+      parent.appendChild(elem);
+      if (className) {
+        elem.className = className;
+      }
+      return elem;
+    }
+
+    function randArrayElement(array) {
+      return array[Math.random() * array.length | 0];
+    }
+
+    function rand(min, max) {
+      if (max === undefined) {
+        max = min;
+        min = 0;
+      }
+      return Math.random() * (max - min) + min;
+    }
+
+    // Make 3 elements over the canvas.
+    const contentElem = document.querySelector('#glcontent');
+    const items = [];
+    const numItems = 6;
+    const origImageItem = 0, uncompTextureItem = 1;
+    const copyTextureItem = 2, basisCompTextureItem = 3;
+    const writeReadTextureItem = 4, astcCompTextureItem = 5;
+    const labelText = [
+      'Input image',
+      'Uncompressed ktxTexture2',
+      'Copy of uncompressed ktxTexture2',
+      'Compressed to ETC1S/Basis-LZ',
+      'Written and Read .ktx2 file with uncompressed texture',
+      'ASTC compressed texture'
+    ];
+
+    for (let i = 0; i < numItems; ++i) {
+      const outerElem = createElem('div', contentElem, 'item');
+      const viewElem = createElem('div', outerElem, 'view');
+      const labelElem = createElem('div', outerElem, 'label');
+      //labelElem.textContent = `Item ${i + 1}`;
+      labelElem.textContent = labelText[i];
+      const bgColor = [rand(1), rand(1), rand(1), 1];
+      var placeholder = {};
+      switch (i) {
+        case 0:
+          placeholder.target = null;
+          placeholder.object = null;
+          placeholder.uvMatrix = null;
+          break;
+        default:
+          const texColor = [rand(255), rand(255), rand(255), 255];
+          placeholder = createPlaceholderTexture(gl, texColor);
+          break;
+      }
+      items.push({
+        color: bgColor,
+        texture: placeholder,
+        element: viewElem,
+        label: labelElem
+      });
+    }
+  </script>
+</html>