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,130 @@
+<!DOCTYPE html>
+
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/three@v0.108.0"></script>
+  <script src="GLTFLoader.js"></script>
+  <script src="KTXTextureLoader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@v0.104.0/examples/js/controls/OrbitControls.js"></script>
+  <!-- <script src="../transcoder/build/basis_transcoder.js"></script> -->
+  <style>
+    html, body { width:100%; height:100%; margin:0; padding:0; }
+    canvas { display:block; }
+    #panel { position: absolute; top: 10px; left: 10px; color: white; background-color:rgba(0.3, 0.3, 0.3, 0.3); padding: 0.5em; max-width: 400px;}
+  </style>
+</head>
+
+<body>
+    <div id="panel">
+      <strong>Transcoding a KTX2 file with a BasisU PayLoad glTF Demo</strong>
+      <div id="log"></div>
+  
+    </div>
+  <script>
+    const renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    renderer.gammaOutput = true;
+    renderer.gammaFactor = 2.2;
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color( 0xf0f0f0 );
+
+    const light = new THREE.AmbientLight();
+    scene.add( light );
+
+    const light2 = new THREE.PointLight();
+    scene.add( light2 );
+
+    const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+    camera.position.set( 8, 6, 5 );
+    camera.lookAt( new THREE.Vector3( 0, -2, 0 ) );
+
+    const controls = new THREE.OrbitControls( camera, renderer.domElement );
+    controls.autoRotate = true;
+
+    // Create BasisTextureLoader and detect supported target formats.
+
+    const ktxLoader = new THREE.KTXTextureLoader();
+    //basisLoader.setTranscoderPath( '../transcoder/build/' );
+    ktxLoader.setTranscoderPath( '..' );
+    //ktxLoader.useAlpha = false;
+    ktxLoader.detectSupport( renderer );
+
+    let formatName = 'Unknown format';
+    switch(basisLoader.workerConfig.format)
+    {
+      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4:
+        formatName = 'ASTC';
+        break;
+      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC1:
+        formatName = 'BC1';
+        break;
+      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC3:
+        formatName = 'BC3';
+        break;
+      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGB:
+      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGBA:
+        formatName = 'PVRTC';
+        break;
+      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFETC1:
+        formatName = 'ETC1';
+        break;
+      default:
+        break;
+    }
+    log(`Transcode to: <strong>${formatName}</strong>`);
+
+    // Register KTXTextureLoader for .ktx and .ktx2 extension.
+
+    //THREE.Loader.Handlers.add( /\.basis$/, basisLoader );
+    THREE.Loader.Handlers.add( /\.ktx$/, ktxTexture );
+    THREE.Loader.Handlers.add( /\.ktx2$/, ktxTexture );
+
+    // Create GLTFLoader, load model, and render.
+
+    const loader = new THREE.GLTFLoader();
+
+    loader.load( 'assets/Cube.gltf', ( gltf ) => {
+
+      const model = gltf.scene;
+      model.scale.set( 0.01, 0.01, 0.01 );
+
+      scene.add( model );
+
+      document.body.appendChild( renderer.domElement );
+
+      animate();
+
+    }, undefined, ( e ) => console.error( e ) );
+
+    // Main render loop.
+
+    function animate() {
+
+      requestAnimationFrame( animate );
+      controls.update();
+      renderer.render( scene, camera );
+
+    }
+
+    // Support viewport resizing.
+
+    window.addEventListener( 'resize', () => {
+
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize( window.innerWidth, window.innerHeight );
+
+    }, false );
+
+    function log(s) {
+
+      const div = document.createElement('div');
+      div.innerHTML = s;
+      document.getElementById('log').appendChild(div);
+
+    }
+  </script>
+  
+</body>
+
+</html>