DDSLoader: Add support for BC6H textures. #26608
Conversation
📦 Bundle sizeFull ESM build, minified and gzipped.
🌳 Bundle size after tree-shakingMinimal build including a renderer, camera, empty scene, and dependencies.
|
|
Do you mind removing the build files from your PR? |
Code style clean up.
Mugen87
changed the title
@Mugen87 Sure thing. Though I think removing the build files will cause the e2e test for |
|
The E2E test automatically perform a build on the latest |
| @@ -122,6 +122,9 @@ export const RGBA_ASTC_10x10_Format = 37819; | |||
| export const RGBA_ASTC_12x10_Format = 37820; | |||
| export const RGBA_ASTC_12x12_Format = 37821; | |||
| export const RGBA_BPTC_Format = 36492; | |||
| export const SRGB_ALPHA_BPTC_Format = 36493; | |||
| export const RGB_BPTC_SIGNED_Format = 36494; | |||
| export const RGB_BPTC_UNSIGNED_Format = 36495; | |||
There was a problem hiding this comment.
Nit: SRGB_ALPHA_BPTC_Format appears to be an unused constant for BC7. It is also the only format constant in three.js that implies a particular transfer function. I think we should instead remove the unused constant, and choose between SRGB_ALPHA_BPTC and RGBA_BPTC WebGL extensions in WebGLUtils.js based on the .colorSpace property.
|
|
||
| extension = extensions.get( 'EXT_texture_compression_bptc' ); | ||
|
|
||
| if ( extension !== null ) { | ||
|
|
||
| if ( p === RGBA_BPTC_Format ) return ( colorSpace === SRGBColorSpace ) ? extension.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT : extension.COMPRESSED_RGBA_BPTC_UNORM_EXT; | ||
| if ( p === RGBA_BPTC_Format || p === SRGB_ALPHA_BPTC_Format ) return ( colorSpace === SRGBColorSpace ) ? extension.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT : extension.COMPRESSED_RGBA_BPTC_UNORM_EXT; |
There was a problem hiding this comment.
Nit: See above, I think we can remove SRGB_ALPHA_BPTC_Format here.
|
|
||
| const map10 = loader.load( 'textures/compressed/disturb_dx10_bc6h_unsigned_mip.dds' ); | ||
| map6.anisotropy = 4; | ||
| map6.colorSpace = THREE.SRGBColorSpace; |
There was a problem hiding this comment.
My (macOS) computer doesn't support BPTC to test this, but I think the correct color space here is THREE.LinearSRGBColorSpace? Shouldn't affect rendering either way, but just to avoid any confusion!
Description
I recently started working on a project that involves visualizing some astronomical data that exists in the form of high resolution HDR textures in the EXR format. The textures are very large so I needed to look into the best way possible to get the size down. I was able to compress the textures into BC6H format using NVIDIA Texture Tools using the DDS container file format, though when I tried it in three.js I realized that BC6H textures were not yet supported.
Compressed HDR textures in BC6H format are a relatively new thing, however from what I read, this should be available to GPUs that support DirectX 11+. In order to use BC6H textures in WebGL, your platform must support the EXT_texture_compression_bptc WebGL extension. I checked WebGL Report, and sure enough it seemed like BC6H textures should be supported in WebGL on my system (Windows 11/Chrome/NVIDIA RTX 3090). Although it looked like support was there, I was surprised to find that not only did three.js not have support for them yet, but I was also unable to find a single example of anyone using BC6H textures in WebGL at all despite significant effort.
After looking into it a bit more and studying Microsoft's documentation for BC6H textures as supported in DirectX 11 through the DDS file format, I decided to attempt implementing support myself. I successfully created a small proof of concept demo in pure WebGL, extending the DDS loading logic from toji/webgl-texture-utils. After the basic WebGL proof of concept was successful, I moved on to implementing support in three.js itself, leading to this pull request.
The three.js implemntation was also a success, allowing me to load compressed HDR textures in both signed and unsigned BC6H format using the DDS container file format. Please let me know if any additional changes are needed. Thank you.
Changes
Added values for BC6H formats to
src/constants.jsAdded logic for returning proper extension when BC6H formats were detected in
src/renderers/webgl/WebGLUtils.jsAdded support for parsing the DX10 extended header used for supporting BC6H textures in the DDS file format within
examples/jsm/loaders/DDSLoader.jsAdded unit tests for new constants in
test/unit/src/constants.tests.jsSaved an existing DDS texture used in the examples in different BC6H variants:
examples/textures/compressed/disturb_dx10_bc6h_signed_mip.ddsexamples/textures/compressed/disturb_dx10_bc6h_signed_nomip.ddsexamples/textures/compressed/disturb_dx10_bc6h_unsigned_mip.ddsexamples/textures/compressed/disturb_dx10_bc6h_unsigned_nomip.ddsAdded logic to demonstrate the use of the 4 new sample BC6H variant formatted textures in the existing DDS example
examples/webgl_loader_texture_dds.htmlRelated Links and Further Reading
EXT_texture_compression_bptc — MDN documentation for the related WebGL extension
NVIDIA Texture Tools Exporter — free utility capable of saving/converting textures to both the signed and unsigned variants of BC6H, with or without mipmaps (in addition to many other formats)
toji/webgl-texture-utils — Pure WebGL library with support for loading various kinds of DDS textures that the DDSLoader in three.js was originally based on.
BC6H Format — Microsoft's DirectX 11 documentation for the BC6H texture format
DDS_HEADER structure — Microsoft's documentation detailing the byte layout of the header used for the DDS file format
DDS_HEADER_DXT10 structure — Microsoft's documentation detailed the byte layout of the extended header for the DDS file format, which must be parsed in addition to the base header when loading DDS textures formatted using BC6H.