[{"data":1,"prerenderedAt":866},["ShallowReactive",2],{"navigation":3,"/api/pmndrs/tilt-shift":181,"/api/pmndrs/tilt-shift-surround":861},[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":133,"body":183,"description":855,"extension":856,"links":857,"meta":858,"navigation":348,"path":134,"seo":859,"stem":135,"__hash__":860},"docs/2.api/1.pmndrs/tilt-shift.md",{"type":184,"value":185,"toc":850},"minimark",[186,192,211,216,222,640,644,835,839,846],[187,188,189],"docs-demo",{},[190,191],"pmndrs-tilt-shift",{},[193,194,195,196,200,201,210],"p",{},"The ",[197,198,199],"code",{},"TiltShift"," effect is part of the ",[202,203,207],"a",{"href":204,"rel":205},"https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TiltShiftEffect.js~TiltShiftEffect.html",[206],"nofollow",[197,208,209],{},"postprocessing"," package. It allows you to create a tilt-shift effect, simulating a shallow depth of field.",[212,213,215],"h2",{"id":214},"usage","Usage",[193,217,195,218,221],{},[197,219,220],{},"\u003CTiltShiftPmndrs>"," component is straightforward to use and provides customizable options to fine-tune the tilt-shift effect.",[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 { TresCanvas } from '@tresjs/core'\nimport { EffectComposerPmndrs, TiltShiftPmndrs } from '@tresjs/post-processing'\nimport { NoToneMapping } from 'three'\n\nconst gl = {\n  clearColor: '#0ff000',\n  toneMapping: NoToneMapping,\n}\n\nconst effectProps = {\n  focusArea: 0.7,\n  feather: 0.1,\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        \u003CTiltShiftPmndrs v-bind=\"effectProps\" />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[197,230,231,266,295,322,343,350,364,384,396,402,407,419,433,446,451,461,466,476,499,541,546,553,558,568,579,601,611,621,631],{"__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],{"class":234,"line":268},2,[232,270,272],{"class":271},"s7zQu","import",[232,274,275],{"class":238}," {",[232,277,279],{"class":278},"sTEyZ"," TresCanvas",[232,281,282],{"class":238}," }",[232,284,285],{"class":271}," from",[232,287,288],{"class":238}," '",[232,290,291],{"class":259},"@tresjs/core",[232,293,294],{"class":238},"'\n",[232,296,298,300,302,305,308,311,313,315,317,320],{"class":234,"line":297},3,[232,299,272],{"class":271},[232,301,275],{"class":238},[232,303,304],{"class":278}," EffectComposerPmndrs",[232,306,307],{"class":238},",",[232,309,310],{"class":278}," TiltShiftPmndrs",[232,312,282],{"class":238},[232,314,285],{"class":271},[232,316,288],{"class":238},[232,318,319],{"class":259},"@tresjs/post-processing",[232,321,294],{"class":238},[232,323,325,327,329,332,334,336,338,341],{"class":234,"line":324},4,[232,326,272],{"class":271},[232,328,275],{"class":238},[232,330,331],{"class":278}," NoToneMapping",[232,333,282],{"class":238},[232,335,285],{"class":271},[232,337,288],{"class":238},[232,339,340],{"class":259},"three",[232,342,294],{"class":238},[232,344,346],{"class":234,"line":345},5,[232,347,349],{"emptyLinePlaceholder":348},true,"\n",[232,351,353,356,359,361],{"class":234,"line":352},6,[232,354,355],{"class":246},"const",[232,357,358],{"class":278}," gl ",[232,360,253],{"class":238},[232,362,363],{"class":238}," {\n",[232,365,367,370,373,375,378,381],{"class":234,"line":366},7,[232,368,369],{"class":242},"  clearColor",[232,371,372],{"class":238},":",[232,374,288],{"class":238},[232,376,377],{"class":259},"#0ff000",[232,379,380],{"class":238},"'",[232,382,383],{"class":238},",\n",[232,385,387,390,392,394],{"class":234,"line":386},8,[232,388,389],{"class":242},"  toneMapping",[232,391,372],{"class":238},[232,393,331],{"class":278},[232,395,383],{"class":238},[232,397,399],{"class":234,"line":398},9,[232,400,401],{"class":238},"}\n",[232,403,405],{"class":234,"line":404},10,[232,406,349],{"emptyLinePlaceholder":348},[232,408,410,412,415,417],{"class":234,"line":409},11,[232,411,355],{"class":246},[232,413,414],{"class":278}," effectProps ",[232,416,253],{"class":238},[232,418,363],{"class":238},[232,420,422,425,427,431],{"class":234,"line":421},12,[232,423,424],{"class":242},"  focusArea",[232,426,372],{"class":238},[232,428,430],{"class":429},"sbssI"," 0.7",[232,432,383],{"class":238},[232,434,436,439,441,444],{"class":234,"line":435},13,[232,437,438],{"class":242},"  feather",[232,440,372],{"class":238},[232,442,443],{"class":429}," 0.1",[232,445,383],{"class":238},[232,447,449],{"class":234,"line":448},14,[232,450,401],{"class":238},[232,452,454,457,459],{"class":234,"line":453},15,[232,455,456],{"class":238},"\u003C/",[232,458,243],{"class":242},[232,460,265],{"class":238},[232,462,464],{"class":234,"line":463},16,[232,465,349],{"emptyLinePlaceholder":348},[232,467,469,471,474],{"class":234,"line":468},17,[232,470,239],{"class":238},[232,472,473],{"class":242},"template",[232,475,265],{"class":238},[232,477,479,482,485,488,490,492,495,497],{"class":234,"line":478},18,[232,480,481],{"class":238},"  \u003C",[232,483,484],{"class":242},"TresCanvas",[232,486,487],{"class":246}," v-bind",[232,489,253],{"class":238},[232,491,256],{"class":238},[232,493,494],{"class":278},"gl",[232,496,256],{"class":238},[232,498,265],{"class":238},[232,500,502,505,508,511,514,516,518,521,524,527,529,531,533,536,538],{"class":234,"line":501},19,[232,503,504],{"class":238},"    \u003C",[232,506,507],{"class":242},"TresPerspectiveCamera",[232,509,510],{"class":238}," :",[232,512,513],{"class":246},"position",[232,515,253],{"class":238},[232,517,256],{"class":238},[232,519,520],{"class":238},"[",[232,522,523],{"class":429},"5",[232,525,526],{"class":238},", ",[232,528,523],{"class":429},[232,530,526],{"class":238},[232,532,523],{"class":429},[232,534,535],{"class":238},"]",[232,537,256],{"class":238},[232,539,540],{"class":238}," />\n",[232,542,544],{"class":234,"line":543},20,[232,545,349],{"emptyLinePlaceholder":348},[232,547,549],{"class":234,"line":548},21,[232,550,552],{"class":551},"sHwdD","    \u003C!-- Your scene -->\n",[232,554,556],{"class":234,"line":555},22,[232,557,349],{"emptyLinePlaceholder":348},[232,559,561,563,566],{"class":234,"line":560},23,[232,562,504],{"class":238},[232,564,565],{"class":242},"Suspense",[232,567,265],{"class":238},[232,569,571,574,577],{"class":234,"line":570},24,[232,572,573],{"class":238},"      \u003C",[232,575,576],{"class":242},"EffectComposerPmndrs",[232,578,265],{"class":238},[232,580,582,585,588,590,592,594,597,599],{"class":234,"line":581},25,[232,583,584],{"class":238},"        \u003C",[232,586,587],{"class":242},"TiltShiftPmndrs",[232,589,487],{"class":246},[232,591,253],{"class":238},[232,593,256],{"class":238},[232,595,596],{"class":278},"effectProps",[232,598,256],{"class":238},[232,600,540],{"class":238},[232,602,604,607,609],{"class":234,"line":603},26,[232,605,606],{"class":238},"      \u003C/",[232,608,576],{"class":242},[232,610,265],{"class":238},[232,612,614,617,619],{"class":234,"line":613},27,[232,615,616],{"class":238},"    \u003C/",[232,618,565],{"class":242},[232,620,265],{"class":238},[232,622,624,627,629],{"class":234,"line":623},28,[232,625,626],{"class":238},"  \u003C/",[232,628,484],{"class":242},[232,630,265],{"class":238},[232,632,634,636,638],{"class":234,"line":633},29,[232,635,456],{"class":238},[232,637,473],{"class":242},[232,639,265],{"class":238},[212,641,643],{"id":642},"props","Props",[645,646,647,663],"table",{},[648,649,650],"thead",{},[651,652,653,657,660],"tr",{},[654,655,656],"th",{},"Prop",[654,658,659],{},"Description",[654,661,662],{},"Default",[664,665,666,690,709,726,744,761,783,801,819],"tbody",{},[651,667,668,674,685],{},[669,670,671],"td",{},[197,672,673],{},"blendFunction",[669,675,676,677,684],{},"Defines how the effect blends with the original scene. See the ",[202,678,681],{"href":679,"rel":680},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction",[206],[197,682,683],{},"BlendFunction"," options.",[669,686,687],{},[197,688,689],{},"BlendFunction.NORMAL",[651,691,692,697,704],{},[669,693,694],{},[197,695,696],{},"offset",[669,698,699,700,703],{},"The relative offset of the focus area. A positive value shifts the focus area upwards, while a negative value shifts it downwards. Range: ",[197,701,702],{},"[-0.5, 0.5]",".",[669,705,706],{},[197,707,708],{},"0.0",[651,710,711,716,722],{},[669,712,713],{},[197,714,715],{},"rotation",[669,717,718,719,703],{},"The rotation of the focus area in radians. A positive rotation turns the focus area clockwise. Range: ",[197,720,721],{},"[-π, π]",[669,723,724],{},[197,725,708],{},[651,727,728,733,739],{},[669,729,730],{},[197,731,732],{},"focusArea",[669,734,735,736,703],{},"The relative size of the focus area. Range: ",[197,737,738],{},"[0, 1]",[669,740,741],{},[197,742,743],{},"0.4",[651,745,746,751,756],{},[669,747,748],{},[197,749,750],{},"feather",[669,752,753,754,703],{},"The softness of the focus area edges. Range: ",[197,755,738],{},[669,757,758],{},[197,759,760],{},"0.3",[651,762,763,768,778],{},[669,764,765],{},[197,766,767],{},"kernelSize",[669,769,770,771,684],{},"The blur kernel size. See the ",[202,772,775],{"href":773,"rel":774},"https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-KernelSize",[206],[197,776,777],{},"KernelSize",[669,779,780],{},[197,781,782],{},"KernelSize.MEDIUM",[651,784,785,790,796],{},[669,786,787],{},[197,788,789],{},"resolutionScale",[669,791,792,793,703],{},"The resolution scale. Range: ",[197,794,795],{},"[0.1, 1]",[669,797,798],{},[197,799,800],{},"0.5",[651,802,803,808,815],{},[669,804,805],{},[197,806,807],{},"resolutionX",[669,809,810,811,814],{},"The horizontal resolution. Use ",[197,812,813],{},"Resolution.AUTO_SIZE"," for automatic sizing.",[669,816,817],{},[197,818,813],{},[651,820,821,826,831],{},[669,822,823],{},[197,824,825],{},"resolutionY",[669,827,828,829,814],{},"The vertical resolution. Use ",[197,830,813],{},[669,832,833],{},[197,834,813],{},[212,836,838],{"id":837},"further-reading","Further Reading",[193,840,841,842,703],{},"For more details, see the ",[202,843,845],{"href":204,"rel":844},[206],"TiltShiftEffect documentation",[847,848,849],"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":851},[852,853,854],{"id":214,"depth":268,"text":215},{"id":642,"depth":268,"text":643},{"id":837,"depth":268,"text":838},"Create a tilt-shift effect simulating a shallow depth of field.","md",null,{},{"title":133,"description":855},"UmfGgSirdEPWEHZr4VBLCPHbjhJnsXgD-cTw7QrloV4",[862,864],{"title":129,"path":130,"stem":131,"description":863,"children":-1},"Render a texture overlay with customizable blend options to create various visual effects.",{"title":137,"path":138,"stem":139,"description":865,"children":-1},"Apply various tone mapping algorithms to improve the visual rendering of HDR content.",1779713682822]