[{"data":1,"prerenderedAt":1905},["ShallowReactive",2],{"navigation":3,"/api/objects/fbo":474,"/api/objects/fbo-surround":1900},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,190,284,310,344,394,440],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432,436],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":437,"path":438,"stem":439},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":441,"path":442,"stem":443,"children":444},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[445,446,450,454,458,462,466,470],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":451,"path":452,"stem":453},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":455,"path":456,"stem":457},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":459,"path":460,"stem":461},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":463,"path":464,"stem":465},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":467,"path":468,"stem":469},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":471,"path":472,"stem":473},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":475,"title":409,"body":476,"description":1894,"extension":1895,"links":1896,"meta":1897,"navigation":656,"path":410,"seo":1898,"stem":411,"__hash__":1899},"docs/2.api/9.objects/fbo.md",{"type":477,"value":478,"toc":1886},"minimark",[479,485,489,497,501,1363,1367,1500,1504,1506,1512,1521,1525,1794,1798,1882],[480,481,482],"scene-wrapper",{},[483,484],"objects-fbo",{},[486,487,488],"p",{},"An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.",[486,490,491,492,496],{},"Cientos provides an ",[493,494,495],"code",{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[498,499,15],"h2",{"id":500},"usage",[502,503,514],"pre",{"className":504,"code":505,"highlights":506,"language":512,"meta":513,"style":513},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs/cientos'\nimport type { TresObject } from '@tresjs/core'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst fboRef = shallowRef\u003CInstanceType\u003Ctypeof Fbo> | null>(null)\nconst torusRef = shallowRef\u003CTresObject | null>(null)\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n  if (!torusRef.value) { return }\n  torusRef.value.rotation.x = elapsed * 0.745\n  torusRef.value.rotation.y = elapsed * 0.361\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n    \u003CFbo\n      ref=\"fboRef\"\n      :depth=\"false\"\n      :settings=\"{ samples: 1 }\"\n    />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n      \u003CTresMeshBasicMaterial\n        :color=\"0xFFFFFF\"\n        :map=\"fboRef?.instance?.texture ?? null\"\n      />\n    \u003C/TresMesh>\n\n    \u003CTresMesh\n      ref=\"torusRef\"\n      :position=\"[3, 0, 0]\"\n    >\n      \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[507,508,509,510,511],2,23,24,25,26,"vue","",[493,515,516,551,587,611,631,651,658,703,732,737,772,805,837,864,870,880,885,895,936,979,989,994,1026,1034,1050,1069,1097,1103,1113,1148,1153,1161,1179,1209,1215,1225,1230,1238,1251,1279,1285,1325,1335,1344,1354],{"__ignoreMap":513},[517,518,521,525,529,533,536,539,542,546,548],"span",{"class":519,"line":520},"line",1,[517,522,524],{"class":523},"sMK4o","\u003C",[517,526,528],{"class":527},"swJcz","script",[517,530,532],{"class":531},"spNyl"," setup",[517,534,535],{"class":531}," lang",[517,537,538],{"class":523},"=",[517,540,541],{"class":523},"\"",[517,543,545],{"class":544},"sfazB","ts",[517,547,541],{"class":523},[517,549,550],{"class":523},">\n",[517,552,555,559,562,566,569,572,575,578,581,584],{"class":553,"line":507},[519,554],"highlight",[517,556,558],{"class":557},"s7zQu","import",[517,560,561],{"class":523}," {",[517,563,565],{"class":564},"sTEyZ"," Fbo",[517,567,568],{"class":523},",",[517,570,571],{"class":564}," OrbitControls",[517,573,574],{"class":523}," }",[517,576,577],{"class":557}," from",[517,579,580],{"class":523}," '",[517,582,583],{"class":544},"@tresjs/cientos",[517,585,586],{"class":523},"'\n",[517,588,590,592,595,597,600,602,604,606,609],{"class":519,"line":589},3,[517,591,558],{"class":557},[517,593,594],{"class":557}," type",[517,596,561],{"class":523},[517,598,599],{"class":564}," TresObject",[517,601,574],{"class":523},[517,603,577],{"class":557},[517,605,580],{"class":523},[517,607,608],{"class":544},"@tresjs/core",[517,610,586],{"class":523},[517,612,614,616,618,621,623,625,627,629],{"class":519,"line":613},4,[517,615,558],{"class":557},[517,617,561],{"class":523},[517,619,620],{"class":564}," TresCanvas",[517,622,574],{"class":523},[517,624,577],{"class":557},[517,626,580],{"class":523},[517,628,608],{"class":544},[517,630,586],{"class":523},[517,632,634,636,638,641,643,645,647,649],{"class":519,"line":633},5,[517,635,558],{"class":557},[517,637,561],{"class":523},[517,639,640],{"class":564}," shallowRef",[517,642,574],{"class":523},[517,644,577],{"class":557},[517,646,580],{"class":523},[517,648,512],{"class":544},[517,650,586],{"class":523},[517,652,654],{"class":519,"line":653},6,[517,655,657],{"emptyLinePlaceholder":656},true,"\n",[517,659,661,664,667,669,672,674,678,681,683,686,689,692,694,697,700],{"class":519,"line":660},7,[517,662,663],{"class":531},"const",[517,665,666],{"class":564}," fboRef ",[517,668,538],{"class":523},[517,670,640],{"class":671},"s2Zo4",[517,673,524],{"class":523},[517,675,677],{"class":676},"sBMFI","InstanceType",[517,679,680],{"class":523},"\u003Ctypeof",[517,682,565],{"class":564},[517,684,685],{"class":523},">",[517,687,688],{"class":523}," |",[517,690,691],{"class":676}," null",[517,693,685],{"class":523},[517,695,696],{"class":564},"(",[517,698,699],{"class":523},"null",[517,701,702],{"class":564},")\n",[517,704,706,708,711,713,715,717,720,722,724,726,728,730],{"class":519,"line":705},8,[517,707,663],{"class":531},[517,709,710],{"class":564}," torusRef ",[517,712,538],{"class":523},[517,714,640],{"class":671},[517,716,524],{"class":523},[517,718,719],{"class":676},"TresObject",[517,721,688],{"class":523},[517,723,691],{"class":676},[517,725,685],{"class":523},[517,727,696],{"class":564},[517,729,699],{"class":523},[517,731,702],{"class":564},[517,733,735],{"class":519,"line":734},9,[517,736,657],{"emptyLinePlaceholder":656},[517,738,740,743,746,749,753,756,758,760,763,766,769],{"class":519,"line":739},10,[517,741,742],{"class":531},"function",[517,744,745],{"class":671}," onLoop",[517,747,748],{"class":523},"({",[517,750,752],{"class":751},"sHdIc"," elapsed",[517,754,755],{"class":523}," }:",[517,757,561],{"class":523},[517,759,752],{"class":527},[517,761,762],{"class":523},":",[517,764,765],{"class":676}," number",[517,767,768],{"class":523}," })",[517,770,771],{"class":523}," {\n",[517,773,775,778,781,784,787,790,793,796,799,802],{"class":519,"line":774},11,[517,776,777],{"class":557},"  if",[517,779,780],{"class":527}," (",[517,782,783],{"class":523},"!",[517,785,786],{"class":564},"torusRef",[517,788,789],{"class":523},".",[517,791,792],{"class":564},"value",[517,794,795],{"class":527},") ",[517,797,798],{"class":523},"{",[517,800,801],{"class":557}," return",[517,803,804],{"class":523}," }\n",[517,806,808,811,813,815,817,820,822,825,828,830,833],{"class":519,"line":807},12,[517,809,810],{"class":564},"  torusRef",[517,812,789],{"class":523},[517,814,792],{"class":564},[517,816,789],{"class":523},[517,818,819],{"class":564},"rotation",[517,821,789],{"class":523},[517,823,824],{"class":564},"x",[517,826,827],{"class":523}," =",[517,829,752],{"class":564},[517,831,832],{"class":523}," *",[517,834,836],{"class":835},"sbssI"," 0.745\n",[517,838,840,842,844,846,848,850,852,855,857,859,861],{"class":519,"line":839},13,[517,841,810],{"class":564},[517,843,789],{"class":523},[517,845,792],{"class":564},[517,847,789],{"class":523},[517,849,819],{"class":564},[517,851,789],{"class":523},[517,853,854],{"class":564},"y",[517,856,827],{"class":523},[517,858,752],{"class":564},[517,860,832],{"class":523},[517,862,863],{"class":835}," 0.361\n",[517,865,867],{"class":519,"line":866},14,[517,868,869],{"class":523},"}\n",[517,871,873,876,878],{"class":519,"line":872},15,[517,874,875],{"class":523},"\u003C/",[517,877,528],{"class":527},[517,879,550],{"class":523},[517,881,883],{"class":519,"line":882},16,[517,884,657],{"emptyLinePlaceholder":656},[517,886,888,890,893],{"class":519,"line":887},17,[517,889,524],{"class":523},[517,891,892],{"class":527},"template",[517,894,550],{"class":523},[517,896,898,901,904,907,910,912,914,917,919,922,925,927,929,932,934],{"class":519,"line":897},18,[517,899,900],{"class":523},"  \u003C",[517,902,903],{"class":527},"TresCanvas",[517,905,906],{"class":523}," :",[517,908,909],{"class":531},"clear-color",[517,911,538],{"class":523},[517,913,541],{"class":523},[517,915,916],{"class":835},"0x222",[517,918,541],{"class":523},[517,920,921],{"class":523}," @",[517,923,924],{"class":531},"loop",[517,926,538],{"class":523},[517,928,541],{"class":523},[517,930,931],{"class":564},"onLoop",[517,933,541],{"class":523},[517,935,550],{"class":523},[517,937,939,942,945,947,950,952,954,957,960,963,966,968,971,974,976],{"class":519,"line":938},19,[517,940,941],{"class":523},"    \u003C",[517,943,944],{"class":527},"TresPerspectiveCamera",[517,946,906],{"class":523},[517,948,949],{"class":531},"position",[517,951,538],{"class":523},[517,953,541],{"class":523},[517,955,956],{"class":523},"[",[517,958,959],{"class":835},"0",[517,961,962],{"class":523},", ",[517,964,965],{"class":835},"0.5",[517,967,962],{"class":523},[517,969,970],{"class":835},"5",[517,972,973],{"class":523},"]",[517,975,541],{"class":523},[517,977,978],{"class":523}," />\n",[517,980,982,984,987],{"class":519,"line":981},20,[517,983,941],{"class":523},[517,985,986],{"class":527},"OrbitControls",[517,988,978],{"class":523},[517,990,992],{"class":519,"line":991},21,[517,993,657],{"emptyLinePlaceholder":656},[517,995,997,999,1002,1004,1007,1009,1011,1013,1016,1018,1020,1022,1024],{"class":519,"line":996},22,[517,998,941],{"class":523},[517,1000,1001],{"class":527},"TresGridHelper",[517,1003,906],{"class":523},[517,1005,1006],{"class":531},"args",[517,1008,538],{"class":523},[517,1010,541],{"class":523},[517,1012,956],{"class":523},[517,1014,1015],{"class":835},"10",[517,1017,962],{"class":523},[517,1019,1015],{"class":835},[517,1021,973],{"class":523},[517,1023,541],{"class":523},[517,1025,978],{"class":523},[517,1027,1029,1031],{"class":1028,"line":508},[519,554],[517,1030,941],{"class":523},[517,1032,1033],{"class":527},"Fbo\n",[517,1035,1037,1040,1042,1044,1047],{"class":1036,"line":509},[519,554],[517,1038,1039],{"class":531},"      ref",[517,1041,538],{"class":523},[517,1043,541],{"class":523},[517,1045,1046],{"class":544},"fboRef",[517,1048,1049],{"class":523},"\"\n",[517,1051,1053,1056,1059,1061,1063,1067],{"class":1052,"line":510},[519,554],[517,1054,1055],{"class":523},"      :",[517,1057,1058],{"class":531},"depth",[517,1060,538],{"class":523},[517,1062,541],{"class":523},[517,1064,1066],{"class":1065},"sfNiH","false",[517,1068,1049],{"class":523},[517,1070,1072,1074,1077,1079,1081,1084,1087,1090,1093,1095],{"class":1071,"line":511},[519,554],[517,1073,1055],{"class":523},[517,1075,1076],{"class":531},"settings",[517,1078,538],{"class":523},[517,1080,541],{"class":523},[517,1082,1083],{"class":523},"{ ",[517,1085,1086],{"class":527},"samples",[517,1088,1089],{"class":523},": ",[517,1091,1092],{"class":835},"1",[517,1094,574],{"class":523},[517,1096,1049],{"class":523},[517,1098,1100],{"class":519,"line":1099},27,[517,1101,1102],{"class":523},"    />\n",[517,1104,1106,1108,1111],{"class":519,"line":1105},28,[517,1107,941],{"class":523},[517,1109,1110],{"class":527},"TresMesh",[517,1112,550],{"class":523},[517,1114,1116,1119,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146],{"class":519,"line":1115},29,[517,1117,1118],{"class":523},"      \u003C",[517,1120,1121],{"class":527},"TresBoxGeometry",[517,1123,906],{"class":523},[517,1125,1006],{"class":531},[517,1127,538],{"class":523},[517,1129,541],{"class":523},[517,1131,956],{"class":523},[517,1133,1092],{"class":835},[517,1135,962],{"class":523},[517,1137,1092],{"class":835},[517,1139,962],{"class":523},[517,1141,1092],{"class":835},[517,1143,973],{"class":523},[517,1145,541],{"class":523},[517,1147,978],{"class":523},[517,1149,1151],{"class":519,"line":1150},30,[517,1152,657],{"emptyLinePlaceholder":656},[517,1154,1156,1158],{"class":519,"line":1155},31,[517,1157,1118],{"class":523},[517,1159,1160],{"class":527},"TresMeshBasicMaterial\n",[517,1162,1164,1167,1170,1172,1174,1177],{"class":519,"line":1163},32,[517,1165,1166],{"class":523},"        :",[517,1168,1169],{"class":531},"color",[517,1171,538],{"class":523},[517,1173,541],{"class":523},[517,1175,1176],{"class":835},"0xFFFFFF",[517,1178,1049],{"class":523},[517,1180,1182,1184,1187,1189,1191,1193,1196,1199,1201,1204,1207],{"class":519,"line":1181},33,[517,1183,1166],{"class":523},[517,1185,1186],{"class":531},"map",[517,1188,538],{"class":523},[517,1190,541],{"class":523},[517,1192,1046],{"class":564},[517,1194,1195],{"class":523},"?.",[517,1197,1198],{"class":564},"instance",[517,1200,1195],{"class":523},[517,1202,1203],{"class":564},"texture",[517,1205,1206],{"class":523}," ?? null",[517,1208,1049],{"class":523},[517,1210,1212],{"class":519,"line":1211},34,[517,1213,1214],{"class":523},"      />\n",[517,1216,1218,1221,1223],{"class":519,"line":1217},35,[517,1219,1220],{"class":523},"    \u003C/",[517,1222,1110],{"class":527},[517,1224,550],{"class":523},[517,1226,1228],{"class":519,"line":1227},36,[517,1229,657],{"emptyLinePlaceholder":656},[517,1231,1233,1235],{"class":519,"line":1232},37,[517,1234,941],{"class":523},[517,1236,1237],{"class":527},"TresMesh\n",[517,1239,1241,1243,1245,1247,1249],{"class":519,"line":1240},38,[517,1242,1039],{"class":531},[517,1244,538],{"class":523},[517,1246,541],{"class":523},[517,1248,786],{"class":544},[517,1250,1049],{"class":523},[517,1252,1254,1256,1258,1260,1262,1264,1267,1269,1271,1273,1275,1277],{"class":519,"line":1253},39,[517,1255,1055],{"class":523},[517,1257,949],{"class":531},[517,1259,538],{"class":523},[517,1261,541],{"class":523},[517,1263,956],{"class":523},[517,1265,1266],{"class":835},"3",[517,1268,962],{"class":523},[517,1270,959],{"class":835},[517,1272,962],{"class":523},[517,1274,959],{"class":835},[517,1276,973],{"class":523},[517,1278,1049],{"class":523},[517,1280,1282],{"class":519,"line":1281},40,[517,1283,1284],{"class":523},"    >\n",[517,1286,1288,1290,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1314,1316,1319,1321,1323],{"class":519,"line":1287},41,[517,1289,1118],{"class":523},[517,1291,1292],{"class":527},"TresTorusGeometry",[517,1294,906],{"class":523},[517,1296,1006],{"class":531},[517,1298,538],{"class":523},[517,1300,541],{"class":523},[517,1302,956],{"class":523},[517,1304,1092],{"class":835},[517,1306,962],{"class":523},[517,1308,965],{"class":835},[517,1310,962],{"class":523},[517,1312,1313],{"class":835},"16",[517,1315,962],{"class":523},[517,1317,1318],{"class":835},"100",[517,1320,973],{"class":523},[517,1322,541],{"class":523},[517,1324,978],{"class":523},[517,1326,1328,1330,1333],{"class":519,"line":1327},42,[517,1329,1118],{"class":523},[517,1331,1332],{"class":527},"TresMeshNormalMaterial",[517,1334,978],{"class":523},[517,1336,1338,1340,1342],{"class":519,"line":1337},43,[517,1339,1220],{"class":523},[517,1341,1110],{"class":527},[517,1343,550],{"class":523},[517,1345,1347,1350,1352],{"class":519,"line":1346},44,[517,1348,1349],{"class":523},"  \u003C/",[517,1351,903],{"class":527},[517,1353,550],{"class":523},[517,1355,1357,1359,1361],{"class":519,"line":1356},45,[517,1358,875],{"class":523},[517,1360,892],{"class":527},[517,1362,550],{"class":523},[498,1364,1366],{"id":1365},"props","Props",[1368,1369,1370,1387],"table",{},[1371,1372,1373],"thead",{},[1374,1375,1376,1381,1384],"tr",{},[1377,1378,1380],"th",{"align":1379},"left","Prop",[1377,1382,1383],{"align":1379},"Description",[1377,1385,1386],{},"Default",[1388,1389,1390,1410,1427,1454,1481],"tbody",{},[1374,1391,1392,1401,1407],{},[1393,1394,1395],"td",{"align":1379},[1396,1397,1398],"strong",{},[493,1399,1400],{},"width",[1393,1402,1403,1406],{"align":1379},[493,1404,1405],{},"number"," - The width of the FBO.",[1393,1408,1409],{},"Width of the canvas",[1374,1411,1412,1419,1424],{},[1393,1413,1414],{"align":1379},[1396,1415,1416],{},[493,1417,1418],{},"height",[1393,1420,1421,1423],{"align":1379},[493,1422,1405],{}," - the height of the FBO",[1393,1425,1426],{},"Height of the canvas",[1374,1428,1429,1435,1450],{},[1393,1430,1431],{"align":1379},[1396,1432,1433],{},[493,1434,1058],{},[1393,1436,1437,1440,1441,789],{"align":1379},[493,1438,1439],{},"boolean"," - Whether or not the FBO should render the depth to a ",[1442,1443,1447],"a",{"href":1444,"rel":1445},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1446],"nofollow",[493,1448,1449],{},"depthTexture",[1393,1451,1452],{},[493,1453,1066],{},[1374,1455,1456,1462,1476],{},[1393,1457,1458],{"align":1379},[1396,1459,1460],{},[493,1461,1076],{},[1393,1463,1464,1467,1468],{"align":1379},[493,1465,1466],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1442,1469,1472,1475],{"href":1470,"rel":1471},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1446],[493,1473,1474],{},"WebGLRenderTarget"," class",[1393,1477,1478],{},[493,1479,1480],{},"{}",[1374,1482,1483,1490,1495],{},[1393,1484,1485],{"align":1379},[1396,1486,1487],{},[493,1488,1489],{},"autoRender",[1393,1491,1492,1494],{"align":1379},[493,1493,1439],{}," - Whether to automatically render the FBO on the default scene.",[1393,1496,1497],{},[493,1498,1499],{},"true",[498,1501,1503],{"id":1502},"usefbo","useFBO",[486,1505,488],{},[486,1507,1508,1509,1511],{},"Cientos provides a ",[493,1510,1503],{}," composable to make it easy to use FBOs in your application.",[1513,1514,1515],"prose-warning",{},[486,1516,1517,1518,1520],{},"The ",[493,1519,1503],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[1522,1523,15],"h3",{"id":1524},"usage-1",[502,1526,1529],{"className":504,"code":1527,"highlights":1528,"language":512,"meta":513,"style":513},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs/cientos'\n\nconst fboTarget = useFBO({\n  depth: true,\n  width: 512,\n  height: 512,\n  settings: {\n    samples: 1,\n  },\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n    \u003CTresMeshBasicMaterial\n      :color=\"0xFFFFFF\"\n      :map=\"fboTarget?.texture ?? null\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n\n",[507,613,633,653,660,705,734,739,774,981],[493,1530,1531,1551,1571,1575,1592,1606,1619,1631,1641,1654,1660,1668,1676,1680,1688,1696,1728,1732,1738,1752,1774,1778,1786],{"__ignoreMap":513},[517,1532,1533,1535,1537,1539,1541,1543,1545,1547,1549],{"class":519,"line":520},[517,1534,524],{"class":523},[517,1536,528],{"class":527},[517,1538,532],{"class":531},[517,1540,535],{"class":531},[517,1542,538],{"class":523},[517,1544,541],{"class":523},[517,1546,545],{"class":544},[517,1548,541],{"class":523},[517,1550,550],{"class":523},[517,1552,1554,1556,1558,1561,1563,1565,1567,1569],{"class":1553,"line":507},[519,554],[517,1555,558],{"class":557},[517,1557,561],{"class":523},[517,1559,1560],{"class":564}," useFBO",[517,1562,574],{"class":523},[517,1564,577],{"class":557},[517,1566,580],{"class":523},[517,1568,583],{"class":544},[517,1570,586],{"class":523},[517,1572,1573],{"class":519,"line":589},[517,1574,657],{"emptyLinePlaceholder":656},[517,1576,1578,1580,1583,1585,1587,1589],{"class":1577,"line":613},[519,554],[517,1579,663],{"class":531},[517,1581,1582],{"class":564}," fboTarget ",[517,1584,538],{"class":523},[517,1586,1560],{"class":671},[517,1588,696],{"class":564},[517,1590,1591],{"class":523},"{\n",[517,1593,1595,1598,1600,1603],{"class":1594,"line":633},[519,554],[517,1596,1597],{"class":527},"  depth",[517,1599,762],{"class":523},[517,1601,1602],{"class":1065}," true",[517,1604,1605],{"class":523},",\n",[517,1607,1609,1612,1614,1617],{"class":1608,"line":653},[519,554],[517,1610,1611],{"class":527},"  width",[517,1613,762],{"class":523},[517,1615,1616],{"class":835}," 512",[517,1618,1605],{"class":523},[517,1620,1622,1625,1627,1629],{"class":1621,"line":660},[519,554],[517,1623,1624],{"class":527},"  height",[517,1626,762],{"class":523},[517,1628,1616],{"class":835},[517,1630,1605],{"class":523},[517,1632,1634,1637,1639],{"class":1633,"line":705},[519,554],[517,1635,1636],{"class":527},"  settings",[517,1638,762],{"class":523},[517,1640,771],{"class":523},[517,1642,1644,1647,1649,1652],{"class":1643,"line":734},[519,554],[517,1645,1646],{"class":527},"    samples",[517,1648,762],{"class":523},[517,1650,1651],{"class":835}," 1",[517,1653,1605],{"class":523},[517,1655,1657],{"class":1656,"line":739},[519,554],[517,1658,1659],{"class":523},"  },\n",[517,1661,1663,1666],{"class":1662,"line":774},[519,554],[517,1664,1665],{"class":523},"}",[517,1667,702],{"class":564},[517,1669,1670,1672,1674],{"class":519,"line":807},[517,1671,875],{"class":523},[517,1673,528],{"class":527},[517,1675,550],{"class":523},[517,1677,1678],{"class":519,"line":839},[517,1679,657],{"emptyLinePlaceholder":656},[517,1681,1682,1684,1686],{"class":519,"line":866},[517,1683,524],{"class":523},[517,1685,892],{"class":527},[517,1687,550],{"class":523},[517,1689,1690,1692,1694],{"class":519,"line":872},[517,1691,900],{"class":523},[517,1693,1110],{"class":527},[517,1695,550],{"class":523},[517,1697,1698,1700,1702,1704,1706,1708,1710,1712,1714,1716,1718,1720,1722,1724,1726],{"class":519,"line":882},[517,1699,941],{"class":523},[517,1701,1121],{"class":527},[517,1703,906],{"class":523},[517,1705,1006],{"class":531},[517,1707,538],{"class":523},[517,1709,541],{"class":523},[517,1711,956],{"class":523},[517,1713,1092],{"class":835},[517,1715,962],{"class":523},[517,1717,1092],{"class":835},[517,1719,962],{"class":523},[517,1721,1092],{"class":835},[517,1723,973],{"class":523},[517,1725,541],{"class":523},[517,1727,978],{"class":523},[517,1729,1730],{"class":519,"line":887},[517,1731,657],{"emptyLinePlaceholder":656},[517,1733,1734,1736],{"class":519,"line":897},[517,1735,941],{"class":523},[517,1737,1160],{"class":527},[517,1739,1740,1742,1744,1746,1748,1750],{"class":519,"line":938},[517,1741,1055],{"class":523},[517,1743,1169],{"class":531},[517,1745,538],{"class":523},[517,1747,541],{"class":523},[517,1749,1176],{"class":835},[517,1751,1049],{"class":523},[517,1753,1755,1757,1759,1761,1763,1766,1768,1770,1772],{"class":1754,"line":981},[519,554],[517,1756,1055],{"class":523},[517,1758,1186],{"class":531},[517,1760,538],{"class":523},[517,1762,541],{"class":523},[517,1764,1765],{"class":564},"fboTarget",[517,1767,1195],{"class":523},[517,1769,1203],{"class":564},[517,1771,1206],{"class":523},[517,1773,1049],{"class":523},[517,1775,1776],{"class":519,"line":991},[517,1777,1102],{"class":523},[517,1779,1780,1782,1784],{"class":519,"line":996},[517,1781,1349],{"class":523},[517,1783,1110],{"class":527},[517,1785,550],{"class":523},[517,1787,1788,1790,1792],{"class":519,"line":508},[517,1789,875],{"class":523},[517,1791,892],{"class":527},[517,1793,550],{"class":523},[1522,1795,1797],{"id":1796},"options","Options",[1368,1799,1800,1810],{},[1371,1801,1802],{},[1374,1803,1804,1806,1808],{},[1377,1805,1380],{"align":1379},[1377,1807,1383],{"align":1379},[1377,1809,1386],{},[1388,1811,1812,1826,1840,1861],{},[1374,1813,1814,1820,1824],{},[1393,1815,1816],{"align":1379},[1396,1817,1818],{},[493,1819,1400],{},[1393,1821,1822,1406],{"align":1379},[493,1823,1405],{},[1393,1825,1409],{},[1374,1827,1828,1834,1838],{},[1393,1829,1830],{"align":1379},[1396,1831,1832],{},[493,1833,1418],{},[1393,1835,1836,1423],{"align":1379},[493,1837,1405],{},[1393,1839,1426],{},[1374,1841,1842,1848,1857],{},[1393,1843,1844],{"align":1379},[1396,1845,1846],{},[493,1847,1058],{},[1393,1849,1850,1440,1852,789],{"align":1379},[493,1851,1439],{},[1442,1853,1855],{"href":1444,"rel":1854},[1446],[493,1856,1449],{},[1393,1858,1859],{},[493,1860,1066],{},[1374,1862,1863,1869,1878],{},[1393,1864,1865],{"align":1379},[1396,1866,1867],{},[493,1868,1076],{},[1393,1870,1871,1467,1873],{"align":1379},[493,1872,1466],{},[1442,1874,1876,1475],{"href":1470,"rel":1875},[1446],[493,1877,1474],{},[1393,1879,1880],{},[493,1881,1480],{},[1883,1884,1885],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":513,"searchDepth":520,"depth":507,"links":1887},[1888,1889,1890],{"id":500,"depth":507,"text":15},{"id":1365,"depth":507,"text":1366},{"id":1502,"depth":507,"text":1503,"children":1891},[1892,1893],{"id":1524,"depth":589,"text":15},{"id":1796,"depth":589,"text":1797},"Render to texture using Frame Buffer Objects.","md",null,{},{"title":409,"description":1894},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",[1901,1903],{"title":405,"path":406,"stem":407,"description":1902,"children":-1},"Render environment maps for reflective objects.",{"title":413,"path":414,"stem":415,"description":1904,"children":-1},"Create gradient textures for materials.",1781273440542]