search

KhronosGroup / 3D-Formats-Guidelines

Guidelines for artists and developers using Khronos Group 3D formats.
Other
127 stars 18 forks source link

The image comparison between the jpg and ktx2 assets uses the same image, thus it is misleading #19

Closed zoni527 closed 2 years ago

zoni527 commented 2 years ago

I have experience with ktx2 compression and was wondering about the comparison image in this document. To my surprise the two assets are identical. I find this extremely misleading and unethical as in my experience ktx2 compression creates artefacts and it would be better to be upfront about this.

emackey commented 2 years ago

@echadwick-wayfair I think this is referring to this image. I'm sure I've seen a PPT slide where KTX artifacts were shown magnified, but in this copy of the image they appear absent. Can you check?

echadwick-artist commented 2 years ago

Thanks for the post!

The image is genuine. Though perhaps the zoomed-in parts should be using nearest-neighbor upscaling instead of bilinear to make the differences more obvious.

The artifacts are indeed pronounced IF you're using default compression settings and only using ETC1S.

However we fine-tuned the settings after some experimentation, and shared them here: https://github.com/KhronosGroup/3D-Formats-Guidelines/blob/main/KTXArtistGuide.md#stainedglasslamp

_The textures were compressed from PNG source files using toktx via a combination of compression settings that favored high quality. UASTC was used for packed textures (ORM, Normal, etc.) and ETCS1 for Base Color and Emissive textures, however exceptions were made based on analyzing results... the glass_basecolor-alpha and glassemissive textures were changed from ETC1S to UASTC since these were prominently displayed on the model and contained a lot of color variation.

toktx compression settings: ...

Here's a live demo comparing JPG+PNG vs. KTX2, so you can zoom in and compare any area. https://playground.babylonjs.com/full.html#YD2TXP#23

image

I'll see about updating the image with nearest-neighbor interpolation for the zoom, I hope that's less misleading.

echadwick-artist commented 2 years ago

If you strip out full.html from the URL, it will bring you to the Babylon.js code which shows the URLs for the models.

        loadModel("JPG / PNG", mask.left, "https://raw.githubusercontent.com/KhronosGroup/3D-Formats-Guidelines/main/samples/StainedGlassLamp/StainedGlassLamp-JPG-PNG-Volume.glb"),
        loadModel("KTX: UASTC + ETC1S", mask.right, "https://raw.githubusercontent.com/KhronosGroup/3D-Formats-Guidelines/main/samples/StainedGlassLamp/StainedGlassLamp-KTX-BasisU-Volume.glb")

You can download the models here to check them out: https://github.com/KhronosGroup/3D-Formats-Guidelines/tree/main/samples/StainedGlassLamp

glTF.report is one nice way to see the contents of the GLBs, to check that one is using JPGs and PNGs, and the other only KTX2s.

echadwick-artist commented 2 years ago

Here's a recreation of the image, with nearest neighbor resampling. The differences are still subtle, but perhaps easier to discern.

Screenshots were made from the glTF Sample Viewer, using the "studio" IBL from the Babylon.js Sandbox, and unscaled. The zooms we scaled in Photoshop using nearest neighbor (point sampling), and the whole thing saved as a PNG to avoid JPG compression errors.

2022-06-23-lamp-whole-before-after

echadwick-artist commented 2 years ago

Please let us know if this resolves the issue for you, or if we can provide any further information.

Frankly we were also surprised at the results, as our initial tests showed strong block compression artifacts with a lot of bleeding between color channels. Once we fine-tuned the compression settings we were able to solve the majority of the artifacts.

It seems like the normal map is rendering a bit more pronounced in KTX2, perhaps because it's not being completely renormalized?

Big thanks to @rsahlin for his work on fine-tuning the compression settings for this asset!

echadwick-artist commented 2 years ago

I saw this demo again today, and thought of you! https://playground.babylonjs.com/full.html#YD2TXP#22\

image

This shows the kind of blocky KTX2 artifacts you might have seen in your compression tests. The lamp on the right was compressed using only ETC1S. It shows the importance of fine-tuning compression codecs and settings. You can pretty much eliminate these artifacts with the settings in the tutorial. I hope this helps!

emackey commented 2 years ago

Thanks so much for these detailed clarifications @echadwick-wayfair!

zoni527 commented 2 years ago

Thank you for these clarifications. Now I understand the asset in question a lot better, the live demo helped a bunch! I have been getting blocky artefacts also with uastc compression, but this might be due to the particular colors and scales of the textures I've been using for my assets. I'll look into the optimization possibilities further.