Skip to content

KTX2Loader: Improve target format selection and examples #32966

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
epreston wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

KTX2Loader: Improve target format selection and examples #32966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
306604e
Update KTX2Loader.js
epreston Feb 5, 2026
3f71146
Create fail_load.ktx2
epreston Feb 5, 2026
16f7be3
Update webgl_loader_texture_ktx2.html
epreston Feb 5, 2026
b8fc5f9
Update KTX2Loader.js
epreston Feb 5, 2026
3507f40
Update webgpu_loader_texture_ktx2.html
epreston Feb 5, 2026
3d7ea29
Update KTX2Loader.js
epreston Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions examples/jsm/loaders/KTX2Loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,9 +229,10 @@ class KTX2Loader extends Loader {
this.workerConfig = {
astcSupported: renderer.hasFeature( 'texture-compression-astc' ),
astcHDRSupported: false, // https://github.com/gpuweb/gpuweb/issues/3856
etc1Supported: renderer.hasFeature( 'texture-compression-etc1' ),
etc1Supported: false, // webgpu support provided by etc2
etc2Supported: renderer.hasFeature( 'texture-compression-etc2' ),
dxtSupported: renderer.hasFeature( 'texture-compression-s3tc' ),
dxtSupported: false, // rgb565 smooth and hard alpha provided by bc (bptc)
rgtcSupported: false, // 1 and 2 channel textures provided by bc (bptc)
bptcSupported: renderer.hasFeature( 'texture-compression-bc' ),
pvrtcSupported: renderer.hasFeature( 'texture-compression-pvrtc' )
};
Expand All @@ -245,6 +246,7 @@ class KTX2Loader extends Loader {
etc1Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
etc2Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc' ),
dxtSupported: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
rgtcSupported: renderer.extensions.has( 'EXT_texture_compression_rgtc' ),
bptcSupported: renderer.extensions.has( 'EXT_texture_compression_bptc' ),
pvrtcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_pvrtc' )
|| renderer.extensions.has( 'WEBKIT_WEBGL_compressed_texture_pvrtc' )
Expand Down
Binary file added examples/textures/ktx2/fail_load.ktx2
View file
Open in desktop
Binary file not shown.
40 changes: 20 additions & 20 deletions examples/webgl_loader_texture_ktx2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,18 @@

import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

let canvas, renderer;
const canvas = document.getElementById( 'c' );

const renderer = new THREE.WebGLRenderer( { canvas, antialias: true } );
renderer.setClearColor( 0xffffff, 1 );
renderer.setPixelRatio( window.devicePixelRatio );

const loader = new KTX2Loader()
.setTranscoderPath( 'jsm/libs/basis/' )
.setPath( 'textures/ktx2/' )
.detectSupport( renderer );

const formats = loader.workerConfig;

const scenes = [];

Expand All @@ -110,14 +121,14 @@
+ ' reducing memory cost. Requires native support on the device GPU: no single compressed'
+ ' format is supported on every device.',
textures: [
{ path: '2d_astc4x4.ktx2' },
{ path: '2d_etc1.ktx2' },
{ path: '2d_etc2.ktx2' },
{ path: '2d_bc1.ktx2' },
{ path: '2d_bc3.ktx2' },
{ path: '2d_bc4.ktx2' },
{ path: '2d_bc5.ktx2' },
{ path: '2d_bc7.ktx2' },
{ path: '2d_astc4x4.ktx2', supported: formats[ 'astcSupported' ] },
{ path: '2d_etc1.ktx2', supported: formats[ 'etc1Supported' ] },
{ path: '2d_etc2.ktx2', supported: formats[ 'etc2Supported' ] },
{ path: '2d_bc1.ktx2', supported: formats[ 'dxtSupported' ] || formats[ 'bptcSupported' ] },
{ path: '2d_bc3.ktx2', supported: formats[ 'dxtSupported' ] || formats[ 'bptcSupported' ] },
{ path: '2d_bc4.ktx2', supported: formats[ 'rgtcSupported' ] || formats[ 'bptcSupported' ] },
{ path: '2d_bc5.ktx2', supported: formats[ 'rgtcSupported' ] || formats[ 'bptcSupported' ] },
{ path: '2d_bc7.ktx2', supported: formats[ 'bptcSupported' ] }
]
},

Expand All @@ -138,17 +149,6 @@

async function init() {

canvas = document.getElementById( 'c' );

renderer = new THREE.WebGLRenderer( { canvas, antialias: true } );
renderer.setClearColor( 0xffffff, 1 );
renderer.setPixelRatio( window.devicePixelRatio );

const loader = new KTX2Loader()
.setTranscoderPath( 'jsm/libs/basis/' )
.setPath( 'textures/ktx2/' )
.detectSupport( renderer );

const geometry = flipY( new THREE.PlaneGeometry( 1, 1 ) );

const content = document.getElementById( 'content' );
Expand Down
119 changes: 64 additions & 55 deletions examples/webgpu_loader_texture_ktx2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,69 +88,78 @@

import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

let canvas, renderer;
const canvas = document.getElementById( 'c' );

const scenes = [];
const renderer = new THREE.WebGPURenderer( { canvas, antialias: true, forceWebGL: false } );
renderer.setClearColor( 0xffffff, 1 );
renderer.setPixelRatio( window.devicePixelRatio );

const sections = [
{
title: 'Uncompressed',
description: 'Uncompressed formats (rgba8, rgba16, rgba32) load as THREE.DataTexture objects.'
+ ' Lossless, easy to read/write, uncompressed on GPU, optionally compressed over the network.',
textures: [
{ path: '2d_rgba8.ktx2' },
{ path: '2d_rgba8_linear.ktx2' },
{ path: '2d_rgba16_linear.ktx2' },
{ path: '2d_rgba32_linear.ktx2' },
{ path: '2d_rgb9e5_linear.ktx2' },
{ path: '2d_r11g11b10_linear.ktx2' },
]
},
{
title: 'Compressed',
description: 'Compressed formats (ASTC, BCn, ...) load as THREE.CompressedTexture objects,'
+ ' reducing memory cost. Requires native support on the device GPU: no single compressed'
+ ' format is supported on every device.',
textures: [
{ path: '2d_astc4x4.ktx2' },
{ path: '2d_etc1.ktx2' },
{ path: '2d_etc2.ktx2' },
{ path: '2d_bc1.ktx2' },
{ path: '2d_bc3.ktx2' },
{ path: '2d_bc4.ktx2' },
{ path: '2d_bc5.ktx2' },
{ path: '2d_bc7.ktx2' },
]
},

{
title: 'Universal',
description: 'Basis Universal textures are specialized intermediate formats supporting fast'
+ ' runtime transcoding into other GPU texture compression formats. After transcoding,'
+ ' universal textures can be used on any device at reduced memory cost.',
textures: [
{ path: '2d_etc1s.ktx2' },
{ path: '2d_uastc.ktx2' },
]
},
];

init();
const loader = new KTX2Loader()
.setTranscoderPath( 'jsm/libs/basis/' )
.setPath( 'textures/ktx2/' );

async function init() {
const scenes = [];

canvas = document.getElementById( 'c' );
let sections;

renderer = new THREE.WebGPURenderer( { canvas, antialias: true, forceWebGL: false } );
renderer.setClearColor( 0xffffff, 1 );
renderer.setPixelRatio( window.devicePixelRatio );
initRenderer();

async function initRenderer() {

await renderer.init();

const loader = new KTX2Loader()
.setTranscoderPath( 'jsm/libs/basis/' )
.setPath( 'textures/ktx2/' )
.detectSupport( renderer );
loader.detectSupport( renderer );

const formats = loader.workerConfig;

sections = [
{
title: 'Uncompressed',
description: 'Uncompressed formats (rgba8, rgba16, rgba32) load as THREE.DataTexture objects.'
+ ' Lossless, easy to read/write, uncompressed on GPU, optionally compressed over the network.',
textures: [
{ path: '2d_rgba8.ktx2' },
{ path: '2d_rgba8_linear.ktx2' },
{ path: '2d_rgba16_linear.ktx2' },
{ path: '2d_rgba32_linear.ktx2' },
{ path: '2d_rgb9e5_linear.ktx2' },
{ path: '2d_r11g11b10_linear.ktx2' },
]
},
{
title: 'Compressed',
description: 'Compressed formats (ASTC, BCn, ...) load as THREE.CompressedTexture objects,'
+ ' reducing memory cost. Requires native support on the device GPU: no single compressed'
+ ' format is supported on every device.',
textures: [
{ path: '2d_astc4x4.ktx2', supported: formats[ 'astcSupported' ] },
{ path: '2d_etc1.ktx2', supported: formats[ 'etc2Supported' ] },
{ path: '2d_etc2.ktx2', supported: formats[ 'etc2Supported' ] },
{ path: '2d_bc1.ktx2', supported: formats[ 'bptcSupported' ] },
{ path: '2d_bc3.ktx2', supported: formats[ 'bptcSupported' ] },
{ path: '2d_bc4.ktx2', supported: formats[ 'bptcSupported' ] },
{ path: '2d_bc5.ktx2', supported: formats[ 'bptcSupported' ] },
{ path: '2d_bc7.ktx2', supported: formats[ 'bptcSupported' ] }
]
},

{
title: 'Universal',
description: 'Basis Universal textures are specialized intermediate formats supporting fast'
+ ' runtime transcoding into other GPU texture compression formats. After transcoding,'
+ ' universal textures can be used on any device at reduced memory cost.',
textures: [
{ path: '2d_etc1s.ktx2' },
{ path: '2d_uastc.ktx2' },
]
},
];

await init();

}

async function init() {

const geometry = flipY( new THREE.PlaneGeometry( 1, 1 ) );

Expand Down