Skip to content
This repository was archived by the owner on Dec 21, 2025. It is now read-only.

Commit 31c9a67

Browse files
GitHubDragonFlyGitHubDragonFly
authored
Update Texture Viewer
1 parent d9d51ab commit 31c9a67

File tree

1 file changed

+99
-17
lines changed

1 file changed

+99
-17
lines changed

‎viewers/templates/Texture Viewer.html‎

Lines changed: 99 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<script>
3131
var file_loader, texture_loader, rgbe_loader, basis_loader, exr_loader, hdrJPGLoader;
32-
var ktx_loader, ktx2_loader, lottie_loader, lottie, tga_loader, dds_loader;
32+
var d_compress, ktx_loader, ktx2_loader, lottie_loader, lottie, tga_loader, dds_loader;
3333
var THREE, fflate, renderer, css_renderer, css2d_renderer, css2d_object;
3434
var manager, scene, camera, mesh, render_requested, count = 0;
3535
var controls, gizmo, mouse_down, mouse_wheel, events_initialized;
@@ -49,9 +49,11 @@
4949
import { KTXLoader } from "three/addons/loaders/KTXLoader.min.js";
5050
import { KTX2Loader } from "three/addons/loaders/KTX2Loader.min.js";
5151
import { BasisTextureLoader } from "../static/jsm/loaders/BasisTextureLoader.js";
52+
import { decompress } from "three/addons/utils/WebGLTextureUtils.min.js";
5253

5354
THREE = three_js;
5455
fflate = fflate_js;
56+
d_compress = decompress;
5557

5658
manager = new THREE.LoadingManager();
5759

