Add BasisTextureLoader example

[takahirox]

This PR adds BasisTextureLoader example.

Live demo: https://raw.githack.com/takahirox/three.js/BasisTextureLoaderExample/examples/index.html#webgl_loader_texture_basis

kodim20.basis is from https://github.com/BinomialLLC/basis_universal/tree/master/webgl/texture/assets

I think this example may be too simple. But better than no example. Users can see the loader works and know the API from the example. Please feel free to replace with a cool and/or interesting one later.

#16524

[donmccurdy]

BasisTextureLoader currently marks all textures as sRGB:

three.js/examples/js/loaders/BasisTextureLoader.js

Lines 144 to 151 in b39de78

	texture.minFilter = THREE.LinearMipMapLinearFilter;
	texture.magFilter = THREE.LinearFilter;
	texture.encoding = THREE.sRGBEncoding;
	texture.generateMipmaps = false;
	texture.flipY = false;
	texture.needsUpdate = true;
	return texture;

We should probably remove that, and the flipY=false preset, which both made sense in the original Basis example but not so much in a general-purpose texture loader.

My suggestion for this PR would be:

• Remove flipY=false and encoding=sRGBEncoding from the loader
• Add encoding=sRGBEncoding after loading the texture (in the example itself)
• set renderer.gammaOutput=true, renderer.gammaFactor=2.2 as best practice.

[takahirox]

Remove flipY = false from the loader

flipY = true doesn't seem to work for compressed texture and default CompressedTexture.flipY is false. Removing from the loader looks right direction. Updated.

Move encoding = sRGBEncoding into example

Updated.

renderer.gammaOutput = true, renderer.gammaFactor=2.2

Thanks, I missed them. Updated.

[donmccurdy]

Good to have simple examples, I think!

[WestLangley]

Personally, I would just copy the other webgl_loader_texture_xxx examples.

https://raw.githack.com/takahirox/three.js/BasisTextureLoaderExample/examples/index.html?q=hdr#webgl_loader_texture_hdr

[takahirox]

Thanks for the reviews.

Personally, I would just copy the other webgl_loader_texture_xxx examples.

The reason why I didn't copy but made a new example rotating cube is I wanted to show transcode doesn't block main thread.

Replying to the other comments will be tomorrow (or later).

[mrdoob]

Is this expected?

[takahirox]

No. And I can't reproduce here... The root issue seems the server 504 error? Does it still happen even if you reload?

[mrdoob]

Weird, I can no longer reproduce...

[mrdoob]

Thanks!