[{"data":1,"prerenderedAt":758},["ShallowReactive",2],{"navigation":3,"/api/pmndrs/barrel-blur":181,"/api/pmndrs/barrel-blur-surround":753},[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":33,"body":183,"description":747,"extension":748,"links":749,"meta":750,"navigation":337,"path":34,"seo":751,"stem":35,"__hash__":752},"docs/2.api/1.pmndrs/barrel-blur.md",{"type":184,"value":185,"toc":742},"minimark",[186,192,200,205,211,639,643,725,729,738],[187,188,189],"docs-demo",{},[190,191],"pmndrs-barrel-blur",{},[193,194,195,196,199],"p",{},"The ",[197,198,33],"code",{}," is a custom effect that applies a barrel distortion with chromatic aberration blur, providing a unique visual effect.",[201,202,204],"h2",{"id":203},"usage","Usage",[193,206,195,207,210],{},[197,208,209],{},"\u003CBarrelBlurPmndrs>"," component is straightforward to use and provides customizable options to fine-tune the barrel blur effect.",[212,213,218],"pre",{"className":214,"code":215,"language":216,"meta":217,"style":217},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { BarrelBlurPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'\nimport { NoToneMapping } from 'three'\n\nconst gl = {\n  clearColor: '#4f4f4f',\n  toneMapping: NoToneMapping,\n}\n\nconst effectProps = {\n  amount: 0.25,\n  offset: [0.5, 0.5],\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        \u003CBarrelBlurPmndrs v-bind=\"effectProps\" />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[197,219,220,255,284,311,332,339,353,373,385,391,396,408,422,446,451,461,466,476,499,540,545,552,557,567,578,600,610,620,630],{"__ignoreMap":217},[221,222,225,229,233,237,240,243,246,250,252],"span",{"class":223,"line":224},"line",1,[221,226,228],{"class":227},"sMK4o","\u003C",[221,230,232],{"class":231},"swJcz","script",[221,234,236],{"class":235},"spNyl"," setup",[221,238,239],{"class":235}," lang",[221,241,242],{"class":227},"=",[221,244,245],{"class":227},"\"",[221,247,249],{"class":248},"sfazB","ts",[221,251,245],{"class":227},[221,253,254],{"class":227},">\n",[221,256,258,262,265,269,272,275,278,281],{"class":223,"line":257},2,[221,259,261],{"class":260},"s7zQu","import",[221,263,264],{"class":227}," {",[221,266,268],{"class":267},"sTEyZ"," TresCanvas",[221,270,271],{"class":227}," }",[221,273,274],{"class":260}," from",[221,276,277],{"class":227}," '",[221,279,280],{"class":248},"@tresjs/core",[221,282,283],{"class":227},"'\n",[221,285,287,289,291,294,297,300,302,304,306,309],{"class":223,"line":286},3,[221,288,261],{"class":260},[221,290,264],{"class":227},[221,292,293],{"class":267}," BarrelBlurPmndrs",[221,295,296],{"class":227},",",[221,298,299],{"class":267}," EffectComposerPmndrs",[221,301,271],{"class":227},[221,303,274],{"class":260},[221,305,277],{"class":227},[221,307,308],{"class":248},"@tresjs/post-processing",[221,310,283],{"class":227},[221,312,314,316,318,321,323,325,327,330],{"class":223,"line":313},4,[221,315,261],{"class":260},[221,317,264],{"class":227},[221,319,320],{"class":267}," NoToneMapping",[221,322,271],{"class":227},[221,324,274],{"class":260},[221,326,277],{"class":227},[221,328,329],{"class":248},"three",[221,331,283],{"class":227},[221,333,335],{"class":223,"line":334},5,[221,336,338],{"emptyLinePlaceholder":337},true,"\n",[221,340,342,345,348,350],{"class":223,"line":341},6,[221,343,344],{"class":235},"const",[221,346,347],{"class":267}," gl ",[221,349,242],{"class":227},[221,351,352],{"class":227}," {\n",[221,354,356,359,362,364,367,370],{"class":223,"line":355},7,[221,357,358],{"class":231},"  clearColor",[221,360,361],{"class":227},":",[221,363,277],{"class":227},[221,365,366],{"class":248},"#4f4f4f",[221,368,369],{"class":227},"'",[221,371,372],{"class":227},",\n",[221,374,376,379,381,383],{"class":223,"line":375},8,[221,377,378],{"class":231},"  toneMapping",[221,380,361],{"class":227},[221,382,320],{"class":267},[221,384,372],{"class":227},[221,386,388],{"class":223,"line":387},9,[221,389,390],{"class":227},"}\n",[221,392,394],{"class":223,"line":393},10,[221,395,338],{"emptyLinePlaceholder":337},[221,397,399,401,404,406],{"class":223,"line":398},11,[221,400,344],{"class":235},[221,402,403],{"class":267}," effectProps ",[221,405,242],{"class":227},[221,407,352],{"class":227},[221,409,411,414,416,420],{"class":223,"line":410},12,[221,412,413],{"class":231},"  amount",[221,415,361],{"class":227},[221,417,419],{"class":418},"sbssI"," 0.25",[221,421,372],{"class":227},[221,423,425,428,430,433,436,438,441,444],{"class":223,"line":424},13,[221,426,427],{"class":231},"  offset",[221,429,361],{"class":227},[221,431,432],{"class":267}," [",[221,434,435],{"class":418},"0.5",[221,437,296],{"class":227},[221,439,440],{"class":418}," 0.5",[221,442,443],{"class":267},"]",[221,445,372],{"class":227},[221,447,449],{"class":223,"line":448},14,[221,450,390],{"class":227},[221,452,454,457,459],{"class":223,"line":453},15,[221,455,456],{"class":227},"\u003C/",[221,458,232],{"class":231},[221,460,254],{"class":227},[221,462,464],{"class":223,"line":463},16,[221,465,338],{"emptyLinePlaceholder":337},[221,467,469,471,474],{"class":223,"line":468},17,[221,470,228],{"class":227},[221,472,473],{"class":231},"template",[221,475,254],{"class":227},[221,477,479,482,485,488,490,492,495,497],{"class":223,"line":478},18,[221,480,481],{"class":227},"  \u003C",[221,483,484],{"class":231},"TresCanvas",[221,486,487],{"class":235}," v-bind",[221,489,242],{"class":227},[221,491,245],{"class":227},[221,493,494],{"class":267},"gl",[221,496,245],{"class":227},[221,498,254],{"class":227},[221,500,502,505,508,511,514,516,518,521,524,527,529,531,533,535,537],{"class":223,"line":501},19,[221,503,504],{"class":227},"    \u003C",[221,506,507],{"class":231},"TresPerspectiveCamera",[221,509,510],{"class":227}," :",[221,512,513],{"class":235},"position",[221,515,242],{"class":227},[221,517,245],{"class":227},[221,519,520],{"class":227},"[",[221,522,523],{"class":418},"5",[221,525,526],{"class":227},", ",[221,528,523],{"class":418},[221,530,526],{"class":227},[221,532,523],{"class":418},[221,534,443],{"class":227},[221,536,245],{"class":227},[221,538,539],{"class":227}," />\n",[221,541,543],{"class":223,"line":542},20,[221,544,338],{"emptyLinePlaceholder":337},[221,546,548],{"class":223,"line":547},21,[221,549,551],{"class":550},"sHwdD","    \u003C!-- Your scene -->\n",[221,553,555],{"class":223,"line":554},22,[221,556,338],{"emptyLinePlaceholder":337},[221,558,560,562,565],{"class":223,"line":559},23,[221,561,504],{"class":227},[221,563,564],{"class":231},"Suspense",[221,566,254],{"class":227},[221,568,570,573,576],{"class":223,"line":569},24,[221,571,572],{"class":227},"      \u003C",[221,574,575],{"class":231},"EffectComposerPmndrs",[221,577,254],{"class":227},[221,579,581,584,587,589,591,593,596,598],{"class":223,"line":580},25,[221,582,583],{"class":227},"        \u003C",[221,585,586],{"class":231},"BarrelBlurPmndrs",[221,588,487],{"class":235},[221,590,242],{"class":227},[221,592,245],{"class":227},[221,594,595],{"class":267},"effectProps",[221,597,245],{"class":227},[221,599,539],{"class":227},[221,601,603,606,608],{"class":223,"line":602},26,[221,604,605],{"class":227},"      \u003C/",[221,607,575],{"class":231},[221,609,254],{"class":227},[221,611,613,616,618],{"class":223,"line":612},27,[221,614,615],{"class":227},"    \u003C/",[221,617,564],{"class":231},[221,619,254],{"class":227},[221,621,623,626,628],{"class":223,"line":622},28,[221,624,625],{"class":227},"  \u003C/",[221,627,484],{"class":231},[221,629,254],{"class":227},[221,631,633,635,637],{"class":223,"line":632},29,[221,634,456],{"class":227},[221,636,473],{"class":231},[221,638,254],{"class":227},[201,640,642],{"id":641},"props","Props",[644,645,646,662],"table",{},[647,648,649],"thead",{},[650,651,652,656,659],"tr",{},[653,654,655],"th",{},"Prop",[653,657,658],{},"Description",[653,660,661],{},"Default",[663,664,665,681,700],"tbody",{},[650,666,667,673,676],{},[668,669,670],"td",{},[197,671,672],{},"amount",[668,674,675],{},"The intensity of the barrel distortion. A value between 0 (no distortion) and 1 (maximum distortion).",[668,677,678],{},[197,679,680],{},"0.1",[650,682,683,688,695],{},[668,684,685],{},[197,686,687],{},"offset",[668,689,690,691,694],{},"The offset of the barrel distortion center. A ",[197,692,693],{},"Vector2"," value or an array of two numbers where both values are between 0 and 1.",[668,696,697],{},[197,698,699],{},"[0.5, 0.5]",[650,701,702,707,720],{},[668,703,704],{},[197,705,706],{},"blendFunction",[668,708,709,710,719],{},"Defines how the effect blends with the original scene. See the ",[711,712,716],"a",{"href":713,"rel":714},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction",[715],"nofollow",[197,717,718],{},"BlendFunction"," options.",[668,721,722],{},[197,723,724],{},"BlendFunction.NORMAL",[201,726,728],{"id":727},"further-reading","Further Reading",[193,730,731,732,737],{},"For an example of the barrel blur effect in WebGL, see the ",[711,733,736],{"href":734,"rel":735},"https://www.shadertoy.com/view/lc3BW8",[715],"Barrel Blur Effect on Shadertoy",".",[739,740,741],"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":217,"searchDepth":224,"depth":257,"links":743},[744,745,746],{"id":203,"depth":257,"text":204},{"id":641,"depth":257,"text":642},{"id":727,"depth":257,"text":728},"Apply barrel distortion with chromatic aberration blur for a unique lens effect.","md",null,{},{"title":33,"description":747},"F_lzok3X0XsCHezzozMJwKsqU5u5FDQ0Jt-_jvWHcjw",[754,756],{"title":29,"path":30,"stem":31,"description":755,"children":-1},"Transform your scene into a grid of ASCII characters for a unique artistic effect.",{"title":37,"path":38,"stem":39,"description":757,"children":-1},"Simulate the glow of bright objects in a scene.",1779713681232]