[{"data":1,"prerenderedAt":829},["ShallowReactive",2],{"navigation":3,"/api/pmndrs/hue-saturation":181,"/api/pmndrs/hue-saturation-surround":824},[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":85,"body":183,"description":818,"extension":819,"links":820,"meta":821,"navigation":347,"path":86,"seo":822,"stem":87,"__hash__":823},"docs/2.api/1.pmndrs/hue-saturation.md",{"type":184,"value":185,"toc":813},"minimark",[186,192,211,216,222,704,708,798,802,809],[187,188,189],"docs-demo",{},[190,191],"pmndrs-hue-saturation",{},[193,194,195,196,200,201,210],"p",{},"The ",[197,198,199],"code",{},"HueSaturation"," effect is part of the ",[202,203,207],"a",{"href":204,"rel":205},"https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/HueSaturationEffect.js~HueSaturationEffect.html",[206],"nofollow",[197,208,209],{},"postprocessing"," package. It allows you to adjust the hue and saturation of your scene, providing flexibility for color grading and artistic effects.",[212,213,215],"h2",{"id":214},"usage","Usage",[193,217,195,218,221],{},[197,219,220],{},"\u003CHueSaturationPmndrs>"," component is straightforward to use and provides customizable options to fine-tune the hue and saturation of your visuals.",[223,224,229],"pre",{"className":225,"code":226,"language":227,"meta":228,"style":228},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { EffectComposerPmndrs, HueSaturationPmndrs } from '@tresjs/post-processing'\nimport { BlendFunction } from 'postprocessing'\nimport { NoToneMapping } from 'three'\n\nconst gl = {\n  toneMapping: NoToneMapping,\n}\n\nconst effectProps = {\n  saturation: 1,\n  hue: -Math.PI,\n  blendFunction: BlendFunction.SRC,\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        \u003CHueSaturationPmndrs\n          :blend-function=\"effectProps.blendFunction\"\n          :hue=\"effectProps.hue\"\n          :saturation=\"effectProps.saturation\"\n        />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[197,230,231,266,301,321,342,349,363,377,383,388,400,414,436,453,458,468,473,483,506,548,553,560,565,575,586,595,619,639,659,665,675,685,695],{"__ignoreMap":228},[232,233,236,240,244,248,251,254,257,261,263],"span",{"class":234,"line":235},"line",1,[232,237,239],{"class":238},"sMK4o","\u003C",[232,241,243],{"class":242},"swJcz","script",[232,245,247],{"class":246},"spNyl"," setup",[232,249,250],{"class":246}," lang",[232,252,253],{"class":238},"=",[232,255,256],{"class":238},"\"",[232,258,260],{"class":259},"sfazB","ts",[232,262,256],{"class":238},[232,264,265],{"class":238},">\n",[232,267,269,273,276,280,283,286,289,292,295,298],{"class":234,"line":268},2,[232,270,272],{"class":271},"s7zQu","import",[232,274,275],{"class":238}," {",[232,277,279],{"class":278},"sTEyZ"," EffectComposerPmndrs",[232,281,282],{"class":238},",",[232,284,285],{"class":278}," HueSaturationPmndrs",[232,287,288],{"class":238}," }",[232,290,291],{"class":271}," from",[232,293,294],{"class":238}," '",[232,296,297],{"class":259},"@tresjs/post-processing",[232,299,300],{"class":238},"'\n",[232,302,304,306,308,311,313,315,317,319],{"class":234,"line":303},3,[232,305,272],{"class":271},[232,307,275],{"class":238},[232,309,310],{"class":278}," BlendFunction",[232,312,288],{"class":238},[232,314,291],{"class":271},[232,316,294],{"class":238},[232,318,209],{"class":259},[232,320,300],{"class":238},[232,322,324,326,328,331,333,335,337,340],{"class":234,"line":323},4,[232,325,272],{"class":271},[232,327,275],{"class":238},[232,329,330],{"class":278}," NoToneMapping",[232,332,288],{"class":238},[232,334,291],{"class":271},[232,336,294],{"class":238},[232,338,339],{"class":259},"three",[232,341,300],{"class":238},[232,343,345],{"class":234,"line":344},5,[232,346,348],{"emptyLinePlaceholder":347},true,"\n",[232,350,352,355,358,360],{"class":234,"line":351},6,[232,353,354],{"class":246},"const",[232,356,357],{"class":278}," gl ",[232,359,253],{"class":238},[232,361,362],{"class":238}," {\n",[232,364,366,369,372,374],{"class":234,"line":365},7,[232,367,368],{"class":242},"  toneMapping",[232,370,371],{"class":238},":",[232,373,330],{"class":278},[232,375,376],{"class":238},",\n",[232,378,380],{"class":234,"line":379},8,[232,381,382],{"class":238},"}\n",[232,384,386],{"class":234,"line":385},9,[232,387,348],{"emptyLinePlaceholder":347},[232,389,391,393,396,398],{"class":234,"line":390},10,[232,392,354],{"class":246},[232,394,395],{"class":278}," effectProps ",[232,397,253],{"class":238},[232,399,362],{"class":238},[232,401,403,406,408,412],{"class":234,"line":402},11,[232,404,405],{"class":242},"  saturation",[232,407,371],{"class":238},[232,409,411],{"class":410},"sbssI"," 1",[232,413,376],{"class":238},[232,415,417,420,422,425,428,431,434],{"class":234,"line":416},12,[232,418,419],{"class":242},"  hue",[232,421,371],{"class":238},[232,423,424],{"class":238}," -",[232,426,427],{"class":278},"Math",[232,429,430],{"class":238},".",[232,432,433],{"class":278},"PI",[232,435,376],{"class":238},[232,437,439,442,444,446,448,451],{"class":234,"line":438},13,[232,440,441],{"class":242},"  blendFunction",[232,443,371],{"class":238},[232,445,310],{"class":278},[232,447,430],{"class":238},[232,449,450],{"class":278},"SRC",[232,452,376],{"class":238},[232,454,456],{"class":234,"line":455},14,[232,457,382],{"class":238},[232,459,461,464,466],{"class":234,"line":460},15,[232,462,463],{"class":238},"\u003C/",[232,465,243],{"class":242},[232,467,265],{"class":238},[232,469,471],{"class":234,"line":470},16,[232,472,348],{"emptyLinePlaceholder":347},[232,474,476,478,481],{"class":234,"line":475},17,[232,477,239],{"class":238},[232,479,480],{"class":242},"template",[232,482,265],{"class":238},[232,484,486,489,492,495,497,499,502,504],{"class":234,"line":485},18,[232,487,488],{"class":238},"  \u003C",[232,490,491],{"class":242},"TresCanvas",[232,493,494],{"class":246}," v-bind",[232,496,253],{"class":238},[232,498,256],{"class":238},[232,500,501],{"class":278},"gl",[232,503,256],{"class":238},[232,505,265],{"class":238},[232,507,509,512,515,518,521,523,525,528,531,534,536,538,540,543,545],{"class":234,"line":508},19,[232,510,511],{"class":238},"    \u003C",[232,513,514],{"class":242},"TresPerspectiveCamera",[232,516,517],{"class":238}," :",[232,519,520],{"class":246},"position",[232,522,253],{"class":238},[232,524,256],{"class":238},[232,526,527],{"class":238},"[",[232,529,530],{"class":410},"5",[232,532,533],{"class":238},", ",[232,535,530],{"class":410},[232,537,533],{"class":238},[232,539,530],{"class":410},[232,541,542],{"class":238},"]",[232,544,256],{"class":238},[232,546,547],{"class":238}," />\n",[232,549,551],{"class":234,"line":550},20,[232,552,348],{"emptyLinePlaceholder":347},[232,554,556],{"class":234,"line":555},21,[232,557,559],{"class":558},"sHwdD","    \u003C!-- Your scene -->\n",[232,561,563],{"class":234,"line":562},22,[232,564,348],{"emptyLinePlaceholder":347},[232,566,568,570,573],{"class":234,"line":567},23,[232,569,511],{"class":238},[232,571,572],{"class":242},"Suspense",[232,574,265],{"class":238},[232,576,578,581,584],{"class":234,"line":577},24,[232,579,580],{"class":238},"      \u003C",[232,582,583],{"class":242},"EffectComposerPmndrs",[232,585,265],{"class":238},[232,587,589,592],{"class":234,"line":588},25,[232,590,591],{"class":238},"        \u003C",[232,593,594],{"class":242},"HueSaturationPmndrs\n",[232,596,598,601,604,606,608,611,613,616],{"class":234,"line":597},26,[232,599,600],{"class":238},"          :",[232,602,603],{"class":246},"blend-function",[232,605,253],{"class":238},[232,607,256],{"class":238},[232,609,610],{"class":278},"effectProps",[232,612,430],{"class":238},[232,614,615],{"class":278},"blendFunction",[232,617,618],{"class":238},"\"\n",[232,620,622,624,627,629,631,633,635,637],{"class":234,"line":621},27,[232,623,600],{"class":238},[232,625,626],{"class":246},"hue",[232,628,253],{"class":238},[232,630,256],{"class":238},[232,632,610],{"class":278},[232,634,430],{"class":238},[232,636,626],{"class":278},[232,638,618],{"class":238},[232,640,642,644,647,649,651,653,655,657],{"class":234,"line":641},28,[232,643,600],{"class":238},[232,645,646],{"class":246},"saturation",[232,648,253],{"class":238},[232,650,256],{"class":238},[232,652,610],{"class":278},[232,654,430],{"class":238},[232,656,646],{"class":278},[232,658,618],{"class":238},[232,660,662],{"class":234,"line":661},29,[232,663,664],{"class":238},"        />\n",[232,666,668,671,673],{"class":234,"line":667},30,[232,669,670],{"class":238},"      \u003C/",[232,672,583],{"class":242},[232,674,265],{"class":238},[232,676,678,681,683],{"class":234,"line":677},31,[232,679,680],{"class":238},"    \u003C/",[232,682,572],{"class":242},[232,684,265],{"class":238},[232,686,688,691,693],{"class":234,"line":687},32,[232,689,690],{"class":238},"  \u003C/",[232,692,491],{"class":242},[232,694,265],{"class":238},[232,696,698,700,702],{"class":234,"line":697},33,[232,699,463],{"class":238},[232,701,480],{"class":242},[232,703,265],{"class":238},[212,705,707],{"id":706},"props","Props",[709,710,711,727],"table",{},[712,713,714],"thead",{},[715,716,717,721,724],"tr",{},[718,719,720],"th",{},"Prop",[718,722,723],{},"Description",[718,725,726],{},"Default",[728,729,730,755,776],"tbody",{},[715,731,732,737,751],{},[733,734,735],"td",{},[197,736,646],{},[733,738,739,740,743,744,747,748,430],{},"The saturation adjustment. A value of ",[197,741,742],{},"0.0"," results in grayscale, while ",[197,745,746],{},"1.0"," leaves saturation unchanged. Range: ",[197,749,750],{},"[0.0, 1.0]",[733,752,753],{},[197,754,742],{},[715,756,757,761,772],{},[733,758,759],{},[197,760,626],{},[733,762,763,764,767,768,771],{},"The hue adjustment in radians. Values range from ",[197,765,766],{},"[-π, π]"," (or ",[197,769,770],{},"[0, 2π]"," for a full rotation).",[733,773,774],{},[197,775,742],{},[715,777,778,782,793],{},[733,779,780],{},[197,781,615],{},[733,783,784,785,792],{},"Defines how the effect blends with the original scene. See the ",[202,786,789],{"href":787,"rel":788},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction",[206],[197,790,791],{},"BlendFunction"," options.",[733,794,795],{},[197,796,797],{},"BlendFunction.SRC",[212,799,801],{"id":800},"further-reading","Further Reading",[193,803,804,805,430],{},"For more details, see the ",[202,806,808],{"href":204,"rel":807},[206],"HueSaturationEffect documentation",[810,811,812],"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":228,"searchDepth":235,"depth":268,"links":814},[815,816,817],{"id":214,"depth":268,"text":215},{"id":706,"depth":268,"text":707},{"id":800,"depth":268,"text":801},"Adjust hue and saturation of the scene for color grading and artistic effects.","md",null,{},{"title":85,"description":818},"2ONjgxgCzoP3P3ZI5h24kIjVLB4TYdOXkYHRl19uTmo",[825,827],{"title":81,"path":82,"stem":83,"description":826,"children":-1},"Render an adjustable grid overlay that can be scaled for various visual effects.",{"title":89,"path":90,"stem":91,"description":828,"children":-1},"Apply a painterly Kuwahara filter to your scene.",1779713681237]