@@ -1260,10 +1262,19 @@
12601262
}
12611263
else if (fn_uc.endsWith('.KTX')) {
12621264
await new Promise( resolve => {
1263-
ktx_loader.load( URL.createObjectURL( fi.files[ i ] ), function( texture ) {
1265+
ktx_loader.load( URL.createObjectURL( fi.files[ i ] ), async function( texture ) {
12641266
URL.revokeObjectURL( fi.files[ i ] );
12651267

1266-
resolve( texture_files.push( { flip: true, tex: texture } ), texture.dispose() );
1268+
// Convert to PNG so it shows on most platforms
1269+
// Unsupported formats might log a warning and then throw error
1270+
1271+
let canvas_tex = await d_compress( texture );
1272+
1273+
texture.dispose();
1274+
1275+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
1276+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
1277+
});
12671278
}, function ( xhr ) { // onProgress
12681279
}, function ( error ) { // onError
12691280
URL.revokeObjectURL( fi.files[ i ] );
@@ -1273,10 +1284,21 @@
12731284
}
12741285
else if (fn_uc.endsWith('.KTX2')) {
12751286
await new Promise( resolve => {
1276-
ktx2_loader.load( URL.createObjectURL( fi.files[ i ] ), function( texture ) {
1287+
ktx2_loader.load( URL.createObjectURL( fi.files[ i ] ), async function( texture ) {
12771288
URL.revokeObjectURL( fi.files[ i ] );
12781289

1279-
resolve( texture_files.push( { flip: true, tex: texture } ), texture.dispose() );
1290+
// Convert to PNG so it shows on most platforms
1291+
// Unsupported formats might log a warning and then throw error
1292+
1293+
if (texture.colorSpace === 'display-p3') texture.colorSpace = THREE.SRGBColorSpace;
1294+
1295+
let canvas_tex = await d_compress( texture );
1296+
1297+
texture.dispose();
1298+
1299+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
1300+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
1301+
});
12801302
}, function ( xhr ) { // onProgress
12811303
}, function ( error ) { // onError
12821304
URL.revokeObjectURL( fi.files[ i ] );
@@ -1908,14 +1930,34 @@
19081930
// KTX2 or KTX
19091931
case 'q0':
19101932
await new Promise( resolve => {
1911-
ktx2_loader.load( 'data:image/ktx2;base64,' + str, function( texture ) {
1912-
resolve( texture_files.push( { flip: true, tex: texture } ) );
1933+
ktx2_loader.load( 'data:image/ktx2;base64,' + str, async function( texture ) {
1934+
// Convert to PNG so it shows on most platforms
1935+
// Unsupported formats might log a warning and then throw error
1936+
1937+
if (texture.colorSpace === 'display-p3') texture.colorSpace = THREE.SRGBColorSpace;
1938+
1939+
let canvas_tex = await d_compress( texture );
1940+
1941+
texture.dispose();
1942+
1943+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
1944+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
1945+
});
19131946
}, function ( xhr ) {
19141947
}, function ( error ) {
19151948
console.log( 'Not a base64 KTX2 texture, trying to load base64 KTX instead...' );
19161949

1917-
ktx_loader.load( 'data:image/ktx;base64,' + str, function( texture ) {
1918-
resolve( texture_files.push( { flip: true, tex: texture } ) );
1950+
ktx_loader.load( 'data:image/ktx;base64,' + str, async function( texture ) {
1951+
// Convert to PNG so it shows on most platforms
1952+
// Unsupported formats might log a warning and then throw error
1953+
1954+
let canvas_tex = await d_compress( texture );
1955+
1956+
texture.dispose();
1957+
1958+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
1959+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
1960+
});
19191961
}, function ( xhr ) {
19201962
}, function ( error ) {
19211963
handle_error( error );
@@ -2142,17 +2184,37 @@
21422184
});
21432185
} else if (url_uc.endsWith('.KTX')) {
21442186
await new Promise( resolve => {
2145-
ktx_loader.load( url, function( texture ) {
2146-
resolve( texture_files.push( { flip: true, tex: texture } ) );
2187+
ktx_loader.load( url, async function( texture ) {
2188+
// Convert to PNG so it shows on most platforms
2189+
// Unsupported formats might log a warning and then throw error
2190+
2191+
let canvas_tex = await d_compress( texture );
2192+
2193+
texture.dispose();
2194+
2195+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
2196+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
2197+
});
21472198
}, function ( xhr ) {
21482199
}, function ( error ) {
21492200
handle_error( error );
21502201
});
21512202
});
21522203
} else if (url_uc.endsWith('.KTX2')) {
21532204
await new Promise( resolve => {
2154-
ktx2_loader.load( url, function( texture ) {
2155-
resolve( texture_files.push( { flip: true, tex: texture } ) );
2205+
ktx2_loader.load( url, async function( texture ) {
2206+
// Convert to PNG so it shows on most platforms
2207+
// Unsupported formats might log a warning and then throw error
2208+
2209+
if (texture.colorSpace === 'display-p3') texture.colorSpace = THREE.SRGBColorSpace;
2210+
2211+
let canvas_tex = await d_compress( texture );
2212+
2213+
texture.dispose();
2214+
2215+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
2216+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
2217+
});
21562218
}, function ( xhr ) {
21572219
}, function ( error ) {
21582220
handle_error( error );
@@ -2470,17 +2532,37 @@
24702532
});
24712533
} else if (url_uc.endsWith('.KTX')) {
24722534
await new Promise( resolve => {
2473-
ktx_loader.load( selected_url_file, function( texture ) {
2474-
resolve( texture_files.push( { flip: true, tex: texture } ) );
2535+
ktx_loader.load( selected_url_file, async function( texture ) {
2536+
// Convert to PNG so it shows on most platforms
2537+
// Unsupported formats might log a warning and then throw error
2538+
2539+
let canvas_tex = await d_compress( texture );
2540+
2541+
texture.dispose();
2542+
2543+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
2544+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
2545+
});
24752546
}, function ( xhr ) {
24762547
}, function ( error ) {
24772548
handle_error( error );
24782549
});
24792550
});
24802551
} else if (url_uc.endsWith('.KTX2')) {
24812552
await new Promise( resolve => {
2482-
ktx2_loader.load( selected_url_file, function( texture ) {
2483-
resolve( texture_files.push( { flip: true, tex: texture } ) );
2553+
ktx2_loader.load( selected_url_file, async function( texture ) {
2554+
// Convert to PNG so it shows on most platforms
2555+
// Unsupported formats might log a warning and then throw error
2556+
2557+
if (texture.colorSpace === 'display-p3') texture.colorSpace = THREE.SRGBColorSpace;
2558+
2559+
let canvas_tex = await d_compress( texture );
2560+
2561+
texture.dispose();
2562+
2563+
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
2564+
resolve( texture_files.push( { flip: true, tex: png_tex } ), canvas_tex.dispose(), png_tex.dispose() );
2565+
});
24842566
}, function ( xhr ) {
24852567
}, function ( error ) {
24862568
handle_error( error );

0 commit comments

Comments
 (0)