Docs for encoding seem out of date?

gkjohnson commented 3 months ago

Hello! I'm trying to encode a three.js RGBA float texture to a gain map and using the suggested snippet from the Encoding section to try it. However I'm getting the following errors from parcel when building:

@parcel/core: node_modules/@monogrid/gainmap-js/dist/decode.js does not export 'compress'

  /Users/garrett/Desktop/git/three-gpu-pathtracer/example/hdr.js:17:10
    16 | import { LoaderElement } from './utils/LoaderElement.js';
  > 17 | import { compress, encode, findTextureMinMax } from '@monogrid/gainmap-js';
  >    |          ^^^^^^^^
    18 | import { encodeJPEGMetadata } from '@monogrid/gainmap-js/dist/libultrahdr.js';
    19 | import { WebGLPathTracer } from '..';

@parcel/core: node_modules/@monogrid/gainmap-js/dist/decode.js does not export 'encode'

  /Users/garrett/Desktop/git/three-gpu-pathtracer/example/hdr.js:17:20
    16 | import { LoaderElement } from './utils/LoaderElement.js';
  > 17 | import { compress, encode, findTextureMinMax } from '@monogrid/gainmap-js';
  >    |                    ^^^^^^
    18 | import { encodeJPEGMetadata } from '@monogrid/gainmap-js/dist/libultrahdr.js';
    19 | import { WebGLPathTracer } from '..';

@parcel/core: node_modules/@monogrid/gainmap-js/dist/decode.js does not export 'findTextureMinMax'

  /Users/garrett/Desktop/git/three-gpu-pathtracer/example/hdr.js:17:28
    16 | import { LoaderElement } from './utils/LoaderElement.js';
  > 17 | import { compress, encode, findTextureMinMax } from '@monogrid/gainmap-js';
  >    |                            ^^^^^^^^^^^^^^^^^
    18 | import { encodeJPEGMetadata } from '@monogrid/gainmap-js/dist/libultrahdr.js';
    19 | import { WebGLPathTracer } from '..';

Specifically the compress, encode, and findTextureMinMax functions to not seem to be exported from thethe main "gainmap-js" export (which maps to the dist/decode.js file). In fact I don't see any of those exports anywhere in the node modules distribution outside of comments. Is there a new recommended way to encode a FloatType RGBAFormat render target to a gain map?

Thanks!

daniele-pelagatti commented 3 months ago

Thanks for your contribution, I updated the README with up-to-date examples.

I need to find a way to automatically copy the code from examples/ (which is always up to date) into the various readme, jsdoc comments, etc :smile:

gkjohnson commented 3 months ago

Great, thanks! Getting results, now. This might be outside the scope of this project but you have any advice on converting the binary result from "encodeJPEGMetadata" to a base64 data uri? Here's what I'm trying:

// encode the final jpeg
const jpegBuffer = await encodeJPEGMetadata( {
  ...encodingResult,
  ...metadata,
  sdr,
  gainMap
} );

// assign the data uri
imageEl.src = `data:image/jpeg;base64,${ bufferToBase64( jpegBuffer.buffer ) }`;

// ...

// https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string
function bufferToBase64( buffer ) {

    let binary = '';
    const bytes = new Uint8Array( buffer );
    const len = bytes.byteLength;
    for ( let i = 0; i < len; i ++ ) {

        binary += String.fromCharCode( bytes[ i ] );

    }

    return btoa( binary );

}

I'm pulling data at of a float 32 render target with WebGLRenderer.readPixels before passing it into the example code you've provided. Ultimately I'm trying to encode a rendertarget as an hdr jpeg gainmap and then display at as image so the browser renders it correctly since canvas doesn't support rendering as HDR at the moment. When I do the above I just get a broken image icon.

edit

Same thing happens with a blob URL:

const blob = new Blob( [ new Uint8Array( jpegBuffer.buffer ) ], { type: 'image/jpeg' } );
const imageUrl = URL.createObjectURL( blob );
imageEl.src = imageUrl;

edit again

Nevermind - figured it out! Changing the type to "octet/stream" seemed to work.

MONOGRID / gainmap-js

Docs for encoding seem out of date? #37