KTX2 compressed with basisu etc1s and transparent looks lighter between r132 and r133

[arpu]

KTX2 compressed with basisu and transparent looks lighter between r132 and r133

toktx compression command line
toktx --t2 --2d --genmipmap --encode etc1s --lower_left_maps_to_s0t0 --verbose ss-gallery_1_512_rounded.ktx2 ss-gallery_1_512_rounded.png

in r132 we use texture.encoding = THREE.sRGBEncoding;

Expected behavior

looks same on r132 and r133

Screenshots
r133

r132

Platform:

• Device: Desktop
• OS: Linux
• Browser: Chrome
• Three.js version: r133

cc @donmccurdy

[mrdoob]

That's expected. The darkening was incorrect: #22551

[mrdoob]

Aren't the thumbnail colors more like the original image now?

[arpu]

this are the original images

[arpu]

not sure but for me r132 looks more correct, if not i can change the pngs
thx for clarification!

[donmccurdy]

Would it be possible to compare these textures on unlit materials (e.g. MeshBasicMaterial) rather than MeshStandardMaterial?

[arpu]

this is from MeshBasicMaterial
code from aframe Compnent:

const loaderKtx2 = systemGltf.getKTX2Loader();
const roomScreenshot =  loaderKtx2.load( this.data.imageKtx2 );
roomScreenshot.wrapS = THREE.RepeatWrapping;
roomScreenshot.wrapT = THREE.RepeatWrapping;
roomScreenshot.format = THREE.RGBAFormat;
roomScreenshot.generateMipmaps = false;
const material = new THREE.MeshBasicMaterial( { map: roomScreenshot, transparent: true, side: FrontSide, flatShading:true, fog:false } );
material.needsUpdate = true;
const screenshotGeoamtry = new PlaneBufferGeometry( this.data.width , this.data.height ) );
const screenshotObject = new Mesh( screenshotGeoamtry, material );

[mrdoob]

roomScreenshot.wrapS = THREE.RepeatWrapping;
roomScreenshot.wrapT = THREE.RepeatWrapping;
roomScreenshot.format = THREE.RGBAFormat;
roomScreenshot.generateMipmaps = false;

I think these lines are not needed...

[donmccurdy]

I can't really tell what's going on in these screenshots sorry. Could you attach one or more of the textures you're asking about?

Aside – if the screenshot textures are only ever viewed head-on (e.g. in a 2D UI as shown above) you wouldn't necessarily need to generate mipmaps for them in toktx.

in r132 we use texture.encoding = THREE.sRGBEncoding;

In both r132 and r133 I assume? This should be the right choice for any texture with channels that represent color.

You might also want --assign_oetf srgb in the toktx command, although I'm not sure it will actually affect anything if you're also setting .encoding directly.

[arpu]

this is r133 with Textureloader the original png file
with
texture.encoding = THREE.sRGBEncoding;

const loader = new THREE.TextureLoader()
const roomScreenshotPng =  loader.load( "/rooms/worldg/ss-worldg_512_v1_rounded.png" );
roomScreenshotPng.encoding = THREE.sRGBEncoding 
const materialPng = new THREE.MeshBasicMaterial( { map: roomScreenshotPng, transparent:true } );
const screenshotGeoamtryPng = new PlaneBufferGeometry( this.data.width , this.data.height );
const screenshotObjectPng = new Mesh( screenshotGeoamtryPng, materialPng );

same file with toktx and
texture.encoding = THREE.sRGBEncoding;

toktx --t2 --2d --bcmp --srgb --verbose --lower_left_maps_to_s0t0 ss-worldg_512_v1_rounded.ktx2 ss-worldg_512_v1_rounded.png

using stabel toktx 4.0.0 ( 148d3f5b3e515665ff22c204c308095f467116d2)

this should not look different

[donmccurdy]

There are several examples in the three.js website using KTX2, that haven't become washed out like these screenshots. So there's something specific about the application and/or textures here, and we won't be able to debug it from screenshots. It could even be device-specific like #22631... if you can share some of the .ktx2 files you're asking about, I would recommend starting a thread on the forums.

[arpu]

ok thx a lot @donmccurdy will create a forum post

the washed out Images only shown when i set side: THREE.FrontSide
with side: THREE.DoubleSide png files looks same as the ktx2 file ( the example from three uses side: THREE.DoubleSide)

[arpu]

the ktx2 file is https://drive.google.com/file/d/1_RfgI4rpsC-Fdv2rXQt8MRDX61IlKGmc/view?usp=sharing

[arpu]

sorry for the noise, all works fine if i set the material.map on the onLoad ktx2Loader
no idea why this worked before 133