[{"data":1,"prerenderedAt":764},["ShallowReactive",2],{"navigation":3,"/api/pmndrs/chromatic-aberration":181,"/api/pmndrs/chromatic-aberration-surround":759},[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":45,"body":183,"description":753,"extension":754,"links":755,"meta":756,"navigation":332,"path":46,"seo":757,"stem":47,"__hash__":758},"docs/2.api/1.pmndrs/chromatic-aberration.md",{"type":184,"value":185,"toc":748},"minimark",[186,192,211,216,222,619,623,722,733,737,744],[187,188,189],"docs-demo",{},[190,191],"pmndrs-chromatic-aberration",{},[193,194,195,196,200,201,210],"p",{},"The ",[197,198,199],"code",{},"ChromaticAberration"," effect is part of the ",[202,203,207],"a",{"href":204,"rel":205},"https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ChromaticAberrationEffect.js~ChromaticAberrationEffect.html",[206],"nofollow",[197,208,209],{},"postprocessing"," package. It simulates the dispersion of light as it passes through a lens, creating subtle or dramatic color fringing effects at the edges of objects. This effect can enhance the visual appeal of your scene by adding a realistic lens effect or a stylized touch.",[212,213,215],"h2",{"id":214},"usage","Usage",[193,217,195,218,221],{},[197,219,220],{},"\u003CChromaticAberrationPmndrs>"," component is easy to use and provides customizable options to suit different visual styles.",[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 { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'\nimport { NoToneMapping, Vector2 } from 'three'\n\nconst gl = {\n  toneMapping: NoToneMapping,\n}\n\nconst effectProps = {\n  offset: new Vector2(0.07, 0.07),\n  radialModulation: true,\n  modulationOffset: 0,\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        \u003CChromaticAberrationPmndrs v-bind=\"effectProps\" />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[197,230,231,266,301,327,334,348,362,368,373,385,416,430,443,448,458,463,473,496,520,525,532,537,547,558,580,590,600,610],{"__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"," ChromaticAberrationPmndrs",[232,281,282],{"class":238},",",[232,284,285],{"class":278}," EffectComposerPmndrs",[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,316,318,320,322,325],{"class":234,"line":303},3,[232,305,272],{"class":271},[232,307,275],{"class":238},[232,309,310],{"class":278}," NoToneMapping",[232,312,282],{"class":238},[232,314,315],{"class":278}," Vector2",[232,317,288],{"class":238},[232,319,291],{"class":271},[232,321,294],{"class":238},[232,323,324],{"class":259},"three",[232,326,300],{"class":238},[232,328,330],{"class":234,"line":329},4,[232,331,333],{"emptyLinePlaceholder":332},true,"\n",[232,335,337,340,343,345],{"class":234,"line":336},5,[232,338,339],{"class":246},"const",[232,341,342],{"class":278}," gl ",[232,344,253],{"class":238},[232,346,347],{"class":238}," {\n",[232,349,351,354,357,359],{"class":234,"line":350},6,[232,352,353],{"class":242},"  toneMapping",[232,355,356],{"class":238},":",[232,358,310],{"class":278},[232,360,361],{"class":238},",\n",[232,363,365],{"class":234,"line":364},7,[232,366,367],{"class":238},"}\n",[232,369,371],{"class":234,"line":370},8,[232,372,333],{"emptyLinePlaceholder":332},[232,374,376,378,381,383],{"class":234,"line":375},9,[232,377,339],{"class":246},[232,379,380],{"class":278}," effectProps ",[232,382,253],{"class":238},[232,384,347],{"class":238},[232,386,388,391,393,396,399,402,406,408,411,414],{"class":234,"line":387},10,[232,389,390],{"class":242},"  offset",[232,392,356],{"class":238},[232,394,395],{"class":238}," new",[232,397,315],{"class":398},"s2Zo4",[232,400,401],{"class":278},"(",[232,403,405],{"class":404},"sbssI","0.07",[232,407,282],{"class":238},[232,409,410],{"class":404}," 0.07",[232,412,413],{"class":278},")",[232,415,361],{"class":238},[232,417,419,422,424,428],{"class":234,"line":418},11,[232,420,421],{"class":242},"  radialModulation",[232,423,356],{"class":238},[232,425,427],{"class":426},"sfNiH"," true",[232,429,361],{"class":238},[232,431,433,436,438,441],{"class":234,"line":432},12,[232,434,435],{"class":242},"  modulationOffset",[232,437,356],{"class":238},[232,439,440],{"class":404}," 0",[232,442,361],{"class":238},[232,444,446],{"class":234,"line":445},13,[232,447,367],{"class":238},[232,449,451,454,456],{"class":234,"line":450},14,[232,452,453],{"class":238},"\u003C/",[232,455,243],{"class":242},[232,457,265],{"class":238},[232,459,461],{"class":234,"line":460},15,[232,462,333],{"emptyLinePlaceholder":332},[232,464,466,468,471],{"class":234,"line":465},16,[232,467,239],{"class":238},[232,469,470],{"class":242},"template",[232,472,265],{"class":238},[232,474,476,479,482,485,487,489,492,494],{"class":234,"line":475},17,[232,477,478],{"class":238},"  \u003C",[232,480,481],{"class":242},"TresCanvas",[232,483,484],{"class":246}," v-bind",[232,486,253],{"class":238},[232,488,256],{"class":238},[232,490,491],{"class":259},"gl",[232,493,256],{"class":238},[232,495,265],{"class":238},[232,497,499,502,505,508,510,512,515,517],{"class":234,"line":498},18,[232,500,501],{"class":238},"    \u003C",[232,503,504],{"class":242},"TresPerspectiveCamera",[232,506,507],{"class":246}," :position",[232,509,253],{"class":238},[232,511,256],{"class":238},[232,513,514],{"class":259},"[5, 5, 5]",[232,516,256],{"class":238},[232,518,519],{"class":238}," />\n",[232,521,523],{"class":234,"line":522},19,[232,524,333],{"emptyLinePlaceholder":332},[232,526,528],{"class":234,"line":527},20,[232,529,531],{"class":530},"sHwdD","    \u003C!-- Your scene -->\n",[232,533,535],{"class":234,"line":534},21,[232,536,333],{"emptyLinePlaceholder":332},[232,538,540,542,545],{"class":234,"line":539},22,[232,541,501],{"class":238},[232,543,544],{"class":242},"Suspense",[232,546,265],{"class":238},[232,548,550,553,556],{"class":234,"line":549},23,[232,551,552],{"class":238},"      \u003C",[232,554,555],{"class":242},"EffectComposerPmndrs",[232,557,265],{"class":238},[232,559,561,564,567,569,571,573,576,578],{"class":234,"line":560},24,[232,562,563],{"class":238},"        \u003C",[232,565,566],{"class":242},"ChromaticAberrationPmndrs",[232,568,484],{"class":246},[232,570,253],{"class":238},[232,572,256],{"class":238},[232,574,575],{"class":259},"effectProps",[232,577,256],{"class":238},[232,579,519],{"class":238},[232,581,583,586,588],{"class":234,"line":582},25,[232,584,585],{"class":238},"      \u003C/",[232,587,555],{"class":242},[232,589,265],{"class":238},[232,591,593,596,598],{"class":234,"line":592},26,[232,594,595],{"class":238},"    \u003C/",[232,597,544],{"class":242},[232,599,265],{"class":238},[232,601,603,606,608],{"class":234,"line":602},27,[232,604,605],{"class":238},"  \u003C/",[232,607,481],{"class":242},[232,609,265],{"class":238},[232,611,613,615,617],{"class":234,"line":612},28,[232,614,453],{"class":238},[232,616,470],{"class":242},[232,618,265],{"class":238},[212,620,622],{"id":621},"props","Props",[624,625,626,642],"table",{},[627,628,629],"thead",{},[630,631,632,636,639],"tr",{},[633,634,635],"th",{},"Prop",[633,637,638],{},"Description",[633,640,641],{},"Default",[643,644,645,669,684,699],"tbody",{},[630,646,647,653,664],{},[648,649,650],"td",{},[197,651,652],{},"blendFunction",[648,654,655,656,663],{},"Defines how the effect blends with the original scene. See the ",[202,657,660],{"href":658,"rel":659},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction",[206],[197,661,662],{},"BlendFunction"," options.",[648,665,666],{},[197,667,668],{},"BlendFunction.SRC",[630,670,671,676,679],{},[648,672,673],{},[197,674,675],{},"offset",[648,677,678],{},"The color offset vector determining the intensity and direction of chromatic aberration.",[648,680,681],{},[197,682,683],{},"Vector2(0.01, 0.01)",[630,685,686,691,694],{},[648,687,688],{},[197,689,690],{},"radialModulation",[648,692,693],{},"Enables radial modulation to vary the effect intensity based on distance from the center.",[648,695,696],{},[197,697,698],{},"false",[630,700,701,706,717],{},[648,702,703],{},[197,704,705],{},"modulationOffset",[648,707,708,709,711,712,716],{},"Specifies the modulation offset when ",[197,710,690],{}," is ",[713,714,715],"strong",{},"enabled",".",[648,718,719],{},[197,720,721],{},"0.15",[723,724,725],"note",{},[193,726,195,727,729,730,732],{},[197,728,705],{}," property is functional only when ",[197,731,690],{}," is enabled.",[212,734,736],{"id":735},"further-reading","Further Reading",[193,738,739,740,716],{},"For more details, see the ",[202,741,743],{"href":204,"rel":742},[206],"ChromaticAberrationEffect documentation",[745,746,747],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":749},[750,751,752],{"id":214,"depth":268,"text":215},{"id":621,"depth":268,"text":622},{"id":735,"depth":268,"text":736},"Simulate color fringing at object edges for a realistic lens effect.","md",null,{},{"title":45,"description":753},"q-j8AK4BnGm_xWdE5Kv0iEPADQZGa_EhFugQ5u3_TH8",[760,762],{"title":41,"path":42,"stem":43,"description":761,"children":-1},"Adjust the brightness and contrast of your scene.",{"title":49,"path":50,"stem":51,"description":763,"children":-1},"Average the colors of the scene to create a unique artistic visual effect.",1785417167539]