wgsl-tone-map

A collection of tone mapping functions available both as ES modules strings and as WGSL files. Mostly taken from here and here.

Looking for WebGL? See glsl-tone-map, which ships the same operators in GLSL.

Installation

npm install wgsl-tone-map

Usage

WGSL has no function overloading, so the f32 variants are suffixed with Scalar (eg. acesScalar) and the parameterised curves are named hejlCurve, uchimuraCurve and uncharted2Curve.

ESM

import * as wgslToneMap from "wgsl-tone-map";

const shader = /* wgsl */ `
${wgslToneMap.AGX}
${wgslToneMap.NEUTRAL}
${wgslToneMap.ACES}
${wgslToneMap.ACES_HILL}
${wgslToneMap.FILMIC}
${wgslToneMap.HEJL}
${wgslToneMap.LOTTES}
${wgslToneMap.REINHARD}
${wgslToneMap.REINHARD2}
${wgslToneMap.REINHARD_JODIE}
${wgslToneMap.UCHIMURA}
${wgslToneMap.UNCHARTED2}
${wgslToneMap.UNREAL}

@fragment
fn main() -> @location(0) vec4f {
  // ...
  color = vec4f(agx(color.rgb), color.a);
  color = vec4f(neutral(color.rgb), color.a);
  color = vec4f(aces(color.rgb), color.a);
  color = vec4f(acesHill(color.rgb), color.a);
  color = vec4f(filmic(color.rgb), color.a);
  color = vec4f(hejl(color.rgb), color.a);
  color = vec4f(lottes(color.rgb), color.a);
  color = vec4f(reinhard(color.rgb), color.a);
  color = vec4f(reinhard2(color.rgb), color.a);
  color = vec4f(reinhardJodie(color.rgb), color.a);
  color = vec4f(uchimura(color.rgb), color.a);
  color = vec4f(uncharted2(color.rgb), color.a);
  color = vec4f(unreal(color.rgb), color.a);
  return color;
}`;

Each operator also ships as a plain .wgsl file (eg. wgsl-tone-map/aces.wgsl) for bundlers that load shaders as raw text.

License

MIT. See license file.