Implement support for BPTC (BC7) in BasisU

This change allows transcoding new UASTC .basis files to BPTC which
results in much higher quality compared to UASTC -> BC3 transcoding.

The change needs to introduce BPTC support to three.js core for this to
work; the format is introduced in EXT_texture_compression_bptc which is
available in Chrome Canary on Windows (and possibly elsewhere?)

The update to Basis transcoder just pulls it directly from Binomial
repository; the transcoder is a bit larger now, unfortunately, because
it needs to support UASTC.

Note that we use mode 5 unconditionally to make sure RGB and RGBA
textures work.

BPTC (BC7) and BC3 are the same size in memory so this shouldn't
negatively impact VRAM consumption.

examples/js/loaders/BasisTextureLoader.js

@@ -67,11 +67,16 @@ THREE.BasisTextureLoader.prototype = Object.assign( Object.create( THREE.Loader.
 		config.dxtSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_s3tc' );
 		config.pvrtcSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_pvrtc' )
 			|| !! renderer.extensions.get( 'WEBKIT_WEBGL_compressed_texture_pvrtc' );
+		config.bptcSupported = !! renderer.extensions.get( 'EXT_texture_compression_bptc' );
 
 		if ( config.astcSupported ) {
 
 			config.format = THREE.BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4;
 
+		} else if ( config.bptcSupported ) {
+
+			config.format = THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC7_M5;
+
 		} else if ( config.dxtSupported ) {
 
 			config.format = THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC3;
@@ -149,6 +154,9 @@ THREE.BasisTextureLoader.prototype = Object.assign( Object.create( THREE.Loader.
 					case THREE.BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4:
 						texture = new THREE.CompressedTexture( mipmaps, width, height, THREE.RGBA_ASTC_4x4_Format );
 						break;
+					case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC7_M5:
+						texture = new THREE.CompressedTexture( mipmaps, width, height, THREE.RGBA_BPTC_Format );
+						break;
 					case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC1:
 					case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC3:
 						texture = new THREE.CompressedTexture( mipmaps, width, height, THREE.BasisTextureLoader.DXT_FORMAT_MAP[ config.format ], THREE.UnsignedByteType );

examples/jsm/loaders/BasisTextureLoader.js

@@ -80,11 +80,16 @@ BasisTextureLoader.prototype = Object.assign( Object.create( Loader.prototype ),
 		config.dxtSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_s3tc' );
 		config.pvrtcSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_pvrtc' )
 			|| !! renderer.extensions.get( 'WEBKIT_WEBGL_compressed_texture_pvrtc' );
+		config.bptcSupported = !! renderer.extensions.get( 'EXT_texture_compression_bptc' );
 
 		if ( config.astcSupported ) {
 
 			config.format = BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4;
 
+		} else if ( config.bptcSupported ) {
+
+			config.format = BasisTextureLoader.BASIS_FORMAT.cTFBC7_M5;
+
 		} else if ( config.dxtSupported ) {
 
 			config.format = BasisTextureLoader.BASIS_FORMAT.cTFBC3;
@@ -162,6 +167,9 @@ BasisTextureLoader.prototype = Object.assign( Object.create( Loader.prototype ),
 					case BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4:
 						texture = new CompressedTexture( mipmaps, width, height, RGBA_ASTC_4x4_Format );
 						break;
+					case BasisTextureLoader.BASIS_FORMAT.cTFBC7_M5:
+						texture = new CompressedTexture( mipmaps, width, height, RGBA_BPTC_Format );
+						break;
 					case BasisTextureLoader.BASIS_FORMAT.cTFBC1:
 					case BasisTextureLoader.BASIS_FORMAT.cTFBC3:
 						texture = new CompressedTexture( mipmaps, width, height, BasisTextureLoader.DXT_FORMAT_MAP[ config.format ], UnsignedByteType );

src/constants.d.ts

@@ -285,6 +285,9 @@ export const SRGB8_ALPHA8_ASTC_10x10_Format: CompressedPixelFormat;
 export const SRGB8_ALPHA8_ASTC_12x10_Format: CompressedPixelFormat;
 export const SRGB8_ALPHA8_ASTC_12x12_Format: CompressedPixelFormat;
 
+// BPTC compressed texture formats
+export const RGBA_BPTC_Format: CompressedPixelFormat;
+
 // Loop styles for AnimationAction
 export enum AnimationActionLoopStyles {}
 export const LoopOnce: AnimationActionLoopStyles;

src/constants.js

@@ -129,6 +129,7 @@ export var RGBA_ASTC_10x8_Format = 37818;
 export var RGBA_ASTC_10x10_Format = 37819;
 export var RGBA_ASTC_12x10_Format = 37820;
 export var RGBA_ASTC_12x12_Format = 37821;
+export var RGBA_BPTC_Format = 36492;
 export var SRGB8_ALPHA8_ASTC_4x4_Format = 37840;
 export var SRGB8_ALPHA8_ASTC_5x4_Format = 37841;
 export var SRGB8_ALPHA8_ASTC_5x5_Format = 37842;

src/renderers/webgl/WebGLUtils.js

@@ -2,7 +2,7 @@
  * @author thespite / http://www.twitter.com/thespite
  */
 
-import { RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGB_ETC1_Format, RGB_ETC2_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT5_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT1_Format, RGB_S3TC_DXT1_Format, DepthFormat, DepthStencilFormat, LuminanceAlphaFormat, LuminanceFormat, RedFormat, RGBAFormat, RGBFormat, AlphaFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBIntegerFormat, RGBAIntegerFormat, HalfFloatType, FloatType, UnsignedIntType, IntType, UnsignedShortType, ShortType, ByteType, UnsignedInt248Type, UnsignedShort565Type, UnsignedShort5551Type, UnsignedShort4444Type, UnsignedByteType, SRGB8_ALPHA8_ASTC_4x4_Format, SRGB8_ALPHA8_ASTC_5x4_Format, SRGB8_ALPHA8_ASTC_5x5_Format, SRGB8_ALPHA8_ASTC_6x5_Format, SRGB8_ALPHA8_ASTC_6x6_Format, SRGB8_ALPHA8_ASTC_8x5_Format, SRGB8_ALPHA8_ASTC_8x6_Format, SRGB8_ALPHA8_ASTC_8x8_Format, SRGB8_ALPHA8_ASTC_10x5_Format, SRGB8_ALPHA8_ASTC_10x6_Format, SRGB8_ALPHA8_ASTC_10x8_Format, SRGB8_ALPHA8_ASTC_10x10_Format, SRGB8_ALPHA8_ASTC_12x10_Format, SRGB8_ALPHA8_ASTC_12x12_Format } from '../../constants.js';
+import { RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGB_ETC1_Format, RGB_ETC2_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT5_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT1_Format, RGB_S3TC_DXT1_Format, DepthFormat, DepthStencilFormat, LuminanceAlphaFormat, LuminanceFormat, RedFormat, RGBAFormat, RGBFormat, AlphaFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBIntegerFormat, RGBAIntegerFormat, HalfFloatType, FloatType, UnsignedIntType, IntType, UnsignedShortType, ShortType, ByteType, UnsignedInt248Type, UnsignedShort565Type, UnsignedShort5551Type, UnsignedShort4444Type, UnsignedByteType, SRGB8_ALPHA8_ASTC_4x4_Format, SRGB8_ALPHA8_ASTC_5x4_Format, SRGB8_ALPHA8_ASTC_5x5_Format, SRGB8_ALPHA8_ASTC_6x5_Format, SRGB8_ALPHA8_ASTC_6x6_Format, SRGB8_ALPHA8_ASTC_8x5_Format, SRGB8_ALPHA8_ASTC_8x6_Format, SRGB8_ALPHA8_ASTC_8x8_Format, SRGB8_ALPHA8_ASTC_10x5_Format, SRGB8_ALPHA8_ASTC_10x6_Format, SRGB8_ALPHA8_ASTC_10x8_Format, SRGB8_ALPHA8_ASTC_10x10_Format, SRGB8_ALPHA8_ASTC_12x10_Format, SRGB8_ALPHA8_ASTC_12x12_Format, RGBA_BPTC_Format } from '../../constants.js';
 
 function WebGLUtils( gl, extensions, capabilities ) {
 
@@ -155,6 +155,24 @@ function WebGLUtils( gl, extensions, capabilities ) {
 
 		}
 
+		if ( p === RGBA_BPTC_Format ) {
+
+			extension = extensions.get( 'EXT_texture_compression_bptc' );
+
+			if ( extension !== null ) {
+
+				// TODO Complete?
+
+				return p;
+
+			} else {
+
+				return null;
+
+			}
+
+		}
+
 		if ( p === UnsignedInt248Type ) {
 
 			if ( isWebGL2 ) return gl.UNSIGNED_INT_24_8;