Textures coming in flipped with a shaderMaterial only in Chrome

[Johnhersh]

Hi all
For some reason my textures are vertically flipped in Chrome. It looks fine in Firefox and Safari.

I'm loading the textures like this:

const texture = useLoader(TGALoader, texturePath);

And then passing it down to the component:

<PlanetMaterial diffuse={texture} dissolveAmount={dissolveAmount} />
.
.
.
export default function PlanetMaterial({ diffuse, dissolveAmount }: PlanetMaterialProps) {
  const material = useRef<typeof ShaderMaterial>(null);

  const uniforms = {
    tDiffuse: { value: diffuse },
    dissolveAmount: { value: dissolveAmount },
  };

  useFrame(() => {
    if (material.current !== (undefined || null)) {
      uniforms.dissolveAmount = { value: dissolveAmount / 100 };
    }
  });

  return (
    <shaderMaterial
      ref={material}
      blending={NormalBlending}
      transparent={true}
      attach="material"
      args={[
        {
          uniforms,
          vertexShader: vertexShader,
          fragmentShader: fragmentShader,
        },
      ]}
    />
  );
}

I'm using a custom shader I wrote, so I tried flipping the UVs around and then it looks fine in Chrome, but looks flipped in Firefox/Safari. I can't figure out if it's something in the UVs or if the textures are flipped. I found various issues relating to three.js, but they seem to have been solved in 103, and I'm using the latest. I have it currently live here: Live Link and on Github here: Github Link

I'd appreciate any assistance

[gsimone]

Looks like this is happening in threejs https://threejs.org/examples/#webgl_loader_texture_tga ( flipped in chrome vs firefox )

[gsimone]

I submitted an issue mrdoob/three.js#20132

[Johnhersh]

Ahh I see, interesting. In the meantime is there another loader I can use? TGALoader is the only one I was able to get working. If I use TextureLoader from base threejs with useLoader, it never finishes loading it. I'm also using , so with those the Suspense component never switches over.

Edit:
Was able to get the TextureLoader from threejs working. It just turns out it has to be PNG files for that one. TGA won't work

[gsimone]

textureLoader should work for common image types as it uses ImageLoader internally (jpg png, possibly webp, gif, tiff - I can't find any official doc on the exact types)