-
Notifications
You must be signed in to change notification settings - Fork 9
encode
Ƭ CompressOptions: Object
Options for compressing a RAW RGBA image into the specified mimeType
| Name | Type | Description |
|---|---|---|
flipY? |
boolean |
FlipY of the encoding process |
mimeType |
CompressionMimeType |
The mimeType of the output |
quality? |
number |
Encoding quality [0-1] |
Ƭ CompressParameters: CompressOptions & { source: ImageData } | { source: Uint8Array | Uint8ClampedArray ; sourceMimeType: string }
Ƭ CompressedImage: Object
Data structure representing a compressed image with a mimeType
| Name | Type |
|---|---|
data |
Uint8Array |
height |
number |
mimeType |
CompressionMimeType |
width |
number |
Ƭ CompressionMimeType: "image/png" | "image/jpeg" | "image/webp"
This library can provide gainmap compressed in these mimeTypes
▸ compress(params): Promise<CompressedImage>
Converts a RAW RGBA image buffer into the provided mimeType using the provided quality
| Name | Type |
|---|---|
params |
CompressParameters |
Promise<CompressedImage>
Throws
if the browser does not support createImageBitmap
Throws
if the provided source image cannot be decoded
Throws
if the function fails to create a canvas context
▸ encode(params): Object
Encodes a Gainmap starting from an HDR file.
| Name | Type | Description |
|---|---|---|
params |
EncodingParametersBase |
Encoding Parameters |
Object
| Name | Type |
|---|---|
gainMap |
QuadRenderer<1009, GainMapEncoderMaterial> |
getMetadata |
() => GainMapMetadata
|
hdr |
DataTexture |
sdr |
QuadRenderer<1009, SDRMaterial> |
Remarks
if you do not pass a renderer parameter
you must manually dispose the result
const encodingResult = await encode({ ... })
// do something with the buffers
const sdr = encodingResult.sdr.getArray()
const gainMap = encodingResult.gainMap.getArray()
// after that
encodingResult.sdr.dispose()
encodingResult.gainMap.dispose()Example
import { encode, findTextureMinMax } from '@monogrid/gainmap-js'
import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
// load an HDR file
const loader = new EXRLoader()
const image = await loader.loadAsync('image.exr')
// find RAW RGB Max value of a texture
const textureMax = await findTextureMinMax(image)
// Encode the gainmap
const encodingResult = encode({
image,
// this will encode the full HDR range
maxContentBoost: Math.max.apply(this, textureMax)
})
// can be re-encoded after changing parameters
encodingResult.sdr.material.exposure = 0.9
encodingResult.sdr.render()
// or
encodingResult.gainMap.material.gamma = [1.1, 1.1, 1.1]
encodingResult.gainMap.render()
// do something with encodingResult.gainMap.toArray()
// and encodingResult.sdr.toArray()
// renderers must be manually disposed
encodingResult.sdr.dispose()
encodingResult.gainMap.dispose()▸ encodeAndCompress(params): Promise<{ gainMap: CompressedImage ; gainMapMax: [number, number, number] ; gainMapMin: [number, number, number] ; gamma: [number, number, number] ; getMetadata: () => GainMapMetadata ; hdr: DataTexture = dataTexture; hdrCapacityMax: number ; hdrCapacityMin: number ; offsetHdr: [number, number, number] ; offsetSdr: [number, number, number] ; rawGainMap: Uint8ClampedArray ; rawSDR: Uint8ClampedArray ; sdr: CompressedImage }>
Encodes a Gainmap starting from an HDR file into compressed file formats (image/jpeg, image/webp or image/png).
Uses encode internally, then pipes the results to compress.
| Name | Type | Description |
|---|---|---|
params |
EncodingParametersWithCompression |
Encoding Parameters |
Promise<{ gainMap: CompressedImage ; gainMapMax: [number, number, number] ; gainMapMin: [number, number, number] ; gamma: [number, number, number] ; getMetadata: () => GainMapMetadata ; hdr: DataTexture = dataTexture; hdrCapacityMax: number ; hdrCapacityMin: number ; offsetHdr: [number, number, number] ; offsetSdr: [number, number, number] ; rawGainMap: Uint8ClampedArray ; rawSDR: Uint8ClampedArray ; sdr: CompressedImage }>
Remarks
if a renderer parameter is not provided
This function will automatically dispose its "disposable"
renderer, no need to dispose it manually later
Example
import { encodeAndCompress, findTextureMinMax } from '@monogrid/gainmap-js'
import { encodeJPEGMetadata } from '@monogrid/gainmap-js/libultrahdr'
import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
// load an HDR file
const loader = new EXRLoader()
const image = await loader.loadAsync('image.exr')
// find RAW RGB Max value of a texture
const textureMax = await findTextureMinMax(image)
// Encode the gainmap
const encodingResult = await encodeAndCompress({
image,
maxContentBoost: Math.max.apply(this, textureMax),
mimeType: 'image/jpeg'
})
// embed the compressed images + metadata into a single
// JPEG file
const jpeg = await encodeJPEGMetadata({
...encodingResult,
sdr: encodingResult.sdr,
gainMap: encodingResult.gainMap
})
// `jpeg` will be an `Uint8Array` which can be saved somewhereThrows
if the browser does not support createImageBitmap
src/encode/encode-and-compress.ts:50
▸ getGainMap(params): QuadRenderer<1009, GainMapEncoderMaterial>
| Name | Type |
|---|---|
params |
{ sdr: QuadRenderer<TextureDataType, Material> } & GainmapEncodingParameters & { image: DataTexture | EXR | RGBE | LogLuv ; renderTargetOptions?: QuadRendererTextureOptions ; renderer?: WebGLRenderer ; toneMapping?: ToneMapping } |
QuadRenderer<1009, GainMapEncoderMaterial>
▸ getSDRRendition(hdrTexture, renderer?, toneMapping?, renderTargetOptions?): QuadRenderer<1009, SDRMaterial>
Renders an SDR Representation of an HDR Image
| Name | Type | Description |
|---|---|---|
hdrTexture |
DataTexture |
The HDR image to be rendered |
renderer? |
WebGLRenderer |
(optional) WebGLRenderer to use during the rendering, a disposable renderer will be create and destroyed if this is not provided. |
toneMapping? |
ToneMapping |
(optional) Tone mapping to be applied to the SDR Rendition |
renderTargetOptions? |
QuadRendererTextureOptions |
(optional) Options to use when creating the output renderTarget |
QuadRenderer<1009, SDRMaterial>
Throws
if the WebGLRenderer fails to render the SDR image
src/encode/get-sdr-rendition.ts:25
Ƭ EncodingParametersBase: GainmapEncodingParameters & { image: EXR | RGBE | LogLuv | DataTexture ; renderTargetOptions?: QuadRendererTextureOptions ; renderer?: WebGLRenderer ; toneMapping?: ToneMapping }
Parameters used to Encode a GainMap
Ƭ EncodingParametersWithCompression: EncodingParametersBase & CompressOptions & { withWorker?: WorkerInterfaceImplementation }
Additional parameters to encode a GainMap compressed with a mimeType
Re-exports GainMapMetadata
Re-exports QuadRendererTextureOptions
Ƭ GainmapEncodingParameters: Object
Parameters used by content Creators in order to create a GainMap
| Name | Type | Description |
|---|---|---|
gamma? |
[number, number, number] |
This is the gamma to apply to the stored map values. Default Value ts [1, 1, 1] Remarks * Typically you can use a gamma of 1.0. * You can use a different value if your gain map has a very uneven distribution of log_recovery(x, y) values. For example, this might apply if a gain map has a lot of detail just above SDR range (represented as small log_recovery(x, y) values), and a very large map_max_log2 for the top end of the HDR rendition's desired brightness (represented by large log_recovery(x, y) values). In this case, you can use a map_gamma higher than 1.0 so that recovery(x, y) can precisely encode the detail in both the low end and high end of log_recovery(x, y). |
maxContentBoost |
number |
This value lets the content creator constrain how much brighter an image can get, when shown on an HDR display, relative to the SDR rendition. Remarks * This value is a constant for a particular image. For example, if the value is four, then for any given pixel, the linear luminance of the displayed HDR rendition must be, at the most, 4x the linear luminance of the SDR rendition. In practice, this means that the brighter parts of the scene can be shown up to 4x brighter. * In practice, this value is typically greater than 1.0. * Always greater than or equal to Min content boost. Non Logarithmic space |
minContentBoost? |
number |
This value lets the content creator constrain how much darker an image can get, when shown on an HDR display, relative to the SDR rendition. This value is a constant for a particular image. Default Value ts 1 Remarks * If, for example, the value is 0.5, then for any given pixel, the linear luminance of the displayed HDR rendition must be (at the least) 0.5x the linear luminance of the SDR rendition. * In practice, this value is typically equal to or just less than 1.0. * Always less than or equal to Max content boost. Non Logarithmic space |
offsetHdr? |
[number, number, number] |
This is the offset to apply to the HDR pixel values during gain map generation and application. Default Value ts [1/64, 1/64, 1/64]
|
offsetSdr? |
[number, number, number] |
This is the offset to apply to the SDR pixel values during gain map generation and application Default Value ts [1/64, 1/64, 1/64]
|
Ƭ HDRRawImage: Object
Raw HDR image data
| Name | Type |
|---|---|
data |
HDRRawImageBuffer |
height |
number |
width |
number |
Ƭ HDRRawImageBuffer: EXR["data"] | RGBE["data"] | LogLuv["data"]
Accepted HDR image buffers, definitions coming from the THREE.js Library types
▸ findTextureMinMax(image, mode?, renderer?): number[]
| Name | Type | Default value |
|---|---|---|
image |
DataTexture | EXR | RGBE | LogLuv
|
undefined |
mode |
"min" | "max"
|
'max' |
renderer? |
WebGLRenderer |
undefined |
number[]