HDR or EXR Exporting from multiple image formats

[GitHubDragonFly]

For those who might be interested in exporting multiple image formats to either HDR or EXR, you could use my IMG2MESH viewer / converter:

• For HDR it is using a modified version of hdrpng.js library
• For EXR it is using the official three.js EXR Exporter
• Both exports are using in part gainmap-js decoder to provide data texture for most image formats
• Other export formats are also supported, like AVIF, KTX2, WEBP…

HDR code was created with assistance from Microsoft Copilot.

As a visual aid, here is a picture of the IMG2MESH viewer with loaded spruit_sunrise_4k.hdr.jpg three.js example, which was exported to EXR format and then that exr texture was set as a background.

[vielzutun.ch]

Thanks for providing this tool!

If gave it some serious data to chew on: a jpg of 47 MB (19’712 by 9’856 pix).

• Time between file drop in drop zone until first image appeared: approx 30 seconds. This part would benefit from a progress indicator.

• The resulting image displays an interesting looking, yet new(!) artifact right around where the zenit would be (top-center). Looking closeley, this is also visible in your own screenshot
  My image:
  

  
  
  What your tool created out of it:
  
  

• After selecting EXR from the Export menu, it apparently choked: after almost two hours it’s still displaying “Please Wait”

[GitHubDragonFly]

I wouldn’t be surprised if anything at any time chokes this tool.

Just to make sure to provide some basic info about this IMG2MESH tool:

• it will try to convert any loaded image into a simple 3D mesh
  • this mesh is in the scene and can be moved, zoomed in/out and rotated with the mouse
• original author and idea can be seen here
• additional code modifications by @manthrax can be seen here
• I added options to export loaded image and / or mesh to other formats

Top center part might be just reflecting the directional light that is in the scene.

You could always provide an image so I can try it myself and see why it might be choking.

Additionally, this is browser based tool and it could possibly run out of memory during the export or it could also be the resolution of the image that might cause it to choke. On a PC it might help to open the browser console to see if any error messages might appear there.

[GitHubDragonFly]

I did bother resizing to 19712x9856 one of the JPG image examples from three.js repository.

My computer choked up when loading it into IMG2MESH app and it also showed this message (with some errors afterwards):

THREE.WebGLRenderer: Texture has been resized from (19712x9856) to (16384x8192)

Some things might just be related to the computing power of the PC being used and / or THREE.WebGLRenderer and / or the resolution of the image (or my code).

[GitHubDragonFly]

HDR format was also added as an export option and the title and description were updated in my initial post.

[vielzutun.ch]

Thanks for looking into this and for providing additional information.

@GitHubDragonFly

Some things might just be related to the computing power of the PC being used

I think, we can exclude that. I’m using a MacBook Pro with an M4Max chip and 64 GB of RAM. I guess that’s about as current as it gets.

I can confirm that the artifact is indeed a reflection from lights in the scene. I wasn’t aware of the bitmap being converted into a textured mesh:

For a 4k version of my test bitmap (4’096 by 2’048 pix, 3.1 MB) the console reports this (without any error messages):

[Debug] Loading Time: 1232.813ms (IMG2MESH.html, line 2408)
[Log] Memory:  – {geometries: 3, textures: 7} (IMG2MESH.html, line 2428)
[Log] Render:  – {frame: 2, calls: 8, triangles: 24622, …} (IMG2MESH.html, line 2429)
{frame: 2, calls: 8, triangles: 24622, points: 0, lines: 0}Object
[Warning] Failure to reconstruct an HDR image from blob:https://githubdragonfly.github.io/36be004a-f244-4a43-93f9-89dc83eee6dc: Gain map metadata not found in the file, HDRJPGLoader will render the SDR jpeg (decode.min.js, line 7)

For the huge bitmap (19’712 by 9’856 pix, 47.1 MB) the console reports the following:

