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