[{"data":1,"prerenderedAt":621},["ShallowReactive",2],{"navigation":3,"/api/pmndrs/depth-of-field":181,"/api/pmndrs/depth-of-field-surround":616},[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":57,"body":183,"description":610,"extension":611,"links":612,"meta":613,"navigation":299,"path":58,"seo":614,"stem":59,"__hash__":615},"docs/2.api/1.pmndrs/depth-of-field.md",{"type":184,"value":185,"toc":605},"minimark",[186,192,196,199,204,467,471,589,593,601],[187,188,189],"docs-demo",{},[190,191],"pmndrs-depth-of-field",{},[193,194,195],"p",{},"Depth of field is an optical effect employed in photography and cinematography to replicate the natural behavior of real-world cameras. When capturing an image or scene with a real camera, it's crucial to understand that only objects at a particular distance from the camera lens will appear in crisp, clear focus. Objects closer or further away from this specific point gradually become progressively blurry or out of focus.",[193,197,198],{},"This photographic technique allows photographers and filmmakers to draw attention to specific subjects or areas within a composition while creatively blurring or softening the background or foreground. Depth of field is a powerful tool for storytelling and visual aesthetics, enabling artists to control the viewer's gaze and emphasize narrative elements by manipulating focus and blur to their advantage.",[200,201,203],"h2",{"id":202},"usage","Usage",[205,206,211],"pre",{"className":207,"code":208,"language":209,"meta":210,"style":210},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n\n    \u003C!-- Your scene -->\n\n    \u003CSuspense>\n      \u003CEffectComposerPmndrs>\n        \u003CDepthOfFieldPmndrs :focus-range=\"0.5\" />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[212,213,214,249,284,294,301,311,322,365,370,377,382,392,403,428,438,448,458],"code",{"__ignoreMap":210},[215,216,219,223,227,231,234,237,240,244,246],"span",{"class":217,"line":218},"line",1,[215,220,222],{"class":221},"sMK4o","\u003C",[215,224,226],{"class":225},"swJcz","script",[215,228,230],{"class":229},"spNyl"," setup",[215,232,233],{"class":229}," lang",[215,235,236],{"class":221},"=",[215,238,239],{"class":221},"\"",[215,241,243],{"class":242},"sfazB","ts",[215,245,239],{"class":221},[215,247,248],{"class":221},">\n",[215,250,252,256,259,263,266,269,272,275,278,281],{"class":217,"line":251},2,[215,253,255],{"class":254},"s7zQu","import",[215,257,258],{"class":221}," {",[215,260,262],{"class":261},"sTEyZ"," DepthOfFieldPmndrs",[215,264,265],{"class":221},",",[215,267,268],{"class":261}," EffectComposerPmndrs",[215,270,271],{"class":221}," }",[215,273,274],{"class":254}," from",[215,276,277],{"class":221}," '",[215,279,280],{"class":242},"@tresjs/post-processing",[215,282,283],{"class":221},"'\n",[215,285,287,290,292],{"class":217,"line":286},3,[215,288,289],{"class":221},"\u003C/",[215,291,226],{"class":225},[215,293,248],{"class":221},[215,295,297],{"class":217,"line":296},4,[215,298,300],{"emptyLinePlaceholder":299},true,"\n",[215,302,304,306,309],{"class":217,"line":303},5,[215,305,222],{"class":221},[215,307,308],{"class":225},"template",[215,310,248],{"class":221},[215,312,314,317,320],{"class":217,"line":313},6,[215,315,316],{"class":221},"  \u003C",[215,318,319],{"class":225},"TresCanvas",[215,321,248],{"class":221},[215,323,325,328,331,334,337,339,341,344,348,351,353,355,357,360,362],{"class":217,"line":324},7,[215,326,327],{"class":221},"    \u003C",[215,329,330],{"class":225},"TresPerspectiveCamera",[215,332,333],{"class":221}," :",[215,335,336],{"class":229},"position",[215,338,236],{"class":221},[215,340,239],{"class":221},[215,342,343],{"class":221},"[",[215,345,347],{"class":346},"sbssI","5",[215,349,350],{"class":221},", ",[215,352,347],{"class":346},[215,354,350],{"class":221},[215,356,347],{"class":346},[215,358,359],{"class":221},"]",[215,361,239],{"class":221},[215,363,364],{"class":221}," />\n",[215,366,368],{"class":217,"line":367},8,[215,369,300],{"emptyLinePlaceholder":299},[215,371,373],{"class":217,"line":372},9,[215,374,376],{"class":375},"sHwdD","    \u003C!-- Your scene -->\n",[215,378,380],{"class":217,"line":379},10,[215,381,300],{"emptyLinePlaceholder":299},[215,383,385,387,390],{"class":217,"line":384},11,[215,386,327],{"class":221},[215,388,389],{"class":225},"Suspense",[215,391,248],{"class":221},[215,393,395,398,401],{"class":217,"line":394},12,[215,396,397],{"class":221},"      \u003C",[215,399,400],{"class":225},"EffectComposerPmndrs",[215,402,248],{"class":221},[215,404,406,409,412,414,417,419,421,424,426],{"class":217,"line":405},13,[215,407,408],{"class":221},"        \u003C",[215,410,411],{"class":225},"DepthOfFieldPmndrs",[215,413,333],{"class":221},[215,415,416],{"class":229},"focus-range",[215,418,236],{"class":221},[215,420,239],{"class":221},[215,422,423],{"class":346},"0.5",[215,425,239],{"class":221},[215,427,364],{"class":221},[215,429,431,434,436],{"class":217,"line":430},14,[215,432,433],{"class":221},"      \u003C/",[215,435,400],{"class":225},[215,437,248],{"class":221},[215,439,441,444,446],{"class":217,"line":440},15,[215,442,443],{"class":221},"    \u003C/",[215,445,389],{"class":225},[215,447,248],{"class":221},[215,449,451,454,456],{"class":217,"line":450},16,[215,452,453],{"class":221},"  \u003C/",[215,455,319],{"class":225},[215,457,248],{"class":221},[215,459,461,463,465],{"class":217,"line":460},17,[215,462,289],{"class":221},[215,464,308],{"class":225},[215,466,248],{"class":221},[200,468,470],{"id":469},"props","Props",[472,473,474,490],"table",{},[475,476,477],"thead",{},[478,479,480,484,487],"tr",{},[481,482,483],"th",{},"Prop",[481,485,486],{},"Description",[481,488,489],{},"Default",[491,492,493,513,528,541,557,574],"tbody",{},[478,494,495,501,504],{},[496,497,498],"td",{},[212,499,500],{},"blendFunction",[496,502,503],{},"The blend function of this effect.",[496,505,506],{},[507,508,512],"a",{"href":509,"rel":510},"https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40",[511],"nofollow","BlendFunction.SCREEN",[478,514,515,520,523],{},[496,516,517],{},[212,518,519],{},"worldFocusDistance",[496,521,522],{},"The focus distance in world units.",[496,524,525],{},[212,526,527],{},"0.3",[478,529,530,535,538],{},[496,531,532],{},[212,533,534],{},"worldFocusRange",[496,536,537],{},"The focus range in world units.",[496,539,540],{},"depends on camera",[478,542,543,548,555],{},[496,544,545],{},[212,546,547],{},"focusDistance",[496,549,550,551,554],{},"The normalized focus distance. Range is ",[215,552,553],{},"0.0, 1.0",".",[496,556,540],{},[478,558,559,564,569],{},[496,560,561],{},[212,562,563],{},"focusRange",[496,565,566,567,554],{},"The focus range. Range is ",[215,568,553],{},[496,570,571],{},[212,572,573],{},"0.1",[478,575,576,581,584],{},[496,577,578],{},[212,579,580],{},"bokehScale",[496,582,583],{},"The scale of the bokeh blur.",[496,585,586],{},[212,587,588],{},"1.0",[200,590,592],{"id":591},"further-reading","Further Reading",[193,594,595,596,554],{},"For more details, see the ",[507,597,600],{"href":598,"rel":599},"https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DepthOfFieldEffect.js~DepthOfFieldEffect.html",[511],"DepthOfFieldEffect documentation",[602,603,604],"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":210,"searchDepth":218,"depth":251,"links":606},[607,608,609],{"id":202,"depth":251,"text":203},{"id":469,"depth":251,"text":470},{"id":591,"depth":251,"text":592},"Replicate camera lens blur to draw attention to specific subjects in your scene.","md",null,{},{"title":57,"description":610},"TnZ840wq_lZF4X3LOvYclfzUh5vDnQQ6bUi2X7MaSr0",[617,619],{"title":53,"path":54,"stem":55,"description":618,"children":-1},"Reduce the color bit depth to create posterization and dithering effects.",{"title":61,"path":62,"stem":63,"description":620,"children":-1},"Create a dot screen effect for artistic and stylized rendering.",1779713681234]