[{"data":1,"prerenderedAt":846},["ShallowReactive",2],{"navigation":3,"/api/pmndrs/tone-mapping":181,"/api/pmndrs/tone-mapping-surround":841},[4,14,171],{"title":5,"path":6,"stem":7,"children":8},"Introduction","/getting-started","1.getting-started/1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17,"children":18},"Api","/api","2.api",[19,22,144],{"title":20,"path":16,"stem":21},"API Reference","2.api/index",{"title":23,"path":24,"stem":25,"children":26},"Pmndrs Effects","/api/pmndrs","2.api/1.pmndrs/index",[27,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140],{"title":23,"path":24,"stem":25},{"title":29,"path":30,"stem":31},"ASCII","/api/pmndrs/ascii","2.api/1.pmndrs/ascii",{"title":33,"path":34,"stem":35},"Barrel Blur","/api/pmndrs/barrel-blur","2.api/1.pmndrs/barrel-blur",{"title":37,"path":38,"stem":39},"Bloom","/api/pmndrs/bloom","2.api/1.pmndrs/bloom",{"title":41,"path":42,"stem":43},"Brightness & Contrast","/api/pmndrs/brightness-contrast","2.api/1.pmndrs/brightness-contrast",{"title":45,"path":46,"stem":47},"Chromatic Aberration","/api/pmndrs/chromatic-aberration","2.api/1.pmndrs/chromatic-aberration",{"title":49,"path":50,"stem":51},"Color Average","/api/pmndrs/color-average","2.api/1.pmndrs/color-average",{"title":53,"path":54,"stem":55},"Color Depth","/api/pmndrs/color-depth","2.api/1.pmndrs/color-depth",{"title":57,"path":58,"stem":59},"Depth of Field","/api/pmndrs/depth-of-field","2.api/1.pmndrs/depth-of-field",{"title":61,"path":62,"stem":63},"Dot Screen","/api/pmndrs/dot-screen","2.api/1.pmndrs/dot-screen",{"title":65,"path":66,"stem":67},"Fish Eye","/api/pmndrs/fish-eye","2.api/1.pmndrs/fish-eye",{"title":69,"path":70,"stem":71},"FXAA","/api/pmndrs/fxaa","2.api/1.pmndrs/fxaa",{"title":73,"path":74,"stem":75},"Glitch","/api/pmndrs/glitch","2.api/1.pmndrs/glitch",{"title":77,"path":78,"stem":79},"God Rays","/api/pmndrs/god-rays","2.api/1.pmndrs/god-rays",{"title":81,"path":82,"stem":83},"Grid","/api/pmndrs/grid","2.api/1.pmndrs/grid",{"title":85,"path":86,"stem":87},"Hue & Saturation","/api/pmndrs/hue-saturation","2.api/1.pmndrs/hue-saturation",{"title":89,"path":90,"stem":91},"Kuwahara","/api/pmndrs/kuwahara","2.api/1.pmndrs/kuwahara",{"title":93,"path":94,"stem":95},"Lens Distortion","/api/pmndrs/lens-distortion","2.api/1.pmndrs/lens-distortion",{"title":97,"path":98,"stem":99},"Linocut","/api/pmndrs/linocut","2.api/1.pmndrs/linocut",{"title":101,"path":102,"stem":103},"Noise","/api/pmndrs/noise","2.api/1.pmndrs/noise",{"title":105,"path":106,"stem":107},"Outline","/api/pmndrs/outline","2.api/1.pmndrs/outline",{"title":109,"path":110,"stem":111},"Pixelation","/api/pmndrs/pixelation","2.api/1.pmndrs/pixelation",{"title":113,"path":114,"stem":115},"Scanline","/api/pmndrs/scanline","2.api/1.pmndrs/scanline",{"title":117,"path":118,"stem":119},"Sepia","/api/pmndrs/sepia","2.api/1.pmndrs/sepia",{"title":121,"path":122,"stem":123},"Shock Wave","/api/pmndrs/shock-wave","2.api/1.pmndrs/shock-wave",{"title":125,"path":126,"stem":127},"SMAA","/api/pmndrs/smaa","2.api/1.pmndrs/smaa",{"title":129,"path":130,"stem":131},"Texture","/api/pmndrs/texture","2.api/1.pmndrs/texture",{"title":133,"path":134,"stem":135},"Tilt Shift","/api/pmndrs/tilt-shift","2.api/1.pmndrs/tilt-shift",{"title":137,"path":138,"stem":139},"ToneMapping","/api/pmndrs/tone-mapping","2.api/1.pmndrs/tone-mapping",{"title":141,"path":142,"stem":143},"Vignette","/api/pmndrs/vignette","2.api/1.pmndrs/vignette",{"title":145,"path":146,"stem":147,"children":148},"Three Native Effects","/api/three","2.api/2.three/index",[149,150,153,157,161,164,167],{"title":145,"path":146,"stem":147},{"title":73,"path":151,"stem":152},"/api/three/glitch","2.api/2.three/glitch",{"title":154,"path":155,"stem":156},"Halftone","/api/three/halftone","2.api/2.three/halftone",{"title":158,"path":159,"stem":160},"Output","/api/three/output","2.api/2.three/output",{"title":109,"path":162,"stem":163},"/api/three/pixelation","2.api/2.three/pixelation",{"title":125,"path":165,"stem":166},"/api/three/smaa","2.api/2.three/smaa",{"title":168,"path":169,"stem":170},"Unreal Bloom","/api/three/unreal-bloom","2.api/2.three/unreal-bloom",{"title":172,"path":173,"stem":174,"children":175},"Advanced","/advanced","3.advanced/index",[176,177],{"title":172,"path":173,"stem":174},{"title":178,"path":179,"stem":180},"You might not need post-processing","/advanced/you-might-not-need-post-processing","3.advanced/you-might-not-need-post-processing",{"id":182,"title":137,"body":183,"description":835,"extension":836,"links":837,"meta":838,"navigation":380,"path":138,"seo":839,"stem":139,"__hash__":840},"docs/2.api/1.pmndrs/tone-mapping.md",{"type":184,"value":185,"toc":830},"minimark",[186,192,210,224,229,234,659,663,815,819,826],[187,188,189],"docs-demo",{},[190,191],"pmndrs-tone-mapping",{},[193,194,195,196,199,200,209],"p",{},"The ",[197,198,137],"code",{}," effect from the ",[201,202,206],"a",{"href":203,"rel":204},"https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html",[205],"nofollow",[197,207,208],{},"postprocessing"," package provides an abstraction for various tone mapping algorithms to improve the visual rendering of HDR (high dynamic range) content. Tone mapping is used to map high-range brightness values to a range that is displayable on standard screens. This effect contributes significantly to the visual quality of your scene by controlling luminance and color balance.",[211,212,213],"note",{},[193,214,215,216,219,220,223],{},"If the colors in your scene look incorrect after adding the EffectComposer, it might be because tone mapping is deactivated by default, which is normal behavior. Add ",[197,217,218],{},"\u003CToneMappingPmndrs>"," manually as an effect at the end of the ",[197,221,222],{},"\u003CEffectComposerPmndrs>"," to fix this.",[225,226,228],"h2",{"id":227},"usage","Usage",[193,230,195,231,233],{},[197,232,218],{}," component is easy to set up and comes with multiple tone mapping modes to suit different visual requirements.",[235,236,241],"pre",{"className":237,"code":238,"language":239,"meta":240,"style":240},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { EffectComposerPmndrs, ToneMappingPmndrs } from '@tresjs/post-processing'\nimport { NoToneMapping } from 'three'\nimport { ToneMappingMode } from 'postprocessing'\n\nconst gl = {\n  toneMappingExposure: 1,\n  toneMapping: NoToneMapping,\n}\n\nconst effectProps = {\n  mode: ToneMappingMode.AGX,\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas v-bind=\"gl\">\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n\n    \u003C!-- Your scene -->\n\n    \u003CSuspense>\n      \u003CEffectComposerPmndrs>\n        \u003CToneMappingPmndrs v-bind=\"effectProps\" />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[197,242,243,278,307,334,355,375,382,396,412,424,430,435,447,465,470,480,485,495,518,560,565,572,577,587,598,620,630,640,650],{"__ignoreMap":240},[244,245,248,252,256,260,263,266,269,273,275],"span",{"class":246,"line":247},"line",1,[244,249,251],{"class":250},"sMK4o","\u003C",[244,253,255],{"class":254},"swJcz","script",[244,257,259],{"class":258},"spNyl"," setup",[244,261,262],{"class":258}," lang",[244,264,265],{"class":250},"=",[244,267,268],{"class":250},"\"",[244,270,272],{"class":271},"sfazB","ts",[244,274,268],{"class":250},[244,276,277],{"class":250},">\n",[244,279,281,285,288,292,295,298,301,304],{"class":246,"line":280},2,[244,282,284],{"class":283},"s7zQu","import",[244,286,287],{"class":250}," {",[244,289,291],{"class":290},"sTEyZ"," TresCanvas",[244,293,294],{"class":250}," }",[244,296,297],{"class":283}," from",[244,299,300],{"class":250}," '",[244,302,303],{"class":271},"@tresjs/core",[244,305,306],{"class":250},"'\n",[244,308,310,312,314,317,320,323,325,327,329,332],{"class":246,"line":309},3,[244,311,284],{"class":283},[244,313,287],{"class":250},[244,315,316],{"class":290}," EffectComposerPmndrs",[244,318,319],{"class":250},",",[244,321,322],{"class":290}," ToneMappingPmndrs",[244,324,294],{"class":250},[244,326,297],{"class":283},[244,328,300],{"class":250},[244,330,331],{"class":271},"@tresjs/post-processing",[244,333,306],{"class":250},[244,335,337,339,341,344,346,348,350,353],{"class":246,"line":336},4,[244,338,284],{"class":283},[244,340,287],{"class":250},[244,342,343],{"class":290}," NoToneMapping",[244,345,294],{"class":250},[244,347,297],{"class":283},[244,349,300],{"class":250},[244,351,352],{"class":271},"three",[244,354,306],{"class":250},[244,356,358,360,362,365,367,369,371,373],{"class":246,"line":357},5,[244,359,284],{"class":283},[244,361,287],{"class":250},[244,363,364],{"class":290}," ToneMappingMode",[244,366,294],{"class":250},[244,368,297],{"class":283},[244,370,300],{"class":250},[244,372,208],{"class":271},[244,374,306],{"class":250},[244,376,378],{"class":246,"line":377},6,[244,379,381],{"emptyLinePlaceholder":380},true,"\n",[244,383,385,388,391,393],{"class":246,"line":384},7,[244,386,387],{"class":258},"const",[244,389,390],{"class":290}," gl ",[244,392,265],{"class":250},[244,394,395],{"class":250}," {\n",[244,397,399,402,405,409],{"class":246,"line":398},8,[244,400,401],{"class":254},"  toneMappingExposure",[244,403,404],{"class":250},":",[244,406,408],{"class":407},"sbssI"," 1",[244,410,411],{"class":250},",\n",[244,413,415,418,420,422],{"class":246,"line":414},9,[244,416,417],{"class":254},"  toneMapping",[244,419,404],{"class":250},[244,421,343],{"class":290},[244,423,411],{"class":250},[244,425,427],{"class":246,"line":426},10,[244,428,429],{"class":250},"}\n",[244,431,433],{"class":246,"line":432},11,[244,434,381],{"emptyLinePlaceholder":380},[244,436,438,440,443,445],{"class":246,"line":437},12,[244,439,387],{"class":258},[244,441,442],{"class":290}," effectProps ",[244,444,265],{"class":250},[244,446,395],{"class":250},[244,448,450,453,455,457,460,463],{"class":246,"line":449},13,[244,451,452],{"class":254},"  mode",[244,454,404],{"class":250},[244,456,364],{"class":290},[244,458,459],{"class":250},".",[244,461,462],{"class":290},"AGX",[244,464,411],{"class":250},[244,466,468],{"class":246,"line":467},14,[244,469,429],{"class":250},[244,471,473,476,478],{"class":246,"line":472},15,[244,474,475],{"class":250},"\u003C/",[244,477,255],{"class":254},[244,479,277],{"class":250},[244,481,483],{"class":246,"line":482},16,[244,484,381],{"emptyLinePlaceholder":380},[244,486,488,490,493],{"class":246,"line":487},17,[244,489,251],{"class":250},[244,491,492],{"class":254},"template",[244,494,277],{"class":250},[244,496,498,501,504,507,509,511,514,516],{"class":246,"line":497},18,[244,499,500],{"class":250},"  \u003C",[244,502,503],{"class":254},"TresCanvas",[244,505,506],{"class":258}," v-bind",[244,508,265],{"class":250},[244,510,268],{"class":250},[244,512,513],{"class":290},"gl",[244,515,268],{"class":250},[244,517,277],{"class":250},[244,519,521,524,527,530,533,535,537,540,543,546,548,550,552,555,557],{"class":246,"line":520},19,[244,522,523],{"class":250},"    \u003C",[244,525,526],{"class":254},"TresPerspectiveCamera",[244,528,529],{"class":250}," :",[244,531,532],{"class":258},"position",[244,534,265],{"class":250},[244,536,268],{"class":250},[244,538,539],{"class":250},"[",[244,541,542],{"class":407},"5",[244,544,545],{"class":250},", ",[244,547,542],{"class":407},[244,549,545],{"class":250},[244,551,542],{"class":407},[244,553,554],{"class":250},"]",[244,556,268],{"class":250},[244,558,559],{"class":250}," />\n",[244,561,563],{"class":246,"line":562},20,[244,564,381],{"emptyLinePlaceholder":380},[244,566,568],{"class":246,"line":567},21,[244,569,571],{"class":570},"sHwdD","    \u003C!-- Your scene -->\n",[244,573,575],{"class":246,"line":574},22,[244,576,381],{"emptyLinePlaceholder":380},[244,578,580,582,585],{"class":246,"line":579},23,[244,581,523],{"class":250},[244,583,584],{"class":254},"Suspense",[244,586,277],{"class":250},[244,588,590,593,596],{"class":246,"line":589},24,[244,591,592],{"class":250},"      \u003C",[244,594,595],{"class":254},"EffectComposerPmndrs",[244,597,277],{"class":250},[244,599,601,604,607,609,611,613,616,618],{"class":246,"line":600},25,[244,602,603],{"class":250},"        \u003C",[244,605,606],{"class":254},"ToneMappingPmndrs",[244,608,506],{"class":258},[244,610,265],{"class":250},[244,612,268],{"class":250},[244,614,615],{"class":290},"effectProps",[244,617,268],{"class":250},[244,619,559],{"class":250},[244,621,623,626,628],{"class":246,"line":622},26,[244,624,625],{"class":250},"      \u003C/",[244,627,595],{"class":254},[244,629,277],{"class":250},[244,631,633,636,638],{"class":246,"line":632},27,[244,634,635],{"class":250},"    \u003C/",[244,637,584],{"class":254},[244,639,277],{"class":250},[244,641,643,646,648],{"class":246,"line":642},28,[244,644,645],{"class":250},"  \u003C/",[244,647,503],{"class":254},[244,649,277],{"class":250},[244,651,653,655,657],{"class":246,"line":652},29,[244,654,475],{"class":250},[244,656,492],{"class":254},[244,658,277],{"class":250},[225,660,662],{"id":661},"props","Props",[664,665,666,682],"table",{},[667,668,669],"thead",{},[670,671,672,676,679],"tr",{},[673,674,675],"th",{},"Prop",[673,677,678],{},"Description",[673,680,681],{},"Default",[683,684,685,708,731,746,764,781,798],"tbody",{},[670,686,687,693,703],{},[688,689,690],"td",{},[197,691,692],{},"mode",[688,694,695,696,459],{},"Tone mapping mode used, defined by ",[201,697,700],{"href":698,"rel":699},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-ToneMappingMode",[205],[197,701,702],{},"ToneMappingMode",[688,704,705],{},[197,706,707],{},"ToneMappingMode.AGX",[670,709,710,715,726],{},[688,711,712],{},[197,713,714],{},"blendFunction",[688,716,717,718,725],{},"Defines how the effect blends with the original scene. See the ",[201,719,722],{"href":720,"rel":721},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction",[205],[197,723,724],{},"BlendFunction"," options.",[688,727,728],{},[197,729,730],{},"BlendFunction.SRC",[670,732,733,738,741],{},[688,734,735],{},[197,736,737],{},"resolution",[688,739,740],{},"Resolution of the luminance texture (must be a power of two, e.g. 256, 512).",[688,742,743],{},[197,744,745],{},"256",[670,747,748,753,759],{},[688,749,750],{},[197,751,752],{},"averageLuminance",[688,754,755,756,459],{},"Average luminance value used in adaptive calculations. Only applicable to ",[197,757,758],{},"ToneMappingMode.REINHARD2",[688,760,761],{},[197,762,763],{},"1.0",[670,765,766,771,776],{},[688,767,768],{},[197,769,770],{},"middleGrey",[688,772,773,774,459],{},"Factor to adjust the balance of grey in luminance calculations. Only applicable to ",[197,775,758],{},[688,777,778],{},[197,779,780],{},"0.6",[670,782,783,788,793],{},[688,784,785],{},[197,786,787],{},"minLuminance",[688,789,790,791,459],{},"Lower luminance limit, used to avoid overexposure effects in dark scenes. Only applicable to ",[197,792,758],{},[688,794,795],{},[197,796,797],{},"0.01",[670,799,800,805,810],{},[688,801,802],{},[197,803,804],{},"whitePoint",[688,806,807,808,459],{},"White point for tone mapping, used to balance luminance values. Only applicable to ",[197,809,758],{},[688,811,812],{},[197,813,814],{},"4.0",[225,816,818],{"id":817},"further-reading","Further Reading",[193,820,821,822,459],{},"For more details, see the ",[201,823,825],{"href":203,"rel":824},[205],"ToneMappingEffect documentation",[827,828,829],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":240,"searchDepth":247,"depth":280,"links":831},[832,833,834],{"id":227,"depth":280,"text":228},{"id":661,"depth":280,"text":662},{"id":817,"depth":280,"text":818},"Apply various tone mapping algorithms to improve the visual rendering of HDR content.","md",null,{},{"title":137,"description":835},"sz77uujZdqSgWvWheyW8nuFkNwBiP-rLQKNugqkNl9g",[842,844],{"title":133,"path":134,"stem":135,"description":843,"children":-1},"Create a tilt-shift effect simulating a shallow depth of field.",{"title":141,"path":142,"stem":143,"description":845,"children":-1},"Darken the edges of the scene to make the center pop.",1779713682862]