Added RGBM texture example

[WestLangley]

As suggested in #16420 (comment).

Maybe we can convert memorial.hdr to RGBM16... EDIT: Done! Thanks @bhouston

[mrdoob]

Maybe we can convert memorial.hdr to RGBM16...

Yeah, that'd help. I have yet to understand how to do it though.

[looeee]

Maybe we can convert memorial.hdr to RGBM16...

Yeah, that'd help. I have yet to understand how to do it though.

According to @bhouston #10652 (comment):

All the tools for converting between Linear/sRGB/RGBM/RGBD/RGBE/LogLUV, etc are in Three.JS. On textures you can set the encoding that it will use when reading that texture. On render targets you can set the encoding it will use when writing to that render target. To do a conversion between any encoding just load the source into a texture with its current encoding set properly, and then render it to a render target with the target encoding set. Then read the render target back and save as a bitmat and you've converted your stuff.

I also have yet to understand how that works though. As far as I can see RGBE -> RGBM16 is the most important of these conversions. Perhaps we could add an example showing how to do that?

[bhouston]

I also have yet to understand how that works though. As far as I can see RGBE -> RGBM16 is the most important of these conversions. Perhaps we could add an example showing how to do that?

One can set the encoding on a texture, and then set it to one of a select map inputs on material: map, envMap, mapCap, emissive. During shader creation it will check for the encoding of that texture map and auto-decode from its encoding to linear:

three.js/src/renderers/webgl/WebGLPrograms.js

Line 142 in f186b20

mapEncoding: getTextureEncodingFromMap( material.map, renderer.gammaInput ),

There is also the concept of the output texture. Normally it is just a simplfed gammaOutput, but if you are writing to a render target texture, it will read the encoding of that texture and use that to encode the linear result into the output encoding.

three.js/src/renderers/webgl/WebGLPrograms.js

Line 140 in f186b20

outputEncoding: getTextureEncodingFromMap( ( ! currentRenderTarget ) ? null : currentRenderTarget.texture, renderer.gammaOutput ),

Thus all transcoding of texture formats is done automatically by the program compiler via code injection. The injectors are here:

three.js/src/renderers/webgl/WebGLProgram.js

Lines 509 to 514 in 1bb851f

	( parameters.outputEncoding || parameters.mapEncoding || parameters.matcapEncoding || parameters.envMapEncoding || parameters.emissiveMapEncoding ) ?
	ShaderChunk[ 'encodings_pars_fragment' ] : '', // this code is required here because it is used by the various encoding/decoding function defined below
	parameters.mapEncoding ? getTexelDecodingFunction( 'mapTexelToLinear', parameters.mapEncoding ) : '',
	parameters.matcapEncoding ? getTexelDecodingFunction( 'matcapTexelToLinear', parameters.matcapEncoding ) : '',
	parameters.envMapEncoding ? getTexelDecodingFunction( 'envMapTexelToLinear', parameters.envMapEncoding ) : '',
	parameters.emissiveMapEncoding ? getTexelDecodingFunction( 'emissiveMapTexelToLinear', parameters.emissiveMapEncoding ) : '',

[WestLangley]

Maybe we can convert memorial.hdr to RGBM16...

I was referring to converting the file memorial.hdr to a PNG-formatted file with RGBM encoding.

[bhouston]

RGBM16 PNG of the Memorial image:

[WestLangley]

@bhouston Sweet! It works perfectly. Thanks!

[WestLangley]

@bhouston Since that image is so transparent as a PNG, RGBM7 may have been better if all the alphas are less than 0.5. I am not recommending a change, though. Mostly curious.

What utility did you use to convert that file?

[bhouston]

What utility did you use to convert that file?

Unfortunately some closed source code in clara.io. But given that Three.JS has an exr and an hdr loader and the ability to save the render buffer as an image writing a generic conversion tool that can import these and save to any of our supported encodings isn't a lot of work -- it could be a new three.js example.

[mrdoob]

Thanks!

[looeee]

it could be a new three.js example.

Yes, that's what I was suggesting here.

It's great to have the ability to use RGBM16 textures, but I have yet to find any DCC tools that can create them. On the other hand, there's loads of free .HDR textures available, and they are relatively easy to create.

If we had an example where users can drag and drop .HDR textures and get RGBM16 pngs out, that would make this feature useful to a lot more people.

[WestLangley]

@mrdoob Since this PR replaces memorial.png with a file having a different encoding, webgl_hdr.html is no longer relevant and can be removed.

[TimvanScherpenzeel]

It's great to have the ability to use RGBM16 textures, but I have yet to find any DCC tools that can create them. On the other hand, there's loads of free .HDR textures available, and they are relatively easy to create.

Perhaps you could modify this IBL converter (MIT) https://github.com/oframe/ibl-converter

It has quite a nice drag and drop interface: https://oframe.github.io/ibl-converter/