How to render ETC1 textures?

Questions
,
1

I encoded a png to etc1 texture using this: GitHub - google/etc2comp Command I used: EtcTool source.png -format ETC1 -output ./encoded.ktx . The file is indeed a ktx file.

❯ file encoded.ktx
encoded.ktx: Khronos KTX texture (little-endian), 1024 x 1024, ETC1_RGB8_OES

So, I tried to load it using KTXLoader: https://unpkg.com/three@0.153.0/examples/jsm/loaders/KTXLoader.js, by passing buffer to parse() . It did not return a CompressedTexture, but returned args to create it. I created like below.

const loader = new KTXLoader()
const textureArgs = loader.parse(bufferCopy, true)
const texture = new CompressedTexture(textureArgs.mipmaps, textureArgs.width, textureArgs.height, textureArgs.format)
texture.colorSpace = SRGBColorSpace
const material = new MeshBasicMaterial({ map: texture })

I tried applying that material to a model and it’s black. Any idea what I’m doing wrong?

I’d like to know if there are any other ways to encode etc1 textures as well. just want to render using threejs. If not ETC1, I want to know how to render ETC2/ASTC textures with threejs as well. I tried encoding with GitHub - ARM-software/astc-encoder: The Arm ASTC Encoder, a compressor for the Adaptive Scalable Texture Compression data format. too, but didnt work.

2

It looks like you’re creating KTX 1.0 files with ETC1 content… very few people do this in three.js, mostly because you need to also provide other formats for devices that don’t support ETC1.

Have you considered using KTX 2.0 instead?

For example you could follow this guide, https://github.com/KhronosGroup/3D-Formats-Guidelines/blob/09480b6fb1e24f1f94c00cfa65cfe2f684e25b19/KTXArtistGuide.md, and use ETC1S, which will be transcoded at runtime to ETC1 or something else if the device requires it.