[Debug] Loading Time: 51896.236ms (IMG2MESH.html, line 2408)
[Warning] THREE.WebGLRenderer: Texture has been resized from (19712x9856) to (16384x8192). (three.module.min.js, line 6)
[Log] Memory:  – {geometries: 3, textures: 7} (IMG2MESH.html, line 2428)
[Log] Render:  (IMG2MESH.html, line 2429)
Object
calls: 256
frame: 64
lines: 0
points: 0
triangles: 3786176

After selecting EXR from the Export menu the console reports this:

[Warning] Failure to reconstruct an HDR image from blob:https://githubdragonfly.github.io/8eb766c4-80b1-43df-874e-0d1d675861f0: Gain map metadata not found in the file, HDRJPGLoader will render the SDR jpeg (decode.min.js, line 7)
[Warning] THREE.WebGLRenderer: Texture has been resized from (19712x9856) to (16384x8192). (three.module.min.js, line 6)
[Error] WebGL: INVALID_VALUE: Desired resource size is greater than max texture size.
[Error] WebGL: INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.
[Error] WebGL: INVALID_OPERATION: Framebuffer is incomplete: Attachment has zero size.
[Error] WebGL: INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.

Memory consumption increases during export from 4.4 GB (Browser had several other tabs) to 10.4 GB, then drops to 7.1 GB after errors occurred, and remains stable from there on.

[Lawrence3DPK]

Can I ask what the use case for this is? I can’t quite see the reason for going from an original HDR / EXR, encoding to a low size high performant format with https://gainmap-creator.monogrid.com/ and then from there going back to EXR / HDR?

It sounds like adding unnecessary steps to a problem that doesn’t exist, am I missing something?

monogrid has methods to decode and extract gainmaps as part of the library gainmap-js/src/decode at main · MONOGRID/gainmap-js · GitHub

[vielzutun.ch]

In case you were adressing me:

my use case is converting jpg files into exr format.

[Lawrence3DPK]

@vielzutun.ch To use in 3js or just generally? In 3js you can use THREE.EquirectangularReflectionMapping to use a jpg as an environmental map eg…

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('/path/to/env.jpg');
texture.mapping = THREE.EquirectangularReflectionMapping
const jpgCubeRenderTarget = pmremGenerator.fromEquirectangular( texture ); 
scene.environment = jpgCubeRenderTarget 

monogrid jpg format is fundamentally different from typical jpg files, they contain an embedded gain map with the necessary exposure definitions to emulate EXR, without that gainmap you’re simply trying to convert an 8bit lossy file into a 16-32 bit lossless file whereby if the distribution management of exposure levels is not packed to EXR standards the file sizes can go through the roof as you’re experiencing… Photoshop has options to add hdr toning to any image adding the necessary exposure levels in a standardised way…

[GitHubDragonFly]

All those console messages before selecting EXR export could be present most of the time and should be considered as normal.

Since THREE.WebGLRenderer appears to have a 16k limitation then I made some additional changes to my IMG2MESH viewer, so give it a try again and see if your MacBook will throw any different errors. There is nothing really that I could change about this limitation inside the renderer itself.

Monogrid loader is only used since it provides DataTexture that is required by the EXR Exporter which appears to be handling them without any issues. This loader also makes things easier for me since it can actually load bunch of different formats.

Loading EXR or HDR images is handled slightly different when exporting these to other formats.

[GitHubDragonFly]

Apart from creating a simple / extruded 3D mesh, the main other purpose of this tool is to provide conversion between different image formats.

Whatever the reason someone might have to use a different format other than the original image format, it’s for them to know and handle.

[GitHubDragonFly]

I did test IMG2MESH app on a basic configuration M2 Mac Mini with 8GB of memory:

• Exported EXR ends up being rather large file:
  • Safari browser did not have issues loading this large exported file back into the app
  • Chrome browser did have issues loading this large exported file back into the app (no reported errors but it was not visible)
• The app was additionally updated so only normal warnings should appear in the console
• The hardware does matter since my old Windows 10 based laptop with 8GB of memory just cannot handle loading thus exporting large resolution images
  • This should be applicable to both GPU and memory size

Just keep in mind that this app should be used on experimental basis and if it works for you then even better.