[{"data":1,"prerenderedAt":738},["ShallowReactive",2],{"navigation":3,"/getting-started":181,"/getting-started-surround":735},[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":5,"body":183,"description":729,"extension":730,"links":731,"meta":732,"navigation":342,"path":6,"seo":733,"stem":7,"__hash__":734},"docs/1.getting-started/1.index.md",{"type":184,"value":185,"toc":723},"minimark",[186,194,197,219,222,228,233,239,244,506,510,527,719],[187,188,189],"p",{},[190,191],"img",{"alt":192,"src":193},"Post-processing banner","/tres-post-processing-banner.png",[187,195,196],{},"Post-processing, in simple terms, consists of applying visual effects to your 3D scenes after they have been rendered. It allows you to add beautiful effects such as depth-of-field, bloom, motion blur, and many more.",[187,198,199,200,204,205,212,213,218],{},"The ",[201,202,203],"code",{},"@tresjs/post-processing"," package leverages the excellent work done by the pmndrs ",[206,207,211],"a",{"href":208,"rel":209},"https://github.com/pmndrs/postprocessing",[210],"nofollow","postprocessing"," package and native ",[206,214,217],{"href":215,"rel":216},"https://threejs.org/examples/?q=postprocessing#webgl_postprocessing",[210],"Three.js post-processing effects",". Providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful.",[187,220,221],{},"Post-processing used to be a non-trivial task, but fortunately, now it is. 😜",[223,224,225],"note",{},[187,226,227],{},"This package is not required to use with the core library, but it can make your DX significantly better, especially for complex scenes.",[229,230,232],"h2",{"id":231},"basic-usage","Basic Usage",[187,234,235,236,238],{},"You can import post-processing effects from both pmndrs and native Three.js. All effects are available under the unified ",[201,237,203],{}," namespace.",[240,241,243],"h3",{"id":242},"using-native-threejs-effects","Using native Three.js effects",[245,246,251],"pre",{"className":247,"code":248,"language":249,"meta":250,"style":250},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { EffectComposer, Glitch, UnrealBloom } from '@tresjs/post-processing'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n\n    \u003CSuspense>\n      \u003CEffectComposer>\n        \u003CUnrealBloom />\n        \u003CGlitch />\n      \u003C/EffectComposer>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[201,252,253,288,327,337,344,354,371,421,426,436,447,458,467,477,487,497],{"__ignoreMap":250},[254,255,258,262,266,270,273,276,279,283,285],"span",{"class":256,"line":257},"line",1,[254,259,261],{"class":260},"sMK4o","\u003C",[254,263,265],{"class":264},"swJcz","script",[254,267,269],{"class":268},"spNyl"," setup",[254,271,272],{"class":268}," lang",[254,274,275],{"class":260},"=",[254,277,278],{"class":260},"\"",[254,280,282],{"class":281},"sfazB","ts",[254,284,278],{"class":260},[254,286,287],{"class":260},">\n",[254,289,291,295,298,302,305,308,310,313,316,319,322,324],{"class":256,"line":290},2,[254,292,294],{"class":293},"s7zQu","import",[254,296,297],{"class":260}," {",[254,299,301],{"class":300},"sTEyZ"," EffectComposer",[254,303,304],{"class":260},",",[254,306,307],{"class":300}," Glitch",[254,309,304],{"class":260},[254,311,312],{"class":300}," UnrealBloom",[254,314,315],{"class":260}," }",[254,317,318],{"class":293}," from",[254,320,321],{"class":260}," '",[254,323,203],{"class":281},[254,325,326],{"class":260},"'\n",[254,328,330,333,335],{"class":256,"line":329},3,[254,331,332],{"class":260},"\u003C/",[254,334,265],{"class":264},[254,336,287],{"class":260},[254,338,340],{"class":256,"line":339},4,[254,341,343],{"emptyLinePlaceholder":342},true,"\n",[254,345,347,349,352],{"class":256,"line":346},5,[254,348,261],{"class":260},[254,350,351],{"class":264},"template",[254,353,287],{"class":260},[254,355,357,360,363,366,369],{"class":256,"line":356},6,[254,358,359],{"class":260},"  \u003C",[254,361,362],{"class":264},"TresCanvas",[254,364,365],{"class":268}," shadows",[254,367,368],{"class":268}," alpha",[254,370,287],{"class":260},[254,372,374,377,380,383,386,388,390,393,397,400,403,405,408,410,413,416,418],{"class":256,"line":373},7,[254,375,376],{"class":260},"    \u003C",[254,378,379],{"class":264},"TresPerspectiveCamera",[254,381,382],{"class":260}," :",[254,384,385],{"class":268},"args",[254,387,275],{"class":260},[254,389,278],{"class":260},[254,391,392],{"class":260},"[",[254,394,396],{"class":395},"sbssI","45",[254,398,399],{"class":260},", ",[254,401,402],{"class":395},"1",[254,404,399],{"class":260},[254,406,407],{"class":395},"0.1",[254,409,399],{"class":260},[254,411,412],{"class":395},"1000",[254,414,415],{"class":260},"]",[254,417,278],{"class":260},[254,419,420],{"class":260}," />\n",[254,422,424],{"class":256,"line":423},8,[254,425,343],{"emptyLinePlaceholder":342},[254,427,429,431,434],{"class":256,"line":428},9,[254,430,376],{"class":260},[254,432,433],{"class":264},"Suspense",[254,435,287],{"class":260},[254,437,439,442,445],{"class":256,"line":438},10,[254,440,441],{"class":260},"      \u003C",[254,443,444],{"class":264},"EffectComposer",[254,446,287],{"class":260},[254,448,450,453,456],{"class":256,"line":449},11,[254,451,452],{"class":260},"        \u003C",[254,454,455],{"class":264},"UnrealBloom",[254,457,420],{"class":260},[254,459,461,463,465],{"class":256,"line":460},12,[254,462,452],{"class":260},[254,464,73],{"class":264},[254,466,420],{"class":260},[254,468,470,473,475],{"class":256,"line":469},13,[254,471,472],{"class":260},"      \u003C/",[254,474,444],{"class":264},[254,476,287],{"class":260},[254,478,480,483,485],{"class":256,"line":479},14,[254,481,482],{"class":260},"    \u003C/",[254,484,433],{"class":264},[254,486,287],{"class":260},[254,488,490,493,495],{"class":256,"line":489},15,[254,491,492],{"class":260},"  \u003C/",[254,494,362],{"class":264},[254,496,287],{"class":260},[254,498,500,502,504],{"class":256,"line":499},16,[254,501,332],{"class":260},[254,503,351],{"class":264},[254,505,287],{"class":260},[240,507,509],{"id":508},"using-pmndrs-effects","Using Pmndrs effects",[187,511,512,513,515,516,519,520,522,523,526],{},"You can also use pmndrs ",[201,514,211],{}," effects. Use the ",[201,517,518],{},"EffectComposerPmndrs"," component instead of ",[201,521,444],{}," and suffix the effects with ",[201,524,525],{},"Pmndrs",".",[245,528,530],{"className":247,"code":529,"language":249,"meta":250,"style":250},"\u003Cscript setup lang=\"ts\">\nimport { BloomPmndrs, EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n\n    \u003CSuspense>\n      \u003CEffectComposerPmndrs>\n        \u003CBloomPmndrs />\n        \u003CGlitchPmndrs />\n      \u003C/EffectComposerPmndrs>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[201,531,532,552,581,589,593,601,613,649,653,661,669,678,687,695,703,711],{"__ignoreMap":250},[254,533,534,536,538,540,542,544,546,548,550],{"class":256,"line":257},[254,535,261],{"class":260},[254,537,265],{"class":264},[254,539,269],{"class":268},[254,541,272],{"class":268},[254,543,275],{"class":260},[254,545,278],{"class":260},[254,547,282],{"class":281},[254,549,278],{"class":260},[254,551,287],{"class":260},[254,553,554,556,558,561,563,566,568,571,573,575,577,579],{"class":256,"line":290},[254,555,294],{"class":293},[254,557,297],{"class":260},[254,559,560],{"class":300}," BloomPmndrs",[254,562,304],{"class":260},[254,564,565],{"class":300}," EffectComposerPmndrs",[254,567,304],{"class":260},[254,569,570],{"class":300}," GlitchPmndrs",[254,572,315],{"class":260},[254,574,318],{"class":293},[254,576,321],{"class":260},[254,578,203],{"class":281},[254,580,326],{"class":260},[254,582,583,585,587],{"class":256,"line":329},[254,584,332],{"class":260},[254,586,265],{"class":264},[254,588,287],{"class":260},[254,590,591],{"class":256,"line":339},[254,592,343],{"emptyLinePlaceholder":342},[254,594,595,597,599],{"class":256,"line":346},[254,596,261],{"class":260},[254,598,351],{"class":264},[254,600,287],{"class":260},[254,602,603,605,607,609,611],{"class":256,"line":356},[254,604,359],{"class":260},[254,606,362],{"class":264},[254,608,365],{"class":268},[254,610,368],{"class":268},[254,612,287],{"class":260},[254,614,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,647],{"class":256,"line":373},[254,616,376],{"class":260},[254,618,379],{"class":264},[254,620,382],{"class":260},[254,622,385],{"class":268},[254,624,275],{"class":260},[254,626,278],{"class":260},[254,628,392],{"class":260},[254,630,396],{"class":395},[254,632,399],{"class":260},[254,634,402],{"class":395},[254,636,399],{"class":260},[254,638,407],{"class":395},[254,640,399],{"class":260},[254,642,412],{"class":395},[254,644,415],{"class":260},[254,646,278],{"class":260},[254,648,420],{"class":260},[254,650,651],{"class":256,"line":423},[254,652,343],{"emptyLinePlaceholder":342},[254,654,655,657,659],{"class":256,"line":428},[254,656,376],{"class":260},[254,658,433],{"class":264},[254,660,287],{"class":260},[254,662,663,665,667],{"class":256,"line":438},[254,664,441],{"class":260},[254,666,518],{"class":264},[254,668,287],{"class":260},[254,670,671,673,676],{"class":256,"line":449},[254,672,452],{"class":260},[254,674,675],{"class":264},"BloomPmndrs",[254,677,420],{"class":260},[254,679,680,682,685],{"class":256,"line":460},[254,681,452],{"class":260},[254,683,684],{"class":264},"GlitchPmndrs",[254,686,420],{"class":260},[254,688,689,691,693],{"class":256,"line":469},[254,690,472],{"class":260},[254,692,518],{"class":264},[254,694,287],{"class":260},[254,696,697,699,701],{"class":256,"line":479},[254,698,482],{"class":260},[254,700,433],{"class":264},[254,702,287],{"class":260},[254,704,705,707,709],{"class":256,"line":489},[254,706,492],{"class":260},[254,708,362],{"class":264},[254,710,287],{"class":260},[254,712,713,715,717],{"class":256,"line":499},[254,714,332],{"class":260},[254,716,351],{"class":264},[254,718,287],{"class":260},[720,721,722],"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 .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":250,"searchDepth":257,"depth":290,"links":724},[725],{"id":231,"depth":290,"text":232,"children":726},[727,728],{"id":242,"depth":329,"text":243},{"id":508,"depth":329,"text":509},"Apply post-processing effects to your 3D scenes with ease.","md",null,{},{"title":5,"description":729},"4GCwjJ_SNFLGC2cYi2rBSU2ZhDYESBLs_lCEiUHaqAY",[731,736],{"title":11,"path":12,"stem":13,"description":737,"children":-1},"Install @tresjs/post-processing in your TresJS project.",1779713680767]