BasisTextureLoader example: the texture is rendered upside down

[WestLangley]

... So the issue is: how to apply a .basis texture to a three.js built-in geometry.

/ping @zeux
/ping @takahirox
/ping @donmccurdy

• [ x ] r118

[donmccurdy]

All three.js built-in geometries have UVs matching our default of texture.flipY = true. That default doesn't apply to compressed textures, so using the built-in geometries with compressed textures will require one of:

a. changes to the texture before compression
b. changes to the UVs
c. changes to the UV transform

In one case I've used a function like this:

    /** Invert UVs to be compatible with `flipY=false` textures. */
    function flipY ( geometry ) {

      var uv = geometry.attributes.uv;

      for ( var i = 0; i < uv.count; i ++ ) {

        uv.setY( i, 1 - uv.getY( i ) );

      }

      return geometry;

    }

This would apply to .basis, .ktx,, and any other compressed texture format, if the texture author has not already flipped the texture. The same issue also comes up when using ImageBitmapLoader on Firefox, which doesn't support the flipY ImageBitmap option, I think.

[WestLangley]

https://threejs.org/examples/webgl_loader_texture_basis.html

Maybe this example should have a block of code that implements "fixing" the UVs, and use a texture that has an obvious right-side-up.

[WestLangley]

@donmccurdy Thanks!

[forcepusher]

In case anyone bumps into this in the future:
You could specify the -y_flip argument when building a basis texture and use everything as is.
See more info on basisu CLI arguments here.