CompressedTexture: Support flipY in shaders.

[pikaya]

I convert a simple sheep model use convert_obj_three.py to .json ,
load it use THREE.JSONLoader(),
and use THREE.ImageUtils.loadCompressedTexture(texturepath) to add the texture,
but not reach my results,
here is:

here is the code : https://github.com/pikaya/lei ,

Thank you very much for someone to help me!

here is the result of DDS converted to PNG :

[WestLangley]

Confirmed. If the DDS file is converted to PNG, then the model renders correctly.

"mapDiffuse" : "monster_2008.png",

[pikaya]

Thank you for your answer ,
But I have a lot of mode use DDS texture,If convert all DDS map, it will be very trouble,I want to know ,If there is a more simple method.

[mrdoob]

Random guess... Maybe texture.flypY needs to be set to false for DDS?

[WestLangley]

Random guess... Maybe texture.flipY needs to be set to false for DDS?

Yes, it appears that the texture is rendered upside down, but texture.flipY has no effect for some reason.

EDIT: The three.js compressed image files (except for cube maps) appear to be inverted. monster_2008.dds is not.

[wrr]

I've researched this issue a bit, here are my findings:

OpenGL addresses textures upside down (the first row of pixels data is interpreted at the bottom row on a screen). Because this is not how browsers (and most other software) addresses pixels, WebGL for convenience provided a flag UNPACK_FLIP_Y_WEBGL to allow using standard images as textures.
In OpenGL such flag is not available, and assets are usually flipped on disk.

For compressed textures the FLIP_Y flag does not work. Flipping compressed image data is not easy, because pixels are arranged in blocks (also the flip operation would require browsers to parse DXT which AFAIK browsers avoid due to patent concerns).

Because of these, the DDS textures are handled as expected by Three.js, they are in the correct orientation from the OpenGL point of view. The library probably could provide an option to flip DXT data in JavaScript, but this doesn't seem to make much sense (applications use compressed textures for performance benefits and flipping DXT would be quite slow).

DDSes that are flipped in a correct way can be generated from non flipped images for example like this:

convert input.png -define dds:compression=dxt1 -flip output.dds

[ikerr]

Why not have Three.js use flipY in the shader, rather than when images are uploaded to the GPU? Then it would work for all textures, including DXT-compressed ones, no?

[soadzoor]

@wrr What kind of command line tool is the one you use like that?

[Herst]

@soadzoor ImageMagick: https://www.imagemagick.org/script/command-line-tools.php

[soadzoor]

@Herst Thanks!

[mrdoob]

The summary of this issue is that UNPACK_FLIP_Y_WEBGL does not work with compressed textures and we could generate 1.0 - uv.y in the shader instead.

[LeviPesin]

So seems like this issue can be easily fixed by simply adding new flag like COMPRESSED_FLIP_Y and checking it in shaders?

[Mugen87]

This issue is not exclusive to S3TC but affects all compressed texture formats.

Different workarounds are outlined in #19797 (comment). Generating compressed textures in the correct orientation is best, for all other cases the mentioned flipY() helper function to update the uv coordinates once seems like a good alternative.

In context of WebGLRenderer an enhancement in the shader is problematic since the impact on the code base is quite noticeable. You would need a GLSL define and the related JS code that manages it for all different texture slots (diffuse, normal, ao etc.).

In context of WebGPURenderer there is an additional solution:

const uvNode = uv();
material.colorNode = texture( ktxTexture, uvNode.setY( uvNode.y.oneMinus() ) );

I think we could investigate to automatically inject this code inside the renderer somehow so flipY is implemented in the shader. AFAICS, this is also @mrdoob's preferred approach, see #26818 (comment).