[{"data":1,"prerenderedAt":915},["ShallowReactive",2],{"navigation":3,"/api/pmndrs/fish-eye":181,"/api/pmndrs/fish-eye-surround":910},[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":65,"body":183,"description":904,"extension":905,"links":906,"meta":907,"navigation":338,"path":66,"seo":908,"stem":67,"__hash__":909},"docs/2.api/1.pmndrs/fish-eye.md",{"type":184,"value":185,"toc":899},"minimark",[186,192,201,206,212,776,780,883,887,895],[187,188,189],"docs-demo",{},[190,191],"pmndrs-fish-eye",{},[193,194,195,196,200],"p",{},"The ",[197,198,199],"code",{},"FishEye"," is a custom effect that simulates the wide-angle distortion of a fish-eye lens. Common in photography and videography, it creates a hemispherical view with a unique, immersive visual experience. The distortion bends the image outward from the center, creating a bubble-like appearance.",[202,203,205],"h2",{"id":204},"usage","Usage",[193,207,195,208,211],{},[197,209,210],{},"\u003CFishEyePmndrs>"," component is straightforward to use and provides customizable options to fine-tune the fish-eye effect.",[213,214,219],"pre",{"className":215,"code":216,"language":217,"meta":218,"style":218},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { EffectComposerPmndrs, FishEyePmndrs } from '@tresjs/post-processing'\nimport { BlendFunction } from 'postprocessing'\n\nconst gl = {\n  clearColor: '#4f4f4f',\n}\n\nconst effectProps = {\n  blendFunction: BlendFunction.NORMAL,\n  lensS: [1.0, 0.65] as [number, number],\n  lensF: [0.25, 1.0] as [number, number],\n  scale: 0.85,\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        \u003CFishEyePmndrs\n          :blend-function=\"effectProps.blendFunction\"\n          :lens-s=\"effectProps.lensS\"\n          :lens-f=\"effectProps.lensF\"\n          :scale=\"effectProps.scale\"\n        />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[197,220,221,256,285,312,333,340,354,374,380,385,397,415,457,491,504,509,519,524,534,557,598,603,610,615,625,636,645,669,690,711,731,737,747,757,767],{"__ignoreMap":218},[222,223,226,230,234,238,241,244,247,251,253],"span",{"class":224,"line":225},"line",1,[222,227,229],{"class":228},"sMK4o","\u003C",[222,231,233],{"class":232},"swJcz","script",[222,235,237],{"class":236},"spNyl"," setup",[222,239,240],{"class":236}," lang",[222,242,243],{"class":228},"=",[222,245,246],{"class":228},"\"",[222,248,250],{"class":249},"sfazB","ts",[222,252,246],{"class":228},[222,254,255],{"class":228},">\n",[222,257,259,263,266,270,273,276,279,282],{"class":224,"line":258},2,[222,260,262],{"class":261},"s7zQu","import",[222,264,265],{"class":228}," {",[222,267,269],{"class":268},"sTEyZ"," TresCanvas",[222,271,272],{"class":228}," }",[222,274,275],{"class":261}," from",[222,277,278],{"class":228}," '",[222,280,281],{"class":249},"@tresjs/core",[222,283,284],{"class":228},"'\n",[222,286,288,290,292,295,298,301,303,305,307,310],{"class":224,"line":287},3,[222,289,262],{"class":261},[222,291,265],{"class":228},[222,293,294],{"class":268}," EffectComposerPmndrs",[222,296,297],{"class":228},",",[222,299,300],{"class":268}," FishEyePmndrs",[222,302,272],{"class":228},[222,304,275],{"class":261},[222,306,278],{"class":228},[222,308,309],{"class":249},"@tresjs/post-processing",[222,311,284],{"class":228},[222,313,315,317,319,322,324,326,328,331],{"class":224,"line":314},4,[222,316,262],{"class":261},[222,318,265],{"class":228},[222,320,321],{"class":268}," BlendFunction",[222,323,272],{"class":228},[222,325,275],{"class":261},[222,327,278],{"class":228},[222,329,330],{"class":249},"postprocessing",[222,332,284],{"class":228},[222,334,336],{"class":224,"line":335},5,[222,337,339],{"emptyLinePlaceholder":338},true,"\n",[222,341,343,346,349,351],{"class":224,"line":342},6,[222,344,345],{"class":236},"const",[222,347,348],{"class":268}," gl ",[222,350,243],{"class":228},[222,352,353],{"class":228}," {\n",[222,355,357,360,363,365,368,371],{"class":224,"line":356},7,[222,358,359],{"class":232},"  clearColor",[222,361,362],{"class":228},":",[222,364,278],{"class":228},[222,366,367],{"class":249},"#4f4f4f",[222,369,370],{"class":228},"'",[222,372,373],{"class":228},",\n",[222,375,377],{"class":224,"line":376},8,[222,378,379],{"class":228},"}\n",[222,381,383],{"class":224,"line":382},9,[222,384,339],{"emptyLinePlaceholder":338},[222,386,388,390,393,395],{"class":224,"line":387},10,[222,389,345],{"class":236},[222,391,392],{"class":268}," effectProps ",[222,394,243],{"class":228},[222,396,353],{"class":228},[222,398,400,403,405,407,410,413],{"class":224,"line":399},11,[222,401,402],{"class":232},"  blendFunction",[222,404,362],{"class":228},[222,406,321],{"class":268},[222,408,409],{"class":228},".",[222,411,412],{"class":268},"NORMAL",[222,414,373],{"class":228},[222,416,418,421,423,426,430,432,435,438,441,443,447,449,452,455],{"class":224,"line":417},12,[222,419,420],{"class":232},"  lensS",[222,422,362],{"class":228},[222,424,425],{"class":268}," [",[222,427,429],{"class":428},"sbssI","1.0",[222,431,297],{"class":228},[222,433,434],{"class":428}," 0.65",[222,436,437],{"class":268},"] ",[222,439,440],{"class":261},"as",[222,442,425],{"class":268},[222,444,446],{"class":445},"sBMFI","number",[222,448,297],{"class":228},[222,450,451],{"class":445}," number",[222,453,454],{"class":268},"]",[222,456,373],{"class":228},[222,458,460,463,465,467,470,472,475,477,479,481,483,485,487,489],{"class":224,"line":459},13,[222,461,462],{"class":232},"  lensF",[222,464,362],{"class":228},[222,466,425],{"class":268},[222,468,469],{"class":428},"0.25",[222,471,297],{"class":228},[222,473,474],{"class":428}," 1.0",[222,476,437],{"class":268},[222,478,440],{"class":261},[222,480,425],{"class":268},[222,482,446],{"class":445},[222,484,297],{"class":228},[222,486,451],{"class":445},[222,488,454],{"class":268},[222,490,373],{"class":228},[222,492,494,497,499,502],{"class":224,"line":493},14,[222,495,496],{"class":232},"  scale",[222,498,362],{"class":228},[222,500,501],{"class":428}," 0.85",[222,503,373],{"class":228},[222,505,507],{"class":224,"line":506},15,[222,508,379],{"class":228},[222,510,512,515,517],{"class":224,"line":511},16,[222,513,514],{"class":228},"\u003C/",[222,516,233],{"class":232},[222,518,255],{"class":228},[222,520,522],{"class":224,"line":521},17,[222,523,339],{"emptyLinePlaceholder":338},[222,525,527,529,532],{"class":224,"line":526},18,[222,528,229],{"class":228},[222,530,531],{"class":232},"template",[222,533,255],{"class":228},[222,535,537,540,543,546,548,550,553,555],{"class":224,"line":536},19,[222,538,539],{"class":228},"  \u003C",[222,541,542],{"class":232},"TresCanvas",[222,544,545],{"class":236}," v-bind",[222,547,243],{"class":228},[222,549,246],{"class":228},[222,551,552],{"class":268},"gl",[222,554,246],{"class":228},[222,556,255],{"class":228},[222,558,560,563,566,569,572,574,576,579,582,585,587,589,591,593,595],{"class":224,"line":559},20,[222,561,562],{"class":228},"    \u003C",[222,564,565],{"class":232},"TresPerspectiveCamera",[222,567,568],{"class":228}," :",[222,570,571],{"class":236},"position",[222,573,243],{"class":228},[222,575,246],{"class":228},[222,577,578],{"class":228},"[",[222,580,581],{"class":428},"5",[222,583,584],{"class":228},", ",[222,586,581],{"class":428},[222,588,584],{"class":228},[222,590,581],{"class":428},[222,592,454],{"class":228},[222,594,246],{"class":228},[222,596,597],{"class":228}," />\n",[222,599,601],{"class":224,"line":600},21,[222,602,339],{"emptyLinePlaceholder":338},[222,604,606],{"class":224,"line":605},22,[222,607,609],{"class":608},"sHwdD","    \u003C!-- Your scene -->\n",[222,611,613],{"class":224,"line":612},23,[222,614,339],{"emptyLinePlaceholder":338},[222,616,618,620,623],{"class":224,"line":617},24,[222,619,562],{"class":228},[222,621,622],{"class":232},"Suspense",[222,624,255],{"class":228},[222,626,628,631,634],{"class":224,"line":627},25,[222,629,630],{"class":228},"      \u003C",[222,632,633],{"class":232},"EffectComposerPmndrs",[222,635,255],{"class":228},[222,637,639,642],{"class":224,"line":638},26,[222,640,641],{"class":228},"        \u003C",[222,643,644],{"class":232},"FishEyePmndrs\n",[222,646,648,651,654,656,658,661,663,666],{"class":224,"line":647},27,[222,649,650],{"class":228},"          :",[222,652,653],{"class":236},"blend-function",[222,655,243],{"class":228},[222,657,246],{"class":228},[222,659,660],{"class":268},"effectProps",[222,662,409],{"class":228},[222,664,665],{"class":268},"blendFunction",[222,667,668],{"class":228},"\"\n",[222,670,672,674,677,679,681,683,685,688],{"class":224,"line":671},28,[222,673,650],{"class":228},[222,675,676],{"class":236},"lens-s",[222,678,243],{"class":228},[222,680,246],{"class":228},[222,682,660],{"class":268},[222,684,409],{"class":228},[222,686,687],{"class":268},"lensS",[222,689,668],{"class":228},[222,691,693,695,698,700,702,704,706,709],{"class":224,"line":692},29,[222,694,650],{"class":228},[222,696,697],{"class":236},"lens-f",[222,699,243],{"class":228},[222,701,246],{"class":228},[222,703,660],{"class":268},[222,705,409],{"class":228},[222,707,708],{"class":268},"lensF",[222,710,668],{"class":228},[222,712,714,716,719,721,723,725,727,729],{"class":224,"line":713},30,[222,715,650],{"class":228},[222,717,718],{"class":236},"scale",[222,720,243],{"class":228},[222,722,246],{"class":228},[222,724,660],{"class":268},[222,726,409],{"class":228},[222,728,718],{"class":268},[222,730,668],{"class":228},[222,732,734],{"class":224,"line":733},31,[222,735,736],{"class":228},"        />\n",[222,738,740,743,745],{"class":224,"line":739},32,[222,741,742],{"class":228},"      \u003C/",[222,744,633],{"class":232},[222,746,255],{"class":228},[222,748,750,753,755],{"class":224,"line":749},33,[222,751,752],{"class":228},"    \u003C/",[222,754,622],{"class":232},[222,756,255],{"class":228},[222,758,760,763,765],{"class":224,"line":759},34,[222,761,762],{"class":228},"  \u003C/",[222,764,542],{"class":232},[222,766,255],{"class":228},[222,768,770,772,774],{"class":224,"line":769},35,[222,771,514],{"class":228},[222,773,531],{"class":232},[222,775,255],{"class":228},[202,777,779],{"id":778},"props","Props",[781,782,783,799],"table",{},[784,785,786],"thead",{},[787,788,789,793,796],"tr",{},[790,791,792],"th",{},"Prop",[790,794,795],{},"Description",[790,797,798],{},"Default",[800,801,802,827,849,868],"tbody",{},[787,803,804,809,822],{},[805,806,807],"td",{},[197,808,665],{},[805,810,811,812,821],{},"Defines how the effect blends with the original scene. See the ",[813,814,818],"a",{"href":815,"rel":816},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction",[817],"nofollow",[197,819,820],{},"BlendFunction"," options.",[805,823,824],{},[197,825,826],{},"BlendFunction.NORMAL",[787,828,829,833,844],{},[805,830,831],{},[197,832,687],{},[805,834,835,836,839,840,843],{},"The lens scale. A ",[197,837,838],{},"Vector2"," value or an array of two numbers. (ex: ",[197,841,842],{},"[0.5, .75]",")",[805,845,846],{},[197,847,848],{},"Vector2(1.0, 1.0)",[787,850,851,855,863],{},[805,852,853],{},[197,854,708],{},[805,856,857,858,839,860,843],{},"The lens factor. A ",[197,859,838],{},[197,861,862],{},"[0.0, 0.5]",[805,864,865],{},[197,866,867],{},"Vector2(0.0, 1.0)",[787,869,870,874,879],{},[805,871,872],{},[197,873,718],{},[805,875,876,877,409],{},"The scale of the effect. A ",[197,878,446],{},[805,880,881],{},[197,882,429],{},[202,884,886],{"id":885},"further-reading","Further Reading",[193,888,889,890,409],{},"For an example of the fish-eye effect in WebGL, see the ",[813,891,894],{"href":892,"rel":893},"https://www.shadertoy.com/view/MXyBRy",[817],"Fish Eye Effect on Shadertoy",[896,897,898],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":218,"searchDepth":225,"depth":258,"links":900},[901,902,903],{"id":204,"depth":258,"text":205},{"id":778,"depth":258,"text":779},{"id":885,"depth":258,"text":886},"Simulate the wide-angle distortion of a fish-eye lens.","md",null,{},{"title":65,"description":904},"5WMb2i7liQUh2Fljf8c5AA5xaECQG92y9Cv0MXTT-4U",[911,913],{"title":61,"path":62,"stem":63,"description":912,"children":-1},"Create a dot screen effect for artistic and stylized rendering.",{"title":69,"path":70,"stem":71,"description":914,"children":-1},"Performance-optimized anti-aliasing that smooths jagged edges in post-processing.",1779713681235]