MONOGRID's HDR Optimizer for 3D WebGL Websites: A Pioneering Open-Source Tool

What if we told you there is now a technology to help craft immersive WebGL experiences (such as the interactive space we recently created for Oakley ), reducing loading times, and preserving file resolution?

It’s Gain Map Converter & JS Library , MONOGRID’s first open-source tool – and the first-ever of its kind.

We initially created it as an in-house resource but decided to make it available for everyone to use, giving back to the generous web development community that keeps inspiring us.

What is Gain Map Converter & JS Library for?

The tool solves a common issue in web development: managing high-quality Image Based Lighting (IBL) within the constraints of web file sizes. IBL is crucial for producing realistic 3D scenes in computer graphics, and we often use it across various 3D engines, like Three.js. Yet, it has a limitation: the large file sizes of .hdr and .exr files. These files are vital for IBL and scene backgrounds, but they can weigh heavily, like a 30Mb 4K EXR file, significantly increasing load times, especially for users with slower internet connections.

Luckily, Adobe’s Gain Map technology offered a solution to retain the full HDR range in a compressed, web-optimized file format. The core of Adobe’s Gain Map technology lies in its unique image construction approach. It uses a trio of components: a standard 8-bit SDR (Standard Dynamic Range) image representation, an additional 8-bit recovery image known as the gain map, and essential metadata that guides the decoder in applying the gain map to the SDR image.

One of the notable features of Gain Map technology is its adaptability to various file formats. The gain map and the SDR image can be stored as separate entities or embedded in a single file, accommodating formats like jpeg, heic, avif, jpeg-xl, tiff, and dng.

However, the challenge was the lack of support for this technology in popular WebGL engines like Three.js, limited browser support, and, especially, there was no user-friendly tool for converting standard HDR/EXR images to this new format. Until now.

How we built Gain Map Converter & JS Library

To develop our Gain Map Converter & JS Library, we ported Adobe’s Gain Map technology to JavaScript and released a package on NPM for encoding and decoding Gain Map images on the web. Our current implementation includes a Wasm encoder/decoder , specifically for jpeg files, a fork from Google’s Ultra HDR format library .

Additionally, we created a free online converter , allowing users to input .exr or .hdr files and convert them to Gain Map format. This converter also enables viewing created Gain Maps as conventional HDR files, all within the browser, utilizing the user’s CPU and GPU for processing.?

Impact and Adoption (so far)

The potential of Gain Map technology has not gone unnoticed in the tech industry. Google has embraced it in its upcoming Android 14, referring to it as Ultra HDR Image Format, and Chrome has introduced support for native JPEG gain map decoding, with initial support for avif gain maps as well. This growing industry adoption confirms the timeliness and potential of our Gain Map Converter & JS Library.

From an in-house solution to an open-source tool, our Gain Map Converter & JS Library has received enthusiastic feedback from the Three.js community, and it's been included in their library and adopted by Google's popular 3D & AR model viewer .

But this project is more than just about technological advancement; it's about fostering a collaborative ecosystem where shared knowledge and resources pave the way for groundbreaking developments that benefit all.