gpu-curtains/dist/esm/core/shaders/chunks/fragment/body/apply-tone-mapping.mjs

gpu-curtains is a 3D WebGPU rendering engine. It can be used as a standalone 3D engine, but also includes extra classes focused on mapping 3d objects to DOM elements; It allows users to synchronize values such as position, sizing, or scale between them.

const applyToneMapping = ({ toneMapping = "Khronos" } = {}) => {
  let toneMappingOutput = (
    /* wgsl */
    `
  let exposure: f32 = 1.0; // TODO
  outputColor *= exposure;
  `
  );
  toneMappingOutput += (() => {
    switch (toneMapping) {
      case "Khronos":
        return (
          /* wgsl */
          `
  outputColor = vec4(KhronosToneMapping(outputColor.rgb), outputColor.a);
  `
        );
      case "Reinhard":
        return `
  outputColor = vec4(ReinhardToneMapping(outputColor.rgb), outputColor.a);
        `;
      case "Cineon":
        return `
  outputColor = vec4(CineonToneMapping(outputColor.rgb), outputColor.a);
        `;
      case false:
      default:
        return `
  outputColor = saturate(outputColor);
        `;
    }
  })();
  toneMappingOutput += /* wgsl */
  `
  outputColor = linearTosRGB_4(outputColor);
  `;
  return toneMappingOutput;
};

export { applyToneMapping };