donmccurdy / three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
https://gltf-viewer.donmccurdy.com/
MIT License
2.09k stars 534 forks source link

https://gltf-viewer.donmccurdy.com/ does not handle ktx2 textures introduced via "Gestaltor" #273

Closed rktumuluri63 closed 1 year ago

rktumuluri63 commented 2 years ago

Model https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/BoxTextured/glTF-Binary/BoxTextured.glb

Same model with "png" converted to "ktx2" BoxTextured_Gestaltor_ETC1S_BasisLZ.glb

BoxTextured_Gestaltor_ETC1S_BasisLZ.zip

model with ktx2 textures renders correctly in https://github.khronos.org/glTF-Sample-Viewer-Release/

Regards /rk

donmccurdy commented 2 years ago

When doing KTX2 compression in Gestaltor, does it offer any choices in terms of whether to generate mipmaps, or providing the minFilter / magFilter settings of a Texture or Texture Sampler?

It appears to me that this file has a bit of a problem – it specifies that the texture should be used with mipmap-based filters (NEAREST_MIPMAP_LINEAR), but doesn't provide mipmaps in the compressed texture. Unlike PNG or JPG textures, a viewer cannot generate mipmaps at runtime without fully de-compressing the texture, and that mostly defeats the purpose of using KTX2 in the first place. I suppose the Khronos viewer is either (a) ignoring ignoring that the file specifies NEAREST_MIPMAP_LINEAR or (b) decompressing the texture, but three.js does neither of these and highlights the problem more clearly.

If you're OK with not having mipmaps (this may cause the texture to look less crisp, especially when viewed from an oblique angle) you can fix the asset by loading it in https://gltf.report/, opening the script tab, and running the script below:

import { TextureInfo } from '@gltf-transform/core';

const root = document.getRoot();
const graph = document.getGraph();

for (const material of root.listMaterials()) {
    for (const textureInfo of graph.listChildren(material)) {
        if (textureInfo instanceof TextureInfo) {
            textureInfo.setMinFilter(TextureInfo.MinFilter.LINEAR);
            textureInfo.setMagFilter(TextureInfo.MagFilter.LINEAR);
        }
    }
}

Screen Shot 2021-11-16 at 9 50 14 AM